Save 37% off PRO during our Black Friday Sale! »

Architecture CSS avec ITCSS et InuitCSS

Ac9d4074239f88fca7faf92e9804a765?s=47 Kévin Bizien
March 01, 2018

Architecture CSS avec ITCSS et InuitCSS

Ac9d4074239f88fca7faf92e9804a765?s=128

Kévin Bizien

March 01, 2018
Tweet

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.