[
BestWeb Nashville Web Development
]
nashville web development header

Open Source/Free CSS Templates & Layouts

BestWeb Nashville css templates pic 001

This page is updated often and is my primary list of CSS resources, despite the fact that this page is on the older version 2 of the BestWeb Nashville site. There's lots of great stuff here. There are more links to free/ open-source CSS templates and layouts here than anywhere else I have yet seen on the web. This page is designed for browsing and previewing, not for downloading. Of course, if you know what you are doing, you can easily download any of the templates and layouts on this page.

What's the Big Deal about CSS?

Well, according to Wikipedia, tableless web design (or tableless web layout) is a method of web design and development without using HTML tables for page layout control purposes. Instead of HTML tables, style sheet languages such as CSS (Cascading Style Sheets) are used to arrange elements and text on a web page. CSS was introduced by the World Wide Web Consortium (W3C) to improve web accessibility and to make HTML code semantic rather than presentational.

Early in its advent, many web developers considered CSS a more powerful and easier to use way of formatting, and considered the <FONT> tag obsolete. On the other hand, early CSS had very limited and difficult to use layout capabilities and many common page layouts (like the 3-column design) that were very easy to implement with tables had no obvious equivalents in CSS.

CSS layout capabilities have improved considerably over the last few years. Nonetheless, many websites still use CSS for text formatting only, while using tables for layout.

There is still some debate about whether web developers should use CSS or revert to HTML tables, primarily because of browser compatibility headaches.

Templates vs. Layouts

Until recently, I have not really distinguished between the terms "layout" and "template", but at this point, the organization of this information demands more specificity. Therefore, at least on this page, I will distinguish layouts from templates in the following manner.

Layouts are essentially bare, skeletal frameworks, occasionally having sample text or images but nothing more.

Templates are a step or two beyond layouts. CSS templates have at least some color, text, graphics, and functioning navigation. It is a little easier to see what the finished product might look like when viewing a template than a layout, since a layout is basically empty; however, the finished site could still look very different from the template -- depending on changes to color, font, imagery, spacing, and so on.

More Recent Free CSS Templates (by Designer)

Added in July 2008

  • mollio11 :: top nav, dropdown menus, five layouts - ultra-flexible!

June 2008 - Free CSS Templates from Various Sources

  • blogdivision - nice 2c topnav lscaper; Template World
  • bluebusiness - Cloud banner graphic (very easy to replace), simple but rather professional, 2col,; by Christian P.
  • brightside10 - Bright Side of Life - 3col, top tabs, nice sidenav; by StyleShout
  • bubble - simple 1/2c, content-oriented, nice sidenav buttons, unique top nav; hardly any graphics; by FreeCSS.info
  • businesstemplate - intelligent-studios; avg, simple 2c, content-oriented, nice sidenav buttons, hardly any graphics; by FreeCSS.info
  • chic - simple, thin, 2c
  • choice - 2-3c, fluid, 12 color combinations, text-based; like a magazine or newspaper
  • crystalx - 2c, toptabs, nice sidenav buttons, all corners are rounded, tight, clean, blue; by nuvio webdesign
  • envision11 - 2c rounded corners, top and side nav; StyleShout
  • freshmedia10 - 2c, topnav, sidenav, fat footer, green/lscaper, large top img; StyleShout
  • greensolutions - 2col topnav; nice; Template World
  • invertedheadline - black bg, nice 2-4c, by DemusDesign
  • iseenewpeople - simple, toplinks, 1col
  • liquiditygraph - nice; Template World
  • lostinforest - black bg, unique, 1-2c, not bad; by Empire Elements
  • marketplace10 - 3c, top + side nav, ;arge banner img; StyleShout
  • mediterranean - simple 2c by DemusDesign
  • nicepurple - 1-2c, no images, topnav, sidenav with unique rollovers, fat 3c footer Template Fusion
  • ntechblog - gray bg 3c sidenav; Template World
  • outofthebox - 1024w 2c top + side nav, fat footer; DemusDesign
  • pixelgreen - StyleShout
  • pushingborders - unique fluid 3c, no images; DemusDesign
  • refresh - rounded border corners, 2c; StyleShout
  • smoothandsleek - no img; simple 2col; topnav; Open Designs
  • splashtastic - splash page plus subpage design, 2-3c, not bad; DemusDesign
  • summerbreeze - 1col, flowers and butterflies; not bloody likely; Arcsin
  • techjunkie10 - topnav, 2c, little/no rollover, fat footer; StyleShout
  • techmania11 - StyleShout
  • technicalsupport - 2col topnav nice graphics, professional, large top img; Template World
  • totaltouch - Template World
  • transparentia - simple 2 col left nav; std basic layout; Arcsin
  • turnitup - 2c; free-css.com
  • unbound10 - 3c 1024; StyleShout
  • underground - 2c; StyleShout
  • xodafields02 - basic 2c; free-css.com

