Grid Systems

    Resumo/Informações

    Float Layout
    • Float layout é o exemplo de layout responsivo que utiliza float.

    1) Criar a .row
    • calc((100% - numberOfGutters * #{$gutter-horizontal}) / quantidadeColunas).
    • Gutter: espaço entre as colunas.

    2) Utilizar o Atribute Selector para selecionar todos os elementos onde as classes de atributos começam com col-

    3) hello

    Atribute Selector
    • Utilizado para selecionar algumas coisas por atributo (alt, class, src).
    • Por exemplo, poderiamos selecionar todos os elementos que possuíssem o alt="logo".
      Exemplo: [alt="Logo"] {
      }

    • Simbolos/Selectors:
      ^ Select any classes that starts with "col-".
      * Select any classes that contains "col-".
      $ Select any classes that end with "col-".
      Example: [class^="col-"]

    .row { max-width: $grid-width; background-color: #eee; margin: 0 auto; //Quero que a ultima row nao tenha margin bottom &:not(:last-child) { margin-bottom: $gutter-vertical; } //.row:last-child() - iria simplesmente selecionar o ultimo elemento. //&:not(:last-child) - seleciona todos menos a last-child. @include clearfix; //Para fazer uma coluna, vamos precisar colocar width (100% - $gutter-horizontal) / 2 (pois sao duas colunas). //Para utilizar uma variavel do Sass no calc(), precisa ser com a sintaxe #(variable). .col-1-of-2 { width: calc((100% - #{$gutter-horizontal}) / 2); background-color: orangered; float: left; &:not(:last-child){ margin-right: $gutter-horizontal; } } .col-1-of-3 { width: calc((100% - 2 * #{$gutter-horizontal}) / 3); } }