22 Resources to Easily Create CSS Layouts
December 17th, 2007Web 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.
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.
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 at 4:53 pm
Nice little list there! Thanks.
December 17th, 2007 at 6:20 pm
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 at 7:08 pm
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 at 7:09 pm
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 at 9:13 pm
Nice article. Will be looking at this when I am designing.
December 17th, 2007 at 9:17 pm
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 at 10:05 pm
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 at 1:48 am
[…] 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 at 2:14 am
[…] quest’utilissima lista di tool e risorse per la creazione di layout “CSS based”. Alcune sono vecchie conoscenze ma rovistando […]
December 18th, 2007 at 2:26 am
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 at 2:30 am
22 Resources to Easily Create CSS Layouts | Vandelay Website Design…
[…][…]…
December 18th, 2007 at 2:42 am
[…] 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 at 2:48 am
great ressource, just bookmarked!
December 18th, 2007 at 3:17 am
Great resource Steve, as always
December 18th, 2007 at 4:17 am
[…] 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 at 4:21 am
[…] Vandelay Website design collected 22 resources to create css easily. var addthis_pub = ‘Familyresource4u’; […]
December 18th, 2007 at 5:12 am
dont forget the yaml (http://www.yaml.de/en/home.html) project, which is similar to blueprint css.
December 18th, 2007 at 5:41 am
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 at 6:56 am
Check out Polish production: http://drawter.com
December 18th, 2007 at 7:54 am
[…] 22 Resources to Create CSS Layouts — Most Useful Link of the Day […]
December 18th, 2007 at 8:51 am
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 at 9:44 am
[…] 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 at 11:25 am
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 at 12:15 pm
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 at 1:05 pm
[…] CSS Layouts Tools En Css, Recursos @ 18/12/2007 | por phillipo […]
December 18th, 2007 at 2:49 pm
Great list Steven.
December 18th, 2007 at 3:22 pm
[…] 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 at 3:28 pm
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 at 4:18 pm
[…] 22 Resources to Easily Create CSS Layouts (tags: web design css) […]
December 18th, 2007 at 5:30 pm
[…] 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 at 8:26 pm
[…] 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 at 9:26 pm
Good list that I will definitely have to bookmark for future reference, thanks for taking the time to supply the list
December 18th, 2007 at 9:32 pm
Amazing list… I will certainly use this when I transfer to wordpress.
December 18th, 2007 at 10:18 pm
[…] 22 Resources to Easily Create CSS Layouts (tags: layout) […]
December 19th, 2007 at 1:02 am
Hi,
Merry christmas to you, your articles enrich me, I will always visit your site, thanks.
December 19th, 2007 at 1:13 am
Thanks so much for this list. Really grateful for your time and it is surely helpful.
December 19th, 2007 at 4:49 am
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 at 2:08 pm
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 at 4:00 pm
[…] Vandelay lists 22 resources for basic CSS layouts that save time when starting a new project. […]
December 19th, 2007 at 8:56 pm
[…] 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 at 1:14 am
[…] 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 at 1:43 am
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 at 11:01 am
[…] 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 at 11:15 am
Awesome list as always. I always love your resources posts… Keep ‘em coming!
December 20th, 2007 at 1:31 pm
[…] 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 at 3:24 pm
[…] 22 Resources to Easily Create CSS Layouts | Vandelay Website Design (tags: css layout templates) […]
December 21st, 2007 at 12:29 am
Nice extensive list mate, thanks
December 21st, 2007 at 2:21 am
[…] 22 Resources to Easily Create CSS Layouts | Vandelay Website Design (tags: css design webdesign reference) […]
December 21st, 2007 at 9:30 am
[…] 22 Resources to Easily Create CSS Layouts - Lista de refer
December 21st, 2007 at 12:39 pm
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 at 1:56 pm
[…] 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 at 2:20 pm
[…] 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 at 4:52 pm
[…] 22 Resources to Easily Create CSS Layouts - Steven Snell […]
December 24th, 2007 at 11:29 am
[…] Basit bir şekilde CSS yapısı oluşturmak isteyenler için linkler. Bağlantı […]
December 27th, 2007 at 7:47 am
Thanks for including code-sucks.com - a fine list indeed
December 30th, 2007 at 12:52 pm
[…] 22 Resources to Easily Create CSS Layouts […]
January 2nd, 2008 at 9:18 am
[…] 22 Resources to Easily Create CSS Layouts (tags: css webdesign layout templates design reference web) […]
January 4th, 2008 at 12:45 pm
[…] 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 at 11:22 am
[…] 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 at 6:37 pm
thanks for these css templates design Resources! i now learning css,it’s help me more!
February 2nd, 2008 at 3:38 am
[…] 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 at 11:43 am
Nice list.
February 18th, 2008 at 7:57 am
thanks for taking the time to supply the list
March 14th, 2008 at 9:48 am
I have used a few on this page
Rusty
http://www.rustyrichards.net
March 22nd, 2008 at 3:28 am
[…] статьи: 22 Resources to Easily Create CSS LayoutsПопулярность: […]
April 15th, 2008 at 1:45 pm
thanks for the tips and resources!!!
April 20th, 2008 at 10:52 am
Amazing article. I’ve used some of this tools, but your tools list is great. 10x
April 24th, 2008 at 12:46 pm
[…] 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 […]