Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

commit jekyll

  • Loading branch information...
commit e7c7dd88d240d2f7ef070d8c1b07dd83d53163a2 1 parent 5965e09
@dodola authored
Showing with 24,070 additions and 0 deletions.
  1. +3 −0  .gitignore
  2. +131 −0 404.html
  3. +1 −0  CNAME
  4. +12 −0 README.md
  5. +6 −0 _config.yml
  6. +127 −0 _layouts/default.html
  7. +20 −0 _layouts/post.html
  8. +308 −0 _plugins/sitemap_generator.rb
  9. +197 −0 _posts/2009-12-22-typographic-work-planner.md
  10. +151 −0 _posts/2010-01-26-a-reconsiderationin-defence-of-b-and-i-or-people-fear-what-they-dont-understand.md
  11. +136 −0 _posts/2010-01-26-a-suitable-alternativeon-proper-use-of-alt-attributes.markdown
  12. +24 −0 _posts/2010-01-27-the-importance-of-proper-punctuation.markdown
  13. +80 −0 _posts/2010-01-30-the-three-types-of-dash.md
  14. +184 −0 _posts/2010-01-31-iphone-css-tips-for-building-iphone-websites.markdown
  15. +359 −0 _posts/2010-02-02-css-bar-charts-styling-data-with-css3-and-progressive-enhancement.markdown
  16. +86 −0 _posts/2010-02-04-upside-down-domainsregistering-an-international-domain-name.markdown
  17. +112 −0 _posts/2010-02-11-mutiple-column-lists-using-one-ul.markdown
  18. +123 −0 _posts/2010-02-19-typographic-phrases-or-how-to-turn-sayings-geeky.markdown
  19. +31 −0 _posts/2010-02-24-type-tipsquick-tips-on-all-things-web-typography.markdown
  20. +36 −0 _posts/2010-02-28-suzanna-haworth-redesign.markdown
  21. +48 −0 _posts/2010-02-28-usability-in-everyday-items.markdown
  22. +83 −0 _posts/2010-03-02-a-quick-note-on-border-radius.markdown
  23. +113 −0 _posts/2010-03-02-moving-forward-is-holding-us-back.markdown
  24. +58 −0 _posts/2010-03-08-30-days-without-an-iphone.markdown
  25. +135 −0 _posts/2010-04-07-building-sites-without-using-ids-or-classes.markdown
  26. +122 −0 _posts/2010-08-09-semantics-and-sensibility.markdown
  27. +105 −0 _posts/2010-08-31-zebra-striping-rows-and-columns.markdown
  28. +106 −0 _posts/2010-09-05-set-then-unset.markdown
  29. +51 −0 _posts/2010-09-16-a-quick-counter-to-the-digital-agencies-of-the-future.markdown
  30. +79 −0 _posts/2010-09-27-keeping-code-clean-with-content.markdown
  31. +40 −0 _posts/2010-09-29-css-wizardry-personal-content-and-getting-things-for-free.markdown
  32. +28 −0 _posts/2010-10-04-in-response-to-invisible-captcha-to-prevent-form-spam.markdown
  33. +223 −0 _posts/2010-10-05-designing-in-the-browser-leads-to-better-quality-builds.markdown
  34. +19 −0 _posts/2010-10-06-good-developers-vs-good-salespeople.markdown
  35. +56 −0 _posts/2010-10-11-hyperbolic-title-using-the-word-sexy-to-describe-some-code.markdown
  36. +107 −0 _posts/2010-10-13-your-logo-is-an-image-not-a-h1.md
  37. +28 −0 _posts/2010-10-19-things-are-changing-at-css-wizardry.markdown
  38. +35 −0 _posts/2010-10-20-i-hate-that-i-love-writer.markdown
  39. +83 −0 _posts/2010-10-20-unsung-heroes.markdown
  40. +650 −0 ...le-progressively-enhanced-mobile-optimised-progress-bar-bonus-style-the-numbers-in-an-ordered-list.markdown
  41. +87 −0 _posts/2010-11-29-design-and-education.markdown
  42. +44 −0 _posts/2010-11-30-improving-css-tooltips.markdown
  43. +209 −0 _posts/2010-12-02-let-it-snow.markdown
  44. +32 −0 _posts/2010-12-02-tweet-this.markdown
  45. +158 −0 _posts/2010-12-06-css-camel-case-seriously-sucks.markdown
  46. +45 −0 _posts/2010-12-08-the-implementation-appreciation-rule.markdown
  47. +60 −0 _posts/2010-12-18-simplified-page-borders-in-pure-css.md
  48. +86 −0 _posts/2010-12-20-remote-controlled-hyperlinks-or-multiple-links-in-one-hyperlink.md
  49. +84 −0 _posts/2010-12-21-media-queries-handier-than-you-think.md
  50. +62 −0 _posts/2010-12-21-mo-robust-paragraph-indenting.md
  51. +48 −0 _posts/2011-01-05-a-new-year-a-new-css-wizardry.markdown
  52. +187 −0 _posts/2011-01-06-the-real-html5-boilerplate.md
  53. +34 −0 _posts/2011-01-07-scrolling-overflowed-content-in-ios.markdown
  54. +41 −0 _posts/2011-01-10-a-new-year-a-new-css-wizardry-ii.markdown
  55. +96 −0 _posts/2011-01-11-html-elements-tags-and-attributes.markdown
  56. +137 −0 _posts/2011-01-12-maximising-hit-area-for-usability.markdown
  57. +38 −0 _posts/2011-01-18-client-respect.markdown
  58. +315 −0 _posts/2011-01-23-html5-and-text-level-semantics.markdown
  59. +30 −0 _posts/2011-01-23-link-recreating-the-lukes-beard-social-icons-with-css3.markdown
  60. +70 −0 _posts/2011-01-23-using-the-body-element-as-a-wrapper.markdown
  61. +83 −0 _posts/2011-01-29-create-a-centred-horizontal-navigation.md
  62. +56 −0 _posts/2011-01-31-forget-responsive-web-design.md
  63. +25 −0 _posts/2011-02-03-announcing-in-focus.markdown
  64. +35 −0 _posts/2011-02-06-in-focus-a-case-study.markdown
  65. +118 −0 _posts/2011-02-09-css-powered-ribbons-the-clean-way.md
  66. +414 −0 _posts/2011-02-17-creating-a-pure-css-dropdown-menu.markdown
  67. +232 −0 _posts/2011-02-17-pure-css3-accordion.md
  68. +255 −0 _posts/2011-02-22-mobile-business-card.markdown
  69. +46 −0 _posts/2011-03-01-problems-with-the-sans-serif-hack.md
  70. +224 −0 _posts/2011-03-14-coding-up-a-semantic-lean-timeline.md
  71. +23 −0 _posts/2011-03-14-link-technical-web-typography-guidelines-and-techniques.markdown
  72. +77 −0 _posts/2011-03-15-ideas-of-march.markdown
  73. +21 −0 _posts/2011-04-20-introducing-inuit-css.markdown
  74. +88 −0 _posts/2011-05-18-on-negative-hovers.md
  75. +37 −0 _posts/2011-05-24-jquery-placeholder-plugin-polyfill.markdown
  76. +63 −0 _posts/2011-05-31-font-sizing-with-rem-could-be-avoided.md
  77. +145 −0 _posts/2011-06-03-annotated-figures-in-html5-and-css.md
  78. +25 −0 _posts/2011-06-05-dibi-2011.markdown
  79. +75 −0 _posts/2011-06-11-introducing-igloos-inuit-css-gets-plugins.markdown
  80. +47 −0 _posts/2011-06-18-styling-alt-text-on-images.md
  81. +113 −0 _posts/2011-06-19-what-is-inuit-css.markdown
  82. +74 −0 _posts/2011-06-20-namespacing-fragment-identifiers.md
  83. +48 −0 _posts/2011-06-28-fluid-grid-calculator.markdown
  84. +67 −0 _posts/2011-07-16-responsive-images-right-now.md
  85. +25 −0 _posts/2011-07-25-net-magazine-awards-nominee.markdown
  86. +38 −0 _posts/2011-07-31-borders-on-responsive-images.md
  87. +14 −0 _posts/2011-07-31-hry-rbrts-me.markdown
  88. +62 −0 _posts/2011-08-02-more-logo-markup-tips.md
  89. +48 −0 _posts/2011-08-08-updated-cv.markdown
  90. +142 −0 _posts/2011-08-18-good-developers-are-illusionists.markdown
  91. +198 −0 _posts/2011-08-23-building-better-grid-systems.md
  92. +25 −0 _posts/2011-08-24-two-titillating-table-tips.markdown
  93. +79 −0 _posts/2011-09-11-when-using-ids-can-be-a-pain-in-the-class.md
  94. +101 −0 _posts/2011-09-13-do-designers-need-to-code.md
  95. +46 −0 _posts/2011-09-17-ordered-and-numbered-lists-the-differences.md
  96. +180 −0 _posts/2011-09-17-writing-efficient-css-selectors.md
  97. +140 −0 _posts/2011-09-22-the-nav-abstraction.md
  98. +128 −0 _posts/2011-10-16-the-island-object.md
  99. +166 −0 _posts/2011-10-18-reset-restarted.md
  100. +58 −0 _posts/2011-10-25-build-along-testing-the-water.md
  101. +112 −0 _posts/2011-10-27-the-css-wizardry-build-along-is-go.markdown
  102. +220 −0 _posts/2011-10-31-fully-fluid-responsive-css-carousel.md
  103. +62 −0 _posts/2011-11-02-sam-penrose-design-process-and-write-up.md
  104. +36 −0 _posts/2011-11-03-css-wizardry-build-along-1.md
  105. +117 −0 _posts/2011-11-05-build-along-1-reflection-and-reasoning.md
  106. +85 −0 _posts/2011-11-08-create-a-notched-current-state-nav.md
  107. +130 −0 _posts/2011-12-07-measuring-and-sizing-uis-2011-style.md
  108. +42 −0 _posts/2011-12-11-on-html-and-css-best-practices.md
  109. +38 −0 _posts/2012-02-12-breaking-good-habits-the-digital-barn.md
  110. +185 −0 _posts/2012-02-29-pragmatic-practical-font-sizing-in-css.md
  111. +198 −0 _posts/2012-03-13-hacker-news-rebuttal.md
  112. +17 −0 _posts/2012-04-16-comments-on-css-wizardry.md
  113. +36 −0 _posts/2012-04-17-introducing-faavorite.md
  114. +304 −0 _posts/2012-04-20-my-html-css-coding-style.md
  115. +222 −0 _posts/2012-04-28-the-single-responsibility-principle-applied-to-css.md
  116. +89 −0 _posts/2012-04-29-front-trends-2012.markdown
  117. +139 −0 _posts/2012-05-15-keep-your-css-selectors-short.md
  118. +128 −0 _posts/2012-06-12-single-direction-margin-declarations.md
  119. +212 −0 _posts/2012-06-21-the-open-closed-principle-applied-to-css.md
  120. +87 −0 _posts/2012-07-16-quasi-qualified-css-selectors.md
  121. +159 −0 _posts/2012-07-17-shoot-to-kill-css-selector-intent.md
  122. +24 −0 _posts/2012-07-19-video-breaking-good-habits-front-trends-2012.markdown
  123. +50 −0 _posts/2012-08-07-tags-in-css-files.md
  124. +46 −0 _posts/2012-09-10-canvas-conf-2012.markdown
  125. +134 −0 _posts/2012-09-30-inuit-css-v4-oocss-sass-and-more.markdown
  126. +47 −0 _posts/2012-10-14-announcing-pr-ofile-me.md
  127. +52 −0 _posts/2012-10-16-a-classless-class-on-using-more-classes-in-your-html.md
  128. +328 −0 _posts/2012-11-20-code-smells-in-css.md
  129. +159 −0 _posts/2012-12-06-my-git-workflow-for-inuit-css.md
  130. +40 −0 _posts/2012-12-09-open-sourceome.md
  131. +158 −0 _posts/2012-12-21-a-new-css-wizardry.md
  132. +30 −0 _posts/2013-01-15-discussion-via-branch.md
  133. +608 −0 _posts/2013-01-20-front-end-performance-for-web-designers-and-front-end-developers.md
  134. +203 −0 _posts/2013-01-23-your-logo-is-still-an-image-and-so-is-mine.md
  135. +229 −0 _posts/2013-01-25-mindbemding-getting-your-head-round-bem-syntax.md
  136. +113 −0 _posts/2013-01-29-you-know-your-context-on-critical-thinking-and-thinking-for-yourself.md
  137. +278 −0 _posts/2013-02-06-responsive-grid-systems-a-solution.md
  138. +70 −0 _posts/2013-02-07-introducing-csswizardry-grids.md
  139. +39 −0 _posts/2013-03-18-net-award-nominee.md
  140. +67 −0 about.md
  141. +19 −0 archive.html
  142. +79 −0 css/_vars.scss
  143. +5 −0 css/csswizardry.min.css
  144. +34 −0 css/csswizardry.scss
  145. +63 −0 css/inuit.css/base/_code.scss
  146. +174 −0 css/inuit.css/base/_forms.scss
  147. +60 −0 css/inuit.css/base/_headings.scss
  148. +53 −0 css/inuit.css/base/_images.scss
  149. +37 −0 css/inuit.css/base/_links.scss
  150. +19 −0 css/inuit.css/base/_lists.scss
  151. +8 −0 css/inuit.css/base/_main.scss
  152. +11 −0 css/inuit.css/base/_paragraphs.scss
  153. +48 −0 css/inuit.css/base/_quotes.scss
  154. +13 −0 css/inuit.css/base/_smallprint.scss
  155. +163 −0 css/inuit.css/base/_tables.scss
  156. +18 −0 css/inuit.css/generic/_brand.scss
  157. +21 −0 css/inuit.css/generic/_clearfix.scss
  158. +168 −0 css/inuit.css/generic/_debug.scss
  159. +102 −0 css/inuit.css/generic/_helper.scss
  160. +292 −0 css/inuit.css/generic/_mixins.scss
  161. +375 −0 css/inuit.css/generic/_normalize.scss
  162. +91 −0 css/inuit.css/generic/_pull.scss
  163. +91 −0 css/inuit.css/generic/_push.scss
  164. +80 −0 css/inuit.css/generic/_reset.scss
  165. +61 −0 css/inuit.css/generic/_shared.scss
  166. +339 −0 css/inuit.css/generic/_widths.scss
  167. +208 −0 css/inuit.css/inuit.scss
  168. +143 −0 css/inuit.css/objects/_arrows.scss
  169. +40 −0 css/inuit.css/objects/_block-list.scss
  170. +59 −0 css/inuit.css/objects/_breadcrumb.scss
  171. +44 −0 css/inuit.css/objects/_buttons.scss
  172. +18 −0 css/inuit.css/objects/_columns.scss
  173. +51 −0 css/inuit.css/objects/_flexbox.scss
  174. +59 −0 css/inuit.css/objects/_flyout.scss
  175. +54 −0 css/inuit.css/objects/_greybox.scss
  176. +99 −0 css/inuit.css/objects/_grids.scss
  177. +36 −0 css/inuit.css/objects/_icon-text.scss
  178. +34 −0 css/inuit.css/objects/_island.scss
  179. +28 −0 css/inuit.css/objects/_link-complex.scss
  180. +42 −0 css/inuit.css/objects/_lozenges.scss
  181. +48 −0 css/inuit.css/objects/_marginalia.scss
  182. +98 −0 css/inuit.css/objects/_matrix.scss
  183. +56 −0 css/inuit.css/objects/_media.scss
  184. +144 −0 css/inuit.css/objects/_nav.scss
  185. +39 −0 css/inuit.css/objects/_options.scss
  186. +39 −0 css/inuit.css/objects/_pagination.scss
  187. +61 −0 css/inuit.css/objects/_rules.scss
  188. +35 −0 css/inuit.css/objects/_split.scss
  189. +77 −0 css/inuit.css/objects/_sprite.scss
  190. +48 −0 css/inuit.css/objects/_stats.scss
  191. +34 −0 css/inuit.css/objects/_this-or-this.scss
  192. +37 −0 css/ui/ads.scss
  193. +20 −0 css/ui/lists.scss
  194. +6 −0 css/ui/logo.scss
  195. +42 −0 css/ui/misc.scss
  196. +19 −0 css/ui/page-foot.scss
  197. +28 −0 css/ui/page-head.scss
  198. +75 −0 css/ui/page.scss
  199. +62 −0 css/ui/posts.scss
  200. +41 −0 css/ui/site-nav.scss
  201. +19 −0 css/ui/sprites.scss
  202. +97 −0 css/ui/typography.scss
  203. +12 −0 css/watch.sh
  204. +298 −0 cv/css/style.css
  205. BIN  cv/icon.png
  206. +210 −0 cv/index.html
  207. +181 −0 demos/accordion/css/style.css
  208. +157 −0 demos/accordion/index.html
  209. +14 −0 demos/border-radius/index.html
  210. +114 −0 demos/centred-nav/dropdown.html
  211. +67 −0 demos/centred-nav/index.html
  212. +130 −0 demos/css-dropdown/css/style.css
  213. +74 −0 demos/css-dropdown/index.html
  214. +128 −0 demos/css-powered-ribbons/css/style.css
  215. BIN  demos/css-powered-ribbons/img/css/ribbon-2.png
  216. BIN  demos/css-powered-ribbons/img/css/ribbon.png
  217. +40 −0 demos/css-powered-ribbons/index.html
  218. +100 −0 demos/graphs/css/style.css
  219. +88 −0 demos/graphs/index.php
  220. +98 −0 demos/graphs/index2.php
  221. +119 −0 demos/lukes-beard-social-icons/css/style.css
  222. BIN  demos/lukes-beard-social-icons/img/css/Thumbs.db
  223. BIN  demos/lukes-beard-social-icons/img/css/icons.png
  224. +43 −0 demos/lukes-beard-social-icons/index.html
  225. +75 −0 demos/maximising-hit-area/index.html
  226. BIN  demos/mo-robust-paragraph-indenting/demo.jpg
  227. +134 −0 demos/mo-robust-paragraph-indenting/index.html
  228. +102 −0 demos/multiple-column-lists/css/style.css
  229. +88 −0 demos/multiple-column-lists/index.html
  230. +170 −0 demos/progress-bar/css/style.css
  231. BIN  demos/progress-bar/img/css/last.gif
  232. BIN  demos/progress-bar/img/css/splitter.gif
  233. +68 −0 demos/progress-bar/index.php
  234. +47 −0 demos/remote-controlled-hyperlinks/index.html
  235. +193 −0 demos/sites-without-ids-classes/css/style.css
  236. +57 −0 demos/sites-without-ids-classes/index.html
  237. +103 −0 demos/snow/css/style.css
  238. BIN  demos/snow/img/css/snow.png
  239. +50 −0 demos/snow/index.php
  240. +47 −0 demos/snow/stable.txt
  241. +119 −0 demos/typographic-work-planner/css/style.css
  242. +88 −0 demos/typographic-work-planner/index.html
  243. +121 −0 demos/zebra-striping/css/style.css
  244. +278 −0 demos/zebra-striping/index.html
  245. +29 −0 feed.xml
  246. +1 −0  google02bbe8b9be479c16.html
  247. BIN  icon.png
  248. BIN  img/content/Thumbs.db
  249. BIN  img/content/inuit.css-logo.png
  250. BIN  img/content/me.jpg
  251. +1 −0  img/css/sprites/main.svg
  252. +40 −0 index.html
  253. +573 −0 sitemap.xml
  254. +27 −0 speaking.md
  255. +29 −0 view.html
