Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Architecture CSS avec ITCSS et InuitCSS

Kévin Bizien
March 01, 2018

Architecture CSS avec ITCSS et InuitCSS

Kévin Bizien

March 01, 2018
Tweet

More Decks by Kévin Bizien

Other Decks in Design

Transcript

  1. Maintenance CSS d’un design custom Architecture CSS avec ITCSS &

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

  3. @cssflip #5 @kbizien #cssflip 2012

  4. @cssflip #5 @kbizien #cssflip

  5. @cssflip #5 @kbizien #cssflip 2013

  6. @cssflip #5 @kbizien #cssflip • Variables • Mixins • Nested

    rules • … Maintenance css basique, manque de classes helpers et d’un système de grille complet
  7. @cssflip #5 @kbizien #cssflip • Grid • Helpers/Utilities • UI

    Components • … Framework complet avec une dépendance niveau UI. Pratique pour des poc/protos
  8. @cssflip #5 @kbizien #cssflip 2014

  9. @cssflip #5 @kbizien #cssflip

  10. @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
  11. @cssflip #5 @kbizien #cssflip csswizardry - Harry Roberts - Managing

    CSS Projects with ITCSS
  12. @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
  13. @cssflip #5 @kbizien #cssflip 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; }
  14. @cssflip #5 @kbizien #cssflip Base Layout Module State Theme

  15. @cssflip #5 @kbizien #cssflip <div class="grid"> <div class="grid__item lap--one-half desk--two-thirds">

    ... </div><!-- --><div class="grid__item lap--one-half desk--one-third"> ... </div> </div>
  16. @cssflip #5 @kbizien #cssflip 2015

  17. @cssflip #5 @kbizien #cssflip Architecture / État d’esprit Utile peu

    importe votre stack de développement Pas de dépendance à un pré/post-procésseur
  18. @cssflip #5 @kbizien #cssflip ITCSS = Inverted Triangle CSS

  19. @cssflip #5 @kbizien #cssflip

  20. @cssflip #5 @kbizien #cssflip csswizardry - Harry Roberts - Managing

    CSS Projects with ITCSS
  21. @cssflip #5 @kbizien #cssflip csswizardry - Harry Roberts - Managing

    CSS Projects with ITCSS Elements Utilities
  22. @cssflip #5 @kbizien #cssflip

  23. @cssflip #5 @kbizien #cssflip + 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) =
  24. @cssflip #5 @kbizien #cssflip DEMO

  25. @cssflip #5 @kbizien #cssflip Framework CSS

  26. @cssflip #5 @kbizien #cssflip Dépourvu d’UI. À vous d’intégrer vos

    UI Components
  27. @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
  28. @cssflip #5 @kbizien #cssflip DEMO

  29. @cssflip #5 @kbizien #cssflip Depuis 2016

  30. @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
  31. @cssflip #5 @kbizien #cssflip 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/
  32. @cssflip #5 @kbizien #cssflip Kevin Bizien @kbizien bonjour@kevinbizien.com www.kevinbizien.com Creative

    developer Merci.