Des CSS efficaces avec KNACSS

Adf4ff2212aea06456ca3c3bca95c0db?s=47 Raphael Goetter
November 02, 2015

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.

Adf4ff2212aea06456ca3c3bca95c0db?s=128

Raphael Goetter

November 02, 2015
Tweet

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