csswizardry

/*------------------------------------*\
    $NAV
\*------------------------------------*/
/*
TAGS: ^lists ^navigation ^text
*/
/*
As per csswizardry.com/2011/09/the-nav-abstraction
*/
.nav{

csswizardry

To make this steak:

0. You will need: A half-decent steak, black peppercorns (crushed), sea salt (I prefer Maldon), timer/stopwatch
1. Trim any and all fat
2. Leave steak to reach room temp
3. Once at room temp, rub with olive oil and cracked black pepper (no salt yet, this will dry the meat out)
4. Heat an empty (no oil, no nothing) pan until it is very hot
5. Once heated, drop your steak into the pan, start your timer
6. Move the steak around the pan turning over it every 15 seconds (no, I’m not joking :P)
7. Crumble a load of sea salt onto the meat as it cooks

csswizardry

/*------------------------------------*\
    $MEDIA
\*------------------------------------*/
/**
 * Place any image- and text-like content side-by-side, as per:
 * stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code
 * E.g.:
 *
   <div class=media>
       <img src=http://placekitten.com/200/300 alt="" class=img>

csswizardry

Bringing BEM to inuit.css

BEM is a methodology for naming and classifying CSS selectors in a way to make them a lot more strict, transparent and informative.

The naming convention follows this pattern:

.block{}
.block__element{}
.block--modifier{}

csswizardry

@media only screen and (min-width: 320px) {

  /* Small screen, non-retina */

}

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 320px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 320px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 320px),

csswizardry

Man Camp

Today I got a lovely email from a casting agency who thought I wasn’t man enough! Below is the email (bottom) and my reply (top).

They also attached a flier, which you can view on imgur.

Hi,

I’m afraid I’m hosting a series of tea parties and knitting events starting

csswizardry

#!/bin/bash

# Add `new-project` to your PATH.
# To create a new project in a directory called `foo`:
# $ new-project foo

git clone git@github.com:csswizardry/vanilla.git $1
cd $1
rm -rf .git
rm -rf css

csswizardry

project.scss
    components/
        global/
            page-head.scss
            pricing-table.scss
            image-gallery.scss
        home/
            quick-search.scss
    inuit.css/

pages/

csswizardry

I received this email from someone in response to my Code smells in CSS article in which I advocate the use of classes over not doing (you will need to read the article for full context).

Below is that email conversation, with names removed:

Hiya Harry,

Just wanted to drop you a line to say hi really as I am a fan of your work. I loved your talk about Big CSS, I even made my whole team watch it so they could learn a thing or two.

I have just read your latest blog article "Code Smells..." great stuff in there, some of which I am still guilty of even now. Generally I do try and make all my CSS as robust as it can be though. At my work I am the only one that takes things like HTML, CSS, JS seriously, it gets hard to try and pass on the enthusiasm for great sites onto other members of the team. I will be making them read this post aswell so thanks ;-) >>

csswizardry

I just got this message – along with £20 – via PayPal:

Note from [REMOVED]:

Dude, inuit.css, seriously, I'm buying you a beer.

I've said to myself 50 times over the past couple weeks, "I can't believe that dude got this stuff so right, it's saved me WEEKS. I have to buy him a beer." Since I don't have a UK trip on my schedule anytime soon, this is the best I can do at the moment. Really Harry, thx. Great stuff.