Home arrow HTML arrow Page 2 - 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 - More HSBP Features
(Page 2 of 2 )

 

Well, you actually get a lot more, but listing from top to bottom all the default styles that H5BP includes in its “style.css” file would be rather pointless; you can do that on your own. However, it’s valid to point out that H5BP also provides a solid group of non-semantic classes for dealing with a few common design issues, such as performing image replacement and creating HTML elements that are hidden from view or from screen readers (or from both).

If you’re curious to see how these classes look, here they are:  

(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 ==========================================================
 */

/* For image replacement */
.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; }
.ir br { display: none; }


/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }

/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }

/* Hide visually and from screenreaders, but maintain layout */
.invisible { visibility: hidden; }

There you have it. Thanks to the functionality of the above “ir” class, it’s really simple to put the functionality of image replacement to work for you. Besides, there are a few additional classes which allow you to control the visibility of elements on a web page, and whether or not they’ll remain visible to screen readers.

I don't want to sound like a marketer, but the existence of these non-semantic classes makes H5BP stand out from the crowd. And I'm not done yet; the template also includes all that you need to clear your CSS floats in a truly cross-browser fashion. Skeptical? In that case, take peek at the following code excerpt, which surely will make you change your mind:

(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 ==========================================================
 */

/* Contain floats: h5bp.com/q */
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

Definitely, the above “clearfix” class is a real time-saver that can be used for clearing floated elements in a jiffy. Of course, H5BP comes bundled with many more ready-to-use styles, which are mostly focused on resetting things in an efficient manner; in this case, however, I’ll take the liberty to skip over them for the sake of brevity.

Before you start playing with the CSS classes that you just saw, however, let me show you one more code excerpt. This one provides you with a fine-tuned set of printing styles. Check it out:

(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 ==========================================================
 */

/* ==|== print styles =======================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */
 
@media print {
  * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */
  a, a:visited { text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  /* Don't show links for images, or javascript/internal links */
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; } /* h5bp.com/t */
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; }
}

Frankly speaking, it’s hard to find a style sheet that contains such a plethora of carefully-crafted printing styles, as they cover every possible detail involved in making an HTML document truly print-friendly. Besides, they’ve been embedded in the same file, a process that avoids triggering an additional request to the server. This is another nice touch.

And with this last example, I’m finishing this quick overview of the default CSS file included with H5BP. As usual, feel free to take a close look at the previous code excerpts; do so will provide you with a more solid understanding of the wealth of capabilities that the template offers so generously.

Final Thoughts

In this first part of a two-part tutorial, I gave you a quick introduction to what HTML5 Boilerplate is, and how the wealth of resources it provides right out of the box can speed up the development of any HTML5-driven website. As you saw in the code excerpts, the CSS file bundled with HTML5 Boilerplate not only allows you to deal more easily with the set of new elements included with the specification, but it permits you to tackle some well-known styling tasks, such as assigning default styles to most web page elements, properly implementing some image replacement techniques, and using the so-called “clearfixes” as well.

It’s valid to note, though, that HTML5 Boilerplate comes with many more handy features that you’ll surely love, including the ability to work efficiently with popular JavaScript libraries like jQuery and Modernizr. These and a few other topics will be covered in the last installment, so don’t miss it!


DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

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