I’m sure by now, everyone has heard about the benefits of separating content (HTML) from the presentational aspect (CSS) of their code and I’ve recently started to put a library of templates together which can be used as a starting point for a variety of CSS designs.
Within this first release, I’ll be using just a single HTML file and depending on which CSS layout file is included, the appearance can be altered easily to give you a basic starting point for a multitude of designs.
To keep things simple, this initial release only includes fixed width layouts and is a basic vanilla skeleton which can then be built upon to personalise your design but I’ll be building upon this framework in the near future to create fluid/liquid layouts and much more complex and aesthetically pleasing designs.
Here’s the Zip file which contains all the files you’ll need.
Once you’ve extracted the zip files you’ll find that there are a number of CSS files within the assets>styles folder so I’ll run through how these work and what each one does.
default.css
The default.css file simply includes all the other CSS files that we’ll be using within the layout. I’ve included them in this way so that it’s easy to include any new stylesheets that we need to use without any need to revisit the HTML. By doing it this way, we only need to include one CSS file within the HTML and everything else can be imported into that single file.
reset.css
If you read my CSS Reset article that I wrote recently then this will be familiar as this includes the basic reset styles and gives us a basic starting point on all elements for all browsers.
html, body, address, blockquote, div, dl, form, h1, h2, h3, h4, h5, h6, ol, p, pre, table, ul,
dd, dt, li, tbody, td, tfoot, th, thead, tr, button, del, ins, map, object,
a, abbr, acronym, b, bdo, big, br, cite, code, dfn, em, i, img, kbd, q, samp, small, span,
strong, sub, sup, tt, var, legend, fieldset {
margin: 0;
padding: 0;
}
img, fieldset {
border: 0;
}
format.css
The format.css stylesheet is used to set standard formatting across the site and deals with things like font sizes, font family, colours, padding and margins of semantic elements.
body, select, input, textarea {
font: 85%/1.5 "lucida sans", verdana, arial, helvetica, sans-serif;
}
h1 {
font-size: 2em;
}
h2 {
font-size: 1.8em;
}
h3 {
font-size: 1.6em;
}
h4 {
font-size: 1.4em;
}
h5 {
font-size: 1.2em;
}
h6 {
font-size: 1em;
}
p {
margin-bottom: 1.2em;
}
.error {
color: #C00;
font-weight: bold;
}
.confirmation {
color: #080;
font-weight: bold;
}
The Layout
If you revisit the default.css file, you’ll also notice this snippet of code.
@import url("2-column-fixed.css");
/* @import url("3-column-fixed.css"); */
/* @import url("1-column-fixed-horizontal-nav.css"); */
/* @import url("2-column-fixed-horizontal-nav.css"); */
What this does is import the CSS file that’s required to display the particular layout whilst the other three layouts that I’ve included in this starter kit are currently commented out. To use any of the others, simply comment out the 2 column layout and uncomment any of the other three.
Summary
This is still a work in progress to some extent and whilst all examples are completely valid and work in all the modern browsers (including IE6), I would also be happy to receive any feedback or suggestions as to how this starter kit can be improved or what you’d particularly like to see within the kit in the next release?
The fluid width layout framework is already under development but as always I’d appreciate any input or comments below.
Been there, done that!
This is already done and tested and its called Yahoo UI.
They reset, then set and style with customized layouts via css.
Check it out!
So a big corporation did it… big deal. Let him do his thing, don’t put him down. There are plenty of other things that Yahoo has done before (like searching) that other people have gone and implemented.
And Eric Meyer also has a reset css file, does this mean that the Yahoo UI shouldn’t?
CSS is flexible, so you can use it as your needs require. I agree, this kind of thing has been done before but I’ve created my own which I find useful to my own projects which I hope some other people may find useful… if you don’t or if you prefer to use another “framework” then feel free to use that instead.
Well the Yahoo UI stuff is good, but this one looks nice and light. I’m going to give it a go! Cheers, Sef
I really like this one and i will integrate it as a startup for my projects in future.
Thanks for that, good work!
How many CSS “templates” are out there – good ones I mean? How many people reinvent this basic aspect of professional website design? And, how many share? Lots of templates but like finding a needle in a haystack to find good ones; outrageous numbers of developers reinventing for different projects; and relatively few people share.
Apart from adding to his public portfolio Dave helps good developers move on a step, gives an insight to CSS gubbings for those improving their skills, and encourages others to do likewise for the benefit of the wider community. It would be nice to see others add to his efforts.
I commend Dave for taking the time and applying his skill – then sharing for the benefit of all.
It is funny, the guy who said that this has already been done is currently trying to add Google widgets and functions to WordPress… has he not heard of Blogger?
I found your blog via the DZone RSS feeds. Thank you for sharing your insights; as a self-taught web developer, I always find resources such as yours very educational and helpful towards honing my own skills.
I always like looking at how the pros do it, so I can make sure I’m on the right track.
One question: Does importing several stylesheets into one stylesheet decrease the loading time of the webpage?
Hi Dave, good work!
I’d like to give you some tips to perform better your css.
1. the font “lucida sans” it’s not correct. the window font is “Lucida sans unicode”. by writing the correct name the result is better. my advice is to set a standard font for both windows and mac, so a verdana, arial, sans-serif is enough (compare them here: http://typetester.maratz.com/)
2.to solve the box problem about float: left in ie6 usually is better to add display: inline; in #navcontainer and #content. anyway there are different methods and yours seems tu go well with ie6
I will redistribute your stylesheet on our blog italianwebdesign, good work!!!
Ups I forgot: why did you choose to use the DTD for html 4.1 instead of xhtml 1.1? I think we can begin to use it!! 😀
Pingback: Framework by Dave Woods | Italian webdesign
@Menelik – It’s actually worse to have CSS in multiple CSS files from a performance point of view due to the extra http requests. However, for development it can be easier for organization and keep things simpler whilst you can always combine the CSS before going live with a site.
@Lauryn
1 – That’s a useful site thanks and I’ll certainly use it in future.
2 – display: inline is only required on elements that are floated and have a margin on the same side as the float but otherwise IE6 renders fine.
3 – An XHTML doctype is fine but really there’s no point. Even when you use XHTML, you’re still serving it as HTML. Try changing the extension of a page to .xhtml and see how IE renders it (btw it won’t, it’ll ask you to download it).
Great tool and great idea. The problem with Yahoo and other examples like this (ie: WordPress’s sandbox) is the extra bloated code. I am no fan of the reset but even with this and the multiple CSS files I think this is a great example of minimal code to set up a nice layout.
I will download it and use it.
Pingback: Which Social Networks Provide the Best Design-Related Content? | Vandelay Website Design
Pingback: Frameworks CSS: La moda del momento | Insel der Engel'
Very useful tips.
Regards
Team
derivehost.com
OK, this is useful to me,tks.
Your guestbook is example of middle-class guestbooks. Congratulation! I
I see that poster 18 (Albert) suggests that the guest-book is very middle class, but seems unable to complete his comment correctly.
Lets just assume that at least the middle classes know how to use a guest-book!
Nice examples Dave – cheers.
Ah, thank you)