High Speed Workflow

Talk apresentada na décima primeira edição do Meetup CSS SP realizada no auditório da Viva Real.

Transcript

1. HIGH SPEED WORKFLOW @vhmendrone
3. rupture
4. https://learnboost.github.io/stylus/
5. Variáveis Mixins Loops & Condicionais Nesting Media Queries Maths Importing Extends / Placeholders Color Manipulation @content / Block Mixins
6. SEMELHANTE AO SASS MAS ESCRITO EM JS
7. MAIS RÁPIDO (https://goo.gl/1RyWkQ)
8. SEM GEMS SEM RUBY
10. TEM SEU PRÓPRIO COMPASS CHAMA-SE NIB
12. API JAVASCRIPT
13. TAMBÉM TEM SUAS DESVANTAGENS ):
14. STYLUS DOESN’T GIVE A F*CK
15. A MAIOR PARTE DAS LIBS SÃO PORTS DE SASS
16. http://jeet.gs/
17. GRID SYSTEM HUMANIZADO
18. SINTAXE FLEXÍVEL E SEMÂNTICA
19. .container center(960px) article col(2/3) aside col(1/3)
20. UTILITY BELT API
21. // Alinha blocos relativamente ao seu container (pos. absolute) align() // Semelhante a propriedade order do flexbox shift() unshift() // Adiciona um background aos elementos para facilitar a visualização da grid edit() // Facilita a centralização de containeres center() uncenter() // Posiciona elementos uns sobre os outros (ideal para mobile) stack() unstack() // Aplica o clearfix de Nicholas Gallagher cf()
22. rupture
23. MEDIA QUERIES SIMPLIFICADOS
24. @media screen and (max-width: 400px){ /* code */ }
25. +below(400px) /* code */
26. VAMOS SIMPLIFICAR AINDA MAIS
27. +mobile() /* code */
28. SCREEN SIZES PRÉ DEFINIDOS
29. +mobile() // <= 400px +tablet() // > 400px && <= 1050px +desktop() // > 1050px +hd() // > 1800px
30. rupture.scale = 0 400px 800px 1024px +at(1) // 0 to 400px +at(2) // 400px to 800px +at(3) // 800px to 1024px
31. rupture.scale = 0 400px 800px 1024px rupture.scale-names = ‘sm’ ‘md’ ‘lg’
32. 5 MINUTOS
33. TUDO ISSO PRA NÃO PRECISAR ESCREVER MEDIA QUERIES?
34. SIM
36. USAR UM PRÉ PROCESSADOR NÃO ERA O SUFICIENTE
40. DEFINIR UM WORKFLOW TORNARÁ SEU TRABALHO MAIS PRODUTIVO
41. FAÇA COM QUE SUAS FERRAMENTAS TRABALHEM PARA VOCÊ
42. DIVIRTA-SE!
43. $ npm i -g gulp jeet $ npm i --save-dev gulp gulp-stylus jeet rupture gulp-plumber
44. 'use strict'; var gulp = require('gulp'), stylus = require('gulp-stylus'), jeet = require('jeet'), rupture = require('rupture'), plumber = require('gulp-plumber'); gulp.task('stylus', function(){ gulp.src('style.styl') .pipe(plumber()) .pipe(stylus({ use: [jeet(), rupture()] })) .pipe(gulp.dest('css')) }) gulp.task('default', function(){ gulp.start('stylus') })
45. gulp-watch gulp-autoprefixer gulp-combine-media-queries gulp-imagemin browser-sync gulp-connect gulp-uglify
46. <h1>Exemplo Jeet & Rupture</h1> <p>Mobile First</p> <hr> <br> <div class="container"> <section> <div> <h3>Coluna 1</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium, eum, inventore.</p> </div> <div> <h3>Coluna 2</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium, eum, inventore.</p> </div> <div> <h3>Coluna 3</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium, eum, inventore.</p> </div> <div> <h3>Coluna 4</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium, eum, inventore.</p> </div> </section> </div>
47. @import 'jeet' box-style() box-sizing border-box border 1px solid #ccc margin-bottom 10px body margin 0 padding 0 text-align center font-family Arial, "Helvetica Neue", Helvetica, sans-serif line-height 1.5 h1 font-weight 600 h3, h4 font-weight normal p, h3 font-style italic
48. .container center(1150px, 10px) div box-style() +above(600px) col(1/2, cycle: 2) +above(900px) col(1/4, cycle: 4, uncycle: 2) p padding 10px
49. $ gulp
51. OBRIGADO! @vhmendrone