Cold

Scott/Davy/Ian - Web Audio

Ian’s Web Audio Limmy thing:

• http://ianmadethis.com/limmy

Scott’s theremin thingy…

• http://monospaced.github.com/mysteron.js/
• https://github.com/monospaced/mysteron.js

Alan - websockets

(Lost in the myths of time)

John - Backbone Marionette

Here’s the backbone marionette repo:

• https://github.com/marionettejs/backbone.marionette

Rich - CSS preprocessors

The SMACSS book is here:

• http://smacss.com/book/

There’s lots of good stuff in inuit.css (it borrows the best stuff out of http://oocss.org/ and https://github.com/necolas/idiomatic-css) as well:

• https://github.com/csswizardry/inuit.css/

I’m having a lot of success with the “island” object from it as a basic layout module:

• http://csswizardry.com/2011/10/the-island-object/
• https://github.com/csswizardry/inuit.css/blob/master/inuit.css/objects/_island.scss

The coding standards by the same guy are very good:

• https://github.com/csswizardry/CSS-Guidelines

Here’s the bit on BEM notation:

• https://github.com/csswizardry/CSS-Guidelines#naming-conventions

I recently updated my own standards to include a few of these things:

• http://jeddy3.github.com/coding-standards-front-end/

That Happycog article about preprocessor apprehensions:

• http://cognition.happycog.com/article/preprocess-this

Stylus is here:

• http://learnboost.github.com/stylus/

I’ve used none of the stuff documented on the homepage though! I just use it for (while making the code look as close to vanilla CSS as possible):

• vendor prefixes (via transparent functions) (usually handled via “nib” - https://github.com/visionmedia/nib)
• variables
• a minimal amount of indentation to clean up pseudo-classes and pseudo-elements.
• simple math calculations via custom “calc-xxx” methods. (W3C calc is here: http://www.w3.org/TR/css3-values/#calc-notation)

You can use either Grunt or Docpad + Stylus plugin to compile stylus. Docpad is my favourite prototyping tool of the moment.

Docpad also has plugins for less and scss - so you can play around with all three preprocessor at the same time (even in the same test project) if you like! They are all pretty similar though and the same concepts apply to them all, but I’m a fan of stylus because it looks the most like vanilla CSS. Dependencies might sway your choice though: Sass has a ruby dependency, Stylus a node.js one, and I think there’s a PHP compiler for less (as well as a node.js one).

I’ve been experimenting today with splitting the css into separate files as per John and Jed’s suggestion and it seems to be working well so far - thanks guys. Also, I got chatting to Jed about indentation and specificity at lunch today. I’ve found never indenting within base modules, nor needlessly indenting within variant modules, really helps with the specificity. It goes something like this:

// only indent pseudo-elements and pseudo-classes in BASE modules e.g.
.module {
    color: red;
    &::after {
        property: value;
    }
    &:last-child {
        property: value
    }
}

// i.e. but don't indent parts, to keep the specificity low e.g.
.module__part {
    color: blue;
}


// do indent for variants of modules to sandbox changes to module parts e.g.
.module--variant {
    .module__part {
        property: value;
    }
    // no need to needlessly indent sub-parts within parts either as already sandboxed
    .module__sub-part {
        property: value;
    }
}

Finally, big hat tip to Big John for the first preprocessor chat! It’s been a revelation :)