Arcsin (Free CSS Templates)

Boxed Art (added July 2008)

All these from Boxed Art are colored, virtually image-free, fast-loading, content-oriented; not for lovers of whitespace; I rate them all as a 6/10. They are clean and neat, but I prefer whitespace; however, all of them could easily be changed to what I would consider to be very clean, tight, white templates with only a few color changes.

Light means dark text on light background; dark means light text on dark background; med templates are generally a combination of light and dark.

Code Sucks (Free CSS Templates)

Exdesignz (Free CSS Templates)

FreeCSS - August 2008

FreeCSSTemplates.com (Free CSS Templates)

Fullahead (Free CSS Templates)

Open Source Templates (Free CSS Templates)

Some of these are among the nicest, powerful, and feature-laden free CSS templates I have yet found anywhere -- especially the Multiflex.

Six Shooter (Free CSS Templates)

Most recent additions listed first

Solucija (Free CSS Templates)

Styleshout (Free CSS Templates)

Template World (Free CSS Templates)

Tinderbox

  • fixed 3-4cfixed 3-column over 4-column layout; there are files for many layouts just like this one

CSS Zen Garden: Mezzoblue

You can view dozens and dozens more CSS layouts at mezzoblue's CSS Zen Garden. Here are my favorite of the bunch, and we can use these as models for new projects.

  • zen-209 :: business, 2c-3c, org/gray
  • zen-211:: simple 2c: purple flower, whitespace
  • zen-191 :: split into 2 equal col, no banner, no nav; rather unique, simple
  • zen-194 :: 2c, chiseled stone motif
  • zen-196 :: soft, centered 2c w/banner
  • zen-187 :: nature
    • :: 2c, dark
  • zen-179 :: wine, 2c black bg
  • zen-175 :: basic, business, 2c standard, banner-people in silhouette
  • zen-174 :: very simple, stacked blocks with rounded corners, orange/grey, hardly any graphics
  • zen-173 :: 2c, centered, thin
  • zen-172 :: snowy mountain nature scene
  • zen-169 :: Greek architecture; large banner image
  • zen-168 :: left just, thin, 2c, hens - place for large logo
  • zen-166 :: great one for nature/landscaping!
  • zen-165 :: nice but graphically challenging
  • zen-163 :: nice even without fancy banner graphic
  • zen-161 :: nice 2c standard, 2 wine corks in ul
  • zen-153 :: nature, trees - all green
  • zen-151 :: simple, white, very thin 2c, few graphics
  • zen-149 :: uncultivated
  • zen-148 :: museum
  • zen-145
  • zen-144 :: verdure - great, simple, thin 2c, nice rollovers
  • zen-141
  • zen-140 :: large graphic banner
  • zen-138 :: great, minimal graphics
  • zen-135 :: fantastic, replace graphic banner
  • zen-134
  • zen-128 :: dragen fairly standard
  • zen-125
  • zen-124 :: teatime - nice
  • zen-122 :: fantastic whitespace, centered
  • zen-119 :: pleasant day - nature, great
  • zen-118 :: leafs - nature, great
  • zen-117
  • zen-116 :: simple, whitespace
  • zen-115 :: black bg - fire, nice buttons
  • zen-114
  • zen-112 :: huge banner, nice buttons
  • zen-106 :: nice, big banner, rollovers, 2c meditarranean
  • zen-104 :: simple, whitespace
  • zen-103 :: lotsa graphics, interesting
  • zen-100 :: flowers - nature/landscaping
  • zen-097 :: 3c fluid; dinner fork graphic; BUCKLES
  • zen-096 :: japanese maple leaves – lscape
  • zen-095 :: corporate stationery, simple – BUCKLES
  • zen-094 :: deco - building, blue sky
  • zen-088 :: tulipe - lscape
  • zen-085 :: oceans apart -stunning image, simple
  • zen-083 :: springtime - LSCAPE - nice 2 col, left nav
  • zen-082 :: miracle cure - simple, classic, imgs
  • zen-081 :: spiral shell - eric’s css
  • zen-080 :: zen pool - water droplets, simple
  • zen-069 :: bonsai sky - beau nature - trees atop huge stone cliff, huge bg image
  • zen-067 :: greenish depression
  • zen-064 :: night drive - sweet
  • zen-063 :: elastic lawn - grass bg, simple - 2col - xparent content areas
  • zen-061 :: sky - ultra SIMPLE blue sky - 2col
  • zen-049 :: buddha - simple clean layout
  • zen-042 :: int 3-col
  • zen-039 :: simple 2-col
  • zen-036 :: simp 2-col white flower img LAND
  • zen-030 :: wdn frame 2-col
  • zen-029 :: v nice 3-col wspace YEAH
  • zen-027 :: gothika - 2-col clean
  • zen-026 :: nice 3-col, flower LAND - extensive imagery
  • zen-024 :: simplest 2-col, whitespace
  • zen-023 :: nice 3-col; bnt org flowr
  • zen-020 :: frndly beaches - gr8 2 and 3-col
  • zen-017 :: golden - wondrfl 3-col YEP
  • zen-013 :: coastal - 2-col wspace – GR8
  • zen-011 :: 3-col top img wspace
  • zen-010 :: ultra-simple 2-col
  • zen-009 :: simple grscl 2-col classic
  • zen-006 :: contnt-based 2-col
  • zen-003 :: stormweather - 2-col

