Documentation pages 4, 5, 6 et 7

doc/01-typo-et-reset.md

@@ -9,10 +9,26 @@ En résumé, voilà les bases typographiques de KNACSS :
 - taille de base des contenus de 1.4em (soit un équivalent de 14px) modifiable dans la configuration LESS / Sass
 - tailles de polices définies pour les niveaux de titres et des modificateurs tels que `.small`, `.smaller`, `.big`, `.bigger`, etc.
 
-# Reset "light"
+## Reset "light"
 
 Le reset de KNACSS est volotairement minimal, le but n'étant pas de tout mettre à zéro pour le redéfinir par la suite.
 
 La feuille de style débute ainsi par une variante de l'incontournable `* {box-sizing: border-box}` afin d'imposer le très pratique modèle de boîte CSS3 à tous les éléments du document.
 
 S'en suivent quelques mises à zéro de marges, alignements par défaut des images, et quelques spécificités sur des élements tels que `blockquote`, `figure`, `canvas`, `video` ou autres `svg`.
+
+## Masquage
+
+À noter que KNACSS prévoit une classe dédiée aux éléments devant être masqués sur écrans graphiques tout en demeurant accessibles aux assistances techniques. Il s'agit de la classe `.visually-hidden`, où le choix des hideux mots-clés `!important` se justifie :
+
+```css
+.visually-hidden {
+  position: absolute !important;
+  border: 0 !important;
+  height: 1px !important;
+  width: 1px !important;
+  padding: 0 !important;
+  overflow: hidden !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+}
+```

doc/02b-layout-positionnement.md

@@ -66,7 +66,7 @@ HTML :
 ```
 
 - **Avantage :** positionnement dans le flux, compatible dès IE8
-- **Inconvénient :**
+- **Inconvénient :** Le positionnement tabulaire observe [des règles parfois complexes](http://www.alsacreations.com/tuto/lire/1522-le-modele-tabulaire-en-css.html) et surprenantes pour les non habitués.
 
 #### flexbox
 
@@ -78,8 +78,8 @@ HTML :
 </div>
 ```
 
-- **Avantage :**
+- **Avantage :** fluide, propre, simple
-- **Inconvénient :**
+- **Inconvénient :** compatibilité IE10 minimum
 
 ### Deux blocs voisins dont un fixe et un fluide
 

doc/04-tableaux.md

@@ -1 +1,38 @@
-# todo
+# Tableaux de données
+
+KNACSS propose une feuille de style minimale appliquée aux tableaux de données ainsi qu'aus éléments disposant d'une classe `.table`.
+
+Pour débuter, KNACSS impose un modèle d'affichage fixé à tous les tableaux via `table-layout: fixed;`. Ainsi, ce ne sera plus le contenu qui décidera de la largeur des cellules, mais ce que vous aurez spécifié dans les tailles CSS.
+
+```css
+table,
+.table {
+  width: 100%;
+  max-width: 100%;
+  table-layout: fixed;
+  border-collapse: collapse;
+  vertical-align: top;
+  border: 1px solid #ccc;
+}
+.table {
+  display: table;
+}
+table#recaptcha_table,
+table.table-auto {
+  table-layout: auto;
+}
+caption {
+  padding: 10px;
+  color: #555;
+  font-style: italic;
+}
+td,
+th {
+  padding: 0.3em 0.8em;
+  border: 1px #aaa dotted;
+  vertical-align: top;
+  min-width: 20px;
+  cursor: default;
+  text-align: left;
+}
+```

doc/05-formulaires.md