View
3  .gitignore
@@ -0,0 +1,3 @@
+.sass-cache/
+_site/
+PSDs/
View
131 404.html
@@ -0,0 +1,131 @@
+<!DOCTYPE html>
+<html lang="en" class="page page--error">
+<head>
+ <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="//fonts.googleapis.com">
+ <link rel="dns-prefetch" href="//s3.buysellads.com">
+ <link rel="dns-prefetch" href="//platform.twitter.com">
+ <link rel="dns-prefetch" href="//www.google-analytics.com">
+ <link rel="dns-prefetch" href="//themes.googleusercontent.com">
+ <link rel="dns-prefetch" href="//stats.buysellads.com">
+ <link rel="dns-prefetch" href="//p.twitter.com">
+ <link rel="dns-prefetch" href="//cdn.api.twitter.com">
+
+ <title>404, not found &ndash; CSS Wizardry &ndash; CSS, OOCSS, front-end architecture, performance and more, by Harry Roberts</title>
+
+ <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Ubuntu:300,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.">
+
+</head>
+<body>
+
+ <!-- Ad Packs -->
+ <script>
+ (function(){
+ var bsa = document.createElement('script');
+ bsa.type = 'text/javascript';
+ bsa.async = true;
+ bsa.src = 'http://s3.buysellads.com/ac/bsa.js';
+ (document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(bsa);
+ })();
+ </script>
+
+ <!-- Empty preload `div` to fetch images before CSS needs them. -->
+ <div class="ಠ_ಠ">
+ <img src="/img/css/sprites/main.svg" alt="">
+ </div>
+
+ <div class="wrapper">
+
+ <header class="page-head">
+
+ <a href="/" class="site-logo">
+ <img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt="CSS Wizardry" class="s s--csswizardry-logo">
+ </a>
+
+ <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>
+ </ul>
+
+ </header><!-- /page-head -->
+
+ <div class="gw">
+
+ <div class="g one-whole desk-six-tenths">
+
+ <h1>404 &ndash; not found</h1>
+
+ <p><strong>Sorry</strong>, it looks like that page doesn’t exist, please head back to <a href="/">the home page</a>.</p>
+
+ </div>
+
+ <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 22 year old <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="http://twitter.com/csswizardry">tweet</a>, <a href="https://speakerdeck.com/csswizardry">speak</a> and <a href="http://github.com/csswizardry">share code</a> about authoring and scaling CSS for big websites.</p>
+ <p><a href="https://twitter.com/csswizardry" class="twitter-follow-button" data-show-count="true" data-lang="en">Follow @csswizardry</a></p>
+
+ <ul class="block-list">
+ <li>
+ <a href="http://inuitcss.com">
+ <img src="/img/content/inuit.css-logo.png" alt="inuit.css" class="logo">
+ </a>
+ <a href="http://inuitcss.com">inuit.css</a> is a powerful, scalable, Sass-based, BEM, OOCSS framework.
+ </li>
+ </ul>
+
+ <a href="/2013/03/net-award-nominee/" class="islet ad .net-award">
+ <h3 class="alpha .net-award__title">.net award</h3>
+ <p>I have been nominated for a .net award, please consider
+ voting for me!</p>
+ </a>
+
+ <div class="islet ad">
+ <div id="bsap_1255689" class="bsarocks bsap_2ef959fa3a5535d37060575e733650a1"></div>
+ <p><a href="http://adpacks.com" id="bsap_aplink">via Ad Packs</a></p>
+ </div>
+
+ </div>
+
+ </div>
+
+ </div><!-- /wrapper -->
+
+ <footer class="page-foot"><div class="wrapper">
+
+ <p>&copy; 2013 <a href="http://twitter.com/csswizardry">Harry Roberts</a>.
+ Built with <a href="http://inuitcss.com">inuit.css</a>
+ and <a href="https://github.com/mojombo/jekyll/">Jekyll</a>.
+ The source code of this blog is <a href="https://github.com/csswizardry/csswizardry.github.com">hosted on GitHub</a>.<br>
+ You should <a href="http://feeds.feedburner.com/csswizardrycom">grab the RSS feed</a> and <a href="http://twitter.com/csswizardry">follow me on Twitter</a>.</p>
+
+ </div></footer><!-- /wrapper /page-foot -->
+
+<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
+<script>
+
+ var _gaq = _gaq || [];
+ _gaq.push(['_setAccount', 'UA-1856861-4']);
+ _gaq.push(['_trackPageview']);
+
+ (function() {
+ var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+ var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+ })();
+
+</script>
+
+</body>
+</html>
View
1  CNAME
@@ -0,0 +1 @@
+csswizardry.com
View
12 README.md
@@ -0,0 +1,12 @@
+# csswizardry.com
+
+This is CSS Wizardry’s uncompiled Jekyll source code.
+
+CSS Wizardry is built on [Jekyll](https://github.com/mojombo/jekyll) and
+[inuit.css](http://inuitcss.com), this repository houses the CSS Wizardry
+specific source code for both.
+
+Despite being open sourced, all CSS Wizardry code and content remain copyright
+of Harry Roberts.
+
+<i>H</i>
View
6 _config.yml
@@ -0,0 +1,6 @@
+auto: true
+server: true
+markdown: rdiscount
+pygments: true
+permalink: /:year/:month/:title
+paginate: 10
View
127 _layouts/default.html
@@ -0,0 +1,127 @@
+<!DOCTYPE html>
+<html lang="en" class="page {{ page.page-class }}">
+<head>
+ <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="//fonts.googleapis.com">
+ <link rel="dns-prefetch" href="//s3.buysellads.com">
+ <link rel="dns-prefetch" href="//platform.twitter.com">
+ <link rel="dns-prefetch" href="//www.google-analytics.com">
+ <link rel="dns-prefetch" href="//themes.googleusercontent.com">
+ <link rel="dns-prefetch" href="//stats.buysellads.com">
+ <link rel="dns-prefetch" href="//p.twitter.com">
+ <link rel="dns-prefetch" href="//cdn.api.twitter.com">
+
+ <title>{{ page.title }} &ndash; CSS Wizardry &ndash; CSS, OOCSS, front-end architecture, performance and more, by Harry Roberts</title>
+
+ <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Ubuntu:300,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.">
+
+</head>
+<body>
+
+ <!-- Ad Packs -->
+ <script>
+ (function(){
+ var bsa = document.createElement('script');
+ bsa.type = 'text/javascript';
+ bsa.async = true;
+ bsa.src = 'http://s3.buysellads.com/ac/bsa.js';
+ (document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(bsa);
+ })();
+ </script>
+
+ <!-- Hidden preload `div` to fetch images before CSS needs them. -->
+ <div class="ಠ_ಠ">
+ <img src="/img/css/sprites/main.svg" alt="">
+ </div>
+
+ <div class="wrapper">
+
+ <header class="page-head">
+
+ <a href="/" class="site-logo">
+ <img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt="CSS Wizardry" class="s s--csswizardry-logo">
+ </a>
+
+ <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>
+ </ul>
+
+ </header><!-- /page-head -->
+
+ <div class="gw">
+
+ <div class="g one-whole desk-six-tenths">
+ {{ content }}
+ </div>
+
+ <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 22 year old <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="http://twitter.com/csswizardry">tweet</a>, <a href="https://speakerdeck.com/csswizardry">speak</a> and <a href="http://github.com/csswizardry">share code</a> about authoring and scaling CSS for big websites.</p>
+ <p><a href="https://twitter.com/csswizardry" class="twitter-follow-button" data-show-count="true" data-lang="en">Follow @csswizardry</a></p>
+
+ <ul class="block-list">
+ <li>
+ <a href="http://inuitcss.com">
+ <img src="/img/content/inuit.css-logo.png" alt="inuit.css" class="logo">
+ </a>
+ <a href="http://inuitcss.com">inuit.css</a> is a powerful, scalable, Sass-based, BEM, OOCSS framework.
+ </li>
+ </ul>
+
+ <a href="/2013/03/net-award-nominee/" class="islet ad .net-award">
+ <h3 class="alpha .net-award__title">.net award</h3>
+ <p>I have been nominated for a .net award, please consider
+ voting for me!</p>
+ </a>
+
+ <div class="islet ad">
+ <div id="bsap_1255689" class="bsarocks bsap_2ef959fa3a5535d37060575e733650a1"></div>
+ <p><a href="http://adpacks.com" id="bsap_aplink">via Ad Packs</a></p>
+ </div>
+
+ </div>
+
+ </div>
+
+ </div><!-- /wrapper -->
+
+ <footer class="page-foot"><div class="wrapper">
+
+ <p>&copy; {{ 'now' | date: "%Y" }} <a href="http://twitter.com/csswizardry">Harry Roberts</a>.
+ Built with <a href="http://inuitcss.com">inuit.css</a>
+ and <a href="https://github.com/mojombo/jekyll/">Jekyll</a>.
+ The source code of this blog is <a href="https://github.com/csswizardry/csswizardry.github.com">hosted on GitHub</a>.<br>
+ You should <a href="http://feeds.feedburner.com/csswizardrycom">grab the RSS feed</a> and <a href="http://twitter.com/csswizardry">follow me on Twitter</a>.</p>
+
+ </div></footer><!-- /wrapper /page-foot -->
+
+<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
+<script>
+
+ var _gaq = _gaq || [];
+ _gaq.push(['_setAccount', 'UA-1856861-4']);
+ _gaq.push(['_trackPageview']);
+
+ (function() {
+ var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+ var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+ })();
+
+</script>
+
+</body>
+</html>
View
20 _layouts/post.html
@@ -0,0 +1,20 @@
+---
+layout: default
+page-class: page--post
+---
+<article class="post">
+
+ <h1>{{ page.title }}</h1>
+
+ {{ content }}
+
+ {% if page.branch-url %}
+ <script async src="http://embed-script.branch.com/assets/embed/embed.m.js?body=0" data-branch-embedid="{{ page.branch-id }}" ></script>
+ <noscript>
+ <p>
+ <a href="{{ page.branch-url }}" class="branch-link" title="Opens in a new window" target="_blank">Discuss this article on Branch…</a>
+ </p>
+ </noscript>
+ {% endif %}
+
+</article>
View
308 _plugins/sitemap_generator.rb
@@ -0,0 +1,308 @@
+# Sitemap.xml Generator is a Jekyll plugin that generates a sitemap.xml file by
+# traversing all of the available posts and pages.
+#
+# How To Use:
+# 1.) Copy source file into your _plugins folder within your Jekyll project.
+# 2.) Change MY_URL to reflect your domain name.
+# 3.) Change SITEMAP_FILE_NAME if you want your sitemap to be called something
+# other than sitemap.xml.
+# 4.) Change the PAGES_INCLUDE_POSTS list to include any pages that are looping
+# through your posts (e.g. "index.html", "archive.html", etc.). This will
+# ensure that right after you make a new post, the last modified date will
+# be updated to reflect the new post.
+# 5.) Run Jekyll: jekyll --server to re-generate your site.
+# 6.) A sitemap.xml should be included in your _site folder.
+#
+# Customizations:
+# 1.) If there are any files you don't want included in the sitemap, add them
+# to the EXCLUDED_FILES list. The name should match the name of the source
+# file.
+# 2.) If you want to include the optional changefreq and priority attributes,
+# simply include custom variables in the YAML Front Matter of that file.
+# The names of these custom variables are defined below in the
+# CHANGE_FREQUENCY_CUSTOM_VARIABLE_NAME and PRIORITY_CUSTOM_VARIABLE_NAME
+# constants.
+#
+# Notes:
+# 1.) The last modified date is determined by the latest from the following:
+# system modified date of the page or post, system modified date of
+# included layout, system modified date of included layout within that
+# layout, ...
+#
+# Author: Michael Levin
+# Site: http://www.kinnetica.com
+# Distributed Under A Creative Commons License
+# - http://creativecommons.org/licenses/by/3.0/
+
+require 'rexml/document'
+
+module Jekyll
+
+ # Change MY_URL to reflect the site you are using
+ MY_URL = "http://csswizardry.com"
+
+ # Change SITEMAP_FILE_NAME if you would like your sitemap file
+ # to be called something else
+ SITEMAP_FILE_NAME = "sitemap.xml"
+
+ # Any files to exclude from being included in the sitemap.xml
+ EXCLUDED_FILES = ["feed.xml"]
+
+ # Any files that include posts, so that when a new post is added, the last
+ # modified date of these pages should take that into account
+ PAGES_INCLUDE_POSTS = ["index.html"]
+
+ # Custom variable names for changefreq and priority elements
+ # These names are used within the YAML Front Matter of pages or posts
+ # for which you want to include these properties
+ CHANGE_FREQUENCY_CUSTOM_VARIABLE_NAME = "change_frequency"
+ PRIORITY_CUSTOM_VARIABLE_NAME = "priority"
+
+ class Post
+ attr_accessor :name
+
+ def full_path_to_source
+ File.join(@base, @name)
+ end
+
+ def location_on_server
+ "#{MY_URL}#{url}"
+ end
+ end
+
+ class Page
+ attr_accessor :name
+
+ def full_path_to_source
+ File.join(@base, @dir, @name)
+ end
+
+ def location_on_server
+ location = "#{MY_URL}#{@dir}#{url}"
+ location.gsub(/index.html$/, "")
+ end
+ end
+
+ class Layout
+ def full_path_to_source
+ File.join(@base, @name)
+ end
+ end
+
+ # Recover from strange exception when starting server without --auto
+ class SitemapFile < StaticFile
+ def write(dest)
+ begin
+ super(dest)
+ rescue
+ end
+
+ true
+ end
+ end
+
+ class SitemapGenerator < Generator
+
+ # Valid values allowed by sitemap.xml spec for change frequencies
+ VALID_CHANGE_FREQUENCY_VALUES = ["always", "hourly", "daily", "weekly",
+ "monthly", "yearly", "never"]
+
+ # Goes through pages and posts and generates sitemap.xml file
+ #
+ # Returns nothing
+ def generate(site)
+ sitemap = REXML::Document.new << REXML::XMLDecl.new("1.0", "UTF-8")
+
+ urlset = REXML::Element.new "urlset"
+ urlset.add_attribute("xmlns",
+ "http://www.sitemaps.org/schemas/sitemap/0.9")
+
+ @last_modified_post_date = fill_posts(site, urlset)
+ fill_pages(site, urlset)
+
+ sitemap.add_element(urlset)
+
+ # File I/O: create sitemap.xml file and write out pretty-printed XML
+ file = File.new(File.join(site.dest, SITEMAP_FILE_NAME), "w")
+ formatter = REXML::Formatters::Pretty.new(4)
+ formatter.compact = true
+ formatter.write(sitemap, file)
+ file.close
+
+ # Keep the sitemap.xml file from being cleaned by Jekyll
+ site.static_files << Jekyll::SitemapFile.new(site, site.dest, "/", SITEMAP_FILE_NAME)
+ end
+
+ # Create url elements for all the posts and find the date of the latest one
+ #
+ # Returns last_modified_date of latest post
+ def fill_posts(site, urlset)
+ last_modified_date = nil
+ site.posts.each do |post|
+ if !excluded?(post.name)
+ url = fill_url(site, post)
+ urlset.add_element(url)
+ end
+
+ path = post.full_path_to_source
+ date = File.mtime(path)
+ last_modified_date = date if last_modified_date == nil or date > last_modified_date
+ end
+
+ last_modified_date
+ end
+
+ # Create url elements for all the normal pages and find the date of the
+ # index to use with the pagination pages
+ #
+ # Returns last_modified_date of index page
+ def fill_pages(site, urlset)
+ site.pages.each do |page|
+ if !excluded?(page.name)
+ path = page.full_path_to_source
+ if File.exists?(path)
+ url = fill_url(site, page)
+ urlset.add_element(url)
+ end
+ end
+ end
+ end
+
+ # Fill data of each URL element: location, last modified,
+ # change frequency (optional), and priority.
+ #
+ # Returns url REXML::Element
+ def fill_url(site, page_or_post)
+ url = REXML::Element.new "url"
+
+ loc = fill_location(page_or_post)
+ url.add_element(loc)
+
+ lastmod = fill_last_modified(site, page_or_post)
+ url.add_element(lastmod) if lastmod
+
+ if (page_or_post.data[CHANGE_FREQUENCY_CUSTOM_VARIABLE_NAME])
+ change_frequency =
+ page_or_post.data[CHANGE_FREQUENCY_CUSTOM_VARIABLE_NAME].downcase
+
+ if (valid_change_frequency?(change_frequency))
+ changefreq = REXML::Element.new "changefreq"
+ changefreq.text = change_frequency
+ url.add_element(changefreq)
+ else
+ puts "ERROR: Invalid Change Frequency In #{page_or_post.name}"
+ end
+ end
+
+ if (page_or_post.data[PRIORITY_CUSTOM_VARIABLE_NAME])
+ priority_value = page_or_post.data[PRIORITY_CUSTOM_VARIABLE_NAME]
+ if valid_priority?(priority_value)
+ priority = REXML::Element.new "priority"
+ priority.text = page_or_post.data[PRIORITY_CUSTOM_VARIABLE_NAME]
+ url.add_element(priority)
+ else
+ puts "ERROR: Invalid Priority In #{page_or_post.name}"
+ end
+ end
+
+ url
+ end
+
+ # Get URL location of page or post
+ #
+ # Returns the location of the page or post
+ def fill_location(page_or_post)
+ loc = REXML::Element.new "loc"
+ loc.text = page_or_post.location_on_server
+
+ loc
+ end
+
+ # Fill lastmod XML element with the last modified date for the page or post.
+ #
+ # Returns lastmod REXML::Element or nil
+ def fill_last_modified(site, page_or_post)
+ path = page_or_post.full_path_to_source
+
+ lastmod = REXML::Element.new "lastmod"
+ date = File.mtime(path)
+ latest_date = find_latest_date(date, site, page_or_post)
+
+ if @last_modified_post_date == nil
+ # This is a post
+ lastmod.text = latest_date.iso8601
+ else
+ # This is a page
+ if posts_included?(page_or_post.name)
+ # We want to take into account the last post date
+ final_date = greater_date(latest_date, @last_modified_post_date)
+ lastmod.text = final_date.iso8601
+ else
+ lastmod.text = latest_date.iso8601
+ end
+ end
+ lastmod
+ end
+
+ # Go through the page/post and any implemented layouts and get the latest
+ # modified date
+ #
+ # Returns formatted output of latest date of page/post and any used layouts
+ def find_latest_date(latest_date, site, page_or_post)
+ layouts = site.layouts
+ layout = layouts[page_or_post.data["layout"]]
+ while layout
+ path = layout.full_path_to_source
+ date = File.mtime(path)
+
+ latest_date = date if (date > latest_date)
+
+ layout = layouts[layout.data["layout"]]
+ end
+
+ latest_date
+ end
+
+ # Which of the two dates is later
+ #
+ # Returns latest of two dates
+ def greater_date(date1, date2)
+ if (date1 >= date2)
+ date1
+ else
+ date2
+ end
+ end
+
+ # Is the page or post listed as something we want to exclude?
+ #
+ # Returns boolean
+ def excluded?(name)
+ EXCLUDED_FILES.include? name
+ end
+
+ def posts_included?(name)
+ PAGES_INCLUDE_POSTS.include? name
+ end
+
+ # Is the change frequency value provided valid according to the spec
+ #
+ # Returns boolean
+ def valid_change_frequency?(change_frequency)
+ VALID_CHANGE_FREQUENCY_VALUES.include? change_frequency
+ end
+
+ # Is the priority value provided valid according to the spec
+ #
+ # Returns boolean
+ def valid_priority?(priority)
+ begin
+ priority_val = Float(priority)
+ return true if priority_val >= 0.0 and priority_val <= 1.0
+ rescue ArgumentError
+ end
+
+ false
+ end
+ end
+end
View
197 _posts/2009-12-22-typographic-work-planner.md
@@ -0,0 +1,197 @@
+---
+comments: true
+date: 2009-12-22 11:17:25
+layout: post
+slug: typographic-work-planner
+title: Typographic work planner
+wordpress_id: 49
+categories:
+- Web Development
+tag:
+- CSS
+- CSS3
+- Design
+- Development
+- HTML
+- Semantics
+---
+
+No one likes being told what to do, especially if it’s work related, but nevertheless jobs need done. Why present boring stuff in a boring way? If you’re going to be told what to do, at least soften the blow by being told nicely. Enter this, a little HTML/CSS typographic work planner. By using some super-semantic HTML and a dash of CSS you can craft a beautiful looking yet incredibly simple work planner for you and your staff.
+
+## Typographic work planner markup:
+
+The rich, semantic markup is as follows. Notice the use of the more semantic elements and attributes such as `summary=""`, `colgroup`, `scope=""`, `caption` and more...
+
+ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+ <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+ <head>
+ <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
+
+ <title>Typographic work planner</title>
+
+ <link rel="stylesheet" type="text/css" href="css/style.css" />
+ </head>
+ <body id="home">
+ <div id="wrapper">
+ <table summary="An overview of upcoming and recently completed work ?
+ by employees">
+ <caption>Work schedule</caption>
+ <colgroup>
+ <col id="date" />
+ <col id="user" />
+ <col id="dec" />
+ </colgroup>
+ <thead>
+ <tr>
+ <th scope="col">Date</th>
+ <th scope="col">User</th>
+ <th scope="col">Description</th>
+ </tr>
+ </thead>
+ <tfoot>
+ <tr>
+ <td colspan="3">Sense Internet Ltd work planner</td>
+ </tr>
+ </tfoot>
+ <tbody>
+ <tr>
+ <td class="date">20 December, 2009</td>
+ <td class="user">Harry Roberts</td>
+ <td class="desc">Lorem ipsum dolor sit amet, elit. Nunc ?
+ rhoncus dui et mauris. Nam augue felis, dapibus ut, condimentum ?
+ in, ornare a, est. Proin sem risus, pretium ut, mattis nec.</td>
+ </tr>
+ <tr>
+ <td class="date">20 December, 2009</td>
+ <td class="user">Joe Whitley</td>
+ <td class="desc">Suspendisse venenatis. Donec eleifend ?
+ dignissim diam. Integer faucibus neque tempor pede. Maecenas at ?
+ magna sed lectus adipiscing molestie. Pellentesque habitant morbi ?
+ tristique senectus et netuset malesuada fames ac turpis egestas. ?
+ Curabitur sodales gravida tellus.</td>
+ </tr>
+ <tr>
+ <td class="date">21 December, 2009</td>
+ <td class="user">Harry Roberts</td>
+ <td class="desc">Lorem ipsum dolor sit amet, elit. Nunc ?
+ rhoncus dui et mauris. Nam augue felis, dapibus ut, condimentum ?
+ in, ornare a, est. Proin sem risus, pretium ut, mattis nec.</td>
+ </tr>
+ <tr>
+ <td class="date">21 December, 2009</td>
+ <td class="user">Joe Whitley</td>
+ <td class="desc">Suspendisse venenatis. Donec eleifend ?
+ dignissim diam. Integer faucibus neque tempor pede. Maecenas at ?
+ magna sed lectus adipiscing molestie. Pellentesque habitant morbi ?
+ tristique senectus et netuset malesuada fames ac turpis egestas. ?
+ Curabitur sodales gravida tellus.</td>
+ </tr>
+ <tr>
+ <td class="date">21 December, 2009</td>
+ <td class="user">Sam Penrose</td>
+ <td class="desc">Lorem ipsum dolor sit amet, elit. Nunc ?
+ rhoncus dui et mauris. Nam augue felis, dapibus ut, condimentum ?
+ in, ornare a, est. Proin sem risus, pretium ut, mattis nec.</td>
+ </tr>
+ <tr class="today">
+ <td class="date">22 December, 2009</td>
+ <td class="user">Joe Whitley</td>
+ <td class="desc">Suspendisse venenatis. Donec eleifend ?
+ dignissim diam. Integer faucibus neque tempor pede. Maecenas at ?
+ magna sed lectus adipiscing molestie. Pellentesque habitant morbi ?
+ tristique senectus et netuset malesuada fames ac turpis egestas. ?
+ Curabitur sodales gravida tellus.</td>
+ </tr>
+ <tr class="today">
+ <td class="date">22 December, 2009</td>
+ <td class="user">Sam Penrose</td>
+ <td class="desc">Lorem ipsum dolor sit amet, elit. Nunc ?
+ rhoncus dui et mauris. Nam augue felis, dapibus ut, condimentum ?
+ in, ornare a, est. Proin sem risus, pretium ut, mattis nec.</td>
+ </tr>
+ <tr class="today">
+ <td class="date">22 December, 2009</td>
+ <td class="user">Joe Whitley</td>
+ <td class="desc">Suspendisse venenatis. Donec eleifend ?
+ dignissim diam. Integer faucibus neque tempor pede. Maecenas at ?
+ magna sed lectus adipiscing molestie. Pellentesque habitant morbi ?
+ tristique senectus et netuset malesuada fames ac turpis egestas. ?
+ Curabitur sodales gravida tellus.</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </body>
+ </html>
+
+### In detail...
+
+There are a few things in the table you may not have seen before, briefly, they are:
+
+* **`summary=""`:** This is an attribute which provides a brief overview of the table and its contents/purpose.
+* **`caption`:** This is a table specific caption, essentially a heading/title explicitly for the table.
+* **`colgroup` and `col`:** This is an essentially invisible element that just adds semantic meaning to the table. It defines the columns and can—in some browsers—be used to style them.
+* **`scope="col"`:** This is an attribute which tells the browser whether the `th` is a title for a column or a row. This then obviously makes the other possible attribute value `row`.
+* **`tfoot`:** This is a table footer and contain pretty much anything you like. It must however appear _before_ the `tbody`.
+
+## Typographic work planner CSS:
+
+The CSS used to create the work planner is pretty basic, with a dash or progressive enhancement added via some CSS3. [View the full CSS file with reset etc.](http://csswizardry.com/demos/typographic-work-planner/css/style.css)
+
+ table{
+ margin-bottom:20px;
+ }
+ td,th{
+ border-bottom:1px solid #ccc;
+ }
+ tbody tr{
+ background:#fff;
+ }
+ tbody tr:nth-of-type(even){
+ background:#ffc;
+ }
+ th,tfoot,caption{
+ font-family:Helvetica, Arial, Verdana, sans-serif;
+ font-size:1.6em;
+ font-weight:bold;
+ }
+ th,td{
+ padding:10px 0;
+ }
+ caption{
+ font-size:2.4em;
+ position:absolute;
+ left:-9999px;
+ }
+ .date{
+ width:160px;
+ padding:10px 15px 10px 5px;
+ font-family:Georgia, "Times New Roman", Times;
+ font-size:1.6em;
+ font-style:italic;
+ }
+ .user{
+ width:460px;
+ padding-right:20px;
+ font-family:Helvetica, Arial, Verdana, sans-serif;
+ font-size:4.8em;
+ font-weight:bold;
+ }
+ .desc{
+ width:280px;
+ font-size:1.2em;
+ }
+ tbody tr.today{
+ background:#ff8;
+
+ text-shadow:1px 1px 1px rgba(0,0,0,0.3);
+ }
+ tfoot{
+ color:#666;
+ }
+ tfoot td{
+ padding:10px 5px;
+ }
+
+**[Typographic work planner demo](http://csswizardry.com/demos/typographic-work-planner/)**
View
151 _posts/2010-01-26-a-reconsiderationin-defence-of-b-and-i-or-people-fear-what-they-dont-understand.md
@@ -0,0 +1,151 @@
+---
+comments: true
+date: 2010-01-26 23:06:10
+layout: post
+slug: a-reconsiderationin-defence-of-b-and-i-or-people-fear-what-they-dont-understand
+title: 'A reconsideration—in defence of &lt;b&gt; and &lt;i&gt; (or: people fear what they don’t
+ understand)'
+wordpress_id: 306
+categories:
+- Web Development
+tag:
+- HTML
+- Semantics
+- Web Standards
+---
+
+The other day, I got to thinking about the HTML elements `<b>` and `<i>`, and wondered if they were still _viably_ usable in production code. I’ve personally never used them before but I was aware that they existed and were still very much valid XHTML markup (even in the Strict `DOCTYPE!`). Wondering whether I’d avoided two elements for three years unnecessarily, I did some digging.
+
+## What the facts state
+
+`<b>` and `<i>` _are_ still valid, and as XHTML is just an XML serialisation of HTML, pretty much all the elements apparent in the HTML spec are true of the XHTML spec too--it is, pretty much, just the way in which these elements are written that makes them different in XHTML.
+
+## Twitter
+
+With the help of [@smashingmag](http://twitter.com/smashingmag) I turned to [Twitter](http://twitter.com/csswizardry) and my knowledgeable followers and asked the question:
+
+> Using `<i>` and `<b>` in (valid) XHTML (strict)… your thoughts on this would be much appreciated. #upcomingBlogPost Cheers all! **[@csswizardry](http://twitter.com/csswizardry)**
+
+Most of the answers I got said petty much the same thing: use `strong` and `em` ... `b` and `i` are deprecated. While this is largely true, there are some myths that need dispelling.
+
+* `strong` and `em` are _not_ the same as bold and italics. strong is strong emphasis and em is emphasis. **It is purely through convention that these two elements happen to adopt either bold or italicised appearances.**
+* `b` and `i` are _not_ deprecated in any way in HTML or XHTML. **They are still in existence, still valid and still (in the right places) usable.**
+
+
+### Some replies
+
+A few choice replies I received which are, on the whole, representative of everyone’s thoughts:
+
+> strong and em make more sense, especially when taking screen readers into account. **[@CreativeNotice](http://twitter.com/CreativeNotice)**
+
+Or so you’d think, see below...
+
+* * *
+
+> I prefer `<strong>` `<em>` because of semantics. You want to put emphasis, not just make text italic. **[@WeHelpDesign](http://twitter.com/wehelpdesign)**
+
+True, if you _do_ just want emphasis that is...
+
+* * *
+
+> Using `<i>` and `<b>` is just fine if it’s for visual bling without real semantic background. **[@levito](http://twitter.com/levito)**
+
+Ah, this is more like it!
+
+* * *
+
+> `<b>` and `<i>` tags describe presentation, not structural semantics. Rather style `<em>` and `<strong>` tags. **[@hornergraphic](http://twitter.com/hornergraphic)**
+
+A view that is seemingly shared by almost everyone else who responded.
+
+* * *
+
+### What about `strong` and `em`?
+
+The vast majority of people who replied were in favour of `strong` and `em` over `b` and `i`. Presuming all respondents were assuming the question was ‘What are your thoughts on using `b` and `i` to represent strong emphasis and emphasis, and thus replace `strong` and `em`?’ then they’d have all been spot on correct. However, `b` and `i` and `strong` and `em` are totally separate things. `b` and `i` assume no semantic value, meaning literally bold and italic respectively. `strong` and `em` however have nothing to do with bold or italics. As previously mentioned, it is through convention only that the default styling for each is so.
+
+`strong` and `em` are ‘spoken word’ type elements, where they represent a change in tone only. This means that their styling is in no way linked to their naming, it is just that us, as people, are familiar with italicised prose sounding more stressed--or emphasised--than surrounding text. This is where the importance of aforementioned semantics and screenreaders come in. Or is it…?
+
+#### The screenreader fallacy
+
+Screenreaders _don’t_ use `strong` and `em`!
+
+The common belief is that `strong` and `em`’s semantic meaning is used by screenreaders to alter tonality when reading content aloud, thus letting the user know that the copy is in fact meant to be understood in a different manner to any neighbouring text. This was something I too believed until the wonderfully knowledgeable [@pekingspring](http://twitter.com/pekingspring) pointed me toward [this article](http://www.paciellogroup.com/blog/?p=41) by [@stevefaulkner](http://twitter.com/stevefaulkner)--it turns out screenreaders _don’t_ use `strong` and `em` to alter tonality!
+
+This means that screenreaders see no semantic value in the `strong` and `em` element. However, they should be used _unconditionally_ where a change in tone is implied, whether a screenreader will understand this or not.
+
+
+### Where to use `<b>` and `<i>` then?
+
+One of my first thoughts was where to use these elements if indeed they are still usable. My initial idea was the use of `i` for markup up things that have to be italicised but the italics aren’t indicative of any tone. To quote the Penguin Guide to Punctuation:
+
+> Another use of italics … is to cite titles of complete works…
+
+Initially I thought this was the ideal use for the `i` element--something that had to be in italics, yet implied no tone of voice. It was such a good fit! However, [@pekingspring](http://twitter.com/pekingspring) came to my aid again and reminded me that the `cite` element is for this exact purpose. That was that idea gone.
+
+Another possible usage for the `i` element was gleaned from the [Typography Manual](http://typographyapp.com/) iPhone app, which states:
+
+> Italics should be used for single letters in a sentence referred to as letters. [for] example ‘The letter _j_ appears too large.’
+
+An idea I had for using `b` was somewhat linked to the `cite` element anyway. A common mistake is to markup the ‘author’ of a quote in `cite` tags. This is of course incorrect, but what _do_ you use? It’s not really a paragraph, so what is it? I did consider the `b` element for this, but I feel that such a piece of information does need a more semantic element to represent it.
+
+Friend and colleague [@simonwiffen](http://twitter.com/simonwiffen) has a very nicely written example usage for each, which I personally think are spot on. The following chunk of text is lifted directly from an internal document written by [@simonwiffen](http://twitter.com/simonwiffen):
+
+* * *
+
+**1.4.3 Strong, emphasis, bold and italic**
+
+`<strong>` (strong emphasis) and `<em>` (emphasis) should be used as opposed to `<b>` (bold) and `<i>` (italic) unless the bold or italic is required without any semantic context (for example in a product name).
+
+**Examples**
+
+Remember **you must** check this box
+
+ <p>Remember <strong>you must</strong> check this box.</p>
+
+You should _really_ try to validate your pages
+
+ <p>You should <em>really</em> try to validate your pages</p>
+
+Read more about <b>Splash<i>down</i>!™</b> below
+
+ <p>Read more about <b>Splash<i>down</i>!™</b> below</p>
+
+* * *
+
+Succinct and, in my opinion, pretty hard to argue with.
+
+#### HTML5 has it sussed
+
+I won’t be using HTML5 for a long while yet, but that’s another story altogether…
+
+Ideally I’d like to retrofit the HTML5 specification’s definitions of each for use right now in XHTML, however I’m not sure I’d be comfortable going ahead with doing such a thing, coding to one spec whilst picking my favourite bits of another.
+
+##### The `<b>` element in HTML5
+
+<blockquote><p>The `b` element represents a span of text to be stylistically offset from the normal prose without conveying any extra importance, such as key words in a document abstract, product names in a review, or other spans of text whose typical typographic presentation is boldened.</p>
+<b class="source"><a href="http://dev.w3.org/html5/spec/Overview.html#the-b-element">HTML5</a></b></blockquote>
+
+##### The `<i>` element in HTML5
+
+<blockquote><p>The i element represents a span of text in an alternate voice or mood, or otherwise offset from the normal prose, such as a taxonomic designation, a technical term, an idiomatic phrase from another language, a thought, a ship name, or some other prose whose typical typographic presentation is italicized.</p>
+<b class="source"><a href="http://dev.w3.org/html5/spec/Overview.html#the-i-element">HTML5</a></b></blockquote>
+
+### A go-between in the meantime?
+
+There will always be the argument that instead of using `b` and `i` you could or should use something like <span class="italics"> or <span class="bold"> so as to avoid using insemantic elements, however a class name like that is more insemantic than an in-spec HTML element. Not to mention the fact that a `span` with a `class` applied is far more cumbersome than a 'pre-made' piece of HTML.
+
+### The resolve?
+
+So which is worse?
+
+* Using `i` to mark up emphasised text
+* Using `em` to mark up italicised and non-emphasised text
+* Using `i` to mark up purely italicised text
+* Using `<span class="italics">` to mark up italicised text
+
+Special thanks to the following for help with this article: [@smashingmag](http://twitter.com/smashingmag), [@pekingspring](http://twitter.com/pekingspring), [@stevefaulkner](http://twitter.com/stevefaulkner), [@simonwiffen](http://twitter.com/simonwiffen) and all [my Twitter followers](http://twitter.com/csswizardry/followers).
+
+I think that the fact that `b` and `i` are still in the spec, are valid (even in strict) and are being carried over to HTML5 (albeit slightly redefined) indicates that there is still a very real place for them in web development right now. The frequency with which they'll be used is slim at best, but they should not be ruled out, and at the very least not misunderstood. I'm not going to make the leap myself just yet, but they are there, they are usable, and one day I might just use them.
+
+What are you going to do?
View
136 _posts/2010-01-26-a-suitable-alternativeon-proper-use-of-alt-attributes.markdown
@@ -0,0 +1,136 @@
+---
+comments: true
+date: 2010-01-26 16:03:03
+layout: post
+slug: a-suitable-alternativeon-proper-use-of-alt-attributes
+title: A suitable alternative—on proper use of alt attributes
+wordpress_id: 318
+categories:
+- Web Development
+tag:
+- Accessibility
+- Images
+- Semantics
+---
+
+Images in HTML come with a mandatory attribute used to _textually_ describe the information displayed _visually_ through the image. The `alt` attribute ([not tag](http://csswizardry.com/eta)) is used by screenreaders etc to tell users who can't view the actual image what it represents. It is also used in any circumstance where images can't be loaded (slow connections, broken URIs etc).
+
+
+
+
+
+
+
+## When not to use it
+
+
+
+
+You should never _not_ use an `alt` attribute, rather leave it empty, thus: `alt=""`
+
+
+
+
+The only time you can really get away with _not_ having a complete `alt` attribute is if the image holds no context or information that the user needs to be aware of. This is usually the case when the image is purely decorational, though it may be argued that the image should therefore be added through CSS in the spirit of separating style and content. By that token it is fairly safe to say that there should never be an instance in which you leave an `alt` attribute empty.
+
+
+
+
+
+## You're using it, but not quite right...
+
+
+
+
+The next best scenario is that you are using images correctly, for their correct purpose and are using `alt` attributes, but they don't really do as much as they should. A lot of the time I come across images that have less than ideal `alt` attributes.
+
+
+
+
+![A photograph of an abandoned car](http://csswizardry.com/wp-content/uploads/2010/01/car.jpg)
+
+
+
+
+Image sourced via Google Images--original author unknown.
+
+
+
+
+One example might be the above image of a car. This, while technically correct, is not ideal: `<img src="/img/car.jpg" alt="Car" />`. All this tells the user is 'Car'. It doesn't say whether it's a picture with the word car in it, or whether it's a picture of a car. A much better `alt` attribute would be `alt="A photograph of an abandoned car"` (as used in my code).
+
+
+
+
+### Other poor uses
+
+
+
+
+Another real-world example of poor `alt` attribute usage is actually on [CNN's website](http://www.cnn.com/). On their home page today (26 January, 2010) they have a series of headlines with accompanying images. The code for such a pairing looks like this:
+
+
+
+
+ <code><img height="68" border="0" width="120" alt="Haiti's swanky club ->
+ now home to misery" src="http://i.cdn.turner.com/cnn/2010/WORLD/ ->
+ americas/01/26/haiti.camp/tzvids.haiti.aid.cnn.jpg"> ->
+ … Haiti's swanky club now home to misery</code>
+
+
+
+
+This is wrong on two counts:
+
+
+
+
+
+
+ 1. A screenreader will read out to the user Haiti's swanky club now home to misery … Haiti's swanky club now home to misery. Every image/headline pairing on the page is laid out like this, meaning in every instance a user using a screenreader will hear the headline twice. This will surely soon get annoying.
+
+
+ 2. Secondly, the image was actually of earthquake survivors holding a large bag, nothing to do with clubs and, unfortunately, far from swanky.
+
+
+
+
+## Using the attribute properly
+
+
+
+
+On the [BBC's home page](http://www.bbc.co.uk/) however (on the same date) they are using `alt` attributes perfectly. They have an image of a woman wearing a veil, alongside the article's headline France report back face veil ban. The image's `alt` attribute: `alt="A woman wears a full-length veil in Lyon, 25 January"`.
+
+
+
+
+
+## The biggest no-no of all
+
+
+
+
+One thing which consistently winds me up is the ridiculously bad practice of stuffing `alt` attributes with keywords. `alt` attributes are an accessibility feature, end of. They are _not_ a way of slipping in keywords out of sight, and any attempt to do so is irresponsible and incredibly bad practice. The only time 'keywords' may be validly placed in `alt` attributes is if it's explicitly related to the image; for example: `<img src="/img/product.jpg" alt="A photograph of Mike's Carpets' ProClean™ carpet cleaner" />`.
+
+
+
+
+
+## How to do it properly
+
+
+
+
+Writing proper `alt` text is incredibly simple, yet a little more time consuming than the 'Car' cop-out. All you need to do is write out in full exactly what the image shows. If it's an elephant giving a donkey a piggy-back don't be lazy and use `alt="Elephant and a donkey"`. Instead, write out `alt="A photograph of an African elephant giving a donkey a piggy back across a swamp"`.
+
+
+
+
+Also, for any pages that use similar images repeatedly but are slightly different to one another, make sure your alt attributes reflect these differences. A good example would be [my portfolio page](http://csswizardry.com/portfolio/). Instead of using `alt="Screenshot"` over and over again I used text like `alt="Screenshot of Suzanna Haworth’s website"` and `alt="Screenshot of RAAMaudio UK Ltd."` etc.
+
+
+
+
+
+This is one of the most basic aspects of web development, but one that too many people are still getting wrong.
View
24 _posts/2010-01-27-the-importance-of-proper-punctuation.markdown
@@ -0,0 +1,24 @@
+---
+comments: true
+date: 2010-01-27 11:44:38
+layout: post
+slug: the-importance-of-proper-punctuation
+title: The importance of proper punctuation
+wordpress_id: 462
+categories:
+- Writing
+tag:
+- Punctuation
+- Writing
+---
+
+This is a short (and cheeky) post on the necessity of using proper punctuation
+&ndash; particularly the hyphen &ndash; and how it can completely alter the
+meaning of your sentence, often with ill effect. This morning, for one reason or
+another, I was reminded of a conversation I had with
+[@nofunnyname](http://twitter.com/nofunnyname) last week on the subject of him
+buying a car. He said:
+
+> I need to get an old ass banger.
+
+So, is that ‘old-ass banger’, or ‘old ass-banger’? You decide ;)
View
80 _posts/2010-01-30-the-three-types-of-dash.md
@@ -0,0 +1,80 @@
+---
+comments: true
+date: 2010-01-30 17:07:43
+layout: post
+slug: the-three-types-of-dash
+title: The three types of dash
+wordpress_id: 477
+categories:
+- Typography
+---
+
+Unbeknown to many, there are <del>three main</del> many types of dash, and one
+of the most common typographical mistakes is to use the wrong dash for the wrong
+job. There are actually <del>three</del> several different types of dash and
+each have their own uses. The ‘dash’ you see on your keyboard is actually a
+hyphen which is used as a ‘catch all’ glyph which is used for several purposes.
+The only reason for this is that there’s just not enough room on a keyboard for
+so many different dashes.
+
+## The em dash &mdash;
+
+The em dash (`&mdash;`)--so named because it is the width of a capital
+‘M’&mdash;is used to delimit a separate clause in a sentence&mdash;rather like
+this&mdash;or similar sub-clause structures. Often used in its place however is
+the hyphen (-). Looking at the two side by side the difference is quite clear:
+
+### Proper em dashes:
+
+The em dash (--), or m dash, m-rule, etc., often demarcates a parenthetical thought--like this one--or some similar interpolation.
+
+### Improper hyphens:
+
+The em dash (&mdash;), or m dash, m-rule, etc., often demarcates a parenthetical
+thought - like this one - or some similar interpolation.
+
+### Spaces around em dashes
+
+The proper setting of em dashes seems somewhat unclear. The ideal way to set
+them is with hair spaces (`&#8202;`) either side&#8202;&mdash;&#8202;like this.
+However, IE6 doesn’t support the hair space leaving the options of either fully
+spaced &mdash; like this, or unspaced&mdash;like this.
+
+ Various means of spacing em dashes
+
+ Fully Spaced
+ Hair Spaced
+ Un Spaced
+
+ This -- is an em -- dash.
+
+ This -- is an em -- dash.
+
+ This--is an em--dash.
+
+## The en dash &ndash;
+
+The en dash (`&ndash;`)--so named because it is half the width of a capital 'M' (an 'n')--has altogether different uses to the em dash. The en dash is used in ranges, for example:
+
+* 6&ndash;10 years
+* July 10&ndash;August 1 2009
+* pp. 40&ndash;42
+* §§ 12&ndash;13
+
+Read [more specific guidelines](http://en.wikipedia.org/wiki/Dash#En_dash) on Wikipedia.
+
+## The hyphen
+
+The purpose of the hyphen (-) is to join two words--for example 'front-end'--and to separate syllables when splitting a long word over two lines. As previously mentioned, the hyphen is often misused in place of both the above.
+
+### The minus
+
+There is also a separate dash for the minus symbol. The proper entity for a minus symbol is simply `&minus;`.
+
+## More reading
+
+A reader of the old CSS Wizardry left me with a link to [one of his own articles](http://garyjones.co.uk/development/hyphens) covering a few _further_ variations of each.
+
+ *[§§]: sections
+ *[pp.]: pages
+ *[IE6]: Internet Explorer 6
View
184 _posts/2010-01-31-iphone-css-tips-for-building-iphone-websites.markdown
@@ -0,0 +1,184 @@
+---
+comments: true
+date: 2010-01-31 20:17:10
+layout: post
+slug: iphone-css-tips-for-building-iphone-websites
+title: iPhone CSS—tips for building iPhone websites
+wordpress_id: 489
+categories:
+- Web Development
+tag:
+- CSS
+- iPhone
+---
+
+With the rapid rise in mobile browsers, it has probably never been more important to ensure your sites can be handled on these platforms. By far one of the most popular such browsers is Mobile Safari on the iPhone &ndash; this is one of the easiest browsers to develop for: it runs on Webkit (meaning a lot of rich CSS3 support) and it's only ever on one resolution and on one OS.
+
+**N.B.** This article addresses iPhone development and iPhone development only. There is no reason why you cannot or should not develop for other mobile devices and platforms, Apple or otherwise. _This just happens to be an iPhone only post_.
+
+The practical upshot of this is that you need to do no cross-browser testing, and can use all the [CSS3](/css3/) you like. This post will show you some of the basics of developing and designing websites for the iPhone and Mobile Safari.
+
+## To start
+
+The first thing to remember when developing a site to be displayed on an iPhone is that it is _very_ similar to designing a print stylesheet. _You need to linearise everything._ Make sure you have one column and everything is read in one line &ndash; straight from top to bottom. This will also put your markup writing skills to the test.
+
+Some people don't agree with browser sniffing, but you need to detect the iPhone somehow.
+
+This first bit of code is a PHP browser sniffing snippet, the actual CSS we'll use is not brought through via any server side code, we'll use some CSS media queries for that. What we'll use this code for is serving the markup with an iPhone specific meta tag and to shorten the current page's title.
+
+ <?php
+ $browser = strpos($_SERVER['HTTP_USER_AGENT'],"iPhone");
+ if ($browser == true){
+ $browser = 'iphone';
+ }
+ ?>
+
+What the above code does is sees if the user agent contains any instance of 'iPhone' using [the `strpos` PHP function](http://uk2.php.net/strpos). Place this piece of code at the very top of your header include, before any other markup. In order to action something if the browser _is_ an iPhone, simply use the following bit of PHP logic in the place you want it to be initiated:
+
+ <?php if($browser == 'iphone'){ ?>DO THIS<?php } ?>
+
+We want people to save your site to their home screen...
+
+Now, to put that snippet to use. We want to do two things with this little piece of PHP.
+
+### Saving to the homescreen &ndash; shortening the page title
+
+First off, we'd like users to be able to save a link to your site on their home screen, this is simple enough, they simply need to select to do so from within the browser. However, if you look at the title of my home page alone, it's quite long: CSS Wizardry &ndash; CSS, Web Standards, Typography, and Grids by Harry Roberts. This would never fit underneath an icon without being shortened, so we need to serve a different title to the iPhone only. To achieve this we us the PHP snippet like so:
+
+ <?php if($browser == 'iphone'){ ?>
+ <title>Short iPhone only title</title>
+ <?php }else{ ?>
+ <title>Regular title</title>
+ <?php } ?>
+
+Now, both when browsing and saving your site to their home screen, a user will only ever see the shortened version.
+
+#### The home screen icon
+
+Actually making the icon is very simple. All you need to do is upload a 57x57px icon (usually a larger version of your favicon) to your server root. The icon must be named `apple-touch-icon.png`, and the iPhone will sort the rest out. See [my icon](http://csswizardry.com/apple-touch-icon.png).
+
+### Stopping user pinch-zooming
+
+The second use for the PHP snippet is to serve the iPhone a meta tag which disables the user pinch-zoom that Mobile Safari offers:
+
+ <?php if($browser == 'iphone'){ ?>
+ <meta name="viewport"
+ content="width=device-width,
+ minimum-scale=1.0, maximum-scale=1.0" />
+ <?php } ?>
+
+This means that, once we've linearised the content and sorted the font sizing, the user will only ever have to traverse down your page, much like a native app.
+
+## Beginning styling
+
+Some developers prefer to redirect iPhone users to a totally different version of the site &ndash; we won't be doing that.
+
+We could use the PHP snippet to serve the iPhone a whole new stylesheet, or even send the user to a whole new site, rather like Twitter does ([m.twitter.com](http://m.twitter.com/)). However, there's a simpler way to do it using some CSS media queries. The advantage of this is that you're simply reusing old content and pre-written markup, and only ever using one CSS file.
+
+The first thing you need to do is make sure the HTML link element that points to your main stylesheet does **not** have a `media` attribute:
+
+ <link rel="stylesheet" href="/path/to/style.css">
+
+Next, we're going to use [Quick Tip #15](http://csswizardry.com/quick-tips/#tip-15) that I wrote on my Quick Tips page. This means that we can just add our iPhone styles directly onto the end of the main stylesheet, and inherit all the styles set for desktop viewing:
+
+ /*--- Main CSS here ---*/
+
+ /*------------------------------------*\
+ $IPHONE
+ \*------------------------------------*/
+ @media screen and (max-device-width: 480px){
+ /*--- iPhone only CSS here ---*/
+ }
+
+Now any CSS before the media query will be used across all platforms, but anything between the query will be used by any screen media with a maximum screen size of 480px (i.e. an iPhone).
+
+### Things to remember
+
+There are a few key things to remember when developing CSS for the iPhone:
+
+* Avoid explicit absolute widths &ndash; where possible you should use percentage widths.
+* Linearise everything &ndash; where possible, remove all floats. We want no content side-by-side unnecessarily.
+
+The first thing to do is to set the `-webkit` proprietary CSS `-webkit-text-size-adjust` on the body which will resize the text for you, meaning you shouldn't have to touch any font sizes yourself. Also, if your body copy is set in a sans font such as Arial, now is your chance to use some Helvetica &ndash; for normal sites, Helvetica should not be used as body copy as it renders hideously on a PC. Take advantage of the fact that you can guarantee its presence and quality on an iPhone. Change your `font-family`:
+
+ /*--- Main CSS here ---*/
+
+ /*------------------------------------*\
+ $IPHONE
+ \*------------------------------------*/
+ @media screen and (max-device-width: 480px){
+ body{
+ -webkit-text-size-adjust:none;
+ font-family:Helvetica, Arial, Verdana, sans-serif;
+ padding:5px;
+ }
+ }
+
+Above, I also added a small padding to make sure nothing touches the edge of the browser. All wrapper and content `div`s from here on in should be set to `width:100%;` making them the whole width of the screen, minus 10px.
+
+### Structure
+
+Now, as all layouts differ I am going to assume a similar one to mine, a simple two column set up with a logo and menu in the header. If your layout is different I am sure you can quite easily retrofit it. As I mentioned before, remove all stylistic `float`s and set all widths to `100%`. If you are using `div`s sensibly (i.e. for large bodies of content and not for nav items) this code should see you right for linearising the content:
+
+ @media screen and (max-device-width: 480px){
+ body{...}
+ div{
+ clear:both!important;
+ display:block!important;
+ width:100%!important;
+ float:none!important;
+ margin:0!important;
+ padding:0!important;
+ }
+ }
+
+That will force all `div`s to rest one on top of the other, full width and in order. You have begun linearising all your content.
+
+### The navigation
+
+If you have a navigation menu in which all the items are floated and made horizontal, insert the following:
+
+ @media screen and (max-device-width: 480px){
+ body{...}
+ div{...}
+ #nav,#nav li{
+ float:none!important;
+ clear:both!important;
+ margin:0 0 20px 0!important;
+ display:block;
+ padding:0;
+ text-align:left!important;
+ width:100%;
+ }
+ #nav{
+ border:1px solid #ccc;
+ padding:5px;
+ border-radius:5px;
+ }
+ #nav li{
+ margin:0!important;
+ }
+ #nav li a{
+ display:block;
+ }
+ }
+
+This then will give you a vertical navigation menu which has a 100% width and the actual links themselves have a larger hit area (applied via `display:block;`), meaning that it's prominent at the top of each page and easier for users to select single items.
+
+### Images
+
+As images inherently have a set pixel width (i.e. their own width) there is a high chance that they will break out of the wrapper area (as a lot of images will be above 480px wide). To combat this simply add the following:
+
+ @media screen and (max-device-width: 480px){
+ body{...}
+ div{...}
+ #nav,#nav li{...}
+ img{
+ max-width:100%;
+ height:auto;
+ }
+ }
+
+Other than elements very specific to my site, that is pretty much [all the CSS I use to quickly size and linearise my content](/wp-content/themes/default/style.css). Any elements specific to your own site will obviously need considering on a case-by-case basis, but if you remember to not set absolute widths and to always linearise your content then it should be a doddle. Oh and it's a great time to use some guaranteed [CSS3](/css3/).
+
+Do you have an iPhone version of your site? Have you any more tips you'd like to add? Please do so in the comments below.
View
359 _posts/2010-02-02-css-bar-charts-styling-data-with-css3-and-progressive-enhancement.markdown
@@ -0,0 +1,359 @@
+---
+comments: true
+date: 2010-02-02 23:59:27
+layout: post
+slug: css-bar-charts-styling-data-with-css3-and-progressive-enhancement
+title: CSS bar charts—styling data with CSS3 and progressive enhancement
+wordpress_id: 601
+categories:
+- Web Development
+tag:
+- CSS3
+- Data Visualisation
+- Progressive Enhancement
+---
+
+Bar charts in CSS are neither very new, or very difficult. Using some pretty basic styling you can force lists etc into resembling graphs and charts fairly easily. Such charts, in their most basic form, work perfectly well in displaying and presenting the data they represent. However, using some rich CSS3 and progressive enhancement, you can really start pushing the display and presentation of these normally boring documents to the next level. They are also an ideal way in which to demonstrate the power and ability of progressive enhancement.
+
+
+
+
+
+## [View demo](/demos/graphs/)
+
+
+
+
+
+
+
+**Look at the site in IE8, _then_ Firefox, _then_ Safari/Chrome.** Keep refreshing.
+
+
+
+
+I have created [a demo page](/demos/graphs/) which simply represents three items of data expressed as percentages. It is not the data itself or the numbers we are concerned with here--it is the proof of concept. The fact that this can be done on my made up data shows that you can do it too, on real life information.
+
+
+
+
+
+## Progressive enhancement
+
+
+
+
+At [Venturelab](http://venturelab.co.uk/), we decided to use progressive enhancement as a matter of course. CSS3 and designing in the browser all the way!
+
+
+
+
+Progressive enhancement is, in my opinion, one of the most exciting schools of thought web development has seen in years (though I _have_ only been in the web for three...). It is the idea whereby any non-essential features (i.e. anything whose absence will have no adverse effect on the usability or accessibility of a website) are added to the website in a _progressive_ manner--often through CSS3.
+
+
+
+
+The benchmark example is rounded corners; to apply these through old means, for example with images, would have taken a developer a substantial amount of time--time the client is paying for. It seems silly now to think that way-back-when, putting rounded corners on a `div` might have taken upward of 30 minutes, when we can apply it in about 5 seconds using `-moz-border-radius:5px;`.
+
+
+
+
+It really is a no brainer--anyone visiting the site in a browser with no CSS3 support will see square corners. Does this matter? Of course it doesn't. No one visits a site to look solely at the design--they visit for content. Does it matter to them what shape the corners of your RSS button are? No again. Progressive enhancement saves you time, and your client money.
+
+
+
+
+
+### Isn't this just graceful degradation?
+
+
+
+
+Graceful degradation = building for the best and getting worse; progressive enhancement = building to cater the worst and getting better...
+
+
+
+
+The line between progressive enhancement and graceful degradation is fine but significant. Graceful degradation is the idea that you'd build a site for, say, Firefox, then selectively break and _downgrade_ it in the likes of IE(6). Progressive enhancement takes a much more positive attitude in that you build _for_ IE(6) and then selectively _upgrade_ it in browsers like Firefox and Safari. It's no longer starting great and getting worse, it's now starting great and getting better.
+
+
+
+
+
+### Internet Explorer
+
+
+
+
+**N.B.** Only tested in IE8 as this is not a final solution, rather a proof-of-concept.
+
+
+
+
+Internet Explorer(8)'s take on my bar charts is as you'd expect from any browser, it renders it perfectly well, providing clear, accessible content, with a flawless UX and perfectly usable. _This is not bad!_ We don't need to downgrade anything, this is our starting point. It looks good and it functions perfectly. If you did as above and visited in IE8 first, you wouldn't know that there were round corners missing--because that _doesn't_ matter.
+
+
+
+
+
+![A screenshot of the CSS bar chart in Internet Explorer 8](http://csswizardry.com/wp-content/uploads/2010/02/ie.gif)
+
+
+
+
+
+### Firefox
+
+
+
+
+Next up is Firefox, where we add some round corners to the blue bars, and also a very subtle drop shadow (`text-shadow:;`) on the text. This is no more usable than before, the content is no more accessible than in IE, but it _does_ look a tad nicer.
+
+
+
+
+
+![A screenshot of the CSS bar chart in Firefox](http://csswizardry.com/wp-content/uploads/2010/02/firefox.gif)
+
+
+
+
+
+### Safari/Chrome
+
+
+
+
+It is in Webkit based browsers such as Safari and Chrome that the real magic happens. Webkit's proprietary CSS is above and beyond that of any other rendering engine...
+
+
+
+
+
+![A screenshot of the CSS bar chart in Safari](http://csswizardry.com/wp-content/uploads/2010/02/safari.gif)
+
+
+
+
+
+What if I couldn't be bothered opening Photoshop to make a subtle gradient `.gif` for the bars? No worries, use Webkit's gradient CSS. A little reflection might look nice on the bars too, but I don't fancy any superfluous markup or `.png`s to fiddle with. Ah great, Webkit has a bit of reflection CSS too.
+
+
+
+
+However, for the real show-piece, the Webkit animation. I'm not using any Javascript libraries anywhere else in the page so I don't fancy pulling a whole one in for something that won't really be missed if it's not there. I hear Webkit has animations... magic!
+
+
+
+
+
+## The code
+
+
+
+
+Now that's the theory covered, let's look at what does all this stuff... Please note, I have used some PHP to randomise the values used by the bars of the chart. As a result, some CSS appears in the source code of the PHP file, and the rest in [the page's CSS file](http://csswizardry.com/demos/graphs/css/style.css). The code shown in the examples below is condensed into one large chunk.
+
+
+
+
+### The markup
+
+
+
+
+The markup simply comprises of one uncluttered `dl`. The reasoning behind a definition list is that each item is a title, followed by some information about that title. Not only is this semantically correct, it's a nice set of elements to be working with to achieve the layout we've got.
+
+
+
+
+ <code><dl id="chart">
+ <dt>Sales increase this week</dt>
+ <dd><span id="data-one">47%</span></dd>
+ <dt>Revenue increase this week</dt>
+ <dd><span id="data-two">59%</span></dd>
+ <dt>Profit increase this week</dt>
+ <dd><span id="data-three">26%</span></dd>
+ </dl></code>
+
+
+
+
+
+That's all there is to it.
+
+
+
+
+
+### The CSS, CSS3 and progressive enhancement
+
+
+
+
+ <code><span class="code-comment">/*------------------------------------*\
+ CHART
+ \*------------------------------------*/</span>
+ #chart{
+ width:520px;
+ }
+ #chart dt{
+ width:160px;
+ float:left;
+ margin:0 20px 5px 0;
+ padding:2px 0;
+ display:inline;
+ font-weight:bold;
+ text-align:right;
+ }
+ #chart dd{
+ width:339px;
+ border-right:1px solid #ddd;
+ float:left;
+ margin-bottom:5px;
+ display:inline;
+ }
+ #chart dd span{
+ color:#fff;
+ background:#09f;
+ text-align:center;
+ padding:2px 0;
+ display:block;
+
+ text-shadow:1px 1px 1px rgba(0,0,0,0.2);
+ -moz-border-radius:2px;
+ -webkit-border-radius:2px;
+ border-radius:2px;
+ background:-webkit-gradient(linear, left top, ->
+ left bottom, from(#09f), to(#077fd0));
+ -webkit-box-reflect:below 0 ->
+ -webkit-gradient(linear, left top, ->
+ left bottom, from(rgba(0,0,0,0)), to(rgba(0,0,0,0.25)));
+ }
+ #data-one{
+ width:47%;
+ }
+ #data-two{
+ width:59%;
+ }
+ #data-three{
+ width:26%;
+ }
+ #data-one{
+ -webkit-animation-name:bar-one; <span class="code-comment">/* Give the bar an animation with a
+ unique name */</span>
+ }
+ #data-two{
+ -webkit-animation-name:bar-two; <span class="code-comment">/* Give the bar an animation with a
+ unique name */</span>
+ }
+ #data-three{
+ -webkit-animation-name:bar-three; <span class="code-comment">/* Give the bar an animation with a
+ unique name */</span>
+ }
+ #data-one,#data-two,#data-three{ <span class="code-comment">/* Define animation styles for all three
+ bars at once */</span>
+ -webkit-animation-duration:0.5s; <span class="code-comment">/* Animation duration in seconds */</span>
+ -webkit-animation-iteration-count:1; <span class="code-comment">/* Amount of times to loop */</span>
+ -webkit-animation-timing-function:ease-out; <span class="code-comment">/* Ease in, out etc. */</span>
+ }
+ @-webkit-keyframes bar-one{
+ 0%{ <span class="code-comment">/* Define bar-one styles at 0% (0 seconds) */</span>
+ width:0%;
+ }
+ 100%{ <span class="code-comment">/* Define bar-one styles at 100% (0.5 seconds) */</span>
+ width:47%;
+ }
+ }
+ @-webkit-keyframes bar-two{
+ 0%{ <span class="code-comment">/* Define bar-two styles at 0% (0 seconds) */</span>
+ width:0%;
+ }
+ 100%{ <span class="code-comment">/* Define bar-two styles at 100% (0.5 seconds) */</span>
+ width:59%;
+ }
+ }
+ @-webkit-keyframes bar-three{
+ 0%{ <span class="code-comment">/* Define bar-three styles at 0% (0 seconds) */</span>
+ width:0%;
+ }
+ 100%{ <span class="code-comment">/* Define bar-three styles at 100% (0.5 seconds) */</span>
+ width:26%;
+ }
+ }</code>
+
+
+
+
+
+#### In detail
+
+
+
+
+There may well be some bits in there that you're not familiar with, particularly CSS animations. Basically, to animate an element you need to do a few things:
+
+
+
+
+
+
+ 1. Assign the element an animation name. This name is the 'hook' to link an animation, defined later, to an element.
+
+
+ <code>#data-one{
+ -webkit-animation-name:bar-one;
+ }</code>
+
+
+
+
+
+ 2. Assign the element animation properties. Here you set things like duration, repetition and ease-in/out.
+
+
+ <code>#data-one,#data-two,#data-three{
+ -webkit-animation-duration:0.5s;
+ -webkit-animation-iteration-count:1;
+ -webkit-animation-timing-function:ease-out;
+ }</code>
+
+
+
+
+
+ 3. Set up the keyframes of the animation. Here you set the various points. Here we have one thing to animate through two states, so we simply set a beginning at 0% and and end at 100%. We could set at any percentage in between but as we just have a beginning and an end, we don't need to--Webkit sees to that.
+
+
+ <code>@-webkit-keyframes bar-one{
+ 0%{
+ width:0%;
+ }
+ 100%{
+ width:47%;
+ }
+ }</code>
+
+
+
+
+
+
+
+With regards the Webkit reflections, it may be a better idea to consult the [Surfin' Safari page on that](http://webkit.org/blog/182/css-reflections/), as anything I'd say would most likely be a poorly pulled off rehash.
+
+
+
+
+
+## Closing word
+
+
+
+
+So there you have it, a real life, justifiable and wholly appropriate application of CSS3 and progressive enhancement coupled with data visualisation. Don't be held back by the limitations of older browsers--relish in the opportunities new ones bring.
+
+
+
+
+And as a final bonus, [@VIPickering](http://twitter.com/VIPickering) requested [this (view in Safari/Chrome)](/demos/graphs/index2.php)... enjoy.
View
86 _posts/2010-02-04-upside-down-domainsregistering-an-international-domain-name.markdown
@@ -0,0 +1,86 @@
+---
+comments: true
+date: 2010-02-04 15:44:17
+layout: post
+slug: upside-down-domainsregistering-an-international-domain-name
+title: Upside down domains—registering an international domain name
+wordpress_id: 672
+categories:
+- Web Development
+tag:
+- Domains
+---
+
+Earlier today I registered the domain [http://ʎɹɹɐɥ.com](http://ʎɹɹɐɥ.com). Or did I? Upon reading [an article by Sam Brown](http://sam.brown.tc/entry/417/how-to-register-an-international-domain-name), which in turn linked to [an article by John Sutherland](http://sneeu.com/blog/2010/1/how-register-international-domain-name/) explaining how to register such domains, I wanted one. There are a few levels to this trickery. There's the 'Oh I totally understand how this works!', or there's the 'I don't want to know how it works, I just want it!' level.
+
+
+
+
+
+## I just want one!
+
+
+
+
+Okay, I didn't actually register` http://ʎɹɹɐɥ.com/`, I registered what you might call its alias: `http://xn--jna6b0ca7h.com`. So, by that token, you find the upside down version of your domain (mine being `harry`) via this [upside down letter converter](http://www.sevenwires.com/play/UpsideDownLetters.html), paste the result (mine being `ʎɹɹɐɥ`) into [this IDN converter](http://mct.verisign-grs.com/conversiontool/) and add whatever domain extension (mine being .com) to the resulting string (mine being `xn--jna6b0ca7h`). You then register the outcome, and you can access it via the upside down version! `http://ʎɹɹɐɥ.com/` is just an alias of `http://xn--jna6b0ca7h.com/` in a sense...
+
+
+
+
+
+If you view the source of this page you'll see the markup actually links to `http://ʎɹɹɐɥ.com/` but resolves to `http://xn--jna6b0ca7h.com/` in the status bar when you hover it.
+
+
+
+
+
+## I want details!
+
+
+
+
+If you want to actually understand the technicalities behind it, you ought to read the two articles linked previously.
+
+
+
+
+
+## Why would I need this?
+
+
+
+
+You don't, but it is cool, right? Although, you could use it as a pretty nifty short-URL for your blog on Twitter like Daring Fireball's awesome [http://?df.ws](http://?df.ws) one.
+
+
+
+
+
+### Which leads me on to...
+
+
+
+
+You don't have to have an upside down domain, you can use glyphs in there too. Grab some glyphs from [CopyPasteCharacter](http://copypastecharacter.com/) and pop those into the converter too.
+
+
+
+
+
+### Registering your domain
+
+
+
+
+This is not a plug...
+
+
+
+
+I've heard reports of people being asked about languages for the IDNs from their registrar of choice. I went with [Heart Internet](http://www.heartinternet.co.uk/) and registered `http://xn--jna6b0ca7h.com/` no trouble, just as if it was a regular domain.
+
+
+
+
+
+Be sure to comment it you buy/have bought one yourself.
View
112 _posts/2010-02-11-mutiple-column-lists-using-one-ul.markdown
@@ -0,0 +1,112 @@
+---
+comments: true
+date: 2010-02-11 23:44:02
+layout: post
+slug: mutiple-column-lists-using-one-ul
+title: Multiple column lists using one &lt;ul&gt;
+wordpress_id: 701
+categories:
+- Web Development
+tag:
+- CSS
+- HTML
+- Lists
+---
+
+This is a quick, simple tutorial on how to create multiple column lists by only using one `ul`. Often is the case when you'd want multiple lists side-by-side, but you end up using markup like `<ul class="col">` in order to get several lists sat next to each other. However, by simply floating `li`s left and setting their width to the correct percentage (two columns = `li{width:50%;}` and so on), you can attain a multiple column list pretty easily.
+
+
+
+
+
+## [View demo](http://csswizardry.com/demos/multiple-column-lists/)
+
+
+
+
+
+
+
+The trick here is to force the list to break at the right point. If you want two columns, you need to float the list items left and set them at 50% width, therefore the list items will only ever fit two side-by-side, then begin again on the row beneath. By that token, three columns would require a width of 33% and floated left, four would be 25% and so on.
+
+
+
+
+
+## The code
+
+
+
+
+Both the markup and CSS for this is incredibly simple, nothing fancy, no CSS3, nothing progressive, just basic styling applied to lean markup.
+
+
+
+
+### The markup
+
+
+
+
+The markup for this is just a simple `ul`, thus:
+
+
+
+
+ <code><ul id="double"> <span class="code-comment"><!-- Alter ID accordingly --></span>
+ <li>CSS</li>
+ <li>XHTML</li>
+ <li>Semantics</li>
+ <li>Accessibility</li>
+ <li>Usability</li>
+ <li>Web Standards</li>
+ <li>PHP</li>
+ <li>Typography</li>
+ <li>Grids</li>
+ <li>CSS3</li>
+ <li>HTML5</li>
+ <li>UI</li>
+ </ul></code>
+
+
+
+
+
+And to make this into a multiple column list:
+
+
+
+
+
+ <code>ul{
+ width:760px;
+ margin-bottom:20px;
+ overflow:hidden;
+ border-top:1px solid #ccc;
+ }
+ li{
+ line-height:1.5em;
+ border-bottom:1px solid #ccc;
+ float:left;
+ display:inline;
+ }
+ #double li { width:50%;} <span class="code-comment">/* 2 col */</span></