Downloaded 125 times
![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)
Uploaded byMichael Enslow
Intro to html5 Boilerplate
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.
More Related Content
Similar to Intro to html5 Boilerplate
![Getting Started with Apache Spark: Big Data Made Simple [Free Meetup]](https://cdn.slidesharecdn.com/ss_thumbnails/apachesparkgettingstarted-260203175547-8361bcc3-thumbnail.jpg?width=640&height=640&fit=bounds)
Intro to html5 Boilerplate
- 1.
- 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 IGET 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.
- 7.
- 8. ICONS • favicon.ico forbrowsers • apple-touch-icon.png for iPhone, iPad and Android
- 9. WEB SERVER CONFIGS •Apache: .htacces • nginx: nginx.conf • IIS: web.config
- 10.
- 11. SIMPLE DOCTYPE <!doctype html> burp.
- 12. NO MORE CONDITIONALSTYLE 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 metadeclaration: <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> • Forces IE 8 & 9 to use latest rendering engine
- 14. VIEWPORT Includes meta viewportdeclaration: <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 addsclasses 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 youto 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 • Comprehensivecollection 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 • Fontnormalization • Base Styles • Primary Site Styles (Your masterpiece) • Media Queries • Print Style
- 19. ADVANCED FEATURES • JavaScriptProfiling • Build script
- 20.
- 21. NOT A FRAMEWORK Bringwhat you need to your project.
- 22. TABS OR SOFTTABS. 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 PrincipalDeveloper and Co-founder of Mister Machine http://mistermachine.com Follow me: @menslow