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

Des CSS efficaces avec KNACSS

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.

Raphael Goetter

November 02, 2015
Tweet

More Decks by Raphael Goetter

Other Decks in Design

Transcript

  1. <table> grid layout flexbox CSS frameworks position float display absolute

    relative inline-block table-cell bootstrap foundation pure KNACSS
  2. 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 »
  3. POURQUOI FAIRE ? • Outil commun • Documentation partagée •

    Conventions de nommage et de code 2 Travailler en équipe « ça dépend »
  4. POURQUOI FAIRE ? • Interfaces prêtes à l’emploi • des

    grilles de positionnements 3 Prototyper rapidement « ça dépend »
  5. 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
  6. 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
  7. AU HASARD… employé sur les sites web suivants : liste

    complète : http://madewith.knacss.com/
  8. 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.
  9. 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
  10. 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 :
  11. 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
  12. <div>
    <div>  …  </div>      <div>  …  </div>

         <div>  …  </div>   </div> HTML Salade Tomate Oignon
  13. <div>
    <div  class="w20">  …  </div>      <div>  …

     </div>      <div>  …  </div>   </div> HTML Tomate Oignon Salade .w20 = width: 20%
  14. <div>
    <div  class="fl  w20">  …  </div>      <div>

     …  </div>      <div>  …  </div>   </div> HTML Tomate Oignon Salade .fl = float: left
  15. <div  class="mod">
    <div  class="fl  w20">  …  </div>    

     <div>  …  </div>      <div>  …  </div>   </div> HTML Tomate Oignon Salade .mod « contient » les enfants 
 flottants
  16. <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
  17. <div  class="grid-­‐3">
    <div>  …  </div>      <div>  …

     </div>      <div>  …  </div>   </div> HTML Salade Tomate Oignon grille « simple » 3 colonnes
  18. <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
  19. 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
  20. #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