logo
g Text Version
Beauty & Self
Books & Music
Career
Computers
Education
Family
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
Money
News & Politics
Relationships
Religion & Spirituality
Sports
Travel & Culture
TV & Movies

dailyclick
Bored? Games!
Nutrition
Postcards
Take a Quiz
Rate My Photo

new
Action Movies
Bible Basics
Houseplants
Romance Movies
Creativity
Family Travel
Southwest USA


dailyclick
All times in EST

Full Schedule
g
g Web Design Site

BellaOnline's Web Design Editor

g

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.

Code-Sucks.com
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 Del.icio.us 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


print
Printer Friendly
bookmark
Bookmark
tell friend
Tell a Friend
forum
Forum
email
Email Editor


Content copyright © 2014 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


g features
Creating Image Links and Image Maps

Using Website Templates

10 Tips for Great Content

Archives | Site Map

forum
Forum
email
Contact

Past Issues
memberscenter


vote
Poetry
Daily
Weekly
Monthly
Less than Monthly



BellaOnline on Facebook
g


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


BellaOnline Editor