HTML5 Boilerplate

The last time I spent any real time trying to learn HTML was probably when PHP 4.3 was popular and XHTML was the new thing on the scene; yeah, that’s been a while. I Google’d HTML5 because I wanted to find a dead simple template that I could use for a starting point and came across HTML5 Boilerplate. It was overkill for my needs, but I definitely plan to come back and look over it at some point.

There’s no sense in repeating myself, so here’s what the devs have to say about it:

HTML5 Boilerplate is the professional frontend developers’s base HTML/CSS/JS template for a fast, robust and future-safe site.

After more than four years in iterative development, you get the best of the best practices baked in: cross-browser normalization, performance optimizations, even optional features like cross-domain XHR and Flash. A starter Apache .htaccess config file hooks you up with caching rules and preps your site to serve HTML5 video, use @font-face, and drop your site’s filesize by half with robust gzipping.

Boilerplate is not a framework, nor does it prescribe any philosophy of development, it’s just got some tricks to get your project off the ground quickly and right-footed.

See their intro page for more information or this great review by Dan Wahlin.

An hour for this!?

I was working on my wiki and trying to figure out a way to make the footnotes more readable and get them to stand out more. I adjusted all of the footnote font sizes from 80% to 100% which helped quite a bit. I also made sure none of them were placed inside italicized text.

Last but not least I wanted them to stand out more. I recalled seeing a nice effect on the Subversion FAQ page where the selected FAQ had a red border. After attempting to read through the CSS and find the property (got hung up looking for a rules) I decided to Google it.

Found a bunch of neat sites such as this one: CSS Design: Taming Lists. Neat, but not quite what I was looking for.

It finally turned out to be this:

:target {
  border: 2px solid red; 
}

Figures.