Fondazione - Costruire semanticamente

Utilizzando il set di mixin SASS, viene generato un CSS griglia che viene utilizzato per costruire la propria griglia semantica.

Righe

Il mixin grid-row () viene utilizzato per creare una riga.

.container {
   @include grid-row;
}

Colonne

Il mixin grid-column () viene utilizzato per creare una colonna. La larghezza della colonna può essere definita in diversi modi.

.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
}

È possibile accedere alla colonna della griglia anche come funzione. Il valore percentuale viene fornito senza alcuna colonna della griglia CSS.

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

Griglie multiple

Il $ grid-column-count imposta il numero di colonne per tutte le griglie per impostazione predefinita. Può essere sovrascritto all'interno di un'istanza di riga.

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

Senza emettere alcun CSS di riga, puoi modificare temporaneamente il contesto della griglia usando grid-context () mixin. Accoppiandolo con breakpoint () mixin puoi rendere la griglia reattiva.

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