22 Resources to Easily Create CSS Layouts

Published in Design

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.

Ebook

Free E-book: Freelance Designer's Guide to Multiple Income Streams.
Enter your email address.

104 Responses

Deron Sizemore December 17th, 2007

Nice little list there! Thanks.

Stunna Sunglasses 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.

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

Vandelay Design 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.

Gadgets December 17th, 2007

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

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

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 18th, 2007

great ressource, just bookmarked! :)

Tibi Puiu December 18th, 2007

Great resource Steve, as always ;)

Johannes Tröger December 18th, 2007

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

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

Damian December 18th, 2007

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

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

Madhur Kapoor December 18th, 2007

Great list Steven.

Vandelay Design 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.

Jermayn Parker December 18th, 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 18th, 2007

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

coolingstar9 December 19th, 2007

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

Matrich December 19th, 2007

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

Matthew Griffin 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.

Chris Olberding 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.

Alp 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

Ruchir December 20th, 2007

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

John Kain December 21st, 2007

Nice extensive list mate, thanks

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

Keith December 27th, 2007

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

css web templates January 23rd, 2008

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

Ricardo February 12th, 2008

Nice list.

Ivan February 18th, 2008

thanks for taking the time to supply the list

Rusty March 14th, 2008

I have used a few on this page :)

Rusty
http://www.rustyrichards.net

Sergio April 15th, 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 31st, 2008

This is an excellent list of CSS resources!

Geekywood 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 :)

Dainis Graveris August 31st, 2008

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

Ehsan September 1st, 2008

cool resources really helpful , Cheers :)

violet November 23rd, 2008

all of this layouts has some problem with scrroling text

Tapan Bhanot January 18th, 2009

hi,

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

thanks.

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

Govind May 22nd, 2009

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

css best designs August 28th, 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 28th, 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 14th, 2009

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

How To Start A Blog November 28th, 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 11th, 2010

Great collection of resources.

website design March 15th, 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 28th, 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 18th, 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 5th, 2012

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

Leave a Reply