Slide 1

Slide 1 text

feuille de styles CSS sur-vitaminée

Slide 2

Slide 2 text

http://knacss.com/

Slide 3

Slide 3 text

Comparatif : http://usablica.github.io/front-end-frameworks/compare.html FRAMEWORKS CSS

Slide 4

Slide 4 text

grid layout flexbox CSS frameworks position float display absolute relative inline-block table-cell bootstrap foundation pure KNACSS

Slide 5

Slide 5 text

flexbox position float display absolute relative inline-block table-cell Langage CSS Frameworks CSS (interface) Humain

Slide 6

Slide 6 text

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 »

Slide 7

Slide 7 text

POURQUOI FAIRE ? • Outil commun • Documentation partagée • Conventions de nommage et de code 2 Travailler en équipe « ça dépend »

Slide 8

Slide 8 text

POURQUOI FAIRE ? • Interfaces prêtes à l’emploi • des grilles de positionnements 3 Prototyper rapidement « ça dépend »

Slide 9

Slide 9 text

BOOTSTRAP le framework à tout faire

Slide 10

Slide 10 text

BOOTSTRAP une « usine à gaz » ? court extrait

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

UNE GRILLE SIMPLE

    

    
     
 
HTML
     
 …  
     
 …  
     
 …  
 
HTML

    
 …  
     
 …  
     
 …  
 
HTML comparatif : 3 colonnes égales float inline-block flexbox

Slide 13

Slide 13 text

AU HASARD… employé sur les sites web suivants : liste complète : http://madewith.knacss.com/

Slide 14

Slide 14 text

prévu pour LESS et Sass ou en CSS pur

Slide 15

Slide 15 text

un « reset » simple basé sur normalize

Slide 16

Slide 16 text

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.

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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 :

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

conservez ce que vous voulez ! version LESS ou version Sass

Slide 21

Slide 21 text

et lisez la doc ! https://github.com/raphaelgoetter/KNACSS/tree/master/doc

Slide 22

Slide 22 text

DÉMOS vite fait bien fait

Slide 23

Slide 23 text


    
 …  
     
 …  
     
 …  
 
HTML Salade Tomate Oignon

Slide 24

Slide 24 text


    
 …  
     
 …  
     
 …  
 
HTML Tomate Oignon Salade .w20 = width: 20%

Slide 25

Slide 25 text


    
 …  
     
 …  
     
 …  
 
HTML Tomate Oignon Salade .fl = float: left

Slide 26

Slide 26 text


    
 …  
     
 …  
     
 …  
 
HTML Tomate Oignon Salade .mod « contient » les enfants 
 flottants

Slide 27

Slide 27 text


    
 …  
     
 …  
     
 …  
 
HTML Tomate Oignon Salade .mod ne s’écoule plus autour
 d’un frère flottant

Slide 28

Slide 28 text


    
 …  
     
 …  
     
 …  
 
HTML Salade Tomate Oignon grille « simple » 3 colonnes

Slide 29

Slide 29 text


    
 …  
     
 …  
     
 …  
 
HTML Salade Tomate Oignon Salade Tomate Oignon Salade Tomate Oignon grille Responsive : - 3 colonnes grand écran - 2 colonnes écran moyen - 1 colonne écran petit

Slide 30

Slide 30 text

http://knacss.com/KNACSS-cheatsheet.pdf

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

#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