HTML and CSS Reference
In-Depth Information
• A 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 nonsemantic classes (for image replacement and element hiding)
—Print styles
—Space for mobile browser and orientation styles (e.g., an iPad displayed
horizontally versus 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 HTML5 Boilerplate
First, download the latest version of HTML5 Boilerplate from
https://github.com/pau
Unzip the files and place them at the root of your web project. The documentation
suggests that you start off by deleting a couple of things:
1. The demo files (located in a folder called
Demo
)
2. The 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 Paul's 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:
*/