HTML and CSS

Some nice boilerplate HTML and CSS are provided for you.

Default content

The only page the template comes with gives you a lot of demo HTML content, using just about all the elements you could use. It includes headings, paragraphs, quotes, tables, forms, etc. This demo content comes from the azbuka project and the bluetrip project.

What I like about this, is that it helps you set up a base stylesheet for plain elements. It is easy to think in terms of photoshop comps, which says: you need one big red header and one smaller blue header. If you start by styling this demo content, you can develop a style guide from which the actual visual design emerges.

There's also a stub 404 document included with basic error text.

Default layout

The default layout comes with some great stuff from my own experience and from the html5-boilerplate project. Here are some features:

• Uses conditional comments to add classes to the HTML-element, so you can target Internet Explorer in your stylesheets and scripts. For example: .lte7 body { font-size: 14px; }
• Uses HTML5 for nice and concise doctype and head section
• Uses ARIA roles to help computers recognise your header, footer and main content.
• Includes the Google Analytics tracking snippet (if you have set your tracking ID in config.yaml
• Uses your config.yaml to set page metadata, page title, copyright notice and the HTML lang attribute.
• Feed, stylesheet, script and favicon are already included.

There is also a simple layout, that comes in handy for stuff like 404 pages, subscription confirmation pages, etc. It is very minimal.

Default styles

The default stylesheet already has quite a lot of stuff in it. It is supposed to provide all styles, including for screen, print and mobile devices, and any CSS hacks. Note that you should not include a IE-specific stylesheet with hacks via a conditional comment, as this results in an extra HTTP request (which is slow). Using conditional comments to set class names on the HTML element and then using those to target your hacks is a much better approach.

Here's what's in the stylesheet:

• Some documentation on author, site title and last modified time.
• A logical ordering of sections for styles for screen, print, mobile, hacks and vendor styles — including a table of contents.
• A kind-of reset that sets some sane defaults, like line-height and margins.
• The self-clearing fix is included as .autoclear.
• Basic styles for aligning pictures to text, optionally with a caption.
• Classes for using a 960 grid system.
• Some very basic print styles
• Placeholders for iPhone and iPad styles
• Some minor hacks to whip IE into shape.
• A placeholder for vendor code, such as stylesheets that come with javascript lightbox libraries and such.
• Placeholder groups for headings, typography, layout, forms and tables.

Note that the stylesheet is actually processed with Erb, to include some meta-data. You could use that to do more fancy stuff, such as variables and such, but I chose not to.

I always find this stylesheet a great place to start from, but I do recommend you develop your own so that it fits your way of thinking.