Kay lives here

working with the web

126172-simple-black-square-icon-alphanumeric-bracket-curley

Get started with CSS style guides

pencils

I recently wrote about a cool idea for man­ag­ing com­plex stylesheets: CSS style guides.

Matt Did­coe has taken the idea and run with it — cre­at­ing a down­load­able skele­ton style guide HTML to get you started.

It’s handy in another way too. When you’re build­ing a stylesheet for a site, espe­cially one where the con­tent is CMS-driven, it’s easy to over­look styling for an ele­ment that you haven’t specif­i­cally used — I always for­get OL for exam­ple. When the sys­tem starts get­ting used and con­tent is entered, the client start won­der­ing why num­bered lists are twice the size of bul­leted lists and a dif­fer­ent colour! So using a style guide with all the basics included is an easy way to make sure everything’s covered.

Now, team that up with a starter style sheet — I like to include the global white space reset for starters — and you’re well on your way to CSS nir­vana, or something.

Comments are closed.