Fondation - Construire sémantiquement

En utilisant l'ensemble des mixins SASS, une grille CSS est générée qui est utilisée pour construire votre propre grille sémantique.

Lignes

Le mixin grid-row () est utilisé pour créer une ligne.

.container {
   @include grid-row;
}

Colonnes

Le mixin grid-column () est utilisé pour créer une colonne. La largeur de la colonne peut être définie de plusieurs façons.

.container {
   @include grid-column;
   //sets 100% column count

   @include grid-column(3);
   //sets column count 25%

   @include grid-column(25%);
   //set percentage for column count

   @include grid-column(1 of 7);
   //custom fraction is set for columns
}

La colonne de la grille est également accessible en tant que fonction. La valeur en pourcentage est donnée sans aucune colonne de grille CSS.

.main-content {
   width: grid-column(1 of 7);
}

Grilles multiples

Le $ grid-column-count définit le nombre de colonnes sur toutes les grilles par défaut. Il peut être remplacé dans une instance de ligne.

.container {
   @include grid-row(16) {
      .main-content {
         @include grid-column(5);
      }
      .sidebar {
         @include grid-column(11);
      }
   }
}

Sans afficher de ligne CSS, vous pouvez modifier temporairement le contexte de la grille en utilisant le mixin grid-context () . L'association avec le mixin breakpoint () vous permet de rendre la grille réactive.

@include grid-context(7) {
   .sidebar {
      @include grid-column(4);
   }
}