KNACSS/doc/02b-layout-positionnement.md

173 lines
5.3 KiB
Markdown
Raw Permalink Normal View History

2015-03-07 13:27:25 +01:00
# Positionnements avec KNACSS
2015-03-06 17:20:33 +01:00
2015-03-07 13:27:25 +01:00
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 :
2015-03-06 17:20:33 +01:00
- 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+.
2015-03-07 13:27:25 +01:00
## Concrètement : je veux faire quoi ?
2015-03-06 17:20:33 +01:00
### Deux blocs voisins de largeur fixe
2015-03-07 13:27:25 +01:00
![Deux blocs voisins de largeur fixe](https://raw.githubusercontent.com/raphaelgoetter/KNACSS/master/doc/illust/03-layout1.png)
2015-03-06 17:20:33 +01:00
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
2015-03-07 13:27:25 +01:00
<div class="fl w400p">premier</div>
<div class="fl w400p">deuxième</div>
2015-03-06 17:20:33 +01:00
```
- **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
2015-03-07 13:27:25 +01:00
<div class="inbl w400p">premier</div>
<div class="inbl w400p">deuxième</div>
2015-03-06 17:20:33 +01:00
```
- **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
<div class="row">
2015-03-07 13:27:25 +01:00
<div class="col w400p">premier</div>
<div class="col w400p">deuxième</div>
2015-03-06 17:20:33 +01:00
</div>
```
- **Avantage :** positionnement dans le flux, compatible dès IE8
2015-03-09 16:05:06 +01:00
- **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.
2015-03-06 17:20:33 +01:00
#### flexbox
HTML :
```html
2015-04-13 16:31:44 +02:00
<div class="flex-container">
2015-03-07 13:27:25 +01:00
<div class="w400p">premier</div>
<div class="w400p">deuxième</div>
2015-03-06 17:20:33 +01:00
</div>
```
2015-03-09 16:05:06 +01:00
- **Avantage :** fluide, propre, simple
- **Inconvénient :** compatibilité IE10 minimum
2015-03-06 17:20:33 +01:00
### Deux blocs voisins dont un fixe et un fluide
2015-03-07 13:27:25 +01:00
![Deux blocs voisins de largeur fixe et fluide](https://raw.githubusercontent.com/raphaelgoetter/KNACSS/master/doc/illust/03-layout2.png)
2015-03-06 17:20:33 +01:00
Les choix offerts avec KNACSS :
2015-03-07 13:27:25 +01:00
#### flottant et .mod
2015-03-06 17:20:33 +01:00
2015-03-07 13:27:25 +01:00
HTML :
```html
<div class="fl w400p">premier</div>
<div class="mod">deuxième</div>
```
2015-03-06 17:20:33 +01:00
#### inline-block et inline-block
Pas possible [Résolu]
#### table-cell et table-cell
HTML :
```html
<div class="row">
2015-03-07 13:27:25 +01:00
<div class="col w400p">premier</div>
2015-03-06 17:20:33 +01:00
<div class="col">deuxième</div>
</div>
```
#### flexbox
HTML :
```html
2015-04-13 16:31:44 +02:00
<div class="flex-container">
2015-03-07 13:27:25 +01:00
<div class="w400p">premier</div>
2015-04-13 16:10:55 +02:00
<div class="flex-item-fluid">deuxième</div>
2015-03-06 17:20:33 +01:00
</div>
```
### Deux blocs voisins de même hauteur
2015-03-07 13:27:25 +01:00
![Deux blocs voisins de même hauteur](https://raw.githubusercontent.com/raphaelgoetter/KNACSS/master/doc/illust/03-layout3.png)
2015-03-06 17:20:33 +01:00
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
<div class="row">
<div class="col">premier</div>
<div class="col">deuxième</div>
</div>
```
#### flexbox
Là aussi c'est automatique : les enfants d'un conteneur `flexbox` ont tous par défaut la même hauteur.
HTML :
```html
2015-04-13 16:31:44 +02:00
<div class="flex-container">
2015-03-06 17:20:33 +01:00
<div>premier</div>
<div>deuxième</div>
</div>
```
### Plusieurs blocs voisins de même taille
2015-03-07 14:36:58 +01:00
![grilles](https://raw.githubusercontent.com/raphaelgoetter/KNACSS/master/doc/illust/03-layout4.png)
2015-03-06 17:20:33 +01:00
2015-03-07 14:36:58 +01:00
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.
2015-03-06 17:20:33 +01:00
2015-03-07 14:36:58 +01:00
Voir **[la Doc au point 03-grilles](https://github.com/raphaelgoetter/KNACSS/blob/master/doc/03-grilles.md)**.
2015-03-30 15:43:56 +02:00
### Schnaps.it, générateur de templates KNACSS
Alsacréations tient à jour un générateur de gabarits HTML/CSS basé sur le framework KNACSS, **[Schnaps.it](http://schnaps.it/)**, n'hésitez pas à en user et en abuser&nbsp;!
![grilles](https://raw.githubusercontent.com/raphaelgoetter/KNACSS/master/doc/illust/schnapsit.png)