zui HTML5/CSS3 strategy is to define a core generic layout and global typography, appearance, and base layout where unique pages and content blocks merely tweak the base design to accomplish an endless assortment of layouts and presentation.

Using the zui HTML5 base markup as our structure we implement almost exactly the HTML5 BoilerPlate project taking advantage of a multitude of great minds working together for maximum compatibility and optimization across platforms.

NOTE: All of the example css below is from the zui HTML5/CSS3 demo loosely recreating the hulu.com layout. Where vendor prefixes are used they have been removed in the sample below for clarity.

Step 1 & 2:
Normalize (no reset!)
Style the base

Like the days of browser-sniffing the black box reset.css is outmoded. Normalize.css (now part of the HTML5 BoilerPlate project) is the next generation in creating a stable base to work from.

With normalize.css you implement a few standardized declarations and tweak a few others to create a normalized presentation across browsers without wiping out the entire useragent stylesheet in the process.

/**
 * HTML5 ✰ Boilerplate: Normalize.css: HTML5 display definitions
 * http://necolas.github.com/normalize.css/
 * Perfunctory, nothing to style
*/
    article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
    audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
    audio:not([controls]) { display: none; }
    [hidden] { display: none; }

Really all we are doing here is ensuring our new HTML5 tags behave as expected.

In conjunction with tweaking the normalize.css with each project you simultaneously define general typography, set colors, set common margins and styles for lists, tables, forms, and other common design elements.

There is no concern for specific pages/layouts at this point.

/**
 * HTML5 ✰ Boilerplate: Base
 * Includes Normalize.css via h5bp and of course zui
 * http://h5bp.com/
 * http://necolas.github.com/normalize.css/
 *
 * There is no "reset" only "normalization"
 * Only "fix" inconsistencies instead of redefining everything
 * Less duplicated selectors and base styling so you can style exceptions to the layout
 *
 * Where a declaration is "normalizing" it is noted
 * However, none of it is "black box" uneditable. You should edit it all as necessary, just be aware of what was being normalized
*/
    html {
        overflow-y: scroll; /* normalize */                                                     /*** Keeps page centred in all browsers regardless of content height ***/
        font-size: 100%; /* normalize */                                                        /*** Corrects text resizing oddly in IE6/7 when body font-size is set using em units ***/
        -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; /* normalize */             /*** Prevents iOS text size adjust after orientation change, without disabling user zoom ***/
    }

    body {
        margin: 0; /* normalize */                                                              /*** Addresses margins handled incorrectly in IE6/7 ***/
        font-size: 13px; /* set base size to set ems by */
        line-height: 1.4; /* multiplier */
    }
    body, button, input, select, textarea {
        font-family: "Lucida Grande","Helvetica","Arial","Verdana",sans-serif; /* normalize */                                                /*** Addresses font-family inconsistency between 'textarea' and other form elements. ***/
        color: #333; /* zui-normalize */                                                        /*** Common best practice to minimize extreme contrast on text ***/
    }

    /*** Remove text-shadow in selection highlight: h5bp.com/i - must be separate! */
    ::-moz-selection {
        background: #fe57a1;
        color: #fff;
        text-shadow: none;
    }
    ::selection {
        background: #fe57a1;
        color: #fff;
        text-shadow: none;
    }

    /** Base: Links */
        a { color: #58b; text-decoration: none; }
        a:visited { color: #58b; }
        a:hover { color: #58b; text-decoration: underline; }
        a:focus { outline: thin dotted; /* normalize */                                         /*** Addresses outline displayed oddly in Chrome ***/ }
        a:hover, a:active { outline: 0; /* normalize */                                         /*** Improve readability when focused and hovered in all browsers: h5bp.com/h ***/ }
        a:link { -webkit-tap-highlight-color: #06e; }

    /** Base: layout/typography */
        abbr[title] { border-bottom: 1px dotted; /* normalize */                                /*** Addresses styling not present in IE7/8/9, S5, Chrome ***/ }
        b, strong { font-weight: bold; /* normalize */                                          /*** Addresses style set to 'bolder' in FF3/4, S4/5, Chrome ***/ }
        blockquote {
            margin: 2em 2em;
            font-style: italic;
        }
        dfn { font-style: italic; /* normalize */                                               /*** Addresses styling not present in S5, Chrome ***/ }

        h1 { border-bottom: 1px solid #eee; }
        h1 { font-size: 2em; font-weight: bold; margin: 0.67em 0; }
        h2 { font-size: 1.692em; font-weight: bold; margin: 0.83em 0; }
        h3 { font-size: 1.538em; font-weight: bold; margin: 1em 0; }
        h4 { font-size: 1.308em; font-weight: bold; margin: 1em 0; }
        h5 { font-size: 1.154em; font-weight: bold; margin: 1em 0; }
        h6 { font-size: 1.077em; font-weight: bold; margin: 1em 0; }
        h1, h2, h3 {
            font-family: 'Carme', sans-serif;
        }
        h1, h2, h3, h4, h5, h6 { color: #444; }

        /* zui-normalize */ /*** Restore formatting for h1's nested in html5 semantic containers in 'FF6+ ***/
        *:any(article, aside, nav, section) h1 { font-size: 2em; font-weight: bold; margin: 0.67em 0; }

        hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
        ins { background: #ff9; color: #000; text-decoration: none; }

        /* normalize */                                                                         /*** Addresses styling not present in IE6/7/8/9 ***/
        mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
        /* normalize */                                                                         /*** Corrects font family set oddly in IE6, S4/5, Chrome: h5bp.com/j ***/
        pre, code, kbd, samp { font-family: monospace, monospace; _font-family: 'courier new', monospace; font-size: 1em; }
        /* normalize */                                                                         /* Improve readability of pre-formatted text in all browsers */
        pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
        q { quotes: none; /* normalize */                                                       /*** Addresses CSS quotes not supported in IE6/7 ***/ }
        q:before, q:after { content: ""; content: none; /* normalize */                         /*** Addresses quote property not supported in S4 ***/ }
        small { font-size: 85%; }
        /* normalize */                                                                         /* Position subscript and superscript content without affecting line-height: h5bp.com/k */
        sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
        sup { top: -0.5em; }
        sub { bottom: -0.25em; }

    /* Base: lists
     * Also see Base: forms for further dl form styling
    */
        ul, ol {
            margin: 1em 0;
            padding: 0 0 0 40px;
        }
        dd {
            margin: 0 0 0 40px;
        }
        nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }

    /* Base: embedded content */
        img {
            border: 0; /* normalize */                                                          /*** Removes border when inside 'a' element in IE6/7/8/9 ***/
            -ms-interpolation-mode: bicubic; /* normalize */                                    /*** Improves image quality when scaled in IE7 ***/
            vertical-align: middle;
        }
        svg:not(:root) { overflow: hidden; /* normalize */                                      /*** Corrects overflow displayed oddly in IE9 ***/ }

    /* Base: figures */
        figure { margin: 0; /* normalize */                                                     /*** Addresses margin not present in IE6/7/8/9, S5, O11 ***/ }

    /* Base: forms */
        form { margin: 0; /* normalize */                                                       /*** Corrects margin displayed oddly in IE6/7 ***/ }
        form { }
        form dl { }
        form dt { }
        form dd { }
        fieldset {
            margin: 0;
            padding: 0;
            border: 0;
        }
        label { cursor: pointer; }
        legend {
            *margin-left: -7px; /* normalize */                                                 /*** Correct alignment displayed oddly in IE6/7 ***/
            padding: 0;
            border: 0; /* normalize */                                                          /*** Corrects color not being inherited in IE6/7/8/9 ***/
        }
        button, input, select, textarea {
            margin: 0; /* normalize */                                                          /*** Remove margins in FF3/4 S5 Chrome ***/
            vertical-align: baseline; *vertical-align: middle; /* normalize */                  /*** Define consistent vertical alignment display in all browsers ***/
            font-size: 100%; /* normalize */                                                    /*** Correct font-size not inheriting in all browsers ***/
        }
        input[type="text"], textarea, select {
            border: 1px solid #ccc; /* zui-normalize */                                         /*** If a background is set on inputs inconsistent inset defaults occur ***/
            background: #fff none; /* zui-normalize */                                          /*** If you are going to style some (e.g. invalid) you need to style them all ***/
        }
        button, input {
            *overflow: visible; /* normalize */                                                 /*** Correct inner spacing displayed oddly in IE6/7 ***/
            line-height: normal; /* normalize */                                                /*** Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet) ***/
        }
        table button, table input { *overflow: auto; /* normalize */                            /*** Reintroduce inner spacing in 'table' to avoid overlap and whitespace issues in IE6/7 ***/ }

        button, input[type="button"], input[type="reset"], input[type="submit"] {
            cursor: pointer; /* normalize */                                                    /*** Improves usability and consistency - Display hand cursor for clickable form elements ***/
            -webkit-appearance: button; /* normalize */                                         /*** Allow styling of clickable form elements in iOS ***/
        }

        /* normalize */                                                                         /* Consistent box sizing and appearance */
            input[type="checkbox"], input[type="radio"] { box-sizing: border-box; }
            input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
            input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }

        /* normalize */                                                                         /* Remove inner padding and border in FF3/4: h5bp.com/l */
        button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }

        textarea {
            overflow: auto; /* normalize */                                                     /*** Remove default vertical scrollbar in IE6/7/8/9 ***/
            vertical-align: top; /* normalize */                                                /*** Improves readability and alignment in all browsers ***/
            resize: vertical; /* h5bp */                                                        /* Allow only vertical resizing (maintain presentation) ***/
        }

        /* Colors for form validity */
        input:valid, textarea:valid {  }
        input:invalid, textarea:invalid {
            background: #f0dddd none;
            border: 1px solid #ccc;
        }

    /* Base: tables */
        table {
            border-collapse: collapse; border-spacing: 0; /* normalize */                   /*** Remove most spacing between table cells ***/
        }
        table caption {
            caption-side: bottom;
            margin: 9px 0 0 0;
            padding: 5px;
            border-top: 1px solid #ccc;
            font-size: 0.9em;
            font-style: italic;
        }
        thead { border-bottom: 1px solid #ccc; }
        thead tr { border-bottom: 1px solid #ccc; }
        tfoot {  }
        tbody {  }
        tr {  }
        tr:hover td { background: #eee none; }
        th, td {  }
        th { padding: 10px 5px; }
        td { vertical-align: top; padding: 5px 10px; border-bottom: 1px solid #eee; }

    /* Base: other */
        /* CSS3 "button" aka awesome button */
        .awesome, .awesome:visited {
            position: relative;
            display: inline-block;
            padding: 0.25em 9px;
            border: 1px solid #b8b8b8;
            border-radius: 3px;
            background: #fefefe none; /* Old browsers */
            background: linear-gradient(top, rgba(254,254,254,1) 0%,rgba(233,233,233,1) 57%,rgba(240,240,240,1) 100%); /* W3C */
            color: #777;
            font-family: 'Carme', sans-serif;
            line-height: 1;
            font-weight: bold;
            text-decoration: none;
            cursor: pointer;
        }
        .awesome:hover {
            border: 1px solid #afcf58;
            background: #CBE2A1 none; /* Old browsers */
            background: linear-gradient(top, rgba(249,249,245,1) 0%,rgba(203,226,161,1) 57%,rgba(205,228,165,1) 100%); /* W3C */
            color: #5f8f00;
            text-decoration: none;
        }
        .awesome:active { top: 1px; }

If this part is done well, even without layout, any marked up content dropped into a page with this stylesheet should already look like the branded content and hint at the overall design you are implementing.

Most importantly, any new content added later (e.g. via a plugin) is inherently styled to our design.

Step 3: Style core layout/chrome

Every website has an overall look we implemented in step 2, but every website also generally works off of a core design with several page variations. Instead of diving right into styling specific pages, we determine the common aspects of the layout across the design and style this base layout/chrome (i.e. branding and common navigation).

Every site has some kind of masthead and footer. It also generally has a most common width, margins, and styling for the actual content and sidebar(s).

Working with the zui HTML5 base markup we style that first. Header and Footer done. Set up columns of content and sidebars. Everything except dynamic content.

If this step is done well, in conjunction with the base we set in step 2, we have more than 75% of the work done to show the entire site. Any content dropped in now looks slick and pro conforming to the design specs.

/**
 * BASE: LAYOUT
 * Primary layout/chrome used on most pages
*/
    /* document container (i.e. layout/chrome + page) */
    #doc {  }
    .doc_pubdate { /* visuallyhidden in js */ }

    #hd_hd {
        width: 940px;
        margin: 0 auto;
    }

    /* doc header (i.e. layout/chrome) */
    #hd {
        position: relative;
        height: 71px;
        background: #fff url(hulu/hd.bg-tile.png) repeat-x scroll 0 2px;
    }
    #hd_hd {
        position: relative;
    }
    #hd_hgroup {
        height: 43px;
    }
    #hd_brand {
        width: 97px;
        height: 42px;
        margin: 0 0 0 10px;
        border-bottom: none;
        background: transparent url(hulu/logo.jpg) no-repeat scroll 0 0;
        text-indent: -9999em;
    }
    #hd_brand_tag { display: none; }

    /* Primary menu */
    #hd_nav_a {
        height: 32px;
    }
    #hd_nav_a a {
        color: #fff;
        font-family: 'Carme', sans-serif;
        font-size: 1.15em;
        line-height: 28px;
        text-shadow: 1px 1px 2px #000000;
    }
    #hd_nav_a a:hover {
        color: #99cd21;
        text-decoration: none;
    }
    #hd_nav_a .nav_list a {
        display: block;
        width: 100%;
        height: 100%;
    }
    #hd_nav_a .nav_list {
        height: 28px;
        margin: 0;
        padding: 0;
    }
    #hd_nav_a li {
        position: relative;
        float: left;
        min-width: 70px;
        height: 28px;
        margin: 0 5px 0 0;
        padding: 0px 5px;
        border: none;
        border-radius: 5px 5px 0 0; /*5px 5px 0 0*/
        text-align: center;
        behavior: url(/PIE.htc);
    }
    #hd_nav_a li:hover {
        border: none;
        border-radius: 5px 5px 0 0;
        background: rgb(102,102,102); /* Old browsers */
        background: linear-gradient(top, rgba(102,102,102,1) 0%,rgba(59,59,59,1) 100%); /* W3C */
    }

    /* Secondary menu */
    #hd_nav_b {
        position: absolute;
        top: 5px;
        left: 120px;
        height: 37px;
    }
    #hd_nav_b a {
        display: block;
        height: 30px;
        padding: 7px 10px 0;
        color: #444;
        font-family: 'Carme', sans-serif;
        font-size: 1.8em;
    }
    #hd_nav_b a:hover {
        background: #f3f4f3; /* Old browsers */
        background: linear-gradient(top, rgba(250,250,250,1) 0%,rgba(235,235,234,1) 100%); /* W3C */
        color: #99cd21;
        text-decoration: none;
    }
    #hd_nav_b a.current, #hd_nav_b a:hover.current {
        color: #444;
        background: rgb(243,244,243); /* Old browsers */
        background: linear-gradient(top, rgba(243,244,243,1) 0%,rgba(199,200,199,1) 100%); /* W3C */
    }
    #hd_nav_b li {
        float: left;
        min-width: 80px;
        height: 100%;
        margin: 0 1px 0 0;
        padding: 0;
        font-size: 0.8em;
    }

    /* Tertiary menu */
    #hd_nav_c {
        position: absolute;
        top: 15px;
        right: -5px;
        height: 37px;
    }
    #hd_nav_c li {
        float: left;
        margin: 0 5px 0 5px;
    }
    #hd_nav_c li a:before {
        float: left;
        margin: 0 5px 0 5px;
        content: " | ";
    }
    #hd_nav_c li:first-child a:before {
        content: none;
    }

    /* Page (i.e. layout w/o layout/chrome) */
    #pg {  }

    /* Main content container of page */
    #mn {
        width: 940px;
        margin: 54px auto 36px;
    }
    #mn_mn {  }
    #mn_hd {  }
    #mn_hd h1, #mn_hd h2 {
    }
    #mn_entry {  }
    #mn_ft {  }

    /* Content(s) of main page */
    .article { margin: 0 0 54px; }
    .article_hd {
        padding: 18px;
    }
    .article_pubdate { /* visuallyhidden in js */ }
    .article_byline {  }
    .article_entry { padding: 18px; }
    .article_entry h1, .article_entry h2, .article_entry h3, .article_entry h4, .article_entry h5, .article_entry h6 {
        text-shadow: 0 1px 1px #ddd;
    }
    .article_ft { padding: 18px; }

    /* Sidebar of main page */
    #sb {
        display: none;
        float: left;
        position: relative;
        width: 200px;
        margin: 0 0 36px;
        padding: 18px;
        font-size: 0.9em;
        /*line-height: 18px;*/
    }
    #sb_sb {  }
    #sb_hd {  }

    .sb_aside {  }
    .sb_aside_hd {  }
    .sb_aside_ft {  }

    /* doc footer (i.e. layout/chrome) */
    #ft {
        clear: both;
        position: relative;
        padding: 18px 18px 36px;
        background: #fafafa; /* Old browsers */
        background: linear-gradient(top, rgba(250,250,250,1) 0%,rgba(235,235,234,1) 100%); /* W3C */
        color: #999;
        font-size: 0.8em;
    }
    #ft_ft {
        width: 940px;
        margin: 0 auto;
    }
    #ft_brand { display: none;  }
    #ft_brand_tag { display: none; }
    #ft_legal {
        clear: both;
        float: right;
        margin: 36px 0 0;
    }
    #ft_nav_a {  }
    #ft_nav_b {  }
    #ft_nav_a li, #ft_nav_b li {
        display: inline-block;
        margin: 0 18px 0 0;
    }

Step 4: Style specific layouts/content

Here we are just harnessing the full power of the “cascading” part of CSS.

It’s time to style the rest of our pages. Except now we don’t need to declare a whole lot to make wildly different layouts. Adjust a couple of floats and margins, add a background here, drop some formatting there, merely adjusting a few styles and countless layout variations just happen without having to explicitly continuing to declare margins, font-sizes or line-heights (except where the unique layout deviates from the core layout).

In this section is created the home page layout, the section index featured layout, ad blocks, promotional blocks, or whatever home cooked design/app content you’ve got going on. However, if you are using a CMS like WordPress, we aren’t styling the blog or all those widgets just yet.

/**
 * DEMO UNIQUE LAYOUT(s)
 * While these demonstrate flexibility and control over this boilerplate markup structure
 * You would of course not have a page that left in content and structure that didn't need
 * to be there. It just made the demo easier to do working with one master markup structure.
*/

    /* Layout: intro */
    .layout_intro #hd,
    .layout_intro #featured,
    .layout_intro .promoted,
    .layout_intro #mn_hd,
    .layout_intro .article,
    .layout_intro #ft {
        display: none;
    }
    .layout_intro #article_zui_html_intro {
        display: block;
    }

    /* Layout: Landing page */
    .layout_landing #pg {
        display: none;
    }

    /* Layout: Blog Index */
    .layout_blog_index #featured,
    .layout_blog_index .promoted,
    .layout_blog_index .article_entry > * {
        display: none;
    }
    .layout_blog_index .article,
    .layout_blog_index .article_entry {
        clear: both;
    }
    .layout_blog_index .article_hd h1,
    .layout_blog_index .article_hd .article_by_line {

    }
    .layout_blog_index .article_entry > *:first-child,
    .layout_blog_index .article_entry > *:first-child + p {
        display: block !important;
    }

    /* Layout Single Article */
    .layout_single_article #featured,
    .layout_single_article .promoted,
    .layout_single_article #mn_hd,
    .layout_single_article #mn_entry .article {
        display: none;
    }
    .layout_single_article #mn_entry #article_zui_html_intro {
        display: block !important;
    }
/* Primary content to promote */
    /* For hulu demo the featured block was
       exploited to simulate the main video
       viewing area. */
    #featured {
        position: relative;
        height: 350px;
        margin: 0 0 5em;
        background: #000001; /* Old browsers */
        background: linear-gradient(top, rgba(0,0,0,1) 0%,rgba(57,57,57,1) 100%); /* W3C */
        color: #eee;
    }
    #featured_featured {
        width: 800px;
        height: 350px;
        margin: 0 auto;
        background: #000;
    }
    #featured_hd {
        padding: 50px 50px 0 500px;
    }
    #featured_hd h1 { border-bottom: none; color: #eee; }
    #featured_entry {
        padding: 0 50px 0 500px;
    }
    #featured_ft {
        position: absolute;
        bottom: -27px;
        left: 0px;
        width: 100%;
        height: 27px;
        z-index: 99;
        background: #ccc; /* Old browsers */
        background: linear-gradient(top, rgba(201,201,201,1) 0%,rgba(127,127,127,1) 100%); /* W3C */
    }

/* Secondary content to promote */
    .promoted { width: 940px; margin: 4em auto 2em; }
    .promoted_promoted {  }
    .promoted_hd { display: none !important; }
    .promoted_entry {  }
    .promoted_ft { clear: both; }
    .promoted_item {
        position: relative;
        float: left;
        width: 26%;
        height: 200px;
        margin: 1.5em 3% 2em 0;
        padding: 0 2% 1em;
        border-top: 1px solid #ccc;
        border-left: 1px solid #ccc;
    }
    .promoted_item h2 {
        margin: -1.5em 0 1em;
    }
    .ie7 .promoted_item h2 {
        margin: 0 0 1em;
    }
    .promoted_item .awesome {
        position: absolute;
        bottom: 0;
        right: 0;
    }

Step 5: Style CMS/Library specific content

To keep things organized and because every CMS is different we treat these as super specific layouts and content with their own subsection of declarations if you will. This way we harness css specificity hopefully being able to utilize our zui HTML5 base markup for all the bulk layouts and then let the CMS specific (and often uneditable selectors) further tweak everything.

Besides fully custom development I work with WordPress almost exclusively. So here I drop a stock set of selectors mostly commonly used by the WordPress community and style these things out inside and in conjunction with the base markup.

For example, we already have our articles handled within the base markup, so I just let WordPress also add in all the custom classes for the body and on the posts themselves. So my general layouts and sidebar widgets are already rough formatted without even dealing with specific WordPress context. But on the blog index maybe you want a border between all the articles, so I just add in the minimal styles necessary to adjust the article.post accordingly. But I’m not thinking about the margins or layout anymore because all that was done.

Here are some excerpted example WordPress declarations I use…

/*
 * WP COMMON (and non-semantic helpers
 * WP general http://codex.wordpress.org/CSS
 * body_class() http://codex.wordpress.org/Template_Tags/body_class
 * post_class() http://codex.wordpress.org/Template_Tags/post_class
 * comment_class() http://codex.wordpress.org/Template_Tags/comment_class
 * Also shared classes for consistency
 */

    /* images and captions */
    .aligncenter {
       display: block;
       margin-left: auto;
       margin-right: auto;
    }
    .alignleft {
       float: left;
       margin: 0 18px 18px 0;
       vertical-align: bottom;
    }
    .alignright {
       float: right;
       margin: 0 0 18px 18px;
       vertical-align: top;
    }
    .wp-caption {
        font-size: 0.9em;
        font-style: italic;
        line-height: 1.3em;
    }
    .wp-caption-text { }
    .more-link { /* assigned to anchor on excerpt, auto excerpt, and more */
        display: block;
        margin: 18px 0;
    }

    .size-auto, .size-full, .size-large, .size-medium,
    .attachment .wp img, .wp_entry img, .post-thumbnail-single .post-thumbnail-single /*img*/ {
        max-width: 100%; /* prevent images larger than layout from "popping out" */
        height: auto;
    }

/*
 * WP Widgets
 */

    /* WP Widgets: searchform.php */
    .widget input[type="text"] { width: 110px !important;  }

    /* WP widget: categories */
    .widget_categories { }
    .cat-item { margin: 2px 0 0; color: #999; font-size: 0.85em; line-height: 1.7em; /*color: #666; font-size: 0.8em;*/  }
    .cat-item a { font-size: 1.3em;  }
    .cat-item .cat-item { font-size: 0.95em;  }
    .cat-item .cat-item a { font-size: 1em;  }

    /* WP widget: calendar */
    #wp-calendar {
        width: 100%;
        margin: 10px auto 0;
        padding: 0;
        empty-cells: show;
    }
    #wp-calendar a { display: block; }
    #wp-calendar #next a { padding-right: 10px; text-align: right; }
    #wp-calendar #prev a { padding-left: 10px; text-align: left; }
    #wp-calendar caption, #wp-calendar th, #wp-calendar thead th, #wp-calendar td, #wp-calendar tfoot td, #wp-calendar td.pad {
        background-color: #bbbbbc;
        border: 1px solid #bbbbbc;
        text-align: center;
    }
    #wp-calendar caption { caption-side: top; }
    #wp-calendar th, #wp-calendar thead th, #wp-calendar td, #wp-calendar tfoot td { padding: 3px 0; }
    #wp-calendar thead th { background-color: #999998; }
    #wp-calendar td { background-color: #fff; }
    #wp-calendar tfoot { position: relative; }

    /* WP Widgets: menu */
    .menu .current-menu-item,
    .nav-menu .current-menu-item,
    .current_page_parent.menu-item-1188 /* custom selector for how blog appears in menu */ {
        font-weight: bold;
    }

    .menu .current-menu-item .menu-item,
    .nav-menu .current-menu-item .menu-item {
        font-weight: normal;
    }

Step 6: Style your javascript plugins

Wherever a plugin is used in a global context it doesn’t make any sense to make extraneous http requests to the server just to retrieve stylesheets with only a few declarations. So unless a plugin is really only used on one page just put the styles in your core stylesheet so it is cached and ready to go at a moments notice.

This works in conjunction with the HTML5 BoilerPlate convention of having a single plugins.js file for these same globally utilized plugins.

Here is an excerpt of the sociable plugin styling…

/**
 * PLUGINS
*/

    /**
     * Sociable
    */
        div.sociable { float: right; margin-top: -30px; }
        span.sociable_tagline { position: relative; }
        span.sociable_tagline span { display: none; }
        .sociable span { display: block; }
        .sociable ul {
            display: inline;
            margin: 0 !important;
            padding: 0 !important;
        }
        .sociable ul li {
            background: none;
            display: inline !important;
            list-style-type: none;
            margin: 0;
            padding: 1px;
        }
        .sociable ul li:before { content: ""; }
        .sociable img {
            float: none;
            width: 16px;
            height: 16px;
        }
        .sociable-hovers {
            opacity: .4;
            -moz-opacity: .4;
            filter: alpha(opacity=40);
        }
        .sociable-hovers:hover {
            opacity: 1;
            -moz-opacity: 1;
            filter: alpha(opacity=100);
        }

Step 7: Non-semantic helper classes

These are all those declarations that make life happier and easier for everybody. Clearing, fixing containers containing only floated content, and of course some of the tools we use to present content extra semantic content only to screen readers and bots such as .visuallyhidden

/**
 * HELPER CLASSES (non-semantic)
*/
    /* Clearing */
        .clear { clear: both; }
        /* Contain floats: h5bp.com/q */
        .clearfix:before, .clearfix:after { content: ""; display: table; }
        .clearfix:after { clear: both; }
        .clearfix { zoom: 1; }
    /* For image replacement */
        .ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; }
        .ir br { display: none; }
    /* Show/Hide */
        /* Hide from both screenreaders and browsers: h5bp.com/u */
        .hidden { display: none !important; visibility: hidden; }
        /* Hide only visually, but have it available for screenreaders: h5bp.com/v */
        .visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
        /* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
        .visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
        /* Hide visually and from screenreaders, but maintain layout */
        .invisible { visibility: hidden; }
    /* Size adjustment - might be deprecated */
        .small { font-size: 0.9em; }
        .smaller { font-size: 0.85em; }
        .large { font-size: 1.05em; }
        .larger { font-size: 1.15em; }
    /* Positioning and style adjustment */
        .center { text-align: center; margin: 0 auto; }

Step 8: media queries and mobile presentation

This is my current area of research on taking our “all” styles we just defined and doing one more round of tweaks to make an ideal presentation of the same content on mobile devices. This article will be updated as necessary to reflect any boilerplate best practices as they are discovered and utlized. But for the most part adequate mobile presentation can be done by simply thinking of these mobile-centric media queries as just another unique layout like step 4 above.

Apart from the mobile environment, we also set our print styles and other accessibility styles as necessary.

/* ==|== media queries ======================================================
   PLACEHOLDER Media Queries for Responsive Design.
   These override the primary ('mobile first') styles
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 480px) {
  /* Style adjustments for viewports 480px and over go here */

}

@media only screen and (min-width: 768px) {
  /* Style adjustments for viewports 768px and over go here */

}

/* ==|== print styles =======================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
  * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */
  a, a:visited { text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  /* Don't show links for images, or javascript/internal links */
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; } /* h5bp.com/t */
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; }
}

/**
 * Non-Grade-A handheld stylesheet
 *
 * If you are specifically targeting less enabled mobile browsers
 * Includes HTML5 ✰ Boilerplate base
 */
@media handheld {
    * {
      float: none;       /* Screens are not big enough to account for floats */
      background: #fff;  /*  As much contrast as possible */
      color: #000;
    }

    /* Slightly reducing font size to reduce need to scroll */
    body { font-size: 80%; }
}

@media speech, aural {
    /* research needs done on this; not sure what is up with the CSS2 aural media type */
}

@media tty {

}

@media braille, embossed {
    /* not sure how we are going to do this; embossed would probably be it's own */
}

Putting it altogether

Obviously since this is a boilerplate I have a template with all of the base selectors, including the layout since I know in advance what all the base markup looks like and what it’s selectors are. Most of the selectors start empty except for a basic two column layout and all the colors are set to common browser defaults.

Most of these strategies I have been using personally for a long time, but the more I researched HTML5 and rich semantics as well as deciding it was time to start using as much CSS3 as was feasible it became evident that having a clear markup/css pattern was necessary. It stands to reason if I am not overthinking semantics, layout, or which CSS3 is safe to use, I can start thinking about how I am going to implement better responsive design, new data storage schemes, web workers, and all the other goodness HTML5 has to offer.

Learn more about zui HTML5/CSS3 boilerplate.