From f5b40308a362c2bba31ba9851a836cd3461e0c48 Mon Sep 17 00:00:00 2001 From: raphaelgoettter Date: Fri, 6 Mar 2015 17:20:33 +0100 Subject: [PATCH] =?UTF-8?q?d=C3=A9but=20doc=20Layout?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- doc/01-typo-et-reset.md | 9 ++- doc/02-layout.md | 155 +++++++++++++++++++++++++++++++++++++++- 2 files changed, 162 insertions(+), 2 deletions(-) diff --git a/doc/01-typo-et-reset.md b/doc/01-typo-et-reset.md index 99f1089..3f81c33 100644 --- a/doc/01-typo-et-reset.md +++ b/doc/01-typo-et-reset.md @@ -1 +1,8 @@ -# todo \ No newline at end of file +# Typographie + +- choix d'unités fluides (em, rem) +- taille de police de 62.5% sur HTML (soit un équivalent de 10px, très pratique pour les conversions en rem) +- 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" diff --git a/doc/02-layout.md b/doc/02-layout.md index 99f1089..d55bde5 100644 --- a/doc/02-layout.md +++ b/doc/02-layout.md @@ -1 +1,154 @@ -# todo \ No newline at end of file +# Alignements et positionnements + +## Différents choix + +- positionnement flottant +- positionnement avec `display: inline-block` +- positionnement avec `display: table-cell` +- positionnement avec Flexbox + +Il n'y a pas de mystère : chaque type de positionnement est capable de répondre à différents types de contraintes. Il n'y a pas de meilleur choix qu'un autre. + +Votre décision pourra être guidée par les indices suivants : +- il est généralement plus profitable de ne pas opter pour des positionnement hors-flux (`float`, `position: absolute`) +- Flexbox est certainement le modèle le plus polyvalent et propre, mais n'est compatible qu'à partir de IE10+. + +## Cas concrets : je veux faire quoi ? + +### Deux blocs voisins de largeur fixe + +Les choix offerts avec KNACSS : + +#### flottant et flottant + +La classe `.fl` pour `float: left` permet à un élément d'être flottant à gauche. + +Il vous suffit de faire flotter vos deux éléments et de leur attribuer la largeur souhaitée pour qu'ils s'affichent l'un à côté de l'autre : + +HTML : +```html +
premier
+
deuxième
+``` + +- **Avantage :** simple, rapide, intuitif, hyper compatible +- **Inconvénient :** positionnement hors du flux, nécessitera des ajustements (clearfix et autres anti-débordements) + +#### inline-block et inline-block + +La propriété `display: inline-block` (sous forme de classe `.inbl` chez KNACSS) permet à un élément de s'afficher tel un "inline" tout en étant dimensionné. + +HTML : +```html +
premier
+
deuxième
+``` + +- **Avantage :** positionnement dans le flux, compatible dès IE8 +- **Inconvénient :** un espace "whitespace" apparaîtra entre les deux div et nécessitera de coller les balises ou de bidouiller en CSS pour être supprimé + +#### table-cell et table-cell + +HTML : +```html +
+
premier
+
deuxième
+
+``` + +- **Avantage :** positionnement dans le flux, compatible dès IE8 +- **Inconvénient :** + +#### flexbox + +HTML : +```html +
+
premier
+
deuxième
+
+``` + +- **Avantage :** +- **Inconvénient :** + +### Deux blocs voisins dont un fixe et un fluide + +Les choix offerts avec KNACSS : + +#### flottant et flottant + +Pas possible [Résolu] + +#### inline-block et inline-block + +Pas possible [Résolu] + +#### table-cell et table-cell + +HTML : +```html +
+
premier
+
deuxième
+
+``` + +#### flexbox + +HTML : +```html +
+
premier
+
deuxième
+
+``` + +### Deux blocs voisins de même hauteur + +Les choix offerts avec KNACSS : + +#### flottant et flottant + +Pas possible [Résolu] + +#### inline-block et inline-block + +Pas possible [Résolu] + +#### table-cell et table-cell + +Par défaut, les éléments constituant des "cellules de tableau", donc `table-cell` ont automatiquement la même hauteur entre frères. Il n'y a donc rien à faire si l'on opte pour ce positionnement : ça marche tout seul. + +HTML : +```html +
+
premier
+
deuxième
+
+``` + +#### flexbox + +Là aussi c'est automatique : les enfants d'un conteneur `flexbox` ont tous par défaut la même hauteur. + +HTML : +```html +
+
premier
+
deuxième
+
+``` + +### Plusieurs blocs voisins de même taille + +Si vous souhaitez réaliser des constructions de plusieurs éléments de même taille (fixe ou fluide) avec ou sans espace entre les éléments (gouttière), je vous invite à prendre connaissance des possibilités de **grilles** offertes par KNACSS. + +### Centrer horizontalement + +#### Du texte ou une image + +#### Un bloc + +### Centrer verticalement