Blog

Baseline Stylesheets

As linked in Smashing Magazine’s article “70 Expert Ideas for Better CSS Coding“, various developers have posted source code for their baseline stylesheet at one point or the other: Christian Montoya, Eric Meyer, Ping, Mike Rundle…any others come to mind?

For posterity I’ll go ahead and post mine here as it will no doubt evolve into a different animal a year from now. In fact I’ll try to post it again in May 2008 to see what’s changed in the approach:

/*
TABLE OF CONTENTS

  HTML Elements
  Page Structure
  Navigation
  Headings
  Content Area
  Forms
  Clear
  Footer

/* ---------- @ HTML Elements -----------*/

* {
	margin: 0;
	padding: 0;
} 

body, html {
	color:#666;
	background: #FFF url(/images/bg.jpg);
	min-height:101%;
	font-size: 100%;
}

body, form {
	font-family: Arial,Verdana
}

p {
	margin: 15px 0;
}

a:link, a:visited {
	text-decoration:none;
	color: #369;
}

a:hover, a:active {
	color:#2e81d4;
	text-decoration:overline
}

*:focus {
	outline: none
}

/* ---------- @ Page Structure -----------*/

#wrapper {
	background: url(/images/bg_wrapper.png);
	margin: 0 auto;
	font-size: 0.8em;
	width: 860px;
   }

#masthead {
	background: url(/images/bg_masthead.png);
	height: 146px;
}

.left {
	float:left;
}

.right {
	float:right
}

/* ---------- @ Navigation -----------*/

#nav li {
	list-style:none;
}

#nav a {
	display:block;
	width: 122px;
	height: 16px;
	text-indent: -9000px;
}

a#foo {
	background:url(/images/nav_foo.gif);
}

a#foo:hover {
	background:url(/images/nav_foo_on.gif);
}

/* ---------- @ Headings -----------*/

h1, #logo {
	width: 150px;
	background: url(/images/logo.png);
	height: 146px;
	text-indent:-9000px;
	font-size: 1.8em
}

h2 {
	font-size: 1.6em
	}

h3 {
	font-size: 1.4em
	}

h4 {
	font-size: 1.2em
	}

/* ---------- @ Content Area -----------*/

/*Home*/

#content {
}

#sidebar {
}

/*Interior Pages*/

.bullets {
	padding:15px 15px 15px 30px;
	}

.bullets li {
	background:url(/images/bullet.gif) no-repeat;
	list-style:none;
	padding-left: 11px;
	margin-bottom: 5px;
	}

/* ---------- @ Forms -----------*/

.button {
	background: #000 ! important;
	border:#F7ECD4 1px solid;
	padding: 2px;
	margin: 0 2px 0 0;
	color:#FFF;
}

.button:focus {
	padding:2px;
	background: #000 ! important;
}

.button:hover {
	background: #CCC ! important;
	color: #000;
}

/*Clear*/

.clearfloat:after {
	content:".";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
	}

.clearfloat {
	display: inline-block;
	}

/* Hides from IE-mac \*/
* html .clearfloat {
	height:1%;
	}

*+html .clearfloat {
	height:1%;
	}

.clearfloat {
	display:block;
	}
/* End hide from IE-mac */

/* ---------- @ Footer -----------*/

#footer {
	padding: 20px;
	color:#7f99b3;
}

Download the whole thing here.

