Fundação - Construindo Semanticamente

Usando o conjunto de mixins SASS, uma grade CSS é gerada, a qual é usada para construir sua própria grade semântica.

Linhas

O mixin grid-row () é usado para criar uma linha.

.container {
   @include grid-row;
}

Colunas

O mixin grid-column () é usado para criar uma coluna. A largura da coluna pode ser definida de várias maneiras.

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

A coluna da grade também pode ser acessada como uma função. O valor da porcentagem é fornecido sem nenhum CSS da coluna da grade.

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

Multiple Grids

O $ grid-column-count define números de colunas para todas as grades por padrão. Ele pode ser substituído em uma instância de linha.

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

Sem emitir nenhum CSS de linha, você pode alterar temporariamente o contexto da grade usando o mixin grid-context () . Emparelhando com o mixin de breakpoint (), você pode tornar a grade responsiva.

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