Skip to content


Subversion checkout URL

You can clone with
Download ZIP
124 lines (92 sloc) 5.41 KB
<!DOCTYPE html>
<html lang="en" class="page {{ }}">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0">
<!-- Prefetch DNS for external assets (Twitter widgets etc). -->
<link rel="dns-prefetch" href="//">
<link rel="dns-prefetch" href="//">
<link rel="dns-prefetch" href="//">
<link rel="dns-prefetch" href="//">
<link rel="dns-prefetch" href="//">
<link rel="dns-prefetch" href="//">
<link rel="dns-prefetch" href="//">
<link rel="dns-prefetch" href="//">
<title>{{ page.title }} &ndash; CSS Wizardry &ndash; CSS, OOCSS, front-end architecture, performance and more, by Harry Roberts</title>
<link rel="stylesheet" href=",500,300italic">
<link rel="stylesheet" href="/css/csswizardry.min.css">
<link rel="shortcut icon" href="/icon.png">
<link rel="apple-touch-icon-precomposed" href="/icon.png">
<meta name="apple-mobile-web-app-title" content="csswizardry">
<meta name="description" content="Articles on CSS, OOCSS, front-end architecture, scalability and performance.">
<!-- Ad Packs -->
var bsa = document.createElement('script');
bsa.type = 'text/javascript';
bsa.async = true;
bsa.src = '';
<!-- Hidden preload `div` to fetch images before CSS needs them. -->
<div class="ಠ_ಠ">
<img src="/img/css/sprites/main.svg" alt="">
<div class="wrapper">
<header class="page-head">
<a href="/" class="site-logo">
<img src="/img/dot.gif" alt="CSS Wizardry" class="s s--csswizardry-logo">
<ul class="nav site-nav">
<li class="site-nav__home"><a href="/">Home</a></li><!--
--><li class="site-nav__about"><a href="/about/">About</a></li><!--
--><li class="site-nav__speaking"><a href="/speaking/">Speaking</a></li>
</header><!-- /page-head -->
<div class="gw">
<div class="g one-whole desk-six-tenths">
{{ content }}
<div class="g one-whole desk-three-tenths desk-push--one-tenth">
<hr class="hide--desk">
<p>Hi there, I’m Harry. I am a <b>designer</b>, <b>developer</b>, <b>writer</b> and <b>speaker</b> from the UK; I work as a <b>Senior UI Developer</b> for <b>BSkyB</b>. I <a href="/archive/">write</a>, <a href="">tweet</a>, <a href="">speak</a> and <a href="">share code</a> about authoring and scaling CSS for big websites.</p>
<p><a href="" class="twitter-follow-button" data-show-count="true" data-lang="en">Follow @csswizardry</a></p>
<ul class="block-list">
<a href="">
<img src="/img/content/inuit.css-logo.png" alt="inuit.css" class="logo">
<a href="">inuit.css</a> is a powerful, scalable, Sass-based, BEM, OOCSS framework.
<div class="islet ad">
<div id="bsap_1255689" class="bsarocks bsap_2ef959fa3a5535d37060575e733650a1"></div>
<p><a href="" id="bsap_aplink">via Ad Packs</a></p>
</div><!-- /wrapper -->
<footer class="page-foot"><div class="wrapper">
<p>&copy; 2013 <a href="">Harry Roberts</a>.
Built with <a href="">inuit.css</a>
and <a href="">Jekyll</a>.
The source code of this blog is <a href="">hosted on GitHub</a>.<br>
You should <a href="/feed.xml">grab the RSS feed</a> and <a href="">follow me on Twitter</a>.</p>
</div></footer><!-- /wrapper /page-foot -->
<div class="strip"></div>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);;js.src="//";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-1856861-4']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
Jump to Line
Something went wrong with that request. Please try again.