St.eeze/base/base.css
Learn more about the CSS included with my HTML5 website boilerplate.
This is a glance at what’s inside of base.css and why it’s been included. The file is pretty well documented in the comments, but here are some of the highlights.
St.eeze/base/base.css (lines 1-113)
The first section of this file is the HTML5 Doctor Reset Stylesheet, a version of Eric Meyer’s CSS reset which was modified for use with HTML5 by Richard Clark.
St.eeze/base/base.css (lines 114-135)
Next come a few tweaks. First, we remove the default list style types which the reset doesn’t. It's a personal preference, but I find myself using lists without style more often than with them. Next, we’ve added two alternate hr treatments so that you can use a solid, dashed, or dotted styled horizontal rules. Finally I set the opacity of the body to 99.9% to fix a common, and annoying, text flicker that happens during JavaScript animations.
St.eeze/base/base.css (lines 144-160)
Next, we add several useful styles which can make life easier...
- .offset is useful in making text which may be in an image available to screen readers and spiders. This way, when CSS is used the image is displayed, but when CSS is not available the text is still available. A simple example of how this is used can be seen in the header for this site. Here I have an anchor tag with CSS applied to it, and within that is a span with the class offset containing the text we want displayed to screen readers and bots.
- .ellipsis adds and ellipsis to the end of truncated/overflow text, where available by browser.
- .link gives the pointer-finger cursor to elements. This is useful when you have a click event attached via a JavaScript click event.
St.eeze/base/base.css (lines 192-220)
Add this class to a containing element which has floated elements within it. Much cleaner than adding additional elements which clear floats and more straightforward than ensuring you’re clearing all your floats properly in your CSS. This is an extended version of Tony Aslett’s contained float post from 2004.
St.eeze/base/base.css (lines 234-244)
These classes use the CSS3 border-radius declaration to give you a 4 pixel or 8 pixel rounded corner on a given element. Edit these to get your desired curve.
St.eeze/base/base.css (lines 250-266)
These classes give you a couple variations of the CSS3 box-shadow declaration. Edit the values to get the desired look. IMHO, less is more...
St.eeze/base/base.css (lines 273-288)
These classes give you a template for creating a vertical or horizontal background gradient using the browser specific CSS3 linear-gradient backgrounds.