diff --git a/doc/02-layout.md b/doc/02a-layout-alignements.md similarity index 98% rename from doc/02-layout.md rename to doc/02a-layout-alignements.md index d55bde5..646325f 100644 --- a/doc/02-layout.md +++ b/doc/02a-layout-alignements.md @@ -13,7 +13,7 @@ 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 ? +## Concrètement : je veux faire quoi ? ### Deux blocs voisins de largeur fixe diff --git a/doc/02b-layout-positionnement.md b/doc/02b-layout-positionnement.md new file mode 100644 index 0000000..219a4db --- /dev/null +++ b/doc/02b-layout-positionnement.md @@ -0,0 +1,170 @@ +# Positionnements avec KNACSS + +Au-delà des alignements d'éléments, KNACSS permet de positionner et d'architecturer vos gabarits à travers plusieurs solutions. + +Dans cette page de documentation, nous étudierons en détail chaque cas concret auquel vous risquez d'être confronté et proposerons une réponse adaptée. + +## Différents choix offerts + +Les types de positionnements inclus nativement dans KNACSS sont les suivants : + +- 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+. + +## Concrètement : je veux faire quoi ? + +### Deux blocs voisins de largeur fixe + +![Deux blocs voisins de largeur fixe](https://raw.githubusercontent.com/raphaelgoetter/KNACSS/master/doc/illust/03-layout1.png) + +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 + +![Deux blocs voisins de largeur fixe et fluide](https://raw.githubusercontent.com/raphaelgoetter/KNACSS/master/doc/illust/03-layout2.png) + +Les choix offerts avec KNACSS : + +#### flottant et .mod + +HTML : +```html +
premier
+
deuxième
+``` + +#### 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 + +![Deux blocs voisins de même hauteur](https://raw.githubusercontent.com/raphaelgoetter/KNACSS/master/doc/illust/03-layout3.png) + +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 diff --git a/doc/illust/03-layout1.png b/doc/illust/03-layout1.png new file mode 100644 index 0000000..2b0061b Binary files /dev/null and b/doc/illust/03-layout1.png differ diff --git a/doc/illust/03-layout2.png b/doc/illust/03-layout2.png new file mode 100644 index 0000000..777c2d6 Binary files /dev/null and b/doc/illust/03-layout2.png differ diff --git a/doc/illust/03-layout3.png b/doc/illust/03-layout3.png new file mode 100644 index 0000000..410993c Binary files /dev/null and b/doc/illust/03-layout3.png differ