@@ -1 +1,12 @@
-# todo
+# Formulaires
+
+Afin d'harmoniser l'affichage par défaut des éléments de formulaires au sein de l'ensemble des navigateurs, un certain nombre de styles est prévu dans KNACSS.
+Pour constituer cette base de "bonnes pratiques", les crédits reviennent notamment aux ressources suivantes :
+
+- [HTML5boilerplate](https://html5boilerplate.com/),
+- [github.com/nathansmith/formalize](http://github.com/nathansmith/formalize),
+- [sitepen.com](http://www.sitepen.com)
+
+Le reset "formulaire" de KNACSS tient compte des éléments suivants : `form`,  `input`,  `fieldset`,  `button`,  `select`,  `label`,  `legend`,  `textarea`,  etc.
+
+Notez également qu'en attribuant la classe `.btn` à un élément, vous le considérerez (et stylerez) tel un bouton de formulaire.

doc/06-helpers.md

@@ -1 +1,148 @@
-# todo
+# Helpers
+
+Les "Helpers" sont des classes purement visuelles et utilitaires (non "sémantiques"), pas très jolie mais rudement pratiques en production pour alléger vos feuilles de styles.
+
+**Attention toutefois !** Ce type de classes conduit fréquemment [à des abus au sein de votre code HTML](http://blog.goetter.fr/2014/11/10/bien-utiliser-un-framework-css/).
+
+Par exemple, Si vous avez 20 images au comportement identique dans la page, ne les affublez pas de classes visuelles multiples telles que `img class="mod clearfix left inbl w200p pas mb1 large-mb2 small-mbn"` mais optez plutôt pour une classe personnalisée : `img class="media"` par exemple.
+
+**Méthode :** Limitez-vous à 4 noms de classes au grand maximum par élément HTML. Si vous pensez qu’il vous en faut davantage, il est temps d’envisager une classe personnalisée, ou de profiter des pré-processeurs CSS.
+
+_Les valeurs de helpers peuvent être modifiées au sein du fichier de configuration LESS / Sass._
+
+## les Helpers de largeur
+
+Largeurs fluides (en pourcentage) :
+
+```css
+.w10 {
+  width: 10%;
+}
+.w20 {
+  width: 20%;
+}
+.w25 {
+  width: 25%;
+}
+...
+.w100 {
+  width: 100%;
+}
+
+```
+
+Largeurs fixes (en pixel) :
+
+```css
+.w50p {
+  width: 50px;
+}
+.w100p {
+  width: 100px;
+}
+.w150p {
+  width: 150px;
+}
+...
+.w960p {
+  width: 960px;
+}
+.w1140p {
+  width: 1140px;
+}
+
+```
+
+Largeurs spéciales :
+
+```css
+.mw960p {
+  max-width: 960px;
+}
+.mw1140p {
+  max-width: 1140px;
+}
+.wauto {
+  width: auto;
+}
+```
+
+
+## les Helpers d'espacement
+
+Les herpers d'espacement comportent des classes dédiées aux marges externes (margin) et aux marges internes (padding).
+
+Leur nommage est assez intuitif :
+
+- p,m = padding, margin
+- a,t,r,b,l = all, top, right, bottom,left
+- s,m,l,n (ou 0) = small, medium, large, none (ou 0)
+
+Exemples :
+
+- `.prs` signifie "padding-right small" (où "small" est défini dans votre fichier de configuration, par défaut 5px)
+- `.man` signifie "margin all none" (fonctionne aussi avec la syntaxe `.ma0`)
+
+### les marges externes (margin)
+
+```css
+.man,
+.ma0 {
+  margin: 0;
+}
+.mas {
+  margin: 10px;
+}
+.mam {
+  margin: 20px;
+}
+.mal {
+  margin: 40px;
+}
+.mtn,
+.mt0 {
+  margin-top: 0;
+}
+.mts {
+  margin-top: 10px;
+}
+.mtm {
+  margin-top: 20px;
+}
+.mtl {
+  margin-top: 40px;
+}
+...
+```
+
+### les marges internes (padding)
+
+```css
+.ptn,
+.pt0 {
+  padding-top: 0;
+}
+.pts {
+  padding-top: 10px;
+}
+.ptm {
+  padding-top: 20px;
+}
+.ptl {
+  padding-top: 40px;
+}
+.prn,
+.pr0 {
+  padding-right: 0;
+}
+.prs {
+  padding-right: 10px;
+}
+.prm {
+  padding-right: 20px;
+}
+.prl {
+  padding-right: 40px;
+}
+...
+```

doc/07-responsive.md

@@ -1 +1,118 @@
-# todo
+# Responsive Webdesign
+
+## Points de rupture
+
+Par défaut, KNACSS tient compte des valeurs de points de rupture suivants :
+
+- "tiny" : correspond à une fenêtre de 480px ou moins
+- "small" : correspond à une fenêtre entre 481px et 768px inclus
+- "medium"correspond à une fenêtre entre 769px et 1024px inclus
+- "large"correspond à une fenêtre entre 1025px et 1280px inclus
+- "extra-large"correspond à une fenêtre entre 1281px et 1600px inclus
+- "ultra-large"correspond à une fenêtre à partir de 1601px
+
+_Les valeurs des points de rupture peuvent être modifiées au sein du fichier de configuration LESS / Sass._
+
+## Préfixes de classe
+
+Pour les points de rupture "large", "medium", "small" et "tiny", des préfixes de classes ont été introduits dans KNACSS :
+
+- `.large-*` : préfixe KNACSS destiné aux styles sur écrans larges
+- `.medium-*` : préfixe KNACSS destiné aux styles sur écrans medium
+- `.small-*` : préfixe KNACSS destiné aux styles sur écrans small
+- `.tiny-*` : préfixe KNACSS destiné aux styles sur écrans tiny
+
+### Exemple : le point de rupture "tiny"
+
+Voici quelques-unes des classes dédiées aux écrans de très petite taille… Le mot-clé `!important` est nécessaire pour être certain que les styles écrasent bien les styles appliqués par défaut.
+
+Masquage / visibilité :
+
+```css
+.tiny-hidden {
+    display: none !important;
+}
+.tiny-visible {
+    display: block !important;
+}
+```
+
+Modèles d'affichage :
+
+```css
+.tiny-no-float {
+    float: none;
+}
+.tiny-inbl {
+    display: inline-block;
+    float: none;
+    vertical-align: top;
+}
+.tiny-row {
+    display: table !important;
+    table-layout: fixed !important;
+    width: 100% !important;
+}
+.tiny-col {
+    display: table-cell !important;
+    vertical-align: top !important;
+}
+```
+
+Largeurs :
+
+```css
+.tiny-w25 {
+    width: 25% !important;
+}
+.tiny-w33 {
+    width: 33.3333% !important;
+}
+.tiny-w50 {
+    width: 50% !important;
+}
+.tiny-w66 {
+    width: 66.6666% !important;
+}
+.tiny-w75 {
+    width: 75% !important;
+}
+.tiny-w100,
+.tiny-wauto {
+    display: block !important;
+    float: none !important;
+    clear: none !important;
+    width: auto !important;
+    margin-left: 0 !important;
+    margin-right: 0 !important;
+    border: 0;
+}
+```
+
+Marges :
+
+```css
+.tiny-man,
+    .tiny-ma0 {
+        margin: 0 !important;
+}
+.tiny-pan,
+.tiny-pa0 {
+    padding: 0 !important;
+}
+```
+
+
+## Règles de styles particulières
+
+```css
+@media (min-width: 1025px) {
+  /* rules for big resources and big screens like: background-images, font-faces, etc. */
+}
+```
+
+```css
+@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {
+  /* style adjustments for high density devices */
+}
+```