Skip to content

The Greed

Jump to bottom
Samuel edited this page Apr 27, 2016 · 5 revisions

Sistema de rejillas para maquetar. Para la documentación completa visita FlexBox Grid. La sintaxis varía levemente:

<div class="grid">
  <div class="row">
    <div class="col xs-12 m-6 l-4">A</div>
    <div class="col xs-12 m-6 l-4">B</div>
    <div class="col xs-12 m-6 l-4">C</div>
    <div class="col xs-12 m-6 l-4">D</div>
    <div class="col xs-12 m-6 l-4">E</div>
    <div class="col xs-12 m-6 l-4">F</div>
  </div>
</div>

Responsive classes

Cada una de las columnas del greed tiene una o más clases responsivas. Estas clases se prefijan con un breakpoint (xs-, s-, m-, l-, xl-) y se sufijan con un número (del 1 al 12 por defecto, pero esto lo puedes configurar).

Breakpoint prefix

Los prefijos representan un breakpoint, y aplican para cualquier dimensión de pantalla superior al mismo. Los prefijos pueden ser:

  • xs: abarca todas las pantallas.
  • s: abarca las pantallas mayores a 650px de ancho.
  • m: abarca las pantallas mayores a 985px de ancho.
  • l: abarca las pantallas mayores a 1300px de ancho.
  • xl: abarca las pantallas mayores a 1675px de ancho.

Estos prefijos los puedes configurar usando la variable @grid-col-names y @grid-col-breaks en el archivo grid.less. La prioridad es creciente, es decir, si se incluyen dos clases con distintos prefijos, tendrá precedencia la clase menos restrictiva que cumpla con las condiciones de la pantalla.

Size suffix

Los sufijos son números que representan el tamaño que la columna ocupará. Los sufijos van del número 1 (significando que la columna ocupará 1/12 del ancho del contenedor) hasta el 12 (significando que la columna ocupará 12/12 del ancho del contenedor). La cantidad de columnas se puede configurar usando la variable @grid-columns en el archivo grid.less.

Entonces, el ejemplo anterior se renderizará así:

Render en pantallas pequeñas (0 - 985px) xs-12

Small

Render en pantallas medianas (985px - 1300px) m-6

Mid

Render en pantallas grandes (1300px - ) l-4

Large

Offsets

Permiten posicionar cualquier columna en un lugar específico del grid, no necesariamente en el que le correspondería:

<div class="grid">
    <div class="row">
        <div class="col xs-12 m-6 l-4 off-m-6 off-l-8">
            <div class="box">A</div>
        </div>

        <div class="col xs-12 m-6 l-4">
            <div class="box">B</div>
        </div>

        <div class="col xs-12 m-6 l-4">
            <div class="box">C</div>
        </div>
    </div>
</div>

Los offsets proveen una sintaxis de prefijos y sufijos similar a la de las columnas.

Render en pantallas pequeñas (0 - 985px) no offset

Small

Render en pantallas medianas (985px - 1300px) off-m-6

Mid

Render en pantallas grandes (1300px - ) off-l-8

Large

Horizontal Alignment

<div class="grid">
    <div class="row center-m end-l start-xs">
        <div class="col xs-6">
            <div class="box">Start</div>
        </div>
    </div>

    <div class="row center-xs end-m start-l">
        <div class="col xs-6">
            <div class="box">Center</div>
        </div>
    </div>

    <div class="row center-l end-xs start-m">
        <div class="col xs-6">
            <div class="box">End</div>
        </div>
    </div>
</div>

Render en pantallas pequeñas (0 - 985px)

Small

Render en pantallas medianas (985px - 1300px)

Mid

Render en pantallas grandes (1300px - )

Large

Clone this wiki locally