Mise en page

Container

La classe de conteneur n’est pas strictement une partie de la grille mais est importante dans la disposition du contenu. Cela vous permet de centrer le contenu de votre page. La classe conteneur est définie sur ~ 70% de la largeur de la fenêtre. Il vous aide à centrer et à positionner le contenu de votre page. Nous utilisons le conteneur pour mettre en place notre contenu corporel.

Affichage avec container

Paragraphe

Affichage sans container

Paragraphe

Pour ajouter un conteneur, placez simplement votre contenu dans une balise <div> avec une classe container. Voici un exemple de la façon dont votre page pourrait être configurée.


    <body>
      <div class="container">
        <!-- Page Content goes here -->
      </div>
    </body>
          

Grille

Notre grille standard est composée de 12 colonnes. Ces colonnes auront toujours une largeur égale quelque soit la taille du navigateur.

1
2
3
4
5
6
7
8
9
10
11
12

Pour avoir une idée de la façon dont la grille est utilisée en HTML, jetez un oeil au code ci-dessous qui produira un résultat similaire à celui ci-dessus.


    <div class="row">
      <div class="col s1">1</div>
      <div class="col s1">2</div>
      <div class="col s1">3</div>
      <div class="col s1">4</div>
      <div class="col s1">5</div>
      <div class="col s1">6</div>
      <div class="col s1">7</div>
      <div class="col s1">8</div>
      <div class="col s1">9</div>
      <div class="col s1">10</div>
      <div class="col s1">11</div>
      <div class="col s1">12</div>
    </div>
          

Note: Pour l’instant, sachez que le s1 signifie small-1 qui, en anglais, signifie « 1 colonne sur les petits écrans ».

Colonnes en action dans des lignes

Souvenez-vous lorsque vous créez votre mise en page que toutes les colonnes doivent être contenues dans une ligne et que vous devez ajouter la classe col à vos divs internes pour les transformer en colonnes

Cette div est large de 12 colonnes sur toutes les tailles d’écran
6 colonnes (la moitié)
6 colonnes (la moitié)


    <div class="row">
      <div class="col s12">Cette div est large de 12 colonnes sur toutes les tailles d'écran</div>
      <div class="col s6">6 colonnes (la moitié)</div>
      <div class="col s6">6 colonnes (la moitié)</div>
    </div>
          

Décalages

Pour compenser, il suffit d’ajouter offset-s2 à la classe où s signifie l’écran class-prefix (s = petit, m = moyen, l = grand) et le nombre suivant est le nombre de colonnes que vous voulez compenser.

Cette div est large de 12 colonnes sur toutes les tailles d’écran
6 colonnes (décalé de 6)


    <div class="row">
      <div class="col s12"><span class="flow-text">Cette div est large de 12 colonnes sur toutes les tailles d'écran</span></div>
      <div class="col s6 offset-s6"><span class="flow-text">6 colonnes (décalé de 6)</span></div>
    </div>
          

Push and Pull

Vous pouvez facilement changer l’ordre de vos colonnes avec « Push and Pull ». Ajoutez simplement push-s2 ou pull-s2 à la classe où s signifie le préfixe de classe d’écran (s = petit, m = moyen, l = grand) et le nombre suivant est le nombre de colonnes que vous voulez pousser ou tirer.

This div is 7-columns wide on pushed to the right by 5-columns.
5-columns wide pulled to the left by 7-columns.


    <div class="row">
      <div class="col s7 push-s5"><span class="flow-text">This div is 7-columns wide on pushed to the right by 5-columns.</span></div>
      <div class="col s5 pull-s7"><span class="flow-text">5-columns wide pulled to the left by 7-columns.</span></div>

    </div>
          

Grille (responsive)

Dans les exemples précédents, nous avons seulement défini la taille pour les petits écrans en utilisant col s12. C’est bien si nous voulons une disposition fixe puisque les règles se propagent vers le haut. En disant simplement s12, nous disons essentiellement col s12 m12 l12. Mais en définissant explicitement la taille, nous pouvons rendre notre site Web plus adaptatif.

PC

Titre

Paragraphe

Image

Paragraphe

Paragraphe

Image

Paragraphe

Tablette

Titre

Paragraphe

Image

Paragraphe

Paragraphe

Image

Paragraphe

 
Mobile

Titre

Paragraphe

Image

Paragraphe

Paragraphe

Image

Paragraphe