Using HTML5 Boilerplate
ProblemYou want to get up and running with HTML5 with a robust working template.
Solution
Use Paul Irish’s HTML5 Boilerplate (as shown in below Figure) as a jumping-off point for your website. Not only does it include an HTML5 template complete with an organized folder structure and CSS file, it also incorporates current coding best practices, browser bug fixes, and popular JavaScript libraries.
Figure: HTML5 Boilerplate site.
=> An index.html file which includes:
— Valid HTML5 markup
— References to JavaScript libraries Modernizr and jQuery (which are included with the template)
— Conditional statements that add classes to body tags based on what version of
Internet Explorer the page is being viewed on (so you can easily create IE6 or IE7-specific styles)
— A basic structural skeleton within the <body> tag
— IE6 .png fix script
— Google analytics script
=> CSS file that includes:
— A global reset
— Font normalization (so your fonts are sized the same across all browsers)
— Some basic styles for lists, tables, and so on
— A few non-semantic classes (for image replacement and element hiding)
— Print styles
— Space for mobile browser and orientation styles (for e.g., an iPad displayed horizontally vs. vertically)
=> A favicon and Apple touch icon (which you'll probably want to customize)
=> Webserver config files
While a dizzying array of cutting-edge web technology, it’s fairly simple to get started with using the boilerplate.
Using the HTML5 Boilerplate
First, download the latest version of the HTML5 Boilerplate from https://github.com/ paulirish/html5-boilerplate.
Unzip the files and place the files at the root of your web project.
Paul Irish suggests that you start off by deleting a couple of things:
1. The demo files (located in a folder called “Demo”)
2. Profiler code (located near bottom of the index.html file; it begins with the comment “yui profiler and profileviewer - remove for production”)
Use the index.html file as a template for all of your HTML documents. Flesh out the basic elements and div containers included in the file. Or, start from scratch and create your own: while his skeleton is a great start, feel free to take it as a starting point.
You’ll also want to customize the information in the head of the document (the title, author, and so on).
As a last tweak to your HTML document, add your site id to the Google analytics code at the bottom of the file. (If you don't use Google analytics, you’ll want to delete this section.)
Then, you’ll want to customize the style.css file. The boilerplate CSS file has a space for your primary CSS. It begins with the comment:
/* Primary Styles
Author:
*/Once you’ve added the primary CSS, feel free to add orientation styles and mobile browser styles. You'll find these under the section beginning with the comment:
/*
* Media queries for responsive design
* These follow after primary styles so they will successfully override.
*/Finally, customize the favicon and Apple touch icon. That should be as easy as replacing the current icons included in the boilerplate files.
Unzip the files and place the files at the root of your web project.
Paul Irish suggests that you start off by deleting a couple of things:
1. The demo files (located in a folder called “Demo”)
2. Profiler code (located near bottom of the index.html file; it begins with the comment “yui profiler and profileviewer - remove for production”)
Use the index.html file as a template for all of your HTML documents. Flesh out the basic elements and div containers included in the file. Or, start from scratch and create your own: while his skeleton is a great start, feel free to take it as a starting point.
You’ll also want to customize the information in the head of the document (the title, author, and so on).
As a last tweak to your HTML document, add your site id to the Google analytics code at the bottom of the file. (If you don't use Google analytics, you’ll want to delete this section.)
Then, you’ll want to customize the style.css file. The boilerplate CSS file has a space for your primary CSS. It begins with the comment:
/* Primary Styles
Author:
*/Once you’ve added the primary CSS, feel free to add orientation styles and mobile browser styles. You'll find these under the section beginning with the comment:
/*
* Media queries for responsive design
* These follow after primary styles so they will successfully override.
*/Finally, customize the favicon and Apple touch icon. That should be as easy as replacing the current icons included in the boilerplate files.
No comments:
Post a Comment