Web designers are always looking for ways to save time and simplify the design process. Well, creating a basic layout doesn’t have to take any time at all. All of the resources listed here will help you to create the structure for CSS-based designs. None of these resources are templates that attempt to replace the need for a design; rather, they all aim to simplify the process by creating a skeleton that you will build upon.
Layout Gala - 40 different CSS-based layouts including fixed and fluid widths.
BluePrintCSS - BluePrintCSS “aims to cut down on your CSS development time. It gives you a solid CSS foundation to build your project on top of, with an easy-to-use grid, sensible typography, and even a stylesheet for printing.”
Intensivstation - 16 different CSS-based layouts are provided
Dynamic Drive’s CSS Library - One of the leading sources of coding and scripts provides 12 CSS-based layouts.
CSSCreator.com - Rather than providing templates, CSS Creator is a tool that allows you to enter some information about the layout that you want to create, and it produces the code. You choose things like width, columns and colors.
The Layout Reservoir - BlueRobot.com provides the CSS for 3 different layouts.
Code Sucks.com - There are over 90 different layouts to choose from, including fixed width and faux columns.
CSSeasy - At CSSeasy you’ll find 8 different layouts to choose from.
Tomorrow’s Laundry - WordPress theme designers will love the blank theme layouts from Tomorrow’s Laundry. Four different layouts provide the basic building blocks for your theme designs.
WordPress Theme Generator - Another resource for WordPress designers, the theme generator will let you choose the layout you want and it generates the code.
Yahoo! Developer Network - YUI Grids CSS provide a starting point for your layouts for fluid or fixed width.
SSI Developer - At SSI Developer there are a variety of two and three column layouts. Each layout indicates the browsers in which it has been tested.
Mollio - Mollio offers several attractive layouts, but they give a disclaimer that there may be some rendering problems with IE7.
CSS Tinderbox - Here you’ll find four simple but attractive layouts.
Mitch Bryson - Mitch provides eight different CSS-based layouts to choose from.
Firdamatic - Another tool similar to CSS Creator and Layout-o-matic, Firdomatic will let you choose several items and then it will create the code for your layout.
Strictly CSS - Strictly CSS has an article that provides ten different CSS layouts based on the same HTML code.
Max Design - Twenty-three different layouts in several different categories are available from Max Design.
Glish.com - Here is an article that includes links to a number of CSS-based layouts.
mycelly.com - Twelve different layouts.
Little Boxes - Sixteen more layouts.
December 17th, 2007
Nice little list there! Thanks.
December 17th, 2007
Thanks for publishing this list - its amazing how simple the code for your site can be once you use clean and correct CSS.
December 17th, 2007
I’m a dummy when it comes to CSS, but I’m going to give some of these a try anyway. Hopefully, I’ll learn something.
December 17th, 2007
Fiar,
Good luck. CSS is pretty straightforward if you have a little bit of time to learn.
Deron and Stunna,
Thanks for reading and commenting.
December 17th, 2007
Nice article. Will be looking at this when I am designing.
December 17th, 2007
Nice article…I sent you an email requesting your services for a blog which I would like developed and implemented into my website. Look forward to hearing from you in the near future.
December 17th, 2007
Thanks a lot, guys, this was really helpful. I’m always trying to find sites like this, usually somewhere around 2 AM when my brain’s about to explode from attempting to untangle too much sloppy code. Usually by that point I’m shouting “I’m a graphic designer, dammit, not a coder!”
December 18th, 2007
[...] simplificar el proceso de la creación de un esqueleto de página, lo puedes encontrar en: 22 Resources to Easily Create CSS Layouts, de Vandelay Website [...]
December 18th, 2007
[...] quest’utilissima lista di tool e risorse per la creazione di layout “CSS based”. Alcune sono vecchie conoscenze ma rovistando [...]
December 18th, 2007
22 Resources to Easily Create CSS-Based Layouts…
[...]A list of tools that will create a layout for you or provide you with a blank CSS layout. These are not templates that include design elements, just basic layouts to save some time with the design process[...]…
December 18th, 2007
22 Resources to Easily Create CSS Layouts | Vandelay Website Design…
[...][...]…
December 18th, 2007
[...] http://vandelaydesign.com/blog/design/css-layout-tools/ Share and Enjoy: These icons link to social bookmarking sites where readers can share and [...]
December 18th, 2007
great ressource, just bookmarked!
December 18th, 2007
Great resource Steve, as always
December 18th, 2007
[...] 22 Resources to Easily Create CSS Layouts | Vandelay Website Design All of the resources listed here will help you to create the structure for CSS-based designs. (tags: css design generator list templates) [...]
December 18th, 2007
[...] Vandelay Website design collected 22 resources to create css easily. var addthis_pub = ‘Familyresource4u’; [...]
December 18th, 2007
dont forget the yaml (http://www.yaml.de/en/home.html) project, which is similar to blueprint css.
December 18th, 2007
Nice list, but it is no where near being complete without mentioning Stu Nichols (http://www.cssplay.co.uk/index). He is THE authority on CSS as far as i’m concerned.
December 18th, 2007
Check out Polish production: http://drawter.com
December 18th, 2007
[...] 22 Resources to Create CSS Layouts — Most Useful Link of the Day [...]
December 18th, 2007
22 Resources to Easily Create CSS Layouts | Vandelay Website Desi…
Verschiedenste CSS-Templates für eigene Webseiten-Designs. Hier werden weniger Grafiken und Farbschematas angeboten, es geht mehr um fertige Grundraster, mit denen man mittels CSS anstatt mit Tabellen eine Webseite strukturieren kann….
December 18th, 2007
[...] perdez pas le temps pour la mise en page de votre site, votre blog. Voici les 22 ressources de CSS template qui vous permettent de créer rapidement un squelette de votre site / blog basé sur [...]
December 18th, 2007
My favorite one-two punch: Dreamweaver + CSSEdit (http://macrabbit.com/cssedit/). It’s dirt easy to lay out the base code in Dreamweaver, and then using CSSEdit to visually manipulate the CSS pages.
December 18th, 2007
22 Resources to Easily Create CSS Layouts | Vandelay Website Design…
[...]Essential resources to save time on your web design projects.
Saved By: Pedro Cambra | View Details | Give Thanks[...]…
December 18th, 2007
[...] CSS Layouts Tools En Css, Recursos @ 18/12/2007 | por phillipo [...]
December 18th, 2007
Great list Steven.
December 18th, 2007
[...] 22 Resources to Easily Create CSS Layouts | Vandelay Website Design (tags: css webdesign layout design templates reference web tools) Share and Enjoy: These icons link to social bookmarking sites where readers can share and discover new web pages. [...]
December 18th, 2007
Johannes,
Thanks for the added resource.
Keith,
CSSPlay certainly has some good resources too, although I’m not a fan of the scrolling content with fixed header and footer.
Mark,
Thanks for that advice. I’ll have to try it for myself.
December 18th, 2007
[...] 22 Resources to Easily Create CSS Layouts (tags: web design css) [...]
December 18th, 2007
[...] 22 Resources to Easily Create CSS Layouts | Vandelay Website Design - Share and Enjoy: These icons link to social bookmarking sites where readers can share and discover new web pages. [...]
December 18th, 2007
[...] 22 Resources to Easily Create CSS Layouts None of these resources are templates that attempt to replace the need for a design; rather, they all aim to simplify the process by creating a skeleton that you will build upon. (tags: generator layout list online reference template tools webdev webdesign tutorial) [...]
December 18th, 2007
Good list that I will definitely have to bookmark for future reference, thanks for taking the time to supply the list
December 18th, 2007
Amazing list… I will certainly use this when I transfer to wordpress.
December 18th, 2007
[...] 22 Resources to Easily Create CSS Layouts (tags: layout) [...]
December 19th, 2007
Hi,
Merry christmas to you, your articles enrich me, I will always visit your site, thanks.
December 19th, 2007
Thanks so much for this list. Really grateful for your time and it is surely helpful.
December 19th, 2007
Wow! Quite an impressive list. I used CSS Blueprint awhile back and liked it a lot. Great link. There are several of the others I had never heard of. I’ll be checking them out.
December 19th, 2007
Nice list. I’m pretty used to just coding from scratch but i’ve been meaning to look into finding a tool that might help start a project if theres something complex regarding its column structure, now i’ll just have to look for this in del.icio.us next time. cheers.
December 19th, 2007
[...] Vandelay lists 22 resources for basic CSS layouts that save time when starting a new project. [...]
December 19th, 2007
[...] Bueno esos son todos espero que les haya parecido el hecho de la traducción y a mas de uno le haya servidor, los servicios marcados con asterisco los recomiendo sobre los otros. Enlace: 22 Resource to easily create CSS layouts [...]
December 20th, 2007
[...] hasta el pasa por Intenta: 22 recursos para crear fácilmente CSS Layouts, que apunta a Vandelay: 22 Resources to Easily Create CSS Layouts, que a su vez contiene el vinculo a la herramienta que [...]
December 20th, 2007
Like Johannes Tröger said, YAML is one of the greatest of all. Try it out: http://www.yaml.de/en/home.html
December 20th, 2007
[...] a diseñar tus templates con puro CSS no puedes perderte esta recopilación que ha hecho Frogx3 (traducción de esta) donde nos presenta 22 recursos para crear templates con CSS. [...]
December 20th, 2007
Awesome list as always. I always love your resources posts… Keep ‘em coming!
December 20th, 2007
[...] sympa mais avoir des petits outils pour vous aider c’est aussi très utile. Le site vandelaydesign vient de mettre en ligne 22 outils vous permettant de faire des gabarits en CSS avec bien entendu [...]
December 20th, 2007
[...] 22 Resources to Easily Create CSS Layouts | Vandelay Website Design (tags: css layout templates) [...]
December 21st, 2007
Nice extensive list mate, thanks
December 21st, 2007
[...] 22 Resources to Easily Create CSS Layouts | Vandelay Website Design (tags: css design webdesign reference) [...]
December 21st, 2007
[...] 22 Resources to Easily Create CSS Layouts - Lista de refer
December 21st, 2007
Alsacreations.com proposes templates, too :
http://tutorials.alsacreations.com/modeles/ (in English)
http://css.alsacreations.com/Modeles-de-mise-en-page-en-CSS (in French)
December 21st, 2007
[...] you want to save some time on your design process, you should check out Vandelay’s “22 Resources to Easily Create CSS Layouts“. Thanks Steven, stumbled & [...]
December 21st, 2007
[...] 22 Sites pour créer des templates CSS (tags: css free generator online resources Templates Webdesign) 21. décembre 2007, 23:19 UhrWebRaphaël [...]
December 22nd, 2007
[...] 22 Resources to Easily Create CSS Layouts - Steven Snell [...]
December 24th, 2007
[...] Basit bir şekilde CSS yapısı oluşturmak isteyenler için linkler. Bağlantı [...]
December 27th, 2007
Thanks for including code-sucks.com - a fine list indeed
December 30th, 2007
[...] 22 Resources to Easily Create CSS Layouts [...]
January 2nd, 2008
[...] 22 Resources to Easily Create CSS Layouts (tags: css webdesign layout templates design reference web) [...]
January 4th, 2008
[...] Vandelay, nos llega un enlace donde encontrareis recursos para crear vuestro diseño CSS desde 0. Esto va mas que nada destinada a esos novatos que no se atreven a levantar una estructura, un [...]
January 13th, 2008
[...] Templates reduce the work load of building a website. You just have to log in and select the template you find interesting. Templates can be readily used, because you want all your pages to look the same. [...]
January 23rd, 2008
thanks for these css templates design Resources! i now learning css,it’s help me more!
February 2nd, 2008
[...] CSS layouty – link od Plaváčka PS: Celý tento článek je pouze krátký výcuc z mého ročního působení na internetu [...]
February 12th, 2008
Nice list.
February 18th, 2008
thanks for taking the time to supply the list
March 14th, 2008
I have used a few on this page
Rusty
http://www.rustyrichards.net
March 22nd, 2008
[...] статьи: 22 Resources to Easily Create CSS LayoutsПопулярность: [...]
April 15th, 2008
thanks for the tips and resources!!!
April 20th, 2008
Amazing article. I’ve used some of this tools, but your tools list is great. 10x
April 24th, 2008
[...] liens pour créer des feuilles de style css, obtenir des icônes, et afficher des informations sur la page d’accueil d’un blog et [...]
May 31st, 2008
This is an excellent list of CSS resources!
June 26th, 2008
Hey, nice article dude!
I tend to hand write most of my CSS but these could be a real time saver for those not familiar with it
August 31st, 2008
I just love CSS, great list of layouts - maybe I`ll find something new too. Thanks
September 1st, 2008
cool resources really helpful , Cheers
September 30th, 2008
[...] Voici 22 différents sites proposant diverses mises en page CSS déja faites, et tout ca biensur gratuitement Et c’est ici. [...]
November 5th, 2008
, large diamond heart, lutheran cross necklace, soil continuity gold, circular trim ring,
November 8th, 2008
[...] CSS Layout Tools Vandelay Design is a pretty well known company/site, and they put together this awesome list of ‘22 Resources to Easily Create CSS Layouts’ [...]
November 10th, 2008
, letcher mint silver round, silver lakes ledger, elvis solid silver medalon, pot ring bust in flager florida, crystal and pearl wedding hair jewelry,
November 11th, 2008
[...] CSS Layout Tools Linkliste zum Thema CSS-Layout [...]
November 11th, 2008
[...] CSS Layout Tools Linkliste zum Thema CSS-Layout [...]
November 23rd, 2008
all of this layouts has some problem with scrroling text
January 18th, 2009
hi,
nice info. i was looking for this for a long time.
thanks.
February 26th, 2009
[...] CSS Layout Tools [...]
March 8th, 2009
[...] a eu la bonne idée de nous faire profité de 22 Ressources pour créer facilement un gabarit CSS. Ainsi, il vous sera aisé de démarrer rapidement en utilisant un squelette généré avec ces [...]
March 17th, 2009
Nice collections! I never seen so many different resources about CSS Layots! Thanks!!! And I’m trying to use it on my web sites artkrasnodar.ru and dizverst.ru/ Thank you!! Best regards!
April 17th, 2009
[...] 22 Resources to Easily Create CSS Layouts [...]
April 19th, 2009
[...] 22 Resources to Easily Create CSS Layouts [...]
April 20th, 2009
[...] 22 Resources to Easily Create CSS Layouts (http://vandelaydesign.com/blog/design/css-layout-tools/) [...]
April 22nd, 2009
[...] 22 Resources to Easily Create CSS Layouts [...]
April 26th, 2009
[...] 7. Vandelay Design CSS Resources [...]
May 12th, 2009
[...] 22 Resources to Easily Create CSS Layouts [...]
May 12th, 2009
[...] CSS Layout Tools Vandelay Design is a pretty well known company/site, and they put together this awesome list of ‘22 Resources to Easily Create CSS Layouts’ [...]
May 18th, 2009
[...] 22 Resources to Easily Create CSS Layouts [...]
May 22nd, 2009
Greate CSS design resource and tutorials….very helpful fluid widths for me…