Vandelay Website Design & Blog Customization

FAQ | Contact |


Thanks for visiting! If you like this post please subscribe to the Vandelay Design RSS feed, or by email.

22 Resources to Easily Create CSS Layouts

December 17th, 2007

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.

Layout Gala Screenshot

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.”

BluePrintCSS

Intensivstation - 16 different CSS-based layouts are provided

Intensivstation Screenshoot

Dynamic Drive’s CSS Library - One of the leading sources of coding and scripts provides 12 CSS-based layouts.

Dynamic Drive Screenshot

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.

CSS Creator Screenshot

Layout-o-matic - Inknoise has a tool that is similar to CSS Creator. You choose a few variables and it will give you the code for a basic CSS layout.

Layout-o-matic Screenshot

The Layout Reservoir - BlueRobot.com provides the CSS for 3 different layouts.

The Layout Reservoir Screenshot

Code Sucks.com - There are over 90 different layouts to choose from, including fixed width and faux columns.

Code Sucks Screenshot

CSSeasy - At CSSeasy you’ll find 8 different layouts to choose from.

CSSeasy Screenshot

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.

Tomorrow's Laundry Screenshot

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.

68 Responses to “22 Resources to Easily Create CSS Layouts”

  1. Deron Sizemore Says:

    Nice little list there! Thanks.

  2. Stunna Sunglasses Says:

    Thanks for publishing this list - its amazing how simple the code for your site can be once you use clean and correct CSS.

  3. Fiar Says:

    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.

  4. Vandelay Design Says:

    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.

  5. Gadgets Says:

    Nice article. Will be looking at this when I am designing.

  6. Yasmin Says:

    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.

  7. Harrison McLeod - JCM Enterprises Says:

    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!”

  8. Recursos para crear fácilmente la estructura base de una página con CSS Says:

    […] 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 […]

  9. 22 Risorse per creare i vostri CSS Says:

    […] quest’utilissima lista di tool e risorse per la creazione di layout “CSS based”. Alcune sono vecchie conoscenze ma rovistando […]

  10. Web 2.0 Announcer Says:

    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[…]…

  11. Web 2.0 Announcer Says:

    22 Resources to Easily Create CSS Layouts | Vandelay Website Design…

    […][…]…

  12. 22 risorse per creare Layouts con i css : sastgroup.com Says:

    […] http://vandelaydesign.com/blog/design/css-layout-tools/ Share and Enjoy: These icons link to social bookmarking sites where readers can share and […]

  13. max Says:

    great ressource, just bookmarked! :)

  14. Tibi Puiu Says:

    Great resource Steve, as always ;)

  15. knewd » Blog Archive » links for 2007-12-18 Says:

    […] 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) […]

  16. web500 » 22 Resources to Create CSS Layouts Says:

    […] Vandelay Website design collected 22 resources to create css easily. var addthis_pub = ‘Familyresource4u’; […]

  17. Johannes Tröger Says:

    dont forget the yaml (http://www.yaml.de/en/home.html) project, which is similar to blueprint css.

  18. Keith Says:

    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.

  19. Damian Says:

    Check out Polish production: http://drawter.com :)

  20. Useful Websites of the Day 12.18.07 « Useful Websites Says:

    […] 22 Resources to Create CSS Layouts — Most Useful Link of the Day […]

  21. hype.yeebase.com Says:

    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….

  22. 22 resssources de CSS templates. | Kimly Says:

    […] 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 […]

  23. MarkP Says:

    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.

  24. Web 2.0 Announcer Says:

    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[…]…

  25. DarkRasseL Weblog » CSS Layouts. Sírvase rápido Says:

    […] CSS Layouts Tools En Css, Recursos @ 18/12/2007 | por phillipo […]

  26. Madhur Kapoor Says:

    Great list Steven.

  27. links for 2007-12-18 | IndianGeek Says:

    […] 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. […]

  28. Vandelay Design Says:

    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.

  29. links for 2007-12-19 « Bloggitation Says:

    […] 22 Resources to Easily Create CSS Layouts (tags: web design css) […]

  30. K1 | Web · Resources · Networks » Blog Archive » My del.icio.us bookmarks December 18th Says:

    […] 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. […]

  31. links for 2007-12-19 « Mandarine Says:

    […] 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) […]

  32. Jermayn Parker Says:

    Good list that I will definitely have to bookmark for future reference, thanks for taking the time to supply the list

  33. Justin Dupre Says:

    Amazing list… I will certainly use this when I transfer to wordpress.

  34. Skylog » Blog Archive » links for 2007-12-19 Says:

    […] 22 Resources to Easily Create CSS Layouts (tags: layout) […]

  35. coolingstar9 Says:

    Hi,
    Merry christmas to you, your articles enrich me, I will always visit your site, thanks.

  36. Matrich Says:

    Thanks so much for this list. Really grateful for your time and it is surely helpful.

  37. Matthew Griffin Says:

    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.

  38. Chris Olberding Says:

    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.

  39. Make It Up As You Go » Blog Archive » CSS Layout Templates Says:

    […] Vandelay lists 22 resources for basic CSS layouts that save time when starting a new project. […]

  40. 22 recursos para crear plantillas CSS facilmente | frogx.three Says:

    […] 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 […]

  41. WordPress Theme Generator Says:

    […] 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 […]

  42. Alp Says:

    Like Johannes Tröger said, YAML is one of the greatest of all. Try it out: http://www.yaml.de/en/home.html

  43. Recursos Para Crear Templates CSS Says:

    […] 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. […]

  44. Ruchir Says:

    Awesome list as always. I always love your resources posts… Keep ‘em coming!

  45. 22 moyens de créer un layout de CSS Says:

    […] 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 […]

  46. links for 2007-12-20 « toonz Says:

    […] 22 Resources to Easily Create CSS Layouts | Vandelay Website Design (tags: css layout templates) […]

  47. John Kain Says:

    Nice extensive list mate, thanks

  48. links for 2007-12-21 « Elearning Says:

    […] 22 Resources to Easily Create CSS Layouts | Vandelay Website Design (tags: css design webdesign reference) […]

  49. Sexta-feira dos Web Standards #9 · project.47 - Portfolio e blog sobre Web Standards Says:

    […] 22 Resources to Easily Create CSS Layouts - Lista de refer

  50. Mathias, IT student in France Says:

    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)

  51. Stumble into the Weekend 12/21 Says:

    […] 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 & […]

  52. Kakushin.Fr » links for 2007-12-21 Says:

    […] 22 Sites pour créer des templates CSS (tags: css free generator online resources Templates Webdesign) 21. décembre 2007, 23:19 UhrWebRaphaël […]

  53. 13 Great Articles - December 23, 2007 | My lucky number 13 Says:

    […] 22 Resources to Easily Create CSS Layouts - Steven Snell […]

  54. Fatih Hayrioğlu’nun not defteri » 24 Aralık 2007 Web’den Seçme Haberler Says:

    […] Basit bir şekilde CSS yapısı oluşturmak isteyenler için linkler. Bağlantı […]

  55. Keith Says:

    Thanks for including code-sucks.com - a fine list indeed

  56. Vandelay Design’s Best of 2007 | Vandelay Website Design Says:

    […] 22 Resources to Easily Create CSS Layouts […]

  57. links for 2008-01-02 « Random Musings Says:

    […] 22 Resources to Easily Create CSS Layouts (tags: css webdesign layout templates design reference web) […]

  58. TuMenteCrea.es - Tu Blog de diseño » Blog Archive » 22 Recursos para crear esquemas CSS facilmente Says:

    […] 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 […]

  59. Thinking About Using A Website Template? Says:

    […] 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. […]

  60. css web templates Says:

    thanks for these css templates design Resources! i now learning css,it’s help me more!

  61. brAdkův glosář - poznámky pod čarou » Hodnocení roku 2007 Says:

    […] 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  […]

  62. Ricardo Says:

    Nice list.

  63. Ivan Says:

    thanks for taking the time to supply the list

  64. Rusty Says:

    I have used a few on this page :)

    Rusty
    http://www.rustyrichards.net

  65. 22 ресурса, значительно облегчающих разработку CSS макетов » Как создать сайт бесплатно? Как сделать сайт? Журнал для веб-мастеров и блогер Says:

    […] статьи: 22 Resources to Easily Create CSS LayoutsПопулярность: […]

  66. Sergio Says:

    thanks for the tips and resources!!!

  67. дизайн и веб-разработка Says:

    Amazing article. I’ve used some of this tools, but your tools list is great. 10x

  68. Le blog d’Arnaud Valliere » Blog Archive » Are you designed ? Says:

    […] 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 […]

Leave a Reply