HTML5 Boilerplate

how-to-get-started-with-html5-boilerplate-020ba9f019

HTML5 Boilerplate is not a framework. It’s a template that can be modified and used for your own projects. It is Created by Paul Irish and Divya Manian, HTML5 Boilerplate is the product of more than two and a half years in iterative development, and it’s chock-full of best practices and techniques for creating cross-browser compatible websites that will work with legacy browsers (which means IE 6) while also being HTML5-ready.

Why is it ?

    • Cross-browser compatible
    • HTML5 ready. Use the new tags with certainty
    • Optimal caching and compression rules for grade-A performance
    • Best practice site configuration defaults
    • Mobile browser optimizations
    • Progressive enhancement graceful degradation
    • IE specific classes for maximum cross-browser control
    • Handy .no-js and .js classes to style based on capability
    • Never go wrong with your doctype or markup!
    • An optimal print stylesheet, performance optimized
    • iOS, Android, Opera Mobile-adaptable markup and CSS skeleton
    • .htaccess file that allows proper use of HTML5 features and faster page load
    • CDN hosted jQuery with local fallback failsafe.

There are 02 versions of HTML5 Boilerplate,

  1. Documented: Use the Documented version to learn.
  2. Stripped: Use the stripped version for projects.

Features of HTML5 Boilerplate

Simple Doctype

<!doctype html>

No more conditional style sheets and orphaned css hacks

Use conditional comments to add “ie” classes:

<—![if lt IE 7 ]> <html lang=”en” class=”no.js ie6″> <![endif]—>
<—![if lt IE 7 ]> <html lang=”en” class=”no.js ie7″> <![endif]—>
<—![if lt IE 8 ]> <html lang=”en” class=”no.js ie8″> <![endif]—>
<—![if lt IE 9 ]> <html lang=”en” class=”no.js ie9″> <![endif]—>
<—![if (gt IE 9) | (IE) ]><!–> <html lang=”en” class=”no.js “> <!–<![endif]—>

Allows to do this with CSS:

 div.foo { padding-right:10px ; }
.ie6 div.foo {padding-right:5px ; } 
 

X-UA Compatible

Includes X-UA compatible meta description:

<meta http-equiv=”X-UA Compatible” content=”IE=edge,chrome=1″>

Forces IE 8 & 9 to use latest rendering engine.

Viewport

Includes meta viewport declaration

<meta name=”viewport” content=”width=device-width, initial-scale=1.0>

Sets viewport display on devices to width of display instead of default 980px.

Includes modernizer

Styles

    1. Reset
    2. Font Normalization
    3. Base Styles
    4. Primary site styles
    5. Media queries
    6. Print Style

Build Scripts

  • Combines and minifies javascript (via yui compressor)
  • Inlines stylesheets specified using @import in your CSS
  • Combines and minifies CSS
  • Optimizes JPGs and PNGs (with jpegtran & optipng)
  • Removes development only code (any remaining console.log files, profiling, test suite)
  • Basic to aggressive html minification (via htmlcompressor)
  • Auto generates a cache manifest file (and links from the html tag) when you enable a property in the project config file.
  • Revises the file names of your assets so that you can use heavy caching (1 year expires).
  • Upgrades the .htaccess to use heavier caching
  • Updates your HTML to reference these new hyper-optimized CSS + JS files
  • Updates your HTML to use the minified jQuery instead of the development version
  • Remove unneeded references from HTML (like a root folder favicon)
  • Runs your JavaScript through a code quality tool (optional)

Where to get it ? 

Source – html5boilerplate.com

                  Slideshare.net

Advertisements

Posted on March 26, 2013, in Web and tagged , , , , . Bookmark the permalink. 3 Comments.

  1. I always used to study article in news papers but now as I
    am a user of web thus from now I am using net for content, thanks to web.

  2. I am extremely impressed with your writing talents and also
    with the layout to your weblog. Is that this a paid subject matter or
    did you customize it your self? Anyway keep up the excellent quality writing, it’s uncommon to look a great weblog like this one today..

  3. Excellent way of telling, and good paragraph to get data about my presentation topic, which i
    am going to convey in college.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: