Intro to html5 Boilerplate
•Download as KEY, PDF•
5 likes•3,440 views
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.
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Intro to html5 Boilerplate
Similar to Intro to html5 Boilerplate (20)
Recently uploaded
Recently uploaded (20)
Intro to html5 Boilerplate
- 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.
- 8. ICONS • favicon.ico for browsers • apple-touch-icon.png for iPhone, iPad and Android
- 9. WEB SERVER CONFIGS • Apache: .htacces • nginx: nginx.conf • IIS: web.config
- 11. SIMPLE DOCTYPE <!doctype html> burp.
- 12. 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 IE 7 ]> <html lang="en" class="no-js ie7"> <![endif]--> <!--[if IE 8 ]> <html lang="en" class="no-js ie8"> <![endif]--> <!--[if IE 9 ]> <html lang="en" class="no-js ie9"> <![endif]--> <!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]--> Allows you to do this in your CSS: div.foo { padding-right: 10px; } .ie6 div.foo { padding-right: 5px; }
- 13. X-UA-COMPATIBLE Includes X-UA-Compatible meta declaration: <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> • Forces IE 8 & 9 to use latest rendering engine
- 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
- 19. ADVANCED FEATURES • JavaScript Profiling • Build script
- 20. PITFALLS
- 21. NOT A FRAMEWORK Bring what you need to your project.
- 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
- 24. READ MORE • http://html5boilerplate.com • Github Repo: https://github.com/paulirish/html5-boilerplate • Conditional stylesheets vs CSS hacks? Answer: Neither! http://paulirish.com/2008/conditional-stylesheets- vs-css-hacks-answer-neither • Modernizr http://www.modernizr.com
- 25. YOURS TRULY Michael Enslow Principal Developer and Co-founder of Mister Machine http://mistermachine.com Follow me: @menslow