22 Resources to Easily Create CSS Layouts

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

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.

Looking for hosting? WPEngine offers secure managed WordPress hosting. You’ll get expert WordPress support, automatic backups, and caching for fast page loads.

106 Responses

Comments are now closed on this post.

  • Deron Sizemore, December 17, 2007

    Nice little list there! Thanks.

  • Stunna Sunglasses, December 17, 2007

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

  • Fiar, December 17, 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.

  • Vandelay Design, December 17, 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.

  • Gadgets, December 17, 2007

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

  • Yasmin, December 17, 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.

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

  • max, December 18, 2007

    great ressource, just bookmarked! :)

  • Tibi Puiu, December 18, 2007

    Great resource Steve, as always ;)

  • Johannes Tröger, December 18, 2007

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

  • Keith, December 18, 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.

  • Damian, December 18, 2007

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

  • MarkP, December 18, 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.

  • Madhur Kapoor, December 18, 2007

    Great list Steven.

  • Vandelay Design, December 18, 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.

  • Jermayn Parker, December 18, 2007

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

  • Justin Dupre, December 18, 2007

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

  • coolingstar9, December 19, 2007

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

  • Matrich, December 19, 2007

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

  • Matthew Griffin, December 19, 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.

  • Chris Olberding, December 19, 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.

  • Alp, December 20, 2007

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

  • Ruchir, December 20, 2007

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

  • John Kain, December 21, 2007

    Nice extensive list mate, thanks

  • Mathias, IT student in France, December 21, 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)

  • Keith, December 27, 2007

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

  • css web templates, January 23, 2008

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

  • Ricardo, February 12, 2008

    Nice list.

  • Ivan, February 18, 2008

    thanks for taking the time to supply the list

  • Rusty, March 14, 2008

    I have used a few on this page :)

    Rusty
    http://www.rustyrichards.net

  • Sergio, April 15, 2008

    thanks for the tips and resources!!!

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

  • Patrick Sweeney, May 31, 2008

    This is an excellent list of CSS resources!

  • Geekywood, June 26, 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 :)

  • Dainis Graveris, August 31, 2008

    I just love CSS, great list of layouts – maybe I`ll find something new too. Thanks :)

  • Ehsan, September 1, 2008

    cool resources really helpful , Cheers :)

  • violet, November 23, 2008

    all of this layouts has some problem with scrroling text

  • Tapan Bhanot, January 18, 2009

    hi,

    nice info. i was looking for this for a long time.

    thanks.

  • Eugene, March 17, 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!

  • Govind, May 22, 2009

    Greate CSS design resource and tutorials….very helpful fluid widths for me…

  • css best designs, August 28, 2009

    Best of … i was looking for somehting like this for the incoming clients , i can make this better and sell them right?

    • Vandelay Website Design, August 28, 2009

      You would have to check the terms of use to see if it prohibits commercial use, but I’m not aware of any of them that restrict it to just personal use.

  • Sarkhom, November 14, 2009

    Excellent !! Very Nice! Thanks a lot. ;)

  • How To Start A Blog, November 28, 2009

    BOOkMARK!!!…Nice list, i’ve searched for some base designs before, must have been using the wrong keywords. Thanks Alot!

  • Eric Di Bari, January 11, 2010

    Great collection of resources.

  • website design, March 15, 2010

    Thanks for the nice list. Update further whenever you have something more..

  • Nice…this will save me some time. Thank you for the resources. I’ve seen a couple of those, but you added some great stuff to my design toolbox. Will be using these on my web design customers in Jacksonville. Looking forward to more goodies!

  • Mat, April 28, 2011

    In case you have a website design in PSD format I would recommend to try out a service of automatic PSD to CSS layout conversion – http://psd2htmlconverter.com/en/ . I’m pleased with results I can get with it.

  • jared, July 18, 2012

    Great list of resources. I’ve been looking to do something different for a clients site and will try some of these options.

  • Sam, September 5, 2012

    great list! Starting out with a layout is so much better then starting from scratch in my opinion.

  • ceba, September 3, 2013

    Check out few more effective and useful css tools for designers. http://codegeekz.com/must-have-css-tools-for-designers/

Close