Home arrow HTML arrow HTML5 Boilerplate Introduction
HTML

HTML5 Boilerplate Introduction


In this first part of a two-part tutorial, I explain what HTML5 Boilerplate is, and how the wealth of resources that it provides right out of the box can speed up the development of any HTML5-driven website.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 4
January 23, 2012
TABLE OF CONTENTS:
  1. · HTML5 Boilerplate Introduction
  2. · More HSBP Features

print this article
SEARCH DEVARTICLES

HTML5 Boilerplate Introduction
(Page 1 of 2 )

Despite the lack of support from Internet Explorer 7/8 for most of the features included with HTML5, it’s hard to ignore the hype that the standard has generated. Even though the migration process was at first somewhat slow, the number of websites that now use HTML5 as their backbone has grown at an exponential rate. There's a good reason for that: while it can’t be considered an actual revolution, HTML5 is undeniably an “evolution” toward the creation of richer, cleaner and more semantic web pages.

Nevertheless, the path to building cross-browser HTML5-based websites often calls for a delicate juggling act. Not only must you handle the numerous incompatibilities at markup level (Internet Explorer being the most glaring example), but you need to plan very carefully, especially when you're using some little-known features, such as web workers, “localStorage” and even the promising web sockets.

The good news is that today you can find a decent number of tools that will let you create HTML5 websites in a much simpler, more efficient and faster way. One great example of this is HTML5 Boilerplate (http://html5boilerplate.com/). It's a powerful, full-featured HTML5 default template created by a group of renowned web developers, including Paul Irish, Nicolas Gallagher, Divya Manian, Mathias Bynens and many more contributors (for the full list please check the above URL). It makes creating HTML5 websites a pleasant experience.

In fact, H5BP is not new; it was released about one year ago. However, the features that have been added to it over time, including a hard-to-beat, fully-optimized normalization CSS style sheet, an “index.html” file that uses the popular jQuery/Modernizr tandem, and many other top-notch goodies have turned it into the favorite choice of numerous web developers.

If you’re interested in peeking at H5BP to see what it brings to the table, in this two-part tutorial I’ll be exploring some of its most notable characteristics, a process that you'll hopefully find educational and even fun. 

Overview of HTML5 Boilerplate’s Default CSS File

To get started, you’ll need to download the ZIP archive containing the template files mentioned in the introduction (and a few others, depending on which package you choose to download). Currently, there are three different options from which to choose: a standard, fully-commented version; the stripped-down version (with no comments and links); and finally, a custom alternative, where you can be a bit more picky and select which files to download. So, make sure you get the package that suits your needs best. Already got it? Good.

In this case, for demonstration purposes I’ll be using the standard distribution, which obviously is the easiest one to understand. Once you get it unzipped to a test directory in your web server, go ahead and start exploring its “style.css” file under the “css” folder, which provides a well-trusted set of normalization styles.

If all went well, the file in question should contain the following HTML5 rules:   

(style.css) (excerpted)

/*
 * HTML5 âś° Boilerplate
 *
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 *
 * Detailed information about this CSS: h5bp.com/css
 *
 * ==|== normalize ==========================================================
 */

/* ==========================================================================
   HTML5 display definitions
   ========================================================================== */

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }

As you can see, H5BP provides a nice set of styles, which define the default appearance for the new HTML5 markup elements, such as “header,” “nav,” “footer” and so forth. However, I’m only scratching the surface of the delights that H5BP hides under the hood. What’s more, as one might expect, the template also includes default styles for other common HTML elements.

The following code excerpts shows the ones assigned to hyperlinks:

(style.css) (excerpted)

/*
 * HTML5 âś° Boilerplate
 *
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 *
 * Detailed information about this CSS: h5bp.com/css
 *
 * ==|== normalize ==========================================================
 */

/* ==========================================================================
   Links
   ========================================================================== */

a { color: #00e; }
a:visited { color: #551a8b; }
a:hover { color: #06e; }
a:focus { outline: thin dotted; }

/* Improve readability when focused and hovered in all browsers: h5bp.com/h */
a:hover, a:active { outline: 0; }

Definitely, the above styles are quite easy to understand. They not only assign a default appearance to <a> elements, but also help to improve their readability and accessibility. Of course, if you’re wondering if styling hyperlinks is all that H5BP can do for you, be sure to check the following code excerpt. This one is responsible for making your typography look stylish and consistent across most modern browsers: 

(style.css) (excerpted)

/*
 * HTML5 âś° Boilerplate
 *
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 *
 * Detailed information about this CSS: h5bp.com/css
 *
 * ==|== normalize ==========================================================
 */

/* ==========================================================================
   Typography
   ========================================================================== */

abbr[title] { border-bottom: 1px dotted; }

b, strong { font-weight: bold; }

blockquote { margin: 1em 40px; }

dfn { font-style: italic; }

hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }

ins { background: #ff9; color: #000; text-decoration: none; }

mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }

/* Redeclare monospace font family: h5bp.com/j */
pre, code, kbd, samp { font-family: monospace, monospace; _font-family: 'courier new', monospace; font-size: 1em; }

/* Improve readability of pre-formatted text in all browsers */
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }

q { quotes: none; }
q:before, q:after { content: ""; content: none; }

small { font-size: 85%; }

/* Position subscript and superscript content without affecting line-height: h5bp.com/k */
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }

As you can see, H5BP provides an impressive, cohesive set of typographic  styles, which are quite unusual to see in other reset CSS sheets available out there. And speaking of style sheets, any decent one should provide a default appearance for HTML lists, right? Well, in this case you won’t be disappointed, as H5BP does that too, through the following rules: 

(style.css) (excerpted)

/*
 * HTML5 âś° Boilerplate
 *
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 *
 * Detailed information about this CSS: h5bp.com/css
 *
 * ==|== normalize ==========================================================
 */

/* ==========================================================================
   Lists
   ========================================================================== */

ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
dd { margin: 0 0 0 40px; }
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }

As the previous code snippet shows, H5BP is so generous that not only does it provide you with a firm foundation to start confidently utilizing lists, but it offers a ready-to-use declaration, which lets you employ the <nav><ul>/<na><ol> couples for creating semantic, highly-accessible navigation bars in no time. What more can you ask for?


blog comments powered by Disqus
HTML ARTICLES

- Does HTML5 Need a Main Element?
- Revisiting the HTML5 vs. Native Debate
- HTML5: Not for Phone Apps?
- HTML5 or Native?
- Job Hunting? Freelancer.com Lists This Quart...
- HTML5 in the News
- Report: HTML5 Mobile Performance Lags
- The Top HTML5 Audio Players
- Top HTML5 Video Tutorials
- HTML5: Reasons to Learn and Use It
- More of the Top Tutorials for HTML5 Forms
- MobileAppWizard Releases HTML5 App Builder
- HTML5 Boilerplate: Working with jQuery and M...
- HTML5 Boilerplate Introduction
- New API Platform for HTML5

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials