I’ve mashed up the HTML code of HTML5 Boilerplate and WordPress to come up with something useful for my projects at International Red.
Take a look if this will suit yours.
Inside the <head>
[code lang=”html” highlight=”6,10,11,14-20″]
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<link rel="shortcut icon" href="img/favicon.ico">
<link rel="profile" href="http://gmpg.org/xfn/11">
<script src="js/vendor/modernizr-2.6.2.min.js"></script>
<!–Facebook Open Graph–>
<meta property="og:title" content="">
<meta property="og:type" content="website">
<meta property="og:url" content="">
<meta property="og:image" content="">
<meta property="fb:admins" content="">
<meta property="og:description" content="">
</head>
[/code]
Significant additions include:
- initial-scale=1.0 in <meta name=”viewport”> – fixes some background image bugs
- favicon.ico in <link rel=”shortcut icon”> – the default in H5BP does not appear in browsers
- <link rel=”profile”> from WordPress
- Facebook Open Graph <meta> tags – it could be removed upon integration with WordPress
Inside the <body>
[code lang=”html” highlight=”6,7-75″]
<body>
<!–[if lt IE 7]>
<p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
<![endif]–>
<div id="page" class="home-page hfeed">
<header id="branding" role="banner">
<div id="header-cr">
<div id="header-ct">
<hgroup>
<h1 id="site-title"><a href="#">Site title</a></h1>
<h2 id="site-desc">Site description</h2>
</hgroup>
<nav id="access" role="navigation">
<h3 class="assistive-text">Main Menu</h3>
<div class="skip-link"><a class="assistive-text" href="#primary" title="Skip to primary content">Skip to primary content</a></div>
<div class="skip-link"><a class="assistive-text" href="#secondary" title="Skip to secondary content">Skip to secondary content</a></div>
<ul id="main-nav" class="nav">
<li id="home-nav current"><a href="#">Home</a></li>
<li id="about-nav"><a href="#">About</a></li>
</ul>
<ul id="secondary-nav" class="nav">
<li id="contact-nav"><a href="#">Contact</a></li>
<li id="fb-nav"><a href="#">Facebook</a></li>
</ul>
</nav>
</div><!–content–>
</div><!–container–>
</header><!–#branding–>
<div id="main" role="banner">
<div id="main-cr">
<div id="main-ct">
<div id="primary">
<div id="primary-cr">
<div id="primary-ct">
<div id="content" role="main">
Main content
</div>
</div><!–content–>
</div><!–container–>
</div><!–#primary–>
<div id="secondary">
<div id="secondary-cr">
<div id="secondary-ct">
<div id="aside" role="complementary">
Complementary content
</div>
</div><!–content–>
</div><!–container–>
</div><!–#secondary–>
</div><!–content–>
<div id="primary">
<div id="primary-cr">
<div id="primary-ct">
<div id="content" role="main">
</div>
</div><!–content–>
</div><!–container–>
</div><!–content–>
</div><!–#primary–>
</div><!–container–>
</div><!–#branding–>
<footer id="colophon" role="contentinfo">
<div id="header-cr">
<div id="header-ct">
<nav id="footer-access">
<ul id="footer-links" class="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
</ul>
</nav>
<div class="credits">
<p id="copyright">© 2012 Site title. All rights reserved.</p>
<p id="intl-red">Site by <a href="http://international-red.com/" target="_blank">International Red</a></p>
</div>
</div><!–content–>
</div><!–container–>
</footer><!–#colophon–>
</div><!–#page–>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>window.jQuery || document.write(‘<script src="js/vendor/jquery-1.8.2.min.js"><\/script>’)</script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<!– Google Analytics: change UA-XXXXX-X to be your site’s ID. –>
<script>
var _gaq=[[‘_setAccount’,’UA-XXXXX-X’],[‘_trackPageview’]];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.src=(‘https:’==location.protocol?’//ssl’:’//www’)+’.google-analytics.com/ga.js’;
s.parentNode.insertBefore(g,s)}(document,’script’));
</script>
</body>
[/code]
Significant additions include:
- Header – Content – Footer structure
- -cr suffix is “container” – should contain the width of the block
- -ct suffix is “content” – should contain the padding of the block
If you would notice the structure of inner modules, it is Module – Container – Content.
For example, a search box. You would style it this way:
[code lang=”html”]
<div id="search-module" class="module">
<div class="module-cr">
<div class="module-ct">Search content</div>
</div>
</div>
[/code]
In the stylesheet:
[code lang=”css”]
.module {float:left;}
.module-cr {
margin:0 auto;
width:50%;
background-color:white;
}
.module-ct {padding:1em;}
[/code]
In this way, the width of the block is not dependent on its padding and vice versa. The block becomes more modular and you should be able to plaster it anywhere in your site.
Leave a Reply