Tweet
Tweet

Slide 1

Slide 1 text

FRONT BACK TO @providenz

Slide 2

Slide 2 text

$ whoami @providenz

Slide 3

Slide 3 text

Préprocesseurs B.E.M Outils de build Browsersync Susy

Slide 4

Slide 4 text

Préprocesseurs

Slide 5

Slide 5 text

Préprocesseurs Less Sass Stylus

Slide 6

Slide 6 text

Préprocesseur Maintenabilité Séparation Variables

Slide 7

Slide 7 text

Préprocesseur • structure _base.scss _layout.scss _modules.scss _state.scss

Slide 8

Slide 8 text

Préprocesseurs

Slide 9

Slide 9 text

Sass Compass Libsass Préprocesseurs

Slide 10

Slide 10 text

Compass (2.7s) Libsass (340ms) Préprocesseurs

Slide 11

Slide 11 text

Autoprefixer Préprocesseurs https://github.com/postcss/autoprefixer

Slide 12

Slide 12 text

B.E.M

Slide 13

Slide 13 text

B.E.M Block Element Modifier

Slide 14

Slide 14 text

id classes B.E.M

Slide 15

Slide 15 text

.block__element--modifier B.E.M

Slide 16

Slide 16 text

Block Element + modifier Element Element Element B.E.M

Slide 17

Slide 17 text

B.E.M

Slide 18

Slide 18 text

Outils de build

Slide 19

Slide 19 text

Outils de build Grunt Gulp Broccoli Brunch …

Slide 20

Slide 20 text

Brunch Because feignasse power Outils de build

Slide 21

Slide 21 text

Brunch CONVENTION over CONFIGURATION CONFIG PAR DÉFAUT

Slide 22

Slide 22 text

Brunch · features SIMPLE RAPIDE

Slide 23

Slide 23 text

concaténation enrobage source maps minification surveillance notification scaffolding serveur Brunch · features

Slide 24

Slide 24 text

npm install -g brunch Brunch · installation

Slide 25

Slide 25 text

Brunch · config brunch-config.coffee brunch-config.js

Slide 26

Slide 26 text

Brunch · config

Slide 27

Slide 27 text

Brunch · scaffolding brunch new [dir] brunch new gh:brunch/dead-simple

Slide 28

Slide 28 text

Brunch · plugins npm install --save-dev plugin et c’est tout* *très souvent

Slide 29

Slide 29 text

Brunch · structure app assets vendor public

Slide 30

Slide 30 text

Brunch brunch watch brunch watch --server brunch w -s brunch build [-- production] build dev

Slide 31

Slide 31 text

Browsersync

Slide 32

Slide 32 text

Browsersync · features live reload interaction sync multi navigateurs editeur agnostique

Slide 33

Slide 33 text

Browsersync · install npm install browser-sync

Slide 34

Slide 34 text

Browsersync

Slide 35

Slide 35 text

Susy

Slide 36

Slide 36 text

Susy metaframework sass layout

Slide 37

Slide 37 text

Susy sass (libsass) grilles/asymétriques

Slide 38

Slide 38 text

Susy · install bower install susy

Slide 39

Slide 39 text

Susy · setup

Slide 40

Slide 40 text

Susy · setup

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

columns: 12

Slide 43

Slide 43 text

No content

Slide 44

Slide 44 text

Liens http://brunch.io/ https://en.bem.info/ http://susy.oddbird.net/ http://www.browsersync.io/ http://www.css-maintenables.fr/ http://projetresponsive.fr/

Slide 45

Slide 45 text

Merci <3 @providenz