Espaciado

Al igual que la escala de colores, trabajar con un sistema de espaciado definido permite realizar el trabajo de manera más rápida y consistente. Un espaciado constante y escalable ayuda a eliminar la incertidumbre en el diseño y desarrollo, ya que se utiliza un conjunto limitado de opciones.

Se han añadido clases auxiliares para ello que utilizan la misma arquitectura de clases de espaciado de bootstrap.

Ejemplos

Clases CSS

A continuación se muestran algunos ejemplos CSS de algunas de estas clases ya construidas:

.mt-space-0 {
  margin-top: 0 !important;
}

.ml-space-4 {
  margin-left: 4px !important;
}

.px-space-8 {
  padding-left: 8px !important;
  padding-right: 8px !important;
}

.p-space-3 {
  padding: 3px !important;
}

Colección de tamaños

A continuación se muestran algunos ejemplos representativos de estos tamaños:

Nombre espacio medida px medida rem visualizacion
space-4 4px 0.25rem
space-8 8px 0.5rem
space-12 12px 0.75rem
space-16 16px 1rem
space-24 24px 1.5rem
space-32 32px 2rem
space-40 40px 2.5rem
space-48 48px 3rem
space-64 64px 4rem
space-80 80px 5rem
space-96 96px 6rem
space-112 112px 7rem
space-128 128px 8rem

Como nota a tener en cuenta, conviene saber que existen variables a nivel de código CSS con estas medidas:

  • --space-4
  • --space-8
  • --space-12
  • --space-...

No confundir con:

  • --spacer-1
  • --spacer-2
  • --spacer-3
  • --spacer-4
  • --spacer-...

Estas últimas existen solo por compatibilidad con la plataforma Liferay en su modo administración.

Usos de espacios con gap

También se dispone de clases auxiliares para separaciones de elementos. Úsalas según sea tu necesidad.

  • Para visualizaciones grid
    • .gap-space-#{$numero}
  • Para visualizaciones flexbox
    • .comlumn-gap-#{$numero}
    • .row-gap-#{$numero}