Whenever I start a new project, I seem to be repeating myself when it comes to adding, and styling basic content: Headers, Lists and Tables etc.
So I decided to create a ‘Kitchen Sink’ of markup and basic styling, using some content from the great HTML-Ipsum.com plus a few extra bits.
If you don’t currently use something like this already, I do urge to add it to your next new website, because even if you don’t include a table, or list at the moment, you (or your client via WYSIWYG) may do in the future.
The document is actually HTML5 and UTF-8, but you can copy and paste the HTML/CSS however you like. I also tend to add a reset style inside a global stylesheet to save downloading two documents. I’d love hear how you layout or comment your CSS and whether you split them into different files such as layout and typography too.
Open kitchensink.htm
Note: If you have any additional code or CSS which you think should go into the document, add a comment below. Thanks.
The only think I seem to find myself doing at the start of a project is grabbing a copy of Eric Meyer’s CSS reset, importing that into a global style sheet like you, and then going from there.
However, I know I could save a shed-load of work by employing the DRY philosophy ad setting up HTML/CSS templates.
Hiya,
nice post, i use a default stylesheet based on the one distributed with CSS mastery, i have not really updated it for a while but it does the job. Depending on what sort of project i am working on, i have a few “quick start” Zips / Scripts set up. A double click gives me the starting files / folders for what i need, i just either copy it to where i need it, or put the right directories into the script.
Nice post, nice redesign too
Jamie & Lion
Natalie Downe (http://natbat.net) has a really good resource on writing maintainable css systems which is well worth a read http://natbat.net/2008/Sep/28/css-systems/
She uses the term “pattern portfolio” instead of kitchen sink, but the idea is the same, as you put “because even if you don’t include a table, or list at the moment, you (or your client via WYSIWYG) may do in the future.”
She stresses the importance of defining and ordering the CSS as components rather than specific page styles, and at the bottom of the stylesheet, having overrides for the general styles.
I tend to keep as much as I can in one stylesheet, and just have separate ones for IE and print styles, but it depends very much on the site. For a very large site, or one with more than one person editing the CSS, I might choose to split it up. I did this for Scrunchup, so the issue specific colours are in one stylesheet, and the layout is in another, just so things are less likely to go wrong if someone edits the wrong bit.
Thanks for the comments everyone. How we store our CSS I think we sometimes take for granted. For example, why do we need line breaks and comments in a reset CSS? I remove all line breaks and spaces, so it fits neatly on one line – easy to then add into the global style sheet.
I also have a habit of giving my CSS files (and JS, SWF etc) a name of xxx_v1.css. That way, if you make an update, you can upload a new version (xxx_v2.css) knowing that the old one won’t be cached.
@martin Another advantage is using the same ID and class names over and over again.
@jamie I usually start with a basic template folder too, which saves so much time in the beginning.
@anna I will certainly give that post a read.
A good practice of DRY (don’t repeat yourself)
Hey do you guys have a Twitter account I could follow? I’m sick of using RSS feeds! It’d be great if you did it’s a lot easier to find updates since I use Twitter so much! I’ll be back for sure!
My twitter account is @paulrandall