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.
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.
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
Great resource and just what I was looking for. Thanks for posting!
Very useful article Paul,
Thanks for sharing it; I have bookmarked it on my “design shelf”
One quick note on maintaining css version:
In order to force client to re-download any file (css, js, html, or even an image), instead of versioning it out on its filename, you can simply use it as below…
This will allow you to keep single updated version in your filesystem while letting you archive the older ones.
Perhaps using ems or % instead of px to allow for a little more flexibility would be nice…otherwise this is excellent, I will be adding on as needed this is very helpful indeed. Thanks!
I have actually been using ems more, especially with the influx of responsive designs so that the layouts work on small and large screen.
Excellent, Have you updated this at all? I wanted to expand on it a bit making it responsive as well as adding some CSS3 enhancements (with fall backs of course). There aren’t a whole lot of these I can find that come pre-formatted and certainly none already 100% responsive…Just wondering, I want to make sure I use the most up to date version.
I haven’t updated it, but I have modified it internally at the company where I work, but you are more than welcome to adapt the code. I’d be happy to link to it as well.
Awesome, when i get a solid version i will send it over to you! Thanks alot!