Notes:

  1. A Table of Contents always becomes more useful as the stylesheet grows.
  2. “Hooks” are added to each section in the form of an @ symbol. This is so code editors can CTRL+F (Search) for the @ symbol in order to more easily skip through sections of the stylesheet.
  3. Global styles are reset with an asterisk (*) to adjust for padding and margin properties which some browsers do not agree on.
  4. Font-size in the <body> is initially set to 100% for the same reason.
  5. A min-height property is added to the <body> to adjust for Firefox’s jarring habit of adding/removing a scrollbar depending a page’s height.
  6. Font styles are specified in both <body> and <form> tags since text fields in some browsers ignore font styles.
  7. Margins are specified for the <p> tag to adjust for browser inconsistency.
  8. The global psuedo-class :focus is set to “outline:none” because the dots it creates are obtrusive in some browsers.
  9. Relative to the initial 100% size, font-size is re-established for the entire wrapper in <em>s to allow users to scale text up and down.
  10. Classes .left and .right are created to enable basic floats, and are meant to be combined with other classes (ex: “<div class=”left sidebar”>foo</div><div class=”right content”>foo</div>
  11. Generic navigation elements are created within an unordered list called #nav with the assumption that list items will use image-backgrounds. The text-indent property is “-9000px” so text does not float over the images.
  12. The h1 tag shares the same properties as the #logo ID because the logo on the interior pages will also serve as a link back to Home.
  13. A class of .bullets is created for traditional bulleted lists. Padding and margins are set to display universally among browsers.
  14. A class of .button is created for use in forms. The use of “!important” is to maintain browser consistency when the button is pressed.
  15. Float clearing specs are courtesy of PiE.

Popularity: 2% [?]

18 Responses »

  1. Lisa said:

    Thanks for this great and clean style sheet. I was working on a project this weekend and was able to use this to get me past some layout issues that I couldn’t figure out. It should launch later this week - I will send you the url when it is live.

    --July 9, 2007 @ 11:57 am
  2. Jonathan said:

    Nice. Very clean. I’m stealing this.

    --January 25, 2008 @ 6:32 pm



Trackbacks & Pingbacks

  1. Presseschau für Webentwickler - Ausgabe Juli 2007 | Dr. Web Weblog:

    […] Baseline Stylesheets Der Beitrag bietet eine Default.css-Datei als Grundlage für saubere und elegante Web-Typografie an. […]

    --July 9, 2007 @ 8:03 am
  2. Best of May/June 2007:

    […] Baseline Stylesheets Darren Hoyt follows Christian Montoya, Eric Meyer, Ping and Mike Rundle and offers his default baseline stylesheet for clean and elegant web-typography. […]

    --July 9, 2007 @ 8:03 am
  3. Best of May/June 2007 | Webdesign (css, grafica e altro):

    […] Baseline Stylesheets Darren Hoyt follows Christian Montoya, Eric Meyer, Ping and Mike Rundle and offers his default baseline stylesheet for clean and elegant web-typography. […]

    --July 9, 2007 @ 9:25 am
  4. lost node » Blog Archive » Best of May/June 2007:

    […] Baseline Stylesheets Darren Hoyt follows Christian Montoya, Eric Meyer, Ping and Mike Rundle and offers his default baseline stylesheet for clean and elegant web-typography. […]

    --July 9, 2007 @ 11:32 am
  5. Cyber Space in One Hand » Blog Archive » Useful references, tutorials, services, tools, techniques and articles by smashingmagazine:

    […] Baseline Stylesheets Darren Hoyt follows Christian Montoya, Eric Meyer, Ping and Mike Rundle and offers his default baseline stylesheet for clean and elegant web-typography. […]

    --July 9, 2007 @ 11:26 pm
  6. Mark Kirby - Brighton » Blog Archive » links for 2007-07-10:

    […] Baseline Stylesheets Another good baseline stylesheet, this one explains clearly the reasons for making each choice. (tags: css) […]

    --July 10, 2007 @ 5:25 pm
  7. Best of May/June 2007 · Style Grind:

    […] Baseline Stylesheets Darren Hoyt follows Christian Montoya, Eric Meyer, Ping and Mike Rundle and offers his default baseline stylesheet for clean and elegant web-typography. […]

    --July 11, 2007 @ 11:43 pm
  8. Best of May/June 2007 at Design Resources:

    […] Baseline Stylesheets Darren Hoyt follows Christian Montoya, Eric Meyer, Ping and Mike Rundle and offers his default baseline stylesheet for clean and elegant web-typography. […]

    --July 27, 2007 @ 8:16 am
  9. CSS Frameworks + CSS Reset: Design From Scratch | CSS:

    […] Baseline Stylesheets by Darren Hoyt […]

    --September 21, 2007 @ 11:56 am
  10. CSS Frameworks + CSS Reset: Design From Scratch .:

    […] Baseline Stylesheets by Darren Hoyt […]

    --September 21, 2007 @ 1:30 pm
  11. Obez Blog » CSS Frameworks + CSS Reset: Design From Scratch:

    […] Baseline Stylesheets by Darren Hoyt […]

    --September 24, 2007 @ 5:23 am
  12. » CSS Frameworks + CSS Reset: Design From Scratch:

    […] Baseline Stylesheets by Darren Hoyt […]

    --September 26, 2007 @ 2:01 pm
  13. Darren Hoyt Dot Com » The Fuss Over Grids and CSS Frameworks:

    […] in May, I’d seen Eric Meyer’s writing on “baseline stylesheets” and decided to publish and document my own (which later got a sweet mention in Smashing Magazine). As you can see, it includes specifications […]

    --November 18, 2007 @ 3:43 pm
  14. CSS Frameworks + CSS Reset: Design From Scratch » » Google Adsense News:

    […] Baseline Stylesheets by Darren Hoyt […]

    --February 18, 2008 @ 4:53 am
  15. CSS Concept » Frameworks & CSS Reset:

    […] Baseline Stylesheets  - by Darren Hoyt […]

    --March 5, 2008 @ 11:35 am
  16. » Frameworks CSS + Reset CSS : design from scratch « css4design : des css pour votre design html:

    […] Baseline Stylesheets par Darren Hoyt. […]

    --April 23, 2008 @ 11:57 am


Leave a comment

(required)

(required)



  • rssRSS feed for comments on this post.