Architecture CSS avec ITCSS et InuitCSS

Slide 1

Slide 1 text

Maintenance CSS d’un design custom Architecture CSS avec ITCSS & InuitCSS kbizien. cssﬂip #5

Slide 2

Slide 2 text

@cssflip #5 @kbizien #cssflip Kevin Bizien Creative developer cssflip. kbizien.

Slide 3

Slide 3 text

@cssﬂip #5 @kbizien #cssﬂip 2012

Slide 4

Slide 4 text

@cssﬂip #5 @kbizien #cssﬂip

Slide 5

Slide 5 text

@cssﬂip #5 @kbizien #cssﬂip 2013

Slide 6

Slide 6 text

@cssﬂip #5 @kbizien #cssﬂip • Variables • Mixins • Nested rules • … Maintenance css basique, manque de classes helpers et d’un système de grille complet

Slide 7

Slide 7 text

@cssﬂip #5 @kbizien #cssﬂip • Grid • Helpers/Utilities • UI Components • … Framework complet avec une dépendance niveau UI. Pratique pour des poc/protos

Slide 8

Slide 8 text

@cssﬂip #5 @kbizien #cssﬂip 2014

Slide 9

Slide 9 text

@cssﬂip #5 @kbizien #cssﬂip

Slide 10

Slide 10 text

@cssflip #5 @kbizien #cssflip Défauts du CSS • Cascade et héritage • Dépendance sur l’ordre d’inclusion dans le code • Global namespace • Spécificité Défauts des développeurs • Manque de documentation dans nos projets • Manque de structuration du code • Manque de rigueur dans les conventions collectives

Slide 11

Slide 11 text

@cssﬂip #5 @kbizien #cssﬂip csswizardry - Harry Roberts - Managing CSS Projects with ITCSS

Slide 12

Slide 12 text

@cssflip #5 @kbizien #cssflip .block {} .block__element {} .block--modifier {} .block__element--modifier {} • .avatar représente le block • .avatar__img représente un élément du block • .avatar__img--rounded représente un modifier de l'élément

Slide 13

Slide 13 text

@cssﬂip #5 @kbizien #cssﬂip Séparer la structure de l’esthétique —> classes réutilisables .button { width: 150px; height: 50px; } .button—-small { width: 100px; height: 25px; } .button—-primary { background: #FFF; border-radius: 5px; }

Slide 14

Slide 14 text

@cssﬂip #5 @kbizien #cssﬂip Base Layout Module State Theme

Slide 15

Slide 15 text

@cssﬂip #5 @kbizien #cssﬂip

...

Slide 16

Slide 16 text

@cssﬂip #5 @kbizien #cssﬂip 2015

Slide 17

Slide 17 text

@cssﬂip #5 @kbizien #cssﬂip Architecture / État d’esprit Utile peu importe votre stack de développement Pas de dépendance à un pré/post-procésseur

Slide 18

Slide 18 text

@cssﬂip #5 @kbizien #cssﬂip ITCSS = Inverted Triangle CSS

Slide 19

Slide 19 text

@cssﬂip #5 @kbizien #cssﬂip

Slide 20

Slide 20 text

@cssﬂip #5 @kbizien #cssﬂip csswizardry - Harry Roberts - Managing CSS Projects with ITCSS

Slide 21

Slide 21 text

@cssﬂip #5 @kbizien #cssﬂip csswizardry - Harry Roberts - Managing CSS Projects with ITCSS Elements Utilities

Slide 22

Slide 22 text

@cssﬂip #5 @kbizien #cssﬂip

Slide 23

Slide 23 text

@cssﬂip #5 @kbizien #cssﬂip + BEMIT • .c-avatar • .c-avatar__img • .c-avatar__img—rounded • .o-block__element--modifier pour les objets • .c-block__element--modifier pour les composants • .u-block__element--modifier pour les utilitaires • .js-[name] pour les hooks javascript (pas de styles) =

Slide 24

Slide 24 text

@cssﬂip #5 @kbizien #cssﬂip DEMO

Slide 25

Slide 25 text

@cssﬂip #5 @kbizien #cssﬂip Framework CSS

Slide 26

Slide 26 text

@cssﬂip #5 @kbizien #cssﬂip Dépourvu d’UI. À vous d’intégrer vos UI Components

Slide 27

Slide 27 text

@cssflip #5 @kbizien #cssflip • Mixin responsive avec Sass-mq • Mixin pour la gestion des font-size et line-height • Bonne pratique de styles génériques • box-sizing • normalize • reset • Objet media • Objet layout (grille) • Utilities margin / padding / width • Extensible selon les besoins en créant sa propre bibliothèque de settings, tools, objects, components et utilities. Ensemble de config, mixins, resets, objets et classes utilitaires

Slide 28

Slide 28 text

@cssﬂip #5 @kbizien #cssﬂip DEMO

Slide 29

Slide 29 text

@cssﬂip #5 @kbizien #cssﬂip Depuis 2016

Slide 30

Slide 30 text

@cssflip #5 @kbizien #cssflip Suivi d’InuitCSS • Création d’un compte et repo GitHub dédié • https://github.com/inuitcss • Team “core” de 5 personnes • 15 contributeurs à ce jour • Première release hors bêta (v6.0.0) commit ce lundi ! • Évolution de la base de code en un seul module npm à installer • Maintien de l’inclusion flexible des styles nécessaires pour son projet • Existance d’un slack pour la communauté • https://herzinger.typeform.com/to/h6e3Km

Slide 31

Slide 31 text

@cssﬂip #5 @kbizien #cssﬂip Bibliographie Sass —> https://sass-lang.com/ compass —> http://compass-style.org/ Bootstrap —> https://getbootstrap.com/ Foundation —> https://foundation.zurb.com/ BEM —> Yandex https://tech.yandex.com/bem/ OOCSS —> Nicole Sullivan http://oocss.org/ SMACSS —> Jonathan Snook https://smacss.com/ csswizardry-grids, ITCSS, BEMIT, InuitCSS —> Harry Roberts https://csswizardry.com/

Slide 32

Slide 32 text

@cssﬂip #5 @kbizien #cssﬂip Kevin Bizien @kbizien [email protected] www.kevinbizien.com Creative developer Merci.