Slide 1

Slide 1 text

HIGH SPEED WORKFLOW @vhmendrone

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

rupture

Slide 4

Slide 4 text

https://learnboost.github.io/stylus/

Slide 5

Slide 5 text

Variáveis Mixins Loops & Condicionais Nesting Media Queries Maths Importing Extends / Placeholders Color Manipulation @content / Block Mixins

Slide 6

Slide 6 text

SEMELHANTE AO SASS MAS ESCRITO EM JS

Slide 7

Slide 7 text

MAIS RÁPIDO (https://goo.gl/1RyWkQ)

Slide 8

Slide 8 text

SEM GEMS SEM RUBY

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

TEM SEU PRÓPRIO COMPASS CHAMA-SE NIB

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

API JAVASCRIPT

Slide 13

Slide 13 text

TAMBÉM TEM SUAS DESVANTAGENS ):

Slide 14

Slide 14 text

STYLUS DOESN’T GIVE A F*CK

Slide 15

Slide 15 text

A MAIOR PARTE DAS LIBS SÃO PORTS DE SASS

Slide 16

Slide 16 text

http://jeet.gs/

Slide 17

Slide 17 text

GRID SYSTEM HUMANIZADO

Slide 18

Slide 18 text

SINTAXE FLEXÍVEL E SEMÂNTICA

Slide 19

Slide 19 text

.container center(960px) article col(2/3) aside col(1/3)

Slide 20

Slide 20 text

UTILITY BELT API

Slide 21

Slide 21 text

// 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()

Slide 22

Slide 22 text

rupture

Slide 23

Slide 23 text

MEDIA QUERIES SIMPLIFICADOS

Slide 24

Slide 24 text

@media screen and (max-width: 400px){ /* code */ }

Slide 25

Slide 25 text

+below(400px) /* code */

Slide 26

Slide 26 text

VAMOS SIMPLIFICAR AINDA MAIS

Slide 27

Slide 27 text

+mobile() /* code */

Slide 28

Slide 28 text

SCREEN SIZES PRÉ DEFINIDOS

Slide 29

Slide 29 text

+mobile() // <= 400px +tablet() // > 400px && <= 1050px +desktop() // > 1050px +hd() // > 1800px

Slide 30

Slide 30 text

rupture.scale = 0 400px 800px 1024px +at(1) // 0 to 400px +at(2) // 400px to 800px +at(3) // 800px to 1024px

Slide 31

Slide 31 text

rupture.scale = 0 400px 800px 1024px rupture.scale-names = ‘sm’ ‘md’ ‘lg’

Slide 32

Slide 32 text

5 MINUTOS

Slide 33

Slide 33 text

TUDO ISSO PRA NÃO PRECISAR ESCREVER MEDIA QUERIES?

Slide 34

Slide 34 text

SIM

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

USAR UM PRÉ PROCESSADOR NÃO ERA O SUFICIENTE

Slide 37

Slide 37 text

No content

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

DEFINIR UM WORKFLOW TORNARÁ SEU TRABALHO MAIS PRODUTIVO

Slide 41

Slide 41 text

FAÇA COM QUE SUAS FERRAMENTAS TRABALHEM PARA VOCÊ

Slide 42

Slide 42 text

DIVIRTA-SE!

Slide 43

Slide 43 text

$ npm i -g gulp jeet $ npm i --save-dev gulp gulp-stylus jeet rupture gulp-plumber

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

gulp-watch gulp-autoprefixer gulp-combine-media-queries gulp-imagemin browser-sync gulp-connect gulp-uglify

Slide 46

Slide 46 text

Exemplo Jeet & Rupture

Mobile First

Coluna 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium, eum, inventore.

Coluna 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium, eum, inventore.

Coluna 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium, eum, inventore.

Coluna 4

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium, eum, inventore.

Slide 47

Slide 47 text

@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

Slide 48

Slide 48 text

.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

Slide 49

Slide 49 text

$ gulp

Slide 50

Slide 50 text

No content

Slide 51

Slide 51 text

OBRIGADO! @vhmendrone