Do you want your existing website to be HTML5 – compliant ?
All you want to know if you are working on a new project that should follow HTML5 best practices ?
This post tries to answer some of these questions and attempts to try and get started with HTML5 in a flash, using two of the most popular bootstrap frameworks which help you to get started with a robust codebase. Why use it ? Simple, these frameworks contains best practices around front-end development using HTML/JSS/CSS and kick starts you to concentrate on content, rather than developing a template for your site.
HTML5 Boilerplate – H5BP , already at 3.0
Includes
As you can see, first we try to load jQuery using Google CDN. In the next line, we check the existence using window.jQuery, which will evaluate to true if the library has been loaded successfully, else we load it statically.
Twitter Bootstrap – Just released 2.0
Includes
Both are superb HTML5 bootstrap frameworks, under continuous development which follow best practices developed over the years to build a fast, secure and future-proof site. But in my opinion, H5BP is something that even designers can play with using as a template, they can simply open their favourite design tool and add content. While using Twitter Bootstrap is more developer oriented and requires you to invest some time in understanding the various classes and functionalities it offers. But then, that’s the case with every good thing around you.
All you want to know if you are working on a new project that should follow HTML5 best practices ?
This post tries to answer some of these questions and attempts to try and get started with HTML5 in a flash, using two of the most popular bootstrap frameworks which help you to get started with a robust codebase. Why use it ? Simple, these frameworks contains best practices around front-end development using HTML/JSS/CSS and kick starts you to concentrate on content, rather than developing a template for your site.
HTML5 Boilerplate – H5BP , already at 3.0
Includes
- Cross-browser compatible using Polyfills/Fallbacks.
- HTML5 Feature Detection using Modernizr, YepNode
- CSS3 Media Queries
- Mobile browser optimizations
- Download complete, stripped & customized versions
- CDN hosted jQuery with local failback ( shown below )
As you can see, first we try to load jQuery using Google CDN. In the next line, we check the existence using window.jQuery, which will evaluate to true if the library has been loaded successfully, else we load it statically.
- Also contains some server site configurations like .htaccess file for caching, cross-domain XHR, gzipping, 404 error pages, robots.txt etc.
- Contains ANT build scripts to integrate easily with your project build system
Paul Irish on HTML5 Boilerplate
Includes
- Responsive 12-grid column
- Custom jQuery plugins for Carousel, Popovers, Accordion, Autocomplete, modals etc.
- Cross-browser compatible and also includes media queries for smartphones and tablets too
- Includes many components like Button groups, Button Dropdowns, Navigation components, alerts and progress bars etc
- Contains extensive out of the box styling for your HTML markup, for elements like Forms, Tables etc. Building a bordered, shaded, alternate colored table was never so easy.
- The entire framework is built on LESS. The codebase contains several .less files (containing different functionalities) which are then compiled into CSS.
- Provides several styling as LESS mixings which can be found in mixings.less which you can easily use in your code, or extend them as well.
Both are superb HTML5 bootstrap frameworks, under continuous development which follow best practices developed over the years to build a fast, secure and future-proof site. But in my opinion, H5BP is something that even designers can play with using as a template, they can simply open their favourite design tool and add content. While using Twitter Bootstrap is more developer oriented and requires you to invest some time in understanding the various classes and functionalities it offers. But then, that’s the case with every good thing around you.
