Introduction to Paul Irish and Divya Manian's HTML5 Boilerplate project. HTML5 Boilerplate helps you to quickly get up and running with front-end web project.
2. RESPECT!
Paul Irish
Google Chrome, jQuery
http://paulirish.com
Divya Manian
Nimbupani Designs
http://nimbupani.com
And a bunch of other cool kids listed at http://html5boilerplate.com
3. WHAT IS IT?
“HTML5 Boilerplate is the professional badass's
base HTML/CSS/JS template for a fast, robust and
future-proof site.” ~from htmlboilerplate.com
It helps you to quickly get up and running
with front-end web projects.
4. HOW?
It features:
• HTML5
• Code you can reuse
• Browser compatibility
• JavaScript and CSS optimization
• Progressive enhancement hooks
5. WHERE DO I GET IT?
• http://html5boilerplate.com
• Or bleeding edge:
https://github.com/paulirish/html5-
boilerplate
6. TWO VERSIONS
One Documented. One stripped.
• Use the documented version learn.
• Use the stripped version in your projects.
14. VIEWPORT
Includes meta viewport declaration:
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
• Sets the viewport display on devices to width of display instead
of default 980px
• Sets the initial scale to 1.0, because... why not?
If you’re not using a mobile style sheet might consider using default viewport settings.
15. INCLUDES MODERNIZR
“Modernizr adds classes to the <html> element which allow you to target specific
browser functionality in your stylesheet.”
~from modernizr.com
Add this script:
<script src="js/libs/modernizr-1.6.min.js"></script>
Do “if” statements in your CSS:
.multiplebgs div p {
/* properties for browsers that support multiple backgrounds */
}
.no-multiplebgs div p {
/* optional fallback properties for browsers that don't */
}
16. MODERNIZR ALSO...
Allows you to do JavaScript enabled “if” statements in
your CSS.
• If modernizr loads, “no-js” is replaced with “js”
• Before: <html lang="en" class="no-js ... >
• After: <html lang="en" class="js ... >
17. DEMO FOLDER
• Comprehensive collection of HTML5
elements
• Example of how you should set up your head
and script files
• Google Analytics
Don’t leave it in your production code
18. STYLES
• Reset
• Font normalization
• Base Styles
• Primary Site Styles (Your masterpiece)
• Media Queries
• Print Style
22. TABS OR SOFT TABS.
NOT BOTH!
• HTML5 Boilerplate uses Soft Tabs
• Find out the best practices for the
framework you’re working with and adjust
A kitten dies each time you mix tabs and soft tabs.
23. DON’T ADD EVERYTHING
TO YOUR PROJECTS
• Don’t need add all configs
• Don’t need JavaScript Profiler
• Don’t need to include Demo directory
• If you don’t know how to use build don’t
leave it in your project