Simplify your CSS with Stylus and Nib

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

The current state of CSS

#comments li {
background-color: #FEFEFE;
}

#comments .author {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

Stylus

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

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

Variables
$font-size = 14px

body
font $font-size Helvetica, Arial, sans-serif

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

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;
}

Nib

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

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);
}

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

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

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;
}

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());
}
}));

Command-line Tool

$ npm install -g stylus

$ stylus main.styl
compiled main.css

$ stylus -u nib main.styl
compiled main.css

Interesting Links

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

• Nib: https://github.com/visionmedia/nib

Simplify your CSS with Stylus and Nib

More Related Content

Viewers also liked

Similar to Simplify your CSS with Stylus and Nib

Recently uploaded

Simplify your CSS with Stylus and Nib