Intro to html5 Boilerplate
Download as KEY, PDF5 likes3,449 views
HTML5 Boilerplate is a professional template designed for building fast and robust websites using HTML, CSS, and JavaScript. It offers features like browser compatibility, code reuse, and progressive enhancement, helping developers quickly set up front-end projects. It is available in two versions—documented for learning and stripped down for use in projects, accompanied by various advanced features and configurations.
![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; }](https://image.slidesharecdn.com/introtohtml5boilerplatev5-110111111203-phpapp01/85/Intro-to-html5-Boilerplate-12-320.jpg)
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