Architecture CSS avec ITCSS et InuitCSS

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.