Older List of CSS Layouts

The vast majority of these layouts are simple, very easy to modify as far as colors go, and in the public domain. We can either use these layouts as they are or as a starting point for a custom design. The filenames in many cases provide at least a hint of the layout; for example, if '2col' or '3col' is in the filename, then the layout has two or three columns, respectively. Categorization and descriptions may be added at a later date.

More CSS Layouts

These are at the bottom of the page for a reason.

CSS Fill

Layout Ideas and Inspiration

High-End Graphic Trend Inspiration

Mega CSS Resources

  • Web Developer Tools
  • http://www.cssportal.com/
  • http://www.3wshare.com/download.asp
  • http://www.cbel.com/style_sheets/
  • http://www.csstopsites.com/templates/
  • http://www.styleshout.com/css-resources.php

Other CSS Resources

CSS Menus, Navigation

Free WordPress Themes

CSS Layout Generator

http://www.cssportal.com/generators/layout.htm

Best Sources: CSS Templates

  • http://www.cssportal.com/css-templates/
  • http://www.templateworld.com/free_templates.html
  • http://www.cssportal.com/css-style-editor/
  • http://templates.arcsin.se/category/website-templates/page/2/
  • http://www.styleshout.com/free-templates.php
  • http://www.opendesigns.org/view-designs/
  • http://www.freecsstemplates.com/
  • http://css4free.com/
  • http://demusdesign.com/
  • http://www.layouts4free.com/
  • http://www.freelayouts.com/
    • TemplateNavigator.com

Other Sources for CSS Templates

http://www.cmgtechnologies.com/free-css-templates.php

FREE SEO Tools (Worthwhile)

http://seogroup.com/evaluation/

Basic Skeletal Layouts

  • Basic CSS Layouts :: around 40 basic layouts - every conceivable type from one to three column
  • Free-css.com - 252 layouts; practically every layout possible

CSS Frameworks

A CSS framework is a library of prepared code designed to allow easier, web standards-compliant styling by packaging a variety of ready-made design and layout options. Basically, a CSS framework is to CSS what Dreamweaver and SharePoint are to web pages; they are all, in a sense, development platforms intended to simplify the process of creating the necessary code -- in this case, Cascading Style Sheets. For more general information about CSS frameworks, see the first two links in this section: the Wikipedia entry on CSS frameworks and the post on Speckyboy's website.

CSS Experiments



Please email Stephen at stephen<at>bestwebnashville<dot>com, or use our contact form