Simplify your CSS with Stylus and Nib

24.737 visualizações

Publicada em

Talk given at NodeMTL #4

Publicada em: Tecnologia
1 comentário
17 gostaram
Estatísticas
Notas
Sem downloads
Visualizações
Visualizações totais
24.737
No SlideShare
0
A partir de incorporações
0
Número de incorporações
1.718
Ações
Compartilhamentos
0
Downloads
95
Comentários
1
Gostaram
17
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Simplify your CSS with Stylus and Nib

  1. 1. Simplify your CSSwith Stylus and Nib Christian Joudrey - @cjoudrey
  2. 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. 3. Stylus“Expressive, robust, feature-rich CSS languagebuilt for nodejs”
  4. 4. Main differences• Get rid of syntactic sugar (brackets, semi-colons, colons)• Enforced indentation• Dont repeat yourself (DRY)body font 12px Helvetica, Arial, sans-serifa.button -webkit-border-radius 5px -moz-border-radius 5px border-radius 5px
  5. 5. Variables$font-size = 14pxbody font $font-size Helvetica, Arial, sans-serif
  6. 6. Mixinsbody font 12px Helvetica, Arial, sans-serifborder-radius() -webkit-border-radius arguments -moz-border-radius arguments border-radius argumentsa.button border-radius 5px
  7. 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. 8. Nib“Stylus mixins, utilities, components, andgradient image generation. CSS is your bitch!”
  9. 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. 10. Clearfix@import nib .cf { zoom: 1;.cf } clearfix() .cf:before, .cf:after { content: ""; display: table; } .cf:after { clear: both; }
  11. 11. Hide-text@import nib #slogan { text-indent: -99999em;#slogan overflow: hidden; hide-text() text-align: left; }
  12. 12. and a lot more...
  13. 13. The best part is...• Its 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. 14. Express Middlewarevar 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. 15. Command-line Tool$ npm install -g stylus$ stylus main.styl compiled main.css$ stylus -u nib main.styl compiled main.css
  16. 16. Interesting Links• Stylus: http://learnboost.github.com/stylus• Nib: https://github.com/visionmedia/nib

×