Des CSS efficaces avec KNACSS

KNACSS (http://knacss.com) est une feuille de style CSS minimaliste, responsive et extensible pour débuter une intégration on projet web.

KNACSS est né d'un constat que nous faisons quotidiennement dans notre agence web :

- La plupart des frameworks CSS sont de grosses usines à gaz que l'on n'exploite très partiellement (environ 10% à 20% au mieux)
- Ils nécessitent quasi systématiquement qu'on redéfinisse à sa sauce la moitié des styles
- Ils ne sont pas négligeables en terme de poids de fichiers

Chez Alsacréations, et par expérience, on préfère de loin un socle de base minimaliste qui convienne tel quel à tous les nouveaux projets, mais qui puisse être progressivement enrichi. C'est le cas de KNACSS.

Transcript

1. feuille de styles CSS sur-vitaminée
2. http://knacss.com/
3. Comparatif : http://usablica.github.io/front-end-frameworks/compare.html FRAMEWORKS CSS
4. <table> grid layout flexbox CSS frameworks position float display absolute relative inline-block table-cell bootstrap foundation pure KNACSS
5. <table> flexbox position float display absolute relative inline-block table-cell Langage CSS Frameworks CSS (interface) Humain
6. POURQUOI FAIRE ? • Un « reset » CSS • Une base réutilisable • Des solutions de positionnement, de formulaires, de boutons, de navigation, etc. 1 Ne pas réinventer la roue « ça dépend »
7. POURQUOI FAIRE ? • Outil commun • Documentation partagée • Conventions de nommage et de code 2 Travailler en équipe « ça dépend »
8. POURQUOI FAIRE ? • Interfaces prêtes à l’emploi • des grilles de positionnements 3 Prototyper rapidement « ça dépend »
9. BOOTSTRAP le framework à tout faire
10. BOOTSTRAP une « usine à gaz » ? court extrait
11. LEQUEL CHOISIR ? « ça dépend » • Compatibilité ?
 IE6 ? IE8 ? Navigateurs modernes ? • Complexité ? • Responsive ? Mobile First ? • Licence ? Prix ? • LESS / Sass ? CSS pur ? • Nombre de modules ?
 grilles, navigations, carousel, paginations, … • Écosystème, mises à jour, contributeurs
12. UNE GRILLE SIMPLE <div  class="row">
    <div  class="col-­‐md-­‐4">…</div>
    <div  class="col-­‐md-­‐4">…</div>      <div  class="col-­‐md-­‐4">…</div>   </div> HTML <div  class="pure-­‐g">      <div  class="pure-­‐u-­‐1-­‐3">  …  </div>      <div  class="pure-­‐u-­‐1-­‐3">  …  </div>      <div  class="pure-­‐u-­‐1-­‐3">  …  </div>   </div> HTML <div  class="grid-­‐3">
    <div>  …  </div>      <div>  …  </div>      <div>  …  </div>   </div> HTML comparatif : 3 colonnes égales float inline-block flexbox
13. AU HASARD… employé sur les sites web suivants : liste complète : http://madewith.knacss.com/
14. prévu pour LESS et Sass ou en CSS pur
15. un « reset » simple basé sur normalize
16. plein de bonnes pratiques html  {  box-­‐sizing:  border-­‐box;  }   *  {  box-­‐sizing:  inherit;  } CSS html  {      font-­‐size:  62.5%;      font-­‐size:  calc(1em  *  .625);      -­‐webkit-­‐text-­‐size-­‐adjust:  100%;              -­‐ms-­‐text-­‐size-­‐adjust:  100%;   } CSS img,table,td,blockquote,code,pre,
 textarea,input,video,svg  {      max-­‐width:  100%;   } CSS @media  (max-­‐width:  @small-­‐screen)  {   div,textarea,table,td,th,code,pre,sam p  {       word-­‐wrap:  break-­‐word;       hyphens:  auto;     }   } CSS • box-sizing pour tout le monde ! • police accessible et fluide • gestion des débordements • etc.
17. alignements et boîtes .txtleft,  .txtright  et  .txtcenter CSS alignements de contenus avec text-­‐align .left,  .right  et  .center CSS alignements de blocs avec margin .fl  et  .fr CSS flottements avec float:left et float:right .mod CSS « superconteneur » qui crée un contexte « BFC » .clearfix CSS conteneur qui contient ses enfants flottants
18. positionnements • positionnement flottant (avec .fl, .fr, .mod et .clearfix) • positionnement avec display: inline-block (avec .inbl) • positionnement avec display: table-cell (avec .row et .col) • positionnement avec Flexbox 
 (avec .flex-­‐container, .flex-­‐item-­‐fluid, .flex-­‐item-­‐first, 
 .flex-­‐item-­‐medium, .flex-­‐item-­‐last, .flex-­‐item-­‐center, etc.) KNACSS gère les positionnements suivants :
19. des classes « visuelles » pour dépanner .w10  {  width:  10%;  }   .w20  {  width:  20%;  }   .w25  {  width:  25%;  }   …   .w66  {  width:  66%;  }   …   .w50p  {  width:  50px;  }   .w100p  {  width:  100px;  }   .w200p  {  width:  200px;  }   …   .mw960p  {  max-­‐width:  960px;  }   …   .wauto  {  width:  auto;  } CSS .pa0,  .pan  {  padding:  0;  }   .pas  {  padding:  @small-­‐value;  }   .pam  {  padding:  @medium-­‐value;  }   .pal  {  padding:  @large-­‐value;  }   …   .mas  {  margin:  @small-­‐value;  }   …   .pt0,  .ptn  {  padding-­‐top:  0;  }   .pts  {  padding-­‐top:  @small-­‐value;  }   …   .mbm  {  margin-­‐bottom:  @medium-­‐ value;  }   …   CSS helpers de largeurs helpers d’espacements
20. conservez ce que vous voulez ! version LESS ou version Sass
21. et lisez la doc ! https://github.com/raphaelgoetter/KNACSS/tree/master/doc
22. DÉMOS vite fait bien fait
23. <div>
    <div>  …  </div>      <div>  …  </div>      <div>  …  </div>   </div> HTML Salade Tomate Oignon
24. <div>
    <div  class="w20">  …  </div>      <div>  …  </div>      <div>  …  </div>   </div> HTML Tomate Oignon Salade .w20 = width: 20%
25. <div>
    <div  class="fl  w20">  …  </div>      <div>  …  </div>      <div>  …  </div>   </div> HTML Tomate Oignon Salade .fl = float: left
26. <div  class="mod">
    <div  class="fl  w20">  …  </div>      <div>  …  </div>      <div>  …  </div>   </div> HTML Tomate Oignon Salade .mod « contient » les enfants 
 flottants
27. <div  class="mod">
    <div  class="fl  w20">  …  </div>      <div  class="mod">  …  </div>      <div  class="mod">  …  </div>   </div> HTML Tomate Oignon Salade .mod ne s’écoule plus autour
 d’un frère flottant
28. <div  class="grid-­‐3">
    <div>  …  </div>      <div>  …  </div>      <div>  …  </div>   </div> HTML Salade Tomate Oignon grille « simple » 3 colonnes
29. <div  class="grid-­‐3-­‐small-­‐2-­‐tiny-­‐1">
    <div>  …  </div>      <div>  …  </div>      <div>  …  </div>   </div> HTML Salade Tomate Oignon Salade Tomate Oignon Salade Tomate Oignon grille Responsive : - 3 colonnes grand écran - 2 colonnes écran moyen - 1 colonne écran petit
30. http://knacss.com/KNACSS-cheatsheet.pdf
31. RESSOURCES knacss.com : le site de KNACSS http://www.alsacreations.com/tuto/lire/1577-decouverte- du-framework-css-KNACSS.html : Tutoriel KNACSS sur le site alsacreations.com https://github.com/raphaelgoetter/KNACSS : Projet KNACSS sur Github http://madewith.knacss.com/ : sites réalisés avec KNACSS http://knacss.com/KNACSS-cheatsheet.pdf pense-bête de toutes les syntaxes KNACSS
32. #jekyll / #hyde • forum, tutos, emploi • depuis 2003 • 30000 visiteurs / jour • 50000 membres sur le forum agence web communauté • on fait des sites web pour des clients • depuis 2006 • on est une petite équipe • on accepte même les végétariens alsacreations.com alsacreations.fr