├── .gitignore
├── LICENSE
├── README.md
├── bower.json
├── csscv.scss
└── index.html


/.gitignore:
--------------------------------------------------------------------------------
1 | *.css
2 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | Copyright 2013 Harry Roberts
 2 | 
 3 | Licensed under the Apache License, Version 2.0 (the "License");
 4 | you may not use this file except in compliance with the License.
 5 | You may obtain a copy of the License at
 6 | 
 7 | http://apache.org/licenses/LICENSE-2.0
 8 | 
 9 | Unless required by applicable law or agreed to in writing, software
10 | distributed under the License is distributed on an "AS IS" BASIS,
11 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12 | See the License for the specific language governing permissions and
13 | limitations under the License.
14 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | #CSSCV
  2 | 
  3 | **CSSCV is a simple, opinionated stylesheet for formatting semantic HTML to look
  4 | like a CSS file.**
  5 | 
  6 | ## Getting started
  7 | 
  8 | The simplest way to get started with CSSCV is to dive right into the HTML and
  9 | get editing! There is nothing in the Sass that isn’t used in the HTML, so the
 10 | `index.html` file acts as a comprehensive, real-world demo of what CSSCV can do.
 11 | 
 12 | Below is a more detailed overview of the ins-and-outs of the way CSSCV works.
 13 | 
 14 | ## Opinionated?
 15 | 
 16 | CSSCV matches my own personal style of writing CSS, and uses a specific colour
 17 | scheme, [<cite>Solarized</cite>](http://ethanschoonover.com/solarized). Some of
 18 | its other more opinionated features:
 19 | 
 20 | * [Only single classes are allowed as selectors](http://csswizardry.com/2012/05/keep-your-css-selectors-short/)
 21 | * [It uses a BEM-style naming convention](http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/)
 22 | * [Rulesets are spaced by five carriage returns](https://github.com/csswizardry/CSS-Guidelines#section-titles)
 23 | * [Quasi-nested rulesets are indented](https://github.com/csswizardry/CSS-Guidelines#anatomy-of-rulesets)
 24 | * [All indents are four spaces](https://github.com/csswizardry/CSS-Guidelines#anatomy-of-rulesets)
 25 | 
 26 | ## Enabling
 27 | 
 28 | CSSCV comes with the option to [en|dis]able its styling. This is so that you can
 29 | quickly and easily remove CSSCV’s unconventional look, and instead expose
 30 | unstyled HTML in case you ever need to provide a more standard format of CV to
 31 | recruiters or HR teams. Boring, but often vital. Enabling CSSCV is as simple as
 32 | adding a class of `.csscv` the the `html` element; all of CSSCV’s styles are
 33 | scoped to this namespace.
 34 | 
 35 | ## Making stuff work
 36 | 
 37 | There are a series of simple yet strict rules to follow in order to use CSSCV.
 38 | Rulesets are built using definition lists and comments and selectors are usually
 39 | constructed using headings. Below is a simple example that we will deconstruct:
 40 | 
 41 |     <div class="ruleset">
 42 | 
 43 |         <h3 class="selector">Me</h3>
 44 | 
 45 |         <dl class="declarations">
 46 | 
 47 |             <dt class="property">Name</dt>
 48 |             <dd class="value"><span class="string">Harry Roberts</span></dd>
 49 | 
 50 |             <dt class="property">Job</dt>
 51 |             <dd class="value"><span class="string">Consultant Front-end Architect</span></dd>
 52 | 
 53 |             <dt class="property">Location</dt>
 54 |             <dd class="value"><span class="string">Leeds, UK</span></dd>
 55 | 
 56 |             <dt class="property">Skills</dt>
 57 |             <dd class="value">
 58 |                 <ul class="value-list">
 59 |                     <li><span class="string">Front-end Architecture</span></li>
 60 |                     <li>Design</li>
 61 |                     <li>Development</li>
 62 |                     <li>OOCSS</li>
 63 |                     <li>Performance</li>
 64 |                     <li><span class="string">Responsive Web Design</span></li>
 65 |                     <li>Git</li>
 66 |                     <li>Vim</li>
 67 |                     <li>Agile</li>
 68 |                 </ul>
 69 |             </dd>
 70 | 
 71 |         </dl>
 72 | 
 73 |     </div>
 74 | 
 75 | Let’s take a look at what this does:
 76 | 
 77 | * We wrap each ruleset in a container with a `.ruleset` class.
 78 | * The title, or _selector_, of that ruleset is a heading which carries the
 79 |   `.selector` class.
 80 | * The declarations that make up the ruleset are marked up in a `dl` which has a
 81 |   class of `.declarations`.
 82 | * Each property/value pair are marked up with `dt`s and `dd`s respectively.
 83 |   These, respectively, carry classes of `.property` and `.value`.
 84 | * Any strings that would require quoting in CSS (e.g. `"Comic Sans MS"`) can
 85 |   be wrapped in a `span` with a class of `string`. This colours them differently
 86 |   and applies opening and closing quote marks.
 87 | * Lists of values (e.g. `font-family: "Comic Sans MS", cursive;`) are marked up
 88 |   as either ordered- or unordered-lists which carry a class of `.value-list`.
 89 | 
 90 | As we can see, the rulesets are formed of semantic HTML elements and heavy use
 91 | of CSS pseudo-elements are used to apply CSS-like syntax (braces, (semi-)colons,
 92 | quotes, etc).
 93 | 
 94 | ## What the classes do
 95 | 
 96 | ### `.csscv`
 97 | 
 98 | This class gets applied to the `html` element and enables CSSCV
 99 | 
100 | ### `.spaced`
101 | 
102 | This class forces all elements which carry it to have one carriage return’s
103 | space between itself and the following element.
104 | 
105 | #### `.spaced--large`
106 | 
107 | This increases the spacing from one to five carriage returns.
108 | 
109 | ### `.indented`
110 | 
111 | Anything carrying this class will be indented by your chosen tab size amount
112 | (defined in `$tab-size`).
113 | 
114 | ### `.ruleset`
115 | 
116 | This class is applied to an element which wraps each whole ruleset. It spaces
117 | rulesets apart from each other, and can also carry the `.spaced--large` or
118 | `.indented` classes.
119 | 
120 | ### `.selector`
121 | 
122 | This class is applied to headings which introduce each ruleset. It adds a period
123 | before, and an opening brace after, the title of the ruleset.
124 | 
125 | ### `.selector__delimiter`
126 | 
127 | This class is applied to an empty span in order to hyphen-delimit multi-word
128 | selectors. For example:
129 | 
130 |     <h2 class="selector">About<span class="selector__delimiter"> </span>me</h2>
131 | 
132 | ### `.declarations`
133 | 
134 | This class is applied to the definition list that will form the body of the
135 | ruleset. It adds a closing brace after the final declaration.
136 | 
137 | ### `.property`
138 | 
139 | This class is applied to each `dt` element which is a declaration’s property. It
140 | indents the declaration as per your chosen tab size and adds a trailing colon
141 | and space.
142 | 
143 | ### `.value`
144 | 
145 | This is applied to each `dd` element which becomes a declaration’s value. It
146 | adds a trailing semi-colon.
147 | 
148 | ### `.string`
149 | 
150 | CSS often has values which contain spaces which need quoting, wrap these strings
151 | in a `span` that carries the `.string` class.
152 | 
153 | ### `.number`
154 | 
155 | This class simply colours any number-like values (e.g. `34px`, `#f00`).
156 | 
157 | ### `.url`
158 | 
159 | Any URL-like values can have the `.url` class applied to them to prepend `url(`
160 | and append `)` to it.
161 | 
162 | ### `.value-list`
163 | 
164 | CSS often contains comma-delimited lists of values. In CSSCV we mark these up
165 | as `ul`s and `li`s. The `ul` take the `.value-list` class.
166 | 
167 | ### `.element` and `.modifier`
168 | 
169 | These two classes allow you to use
170 | [BEM-style naming](http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/)
171 | without polluting your markup. To signify an element or modifier, use the
172 | corresponding class. You need to also use the `data-namespace` attribute in
173 | order to prepend the class with the correct block name, e.g.:
174 | 
175 |     <h3 class="selector">Job</h3>
176 | 
177 |     ...
178 | 
179 |     <h4 class="selector"><span class="modifier" data-namespace="job">Company</span></h4>
180 | 
181 | ### `.comment`, `.comment-block` and `.comment-block__line`
182 | 
183 | These classes, unsurprisingly, style markup to look like comments. The `.comment`
184 | class gives an inline comment, whilst `.comment-block` gives us a DocBlock
185 | style comment:
186 | 
187 |     <p class="comment-block">
188 |         <span class="comment-block__line">Foo</span>
189 |         <span class="comment-block__line">Bar</span>
190 |         <span class="comment-block__line">Baz</span>
191 |     </p>
192 | 
193 | ### `.notice`
194 | 
195 | This is the attribution message that appears at the bottom of the CSSCV page.
196 | Including the message is not mandatory, but is appreciated.
197 | 


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
1 | {
2 |     "name": "csscv",
3 |     "version": "1.1.1",
4 |     "main": "csscv.scss",
5 |     "author": "Harry Roberts"
6 | }
7 | 


--------------------------------------------------------------------------------
/csscv.scss:
--------------------------------------------------------------------------------
  1 | /*------------------------------------*\
  2 |     CSSCV
  3 | \*------------------------------------*/
  4 | /*!*
  5 |  * 
  6 |  * CSSCV -- csswizardry.com/csscv -- @csswizardry
  7 |  * 
  8 |  */
  9 | /**
 10 |  * CSSCV is a simple, opinionated stylesheet for formatting semantic HTML to
 11 |  * look like a CSS file. Apply the class of `.csscv` to the `html` element of
 12 |  * your page to invoke the CSSCV stylesheet. Removing this class will leave you
 13 |  * with an unstyled page of pure, semantic HTML. This is useful if you wish to
 14 |  * disable CSSCV in order to style your page more suitably for recruiters and
 15 |  * more serious applications.
 16 |  */
 17 | .csscv {
 18 | 
 19 | 
 20 | 
 21 | 
 22 | 
 23 | /*------------------------------------*\
 24 |     #CONTENTS
 25 | \*------------------------------------*/
 26 | /**
 27 |  * SETTINGS
 28 |  * RESET
 29 |  * HELPERS
 30 |  * BASE
 31 |  * RULESETS
 32 |  * SELECTORS
 33 |  * DECLARATIONS
 34 |  * PROPERTIES
 35 |  * VALUES
 36 |  * STRINGS
 37 |  * NUMBERS
 38 |  * URLS
 39 |  * LISTS
 40 |  * BEM
 41 |  * COMMENTS
 42 |  * NOTICE
 43 |  */
 44 | 
 45 | 
 46 | 
 47 | 
 48 | 
 49 | /*------------------------------------*\
 50 |     #SETTINGS
 51 | \*------------------------------------*/
 52 | /**
 53 |  * How big would you like your tabs to be?
 54 |  */
 55 | $tab-size:  4;
 56 | 
 57 | 
 58 | /**
 59 |  * Colour settings.
 60 |  */
 61 | $color--blue--dark:     #002935;
 62 | $color--blue--light:    #0083ce;
 63 | $color--grey--dark:     #7f9597;
 64 | $color--grey--light:    #4f6c73;
 65 | $color--mustard:        #b58a0a;
 66 | $color--turquoise:      #00a19b;
 67 | 
 68 | 
 69 | /**
 70 |  * Reassign colour variables to better names.
 71 |  */
 72 | $color--background:     $color--blue--dark;
 73 | $color--text:           $color--grey--light;
 74 | $color--comment:        $color--grey--dark;
 75 | $color--selector:       $color--blue--light;
 76 | $color--braces:         $color--blue--light;
 77 | $color--property:       $color--mustard;
 78 | $color--value:          $color--mustard;
 79 | $color--colons:         $color--grey--dark;
 80 | $color--string:         $color--turquoise;
 81 | $color--number:         $color--turquoise;
 82 | 
 83 | 
 84 | 
 85 | 
 86 | 
 87 | /*------------------------------------*\
 88 |     #RESET
 89 | \*------------------------------------*/
 90 | /**
 91 |  * This is a pretty poor reset, but it will suffice for a single-page, single-
 92 |  * responsibility stylesheet.
 93 |  *
 94 |  * 1. Everything the same size (16px by default).
 95 |  * 2. Fixes an odd font-sizing issue in some browsers.
 96 |  */
 97 | * {
 98 |     margin:  0;
 99 |     padding: 0;
100 |     font-size: 100%; /* [1] */
101 |     font-family: monospace, monospace; /* [2] */
102 |     font-weight: normal;
103 | }
104 | 
105 | 
106 | 
107 | 
108 | 
109 | /*------------------------------------*\
110 |     #HELPERS
111 | \*------------------------------------*/
112 | /**
113 |  * Little helper classes to allow us to quickly build stuff.
114 |  *
115 |  * 1. Space apart our rulesets by the same value as our line-height.
116 |  */
117 | .spaced,
118 | %spaced {
119 |     margin-bottom: 24px; /* [1] */
120 |     margin-bottom: 1.5rem; /* [1] */
121 | }
122 | 
123 | .spaced--large {
124 |     margin-bottom: 5 * 24px;
125 |     margin-bottom: 5 * 1.5rem;
126 | }
127 | 
128 | .indented {
129 |     padding-left: ($tab-size * .625) +em;
130 | }
131 | 
132 | 
133 | 
134 | 
135 | 
136 | /*------------------------------------*\
137 |     #BASE
138 | \*------------------------------------*/
139 | /**
140 |  * 1. Comfortable line-height (equivalent to 24px).
141 |  * 2. Pad the page by the same value as our line-height.
142 |  */
143 | & {
144 |     line-height: 1.5; /* [1] */
145 |     padding: 24px; /* [2] */
146 |     padding: 1.5rem; /* [2] */
147 |     padding-bottom: 0;
148 |     color: $color--text;
149 |     background-color: $color--background;
150 | }
151 | 
152 | a {
153 |     color: inherit;
154 | }
155 | 
156 | 
157 | 
158 | 
159 | 
160 | /*------------------------------------*\
161 |     #RULESETS
162 | \*------------------------------------*/
163 | /**
164 |  * Wrap our selector and declarations in an element with a class of `.ruleset`.
165 |  */
166 | .ruleset {
167 |     @extend %spaced;
168 | }
169 | 
170 | 
171 | 
172 | 
173 | 
174 | /*------------------------------------*\
175 |     #SELECTORS
176 | \*------------------------------------*/
177 | /**
178 |  * Each section is marked up as a heading which becomes our selector. We assume
179 |  * all our selectors will be classes.
180 |  *
181 |  * 1. Lowercase our class names.
182 |  * 2. Prepend a period.
183 |  * 3. Append an opening brace.
184 |  */
185 | .selector {
186 |     color: $color--selector;
187 |     text-transform: lowercase; /* [1] */
188 | 
189 |     &:before {
190 |         content: "."; /* [2] */
191 |     }
192 | 
193 |     &:after {
194 |         content: " {"; /* [3] */
195 |     }
196 | 
197 | }
198 | 
199 |     /**
200 |      * Insert a hyphen in place of a space in multiple word selectors.
201 |      *
202 |      * 1. Force the empty element to take up its space.
203 |      */
204 |     .selector__delimiter {
205 |         position: relative;
206 |         white-space: pre; /* [1] */
207 | 
208 |         &:before {
209 |             content: "-";
210 |             position: absolute;
211 |             display: inline-block;
212 |             width: .625em;
213 |             text-align: center;
214 |         }
215 | 
216 |     }
217 | 
218 | 
219 | 
220 | 
221 | 
222 | /*------------------------------------*\
223 |     #DECLARATIONS
224 | \*------------------------------------*/
225 | /**
226 |  * Each block of declarations is marked up as a definition list with a class of
227 |  * `.declarations`.
228 |  *
229 |  * 1. Close our declarations with a curly brace.
230 |  */
231 | .declarations {
232 | 
233 |     &:after {
234 |         content: "}"; /* [1] */
235 |         color: $color--braces;
236 |     }
237 | 
238 | }
239 | 
240 | 
241 | 
242 | 
243 | 
244 | /*------------------------------------*\
245 |     #PROPERTIES
246 | \*------------------------------------*/
247 | /**
248 |  * A `dt` and `dd` form a property–value pair (i.e. declaration). Each `dt` gets
249 |  * a class of `.property`.
250 |  *
251 |  * 1. Indent our declarations based on the chosen tab size.
252 |  * 2. End each property with a colon and a space.
253 |  */
254 | .property {
255 |     text-transform: lowercase;
256 |     float: left;
257 |     clear: both;
258 |     padding-left: ($tab-size * .625) +em; /* [1] */
259 |     color: $color--property;
260 | 
261 |     &:after {
262 |         content: ":\00A0"; /* [2] */
263 |         color: $color--colons;
264 |     }
265 | 
266 | }
267 | 
268 | 
269 | 
270 | 
271 | 
272 | /*------------------------------------*\
273 |     #VALUES
274 | \*------------------------------------*/
275 | /**
276 |  * Each `dd` gets a class of `.value`.
277 |  *
278 |  * 1. End each value with a semi-colon.
279 |  */
280 | .value {
281 |     color: $color--value;
282 | 
283 |     &:after {
284 |         content: ";"; /* [1] */
285 |         color: $color--colons;
286 |     }
287 | 
288 | }
289 | 
290 | 
291 | 
292 | 
293 | 
294 | /*------------------------------------*\
295 |     #STRINGS
296 | \*------------------------------------*/
297 | /**
298 |  * Strings in CSS (such as font names) need to be enclosed in quotes. Wrap
299 |  * strings in your CV with a `span` with a class of `.string`, e.g.
300 |  * `<span class="string">Harry Roberts</span>`.
301 |  */
302 | .string {
303 |     color: $color--string;
304 | 
305 |     &:before,
306 |     &:after {
307 |         content: "\"";
308 |     }
309 | 
310 | }
311 | 
312 | 
313 | 
314 | 
315 | 
316 | /*------------------------------------*\
317 |     #NUMBERS
318 | \*------------------------------------*/
319 | /**
320 |  * Numbers in values need wrapping in a `.number` element.
321 |  */
322 | .number {
323 |     color: $color--number;
324 | }
325 | 
326 | 
327 | 
328 | 
329 | 
330 | /*------------------------------------*\
331 |     #URLS
332 | \*------------------------------------*/
333 | /**
334 |  * Wrap any URLs with a `span` with a class of `.url`.
335 |  */
336 | .url {
337 | 
338 |     &:before{
339 |         content: "url(";
340 |     }
341 | 
342 |     &:after {
343 |         content: ")";
344 |     }
345 | 
346 | }
347 | 
348 | 
349 | 
350 | 
351 | 
352 | /*------------------------------------*\
353 |     #LISTS
354 | \*------------------------------------*/
355 | /**
356 |  * Lists of values should be marked up with a `ul` with a class of `.value-list`.
357 |  */
358 | .value-list {
359 |     list-style: none;
360 |     display: inline;
361 | 
362 |     > li {
363 |         display: inline;
364 | 
365 |         &:after {
366 |             content: ", ";
367 |         }
368 | 
369 |         &:last-child:after {
370 |             content: "";
371 |         }
372 | 
373 |     }
374 | 
375 | }
376 | 
377 | 
378 | 
379 | 
380 | 
381 | /*------------------------------------*\
382 |     #BEM
383 | \*------------------------------------*/
384 | /**
385 |  * Denote any relationships within your CV with BEM-style naming.
386 |  *
387 |  * 1. An element of an item is prepended with the namespace you set (via
388 |  *    `data-namespace` in your markup) and two underscores.
389 |  * 2. A modifier of an item is prepended with the namespace you set (via
390 |  *    `data-namespace` in your markup) and two hyphens.
391 |  */
392 | .element:before {
393 |     content: attr(data-namespace) "__"; /* [1] */
394 | }
395 | 
396 | .modifier:before {
397 |     content: attr(data-namespace) "--"; /* [2] */
398 | }
399 | 
400 | 
401 | 
402 | 
403 | 
404 | /*------------------------------------*\
405 |     #COMMENTS
406 | \*------------------------------------*/
407 | /**
408 |  * Create inline comments.
409 |  */
410 | .comment {
411 |     color: $color--comment;
412 | 
413 |     &:before {
414 |         content: "/* ";
415 |     }
416 | 
417 |     &:after {
418 |         content: " */";
419 |     }
420 | 
421 | }
422 | 
423 | 
424 | /**
425 |  * Create multi-line, DocBlock style comments.
426 |  */
427 | .comment-block {
428 |     color: $color--comment;
429 | 
430 |     &:before,
431 |     &:after {
432 |         display: block;
433 |     }
434 | 
435 |     &:before {
436 |         content: "/**";
437 |     }
438 | 
439 |     &:after {
440 |         content: "\00A0*/";
441 |     }
442 | 
443 | }
444 | 
445 |     .comment-block__line {
446 |         display: block;
447 | 
448 |         &:before {
449 |             content: "\00A0*\00A0";
450 |         }
451 | 
452 |     }
453 | 
454 | 
455 | 
456 | 
457 | 
458 | /*------------------------------------*\
459 |     #NOTICE
460 | \*------------------------------------*/
461 | /**
462 |  * The attribution notice that appears at the bottom of a CSSCV page.
463 |  *
464 |  * 1. Only display the message if CSSCV is enabled; the notice carries an inline
465 |  *    style of `display: none;` which will take effect once CSSCV is disabled.
466 |  */
467 | .notice {
468 |     @extend %spaced;
469 |     display: block !important; /* [1] */
470 | }
471 | 
472 | 
473 | 
474 | 
475 | 
476 | } //csscv
477 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en" class="csscv">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <meta name="viewport" content="width=device-width, minimum-scale=1.0">
  6 | 
  7 |     <title>Curriculum Vitae of Harry Roberts – CSSCV</title>
  8 | 
  9 |     <link rel="stylesheet" href="csscv.css">
 10 | 
 11 | </head>
 12 | <body>
 13 | 
 14 |     <h1 class="comment-block  spaced--large">
 15 |         <span class="comment-block__line">The Curriculum Vitae of Harry Roberts.</span>
 16 |         <span class="comment-block__line"></span>
 17 |         <span class="comment-block__line">Hi there, I’m Harry. I am a Consultant Front-end Architect, designer,</span>
 18 |         <span class="comment-block__line">developer, writer and speaker from the UK.</span>
 19 |     </h1>
 20 | 
 21 |     <h2 class="comment-block">
 22 |         <span class="comment-block__line">About me</span>
 23 |     </h2>
 24 | 
 25 |     <div class="ruleset">
 26 | 
 27 |         <h3 class="selector">Me</h3>
 28 | 
 29 |         <dl class="declarations">
 30 | 
 31 |             <dt class="property">Name</dt>
 32 |             <dd class="value"><span class="string">Harry Roberts</span></dd>
 33 | 
 34 |             <dt class="property">Job</dt>
 35 |             <dd class="value"><span class="string">Consultant Front-end Architect</span></dd>
 36 | 
 37 |             <dt class="property">Status</dt>
 38 |             <dd class="value"><span class="string"><a href="http://csswizardry.com/work/">For hire</a></span></dd>
 39 | 
 40 |             <dt class="property">Location</dt>
 41 |             <dd class="value"><span class="string">Leeds, UK</span></dd>
 42 | 
 43 |             <dt class="property">Skills</dt>
 44 |             <dd class="value">
 45 |                 <ul class="value-list">
 46 |                     <li><span class="string">Front-end Architecture</span></li>
 47 |                     <li>Design</li>
 48 |                     <li>Development</li>
 49 |                     <li>OOCSS</li>
 50 |                     <li>Performance</li>
 51 |                     <li><span class="string">Responsive Web Design</span></li>
 52 |                     <li>Speaking</li>
 53 |                     <li>Writing</li>
 54 |                     <li>Git</li>
 55 |                     <li>Vim</li>
 56 |                     <li>Agile</li></ul></dd>
 57 | 
 58 |         </dl>
 59 | 
 60 |     </div>
 61 | 
 62 |     <div class="ruleset  indented  spaced--large">
 63 | 
 64 |         <h3 class="selector"><span class="element" data-namespace="me">Contact</span></h3>
 65 | 
 66 |         <dl class="declarations">
 67 | 
 68 |             <dt class="property">Email</dt>
 69 |             <dd class="value"><a href="mailto:harry@csswizardry.com">harry@csswizardry.com</a></dd>
 70 | 
 71 |             <dt class="property">Website</dt>
 72 |             <dd class="value"><span class="url"><a href="http://csswizardry.com">csswizardry.com</a></span></dd>
 73 | 
 74 |             <dt class="property">GitHub</dt>
 75 |             <dd class="value"><span class="url"><a href="https://github.com/csswizardry/">github.com/csswizardry</a></span></dd>
 76 | 
 77 |             <dt class="property">Twitter</dt>
 78 |             <dd class="value"><a href="https://twitter.com/csswizardry">@csswizardry</a></dd>
 79 | 
 80 |         </dl>
 81 | 
 82 |     </div>
 83 | 
 84 |     <h2 class="comment-block">
 85 |         <span class="comment-block__line">Career and work</span>
 86 |     </h2>
 87 | 
 88 |     <div class="ruleset">
 89 | 
 90 |         <h3 class="selector">Job</h3>
 91 | 
 92 |         <dl class="declarations">
 93 | 
 94 |             <dt class="property">Title</dt>
 95 |             <dd class="value"><span class="string">Front-end Architect</span></dd>
 96 | 
 97 |             <dt class="property">Location</dt>
 98 |             <dd class="value">Worldwide</dd>
 99 | 
100 |             <dt class="property">Services</dt>
101 |             <dd class="value">
102 |                 <ul class="value-list">
103 |                     <li>Consultancy</li>
104 |                     <li>Training</li>
105 |                     <li>Speaking</li>
106 |                     <li>Workshops</li>
107 |                     <li>Development</li>
108 |                     <li>Advisory</li></ul></dd>
109 | 
110 |         </dl>
111 | 
112 |     </div>
113 | 
114 |     <div class="ruleset">
115 | 
116 |         <h4 class="selector"><span class="modifier" data-namespace="job">CSS<span class="selector__delimiter"> </span>Wizardry</span></h4>
117 | 
118 |         <dl class="declarations">
119 | 
120 |             <dt class="property">Company</dt>
121 |             <dd class="value"><span class="string">CSS Wizardry Ltd.</span></dd>
122 | 
123 |             <dt class="property">Title</dt>
124 |             <dd class="value"><span class="string">Consultant Front-end Architect</span></dd>
125 | 
126 |             <dt class="property">From</dt>
127 |             <dd class="value"><span class="string">October, 2013</span></dd>
128 | 
129 |             <dt class="property">To</dt>
130 |             <dd class="value"><span class="string">Present</span></dd>
131 | 
132 |             <dt class="property">Responsibilities</dt>
133 |             <dd class="value">
134 |                 <ul class="value-list">
135 |                     <li>Consultancy</li>
136 |                     <li>Speaking</li>
137 |                     <li>Workshops</li>
138 |                     <li>Development</li></ul></dd>
139 | 
140 |             <dt class="property">Notes</dt>
141 |             <dd class="value"><span class="string">After years of continued open-source
142 |                 contributions, publication of articles, speaking, workshops, and
143 |                 working in varied organisations, I decided, in 2013, to turn CSS
144 |                 Wizardry into my full time job. I am working to help agencies,
145 |                 product teams and individuals write better quality front-end
146 |                 code for faster, leaner and more scalable products. I am doing
147 |                 this through a combination of workshops, talks and consultancy.</span></dd>
148 | 
149 |         </dl>
150 | 
151 |     </div>
152 | 
153 |     <div class="ruleset">
154 | 
155 |         <h4 class="selector"><span class="modifier" data-namespace="job">BSkyB</span></h4>
156 | 
157 |         <dl class="declarations">
158 | 
159 |             <dt class="property">Company</dt>
160 |             <dd class="value"><span class="string">British Sky Broadcasting</span></dd>
161 | 
162 |             <dt class="property">Title</dt>
163 |             <dd class="value"><span class="string">Senior UI Developer</span></dd>
164 | 
165 |             <dt class="property">From</dt>
166 |             <dd class="value"><span class="string">March, 2011</span></dd>
167 | 
168 |             <dt class="property">To</dt>
169 |             <dd class="value"><span class="string">October, 2013</span></dd>
170 | 
171 |             <dt class="property">Responsibilities</dt>
172 |             <dd class="value">
173 |                 <ul class="value-list">
174 |                     <li>Build</li>
175 |                     <li><span class="string">Front-end Architecture</span></li>
176 |                     <li><span class="string">Front-end Performance</span></li>
177 |                     <li>Scalability</li>
178 |                     <li><span class="string">Mobile Development</span></li>
179 |                     <li>Training</li>
180 |                     <li><span class="string">Developer Relations</span></li>
181 |                     <li><span class="string">Progressive Enhancement</span></li>
182 |                     <li><span class="string">Design Rationalisation</span></li></ul></dd>
183 | 
184 |             <dt class="property">Notes</dt>
185 |             <dd class="value"><span class="string">Working solo in a large team
186 |             of software engineers, I was responsible for the front-ends of some
187 |             of Sky’s largest and most profitable online products. I worked to
188 |             provide in-house tools and frameworks, as well as code standards,
189 |             to enable the larger team to construct front-ends. I also focused
190 |             heavily front-end performance, scalability, architecture and
191 |             maintainability.</span></dd>
192 | 
193 |         </dl>
194 | 
195 |     </div>
196 | 
197 |     <div class="ruleset">
198 | 
199 |         <h4 class="selector"><span class="modifier" data-namespace="job">Venturelab</span></h4>
200 | 
201 |         <dl class="declarations">
202 | 
203 |             <dt class="property">Company</dt>
204 |             <dd class="value"><span class="string">Venturelab UK Ltd.</span></dd>
205 | 
206 |             <dt class="property">Title</dt>
207 |             <dd class="value"><span class="string">Web Developer</span></dd>
208 | 
209 |             <dt class="property">From</dt>
210 |             <dd class="value"><span class="string">January, 2010</span></dd>
211 | 
212 |             <dt class="property">To</dt>
213 |             <dd class="value"><span class="string">March, 2011</span></dd>
214 | 
215 |             <dt class="property">Responsibilities</dt>
216 |             <dd class="value">
217 |                 <ul class="value-list">
218 |                     <li>Design</li>
219 |                     <li>Build</li>
220 |                     <li>UX</li>
221 |                     <li>UI</li>
222 |                     <li>IA</li>
223 |                     <li>Accessibility</li>
224 |                     <li><span class="string">Progressive Enhancement</span></li></ul></dd>
225 | 
226 |             <dt class="property">Notes</dt>
227 |             <dd class="value"><span class="string">Working as lead front-end
228 |                 developer in a VC’s dedicated web team. I was responsible for
229 |                 the build of websites as well as taking the company toward a
230 |                 progressive enhancement, design-in-the-browser and lean
231 |                 development approach.</span></dd>
232 | 
233 |         </dl>
234 | 
235 |     </div>
236 | 
237 |     <div class="ruleset  spaced--large">
238 | 
239 |         <h4 class="selector"><span class="modifier" data-namespace="job">Sense<span class="selector__delimiter"> </span>Internet</span></h4>
240 | 
241 |         <dl class="declarations">
242 | 
243 |             <dt class="property">Company</dt>
244 |             <dd class="value"><span class="string">Sense Internet</span></dd>
245 | 
246 |             <dt class="property">Title</dt>
247 |             <dd class="value"><span class="string">Web Developer</span></dd>
248 | 
249 |             <dt class="property">From</dt>
250 |             <dd class="value"><span class="string">July, 2008</span></dd>
251 | 
252 |             <dt class="property">To</dt>
253 |             <dd class="value"><span class="string">January, 2010</span></dd>
254 | 
255 |             <dt class="property">Responsibilities</dt>
256 |             <dd class="value">
257 |                 <ul class="value-list">
258 |                     <li>Design</li>
259 |                     <li>Build</li>
260 |                     <li>UX</li>
261 |                     <li>UI</li>
262 |                     <li>IA</li>
263 |                     <li>Accessibility</li>
264 |                     <li><span class="string">Designing in the browser</span></li>
265 |                     <li><span class="string">Progressive Enhancement</span></li></ul></dd>
266 | 
267 |             <dt class="property">Notes</dt>
268 |             <dd class="value">
269 |                 <span class="string">I secured my first full-time role at Sense
270 |                     Internet when I was 17. It was working here that taught me
271 |                     vital team-working skills as well as providing me with
272 |                     real-world industry/agency experience.
273 |                 </span></dd>
274 | 
275 |         </dl>
276 | 
277 |     </div>
278 | 
279 |     <h2 class="comment-block">
280 |         <span class="comment-block__line">CSS Wizardry</span>
281 |     </h2>
282 | 
283 |     <div class="ruleset  spaced--large">
284 | 
285 |         <h3 class="selector">CSS<span class="selector__delimiter"> </span>Wizardry</h3>
286 | 
287 |         <dl class="declarations">
288 | 
289 |             <dt class="property">Website</dt>
290 |             <dd class="value"><span class="url"><a href="http://csswizardry.com">csswizardry.com</a></span></dd>
291 | 
292 |             <dt class="property">Launched</dt>
293 |             <dd class="value"><span class="number">2007</span></dd>
294 | 
295 |             <dt class="property">Notes</dt>
296 |             <dd class="value">
297 |                 <span class="string">Through CSS Wizardry I have written hundreds
298 |                 of articles, released open-source code, spoken at international
299 |                 conferences, run workshops and a lot more. It has become a
300 |                 strong personal brand and is known in the industry as a source
301 |                 of high-quality writing around the subjects of CSS architecture,
302 |                 performance and more.</span></dd>
303 | 
304 |         </dl>
305 | 
306 |     </div>
307 | 
308 |     <h2 class="comment-block">
309 |         <span class="comment-block__line">Education</span>
310 |         <span class="comment-block__line"></span>
311 |         <span class="comment-block__line">Related article: <a href="http://csswizardry.com/2010/11/design-and-education/">Design and education</a></span>
312 |     </h2>
313 | 
314 |     <div class="ruleset  spaced--large">
315 | 
316 |         <h3 class="selector">Qualifications</h3>
317 | 
318 |         <dl class="declarations">
319 | 
320 |             <dt class="property">A-Levels</dt>
321 |             <dd class="value"><span class="number">3</span></dd>
322 | 
323 |             <dt class="property">GCSEs</dt>
324 |             <dd class="value"><span class="number">13</span></dd>
325 | 
326 |         </dl>
327 | 
328 |     </div>
329 | 
330 |     <p class="comment  notice" style="display: none;">This CV is built using <a href="https://github.com/csswizardry/csscv">CSSCV</a>,
331 |     a project by <a href="https://twitter.com/csswizardry">Harry Roberts</a>.</p>
332 | 
333 | </body>
334 | </html>
335 | 


--------------------------------------------------------------------------------