g Text Version
Beauty & Self
Books & Music
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
News & Politics
Religion & Spirituality
Travel & Culture
TV & Movies

Bored? Games!
Take a Quiz
Rate My Photo

Natural Living
Folklore and Mythology
Distance Learning

All times in EST

Full Schedule
g Web Design Site

BellaOnline's Web Design Editor


CSS Design Layouts

Guest Author - Christin Sander

It's definitely not necessary to reivent the wheel every time we start a new web design. For that reason, many designers choose to go with a template or basic framework when starting a project. The challenge with many full templates however, is that they often don't meet the exact needs of your web design. This requires a great deal of time to take it apart and rebuild it to your own specifications, often far more time than starting a brand new design with some basic framework in place. When it comes to templates vs simple CSS layouts I almost always go with the basic layout.

Using a pre-established layout allows you to have the basic structure of a website in place. You can design shells yourself, or you can pull them from various resources online. It's still important to plan your website thoroughly first to determine what type of CSS layout will best meet your needs. Once you have established that, then you can look at the resources below to find the initial framework that best matches your project. With a basic framework, your design can be easily customized.

There are several places where you can find CSS shells to get you started. Here are a few of my favorites. I hope you will enjoy these resources for your next project.

Primary CSS
Primary CSS features 22 open source layouts created by designers and developers to make CSS as easy as possible. It was based on the concepts of comic book artist Wally Woods and his “22 panels that always work”. The layouts here are fantastic and can be used as the jump off point for spectacular designs.

Free CSS Layouts
This website features over 250 free CSS layouts. If you need a layout idea you are sure to find whatever type of layout meets your needs here. When you click a thumbnail it takes you to another screen that gives you the specs of the layout: fluid/static, how many columns etc. You can then click a button to view a live demo of how that layout will look. This is a very useful website. I do find it a tad time consuming to have to click through all the thumbnails to get to the specs, but the sheer amount of layouts available make it worth the hunt.
Aptly named, this website features several very basic fixed width layouts and faux column layouts – over 100 in all. This is a great website to download very basic frameworks. If you prefer to work from a full template, this website features several of those for free as well.
This site needs an editor - click to learn more!

Add CSS+Design+Layouts to Twitter Add CSS+Design+Layouts to Facebook Add CSS+Design+Layouts to MySpace Add CSS+Design+Layouts to Digg CSS+Design+Layouts Add CSS+Design+Layouts to Yahoo My Web Add CSS+Design+Layouts to Google Bookmarks Add CSS+Design+Layouts to Stumbleupon Add CSS+Design+Layouts to Reddit

RSS | Related Articles | Editor's Picks Articles | Top Ten Articles | Previous Features | Site Map

For FREE email updates, subscribe to the Web Design Newsletter

Past Issues

Printer Friendly
tell friend
Tell a Friend
Email Editor

Content copyright © 2018 by Christin Sander. All rights reserved.
This content was written by Christin Sander. If you wish to use this content in any manner, you need written permission. Contact BellaOnline Administration for details.


g features
Creating Image Links and Image Maps

Using Website Templates

10 Tips for Great Content

Archives | Site Map


Past Issues

Note: BellaOnline uses cookies to help provide a consistent user experience. Our advertisers may use cookies to help customize ads. Please contact us with any question about our cookie use.

Summertime Foods
Corn on the Cob
Burgers on the Grill
Apple Pie


| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2018 Minerva WebWorks LLC. All rights reserved.

BellaOnline Editor