Grille fluide. Une grille fluide sert à structurer la mise en page, la rendre harmonieuse et faciliter le passage au responsive web design

Transcription

1 Grilles Fluides CSS

2 CREATION D UNE GRILLE FLUIDE Grille fluide Une grille fluide sert à structurer la mise en page, la rendre harmonieuse et faciliter le passage au responsive web design

3

4

5 Maitriser la grille

6 Définition des éléments d une grille

7 Anatomie d une grille Une grille est composée de colonnes et de gouttières

8 Anatomie d une grille colonne gouttière

9 Anatomie d une grille Une grille est composée d autant de colonnes que nécessaire 3, 4, 12, 16, 24 colonnes

10 Mise en place de la grille css

11 comprendre le container Une grille css est composée d un élément supplémentaire Le container de la grille

12 container comprendre le container

13 comprendre le container Mais pourquoi un container?

14 comprendre le container Car les colonnes utiliseront l attribut css «float». Il est donc necessaire de recourir à un hack pour empêcher le dépassement des flottants

15 comprendre le container solution sans hack solution avec hack

16 comprendre le container Nous utilisons une classe css pour définir le composant container afin de pouvoir l utiliser plusieurs fois dans le site

17 comprendre le container.row:after { content: ""; display: table; clear: both; }

18 comprendre le container Cette classe css sera utilisée sur une div <div class= row > ici le contenu </div>

19 comprendre le container Maintenant donnons une une taille au site et centrons le

20 comprendre le container Nous utilisons également une classe pour définir ces propriétés

21 comprendre le container.wrapper { max-width: 960px; margin-left: auto; margin-right: auto; }

22 comprendre le container Nous pouvons maintenant utiliser nos deux classes pour commencer à construire notre grille

23 comprendre le container <div class= wrapper row > ici le contenu </div>

24 calculer la grille

25 calcul de grille Partons sur un exemple d une grille de 960px de 4 colonnes avec des gouttières de 20px

26 calcul de grille Le composant de colonne comprend 2 demies gouttières

27 calcul de grille Comment calculer la taille du composant de colonne?

28 calcul de grille Voici la formule 100% /nb colonne

29 calcul de grille Notre colonne fait donc 100 / 4

30 calcul de grille Ajoutons maintenant nos gouttières 25% + 20px

31 calcul de grille Redéfinissons le modèle de boite CSS afin de nous faciliter le calcul

32 calcul de grille *, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: box-sizing: border-box; border-box; }

33 Nous avons fait le plus dur calcul de grille

34 calcul de grille Il nous reste a définir un composant de colonne en css

35 enfin... 4 composants calcul de grille

36 calcul de grille Nous utiliserons la convention de nommage suivante préfixe.col-1.col-2.col-3.col-4 nb de colonnes

37 calcul de grille Nous allons ecrire un sélecteur css3 capable de sélectionner les 4 composants de colonnes commençant par le prefix col-

38 calcul de grille [class*=col-] { propriété: valeur; }

39 calcul de grille Maintenant nous voulons que les composants.col-x se placent les uns à côté des autres avec une demi-gouttière à gauche et à droite

40 calcul de grille [class*=col-] { float: left; padding-left: 10px; padding-right: 10px; }

41 calcul de grille Nous pouvons maintenant définir nos composants de colonnes de.col-1 à.col-4

42 calcul de grille.col-1 { width: 25%; }.col-2 { width: 50%; }.col-3 { width: 75%; }.col-4 { width: 100%; }

43 calcul de grille Voici un exemple de code html d une grille <div class= wrapper row > <div class= col-1 ></div> <div class= col-1 ></div> <div class= col-1 ></div> <div class= col-1 ></div> </div>

44

45 Construction HTML avec des grilles fluides

46 imbrications des grilles Les grilles fluides présentent l avantage d être imbricables

47 imbrications des grilles À condition de supprimer la première et dernière demi-gouttière des colonnes imbriquées

48 imbrications des grilles.row.row { margin-left: -10px; margin-right: -10px; }

49 imbrications des grilles Exemple d imbrication.col-2.col-2.col-2.col-4.col-2 <div class= wrapper row > <div class= col-2 ></div> <div class= col-2 row > <div class= col-4 ></div> <div class= col-2 ></div> <div class= col-2 ></div> </div> </div>

50 imbrications des grilles Il faut toujours utiliser le même principe

51 imbrications des grilles il faut imbriquer des composants.col-x dans un composant.row <div class= row > <div class= col-2 ></div> <div class= col-2 > </div>

52 RWD

53 GRille responsive

54 GRille responsive Rien de plus simple : il suffit de supprimer les contraintes créées précédemment sur les composants.col-x

55 GRille only screen and (max-width:768px) { [class*=col-] { float: none; width: inherit; } }

56 fin