Talk given at NodeMTL #4

1. Simplify your CSS
with Stylus and Nib
Christian Joudrey - @cjoudrey

2. The current state of CSS
#comments li {
background-color: #FEFEFE;
}
#comments .author {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

3. Stylus
“Expressive, robust, feature-rich CSS language
built for nodejs”

4. Main differences
• Get rid of syntactic sugar (brackets, semi-colons, colons)
• Enforced indentation
• Don't repeat yourself (DRY)
body
font 12px Helvetica, Arial, sans-serif
a.button
-webkit-border-radius 5px
-moz-border-radius 5px
border-radius 5px

5. Variables
$font-size = 14px
body
font $font-size Helvetica, Arial, sans-serif

6. Mixins
body
font 12px Helvetica, Arial, sans-serif
border-radius()
-webkit-border-radius arguments
-moz-border-radius arguments
border-radius arguments
a.button
border-radius 5px

7. Nested selectors
#comments #comments h1 {
h1 font-size: 14px;
font-size 14px }
a
color black #comments a {
color: black;
&:hover }
color blue
#comments a:hover {
color: blue;
}

8. Nib
“Stylus mixins, utilities, components, and
gradient image generation. CSS is your bitch!”

9. Vendor prefixes
@import 'nib' #comments {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
#comments border-radius: 4px;
border-radius 4px -webkit-box-shadow: 0 0 1px #000;
-moz-box-shadow: 0 0 1px #000;
box-shadow 0 0 1px black box-shadow: 0 0 1px #000;
p }
opacity 0.75
#comments p {
opacity: 0.75;
filter: progid:DXIm[...]pha(Opacity=75);
}

10. Clearfix
@import 'nib' .cf {
zoom: 1;
.cf }
clearfix() .cf:before,
.cf:after {
content: "";
display: table;
}
.cf:after {
clear: both;
}

11. Hide-text
@import 'nib' #slogan {
text-indent: -99999em;
#slogan overflow: hidden;
hide-text() text-align: left;
}

12. and a lot more...

13. The best part is...
• It's all optional, you can mix and match Stylus and CSS
• Slowly integrate it in your existing CSS
@import 'nib'
#comments {
border-radius: 4px;
border: 1px solid black;
}

14. Express Middleware
var express = require('express'),
stylus = require('stylus'),
nib = require('nib'),
app = express.createServer();
// ...
app.use(stylus.middleware({
src: __dirname + '/public',
compile: function (str, path){
return stylus(str)
.set('filename', path)
.set('compress', true)
.use(nib());
}
}));

15. Command-line Tool
$ npm install -g stylus
$ stylus main.styl
compiled main.css
$ stylus -u nib main.styl
compiled main.css

16. Interesting Links
• Stylus: http://learnboost.github.com/stylus
• Nib: https://github.com/visionmedia/nib