Guajiritos Layouts

Guajiritos Layouts es una librería para Angular que proporciona de una forma amigable el trabajo con las propiedades flex de css, además incluye una serie de clases para un mejor aprovechamiento de nuestros estilos.

Instalación

Con npm

npm i @guajiritos/layouts --save

Con yarn

yarn add @guajiritos/layouts

Importar la dependencia en tu proyecto

styles.scss

...
@import "@guajiritos/layouts/layouts";
...

O puedes agregarlo directamente en la sección de assets del archivo angular.json

"styles": [
  "./node_modules/@guajiritos/layouts/layouts.scss"
]

Importar ../layouts realiza la importación de todos los módulos de la librería, si solo necesitas un módulo puedes importar solamente el módulo necesario.

layouts     - Todos los módulos de la librería
flex        - Módulo de utilidades para el trabajo con flex
colors      - Módulo de utilidades para el trabajo con colores ("color", "background-color", "border-color")
positions   - Módulo de utilidades para el trabajo con el posicionamiento
cursors     - Módulo de utilidades para el trabajo la propiedad "cursor"
fonts-utils - Módulo de utilidades para el trabajo con las propiedades "font-size" y "font-weight"
utils       - Módulo de utilidades generales (tamaños, espaciados e incluye la propiedad "cursor-pointer")

Ejemplo de uso para importar solo los módulos Flex y Utils

...
@import "@guajiritos/layouts/flex";
@import "@guajiritos/layouts/utils";
...

Breakpoints

xs - Dispositivos hasta 576 píxeles de pantalla
sm - Dispositivos hasta 768 píxeles de pantalla
md - Dispositivos hasta 992 píxeles de pantalla
lg - Dispositivos hasta 1200 píxeles de pantalla
xl - Dispositivos hasta 1400 píxeles de pantalla
Para dispositivos de mayor resolución no es necesario usar breakpoint

Para el trabajo responsive es necesario conocer los breakpoints definidos. Por regla general primero usamos el prefijo requerido, luego de forma opcional el breakpoint y por último el valor que queremos adicionar {prefijo}-{breakpoint}-{valor}.

<div class="d-flex flex-column flex-xs-row">
  Tenemos una caja con visualización en columna para todas las resoluciones excepto para las resoluciones de hasta "576px" en las cuales se visualizará en fila.
</div>

Usos

A continuación se listan todas las propiedades de esta librería

Posiciones

La propiedad position especifica el tipo de método de posicionamiento utilizado para un elemento, se puede modificar usando el prefijo "position-" seguido de uno de los posibles valores. Existen 5 diferentes valores:

"static"   - Un elemento con "position: static" no está posicionado de ninguna manera especial; siempre se coloca de acuerdo con el flujo normal de la página.
"relative" - Un elemento con "position: relative" se coloca en relación con su posición normal.
"fixed"    - Un elemento con "position: fixed" se coloca en relación con la ventana gráfica, lo que significa que siempre permanece en el mismo lugar, incluso si se desplaza la página. Las propiedades superior, derecha, inferior e izquierda se utilizan para colocar el elemento.
"absolute" - Un elemento con "position: absolute" se coloca en relación con el ancestro posicionado más cercano (en lugar de posicionarse en relación con la ventana gráfica, como fijo).
"sticky"   - Un elemento con "position: sticky" se posiciona en función de la posición de desplazamiento del usuario.

<div class="position-relative">
    <span class="position-absolute">Posicionado absoluto</span>
</div>

"static"   - Un elemento con "position: static" no está posicionado de ninguna manera especial; siempre se coloca de acuerdo con el flujo normal de la página.
"relative" - Un elemento con "position: relative" se coloca en relación con su posición normal.
"fixed"    - Un elemento con "position: fixed" se coloca en relación con la ventana gráfica, lo que significa que siempre permanece en el mismo lugar, incluso si se desplaza la página. Las propiedades superior, derecha, inferior e izquierda se utilizan para colocar el elemento.
"absolute" - Un elemento con "position: absolute" se coloca en relación con el ancestro posicionado más cercano (en lugar de posicionarse en relación con la ventana gráfica, como fijo).
"sticky"   - Un elemento con "position: sticky" se posiciona en función de la posición de desplazamiento del usuario.

Posibles valores

.position-static
.position-xs-static
.position-sm-static
.position-md-static
.position-lg-static
.position-xl-static
.position-xxl-static
.position-relative
.position-xs-relative
.position-sm-relative
.position-md-relative
.position-lg-relative
.position-xl-relative
.position-xxl-relative
.position-fixed
.position-xs-fixed
.position-sm-fixed
.position-md-fixed
.position-lg-fixed
.position-xl-fixed
.position-xxl-fixed
.position-absolute
.position-xs-absolute
.position-sm-absolute
.position-md-absolute
.position-lg-absolute
.position-xl-absolute
.position-xxl-absolute
.position-sticky
.position-xs-sticky
.position-sm-sticky
.position-md-sticky
.position-lg-sticky
.position-xl-sticky
.position-xxl-sticky

Unidades de longitud absoluta

"px" - Píxeles --> 1px = 1/96 de 1in

Unidades de longitud relativa

rem - Tamaño de la letra del elemento raíz.
vw  - 1% del ancho de la ventana gráfica.
vh  - 1% de la altura de la ventana gráfica.

En todas las propiedades qeu utilicen unidades de medida si no se específica siempre se tomará el % como unidad de medida por defecto.

Tamaño de la fuente

Se puede modificar el grosor de la fuente usando el prefijo "fs-", de forma opcional puedes utilizar un breakpoint o seguir con uno de los valores correspondientes para terminar de forma opcional con una unidad de medida.

<!-- Tamaño de fuente de 1 rem para dispositivos con resolución de hasta 576 píxeles -->
<span class="fs-xs-1rem"></span>
<span class="fs-16px">Tamaño de fuente de 16 píxeles</span>

Grosor de la fuente

Se puede modificar el grosor de la fuente usando el prefijo "fw-", de forma opcional puedes utilizar un breakpoint o seguir con uno de los siguientes valores:

normal
bold
lighter
bolder
100 - Delgada (rayita)
200 - Extra Ligero (Ultra Ligero)
300 - Ligera
400 - Normal (Regular)
500 - Medio
600 - Semi negrita (Semin negrita)
700 - Negrita
800 - Extra Negrita (Ultra Negrita)
900 - Negra (pesada)
950 - Extra Negra (Ultra Negra)

<span class="fw-400">Fuente normal</span>
<span class="fw-xs-700">Fuente en negrita para dispositivos con resolución de hasta 576 píxeles</span>

Width | Height

Se puede modificar la propiedad width usando el prefijo "w-" y la propiedad height usando el prefijo "h-", de forma opcional puedes utilizar un breakpoint o seguir con uno de los valores correspondientes y opcional también se puede especificar una unidad de medida:

<div class="w-50">Width del 50%</div>
<span class="h-100px">Height de 100 píxeles</span>

Cursor

Se puede modificar la propiedad cursor

<div class="cursor-pointer">
  ...

Posibles valores

.cursor-none
.cursor-pointer
.cursor-text
.cursor-copy
.cursor-move
.cursor-no-drop
.cursor-not-allowed

Color

Podemos modificar las propiedades color, background-color y border-color

<!-- Caja con color de fondo negro -->
<div class="bk-black">
  <h1 class="c-white">Text en color blanco</h1>
  <div class="bc-red">
    <!-- Caja con color de border rojo -->
  </div>
</div>

Solo debemos combinar los prefijos con el color correspondiente:

Para la propiedad "color" el prefijo "c-"
Para la propiedad "background-color" el prefijo "bk-"
Para la propiedad "border-color" el prefijo "bc-"

Los colores disponibles son los siguientes:

black red white

Márgenes, rellenos y bordes

Podemos controlar los márgenes y los rellenos con las propiedades margin, padding y border. Al igual que en los casos anteriores se puede lograr con la combinación de un prefijo que se encuentra predefinido, de forma opcional se puede agregar un breakpoint y luego un sufijo variable.

<!-- Caja con márgenes izquierdo y derecho de 8% --->
<div class="mx-8">
  <!-- Span con relleno izquierdo de 16 píxeles y borde derecho de 4% --->
  <span class="pl-16px br-4"></span>
  <!-- Span con relleno derecho de 16 píxeles para dispositivos con resolución de hasta 576 píxeles y borde derecho de 4 píxeles --->
  <span class="pr-xs-16px br-4px"></span>
</div>

Como ejemplo tenemos que para combinar márgenes izquierdo y derecho usaríamos el prefijo mx- seguido de un número que puede ir de 0 a 100 y luego la unidad de medida. Por defecto, cuando no se pone unidad de medida se toma como unidad de medida %.

"auto" - Es reemplazado por algún valor apropiado. Por ejemplo, puede usarse para centrar horizontalmente un elemento bloque. div { width:50%; margin:0 auto; } centrará el div horizontalmente.

Prefijos

"m-"      - Para todos los márgenes
"mx-"     - Para los márgenes izquierdo y derecho
"my-"     - Para los márgenes superior e inferior
"ml-"     - Para el margen izquierdo
"mr-"     - Para el margen derecho
"mt-"     - Para el margen superior
"mb-"     - Para el margen inferior
"ml-auto" - Para el margen izquierdo automático
"mr-auto" - Para el margen derecho automático
"mt-auto" - Para el margen superior automático
"mb-auto" - Para el margen inferior automático

"p-"      - Para todos los rellenos
"px-"     - Para los rellenos izquierdo y derecho
"py-"     - Para los rellenos superior e inferior
"pl-"     - Para el relleno izquierdo
"pr-"     - Para el relleno derecho
"pt-"     - Para el relleno superior
"pb-"     - Para el relleno inferior
"pl-auto" - Para el relleno izquierdo automático
"pr-auto" - Para el relleno derecho automático
"pt-auto" - Para el relleno superior automático
"pb-auto" - Para el relleno inferior automático

"b-"   - Para todos los bordes
"bx-"  - Para los bordes izquierdo y derecho
"by-"  - Para los bordes superior e inferior
"bl-"  - Para el borde izquierdo
"br-"  - Para el borde derecho
"bt-"  - Para el borde superior
"bb-"  - Para el borde inferior
"br-"  - Para la propiedad "border-radius"
"btl-" - Para el radio del borde superior izquierdo
"btr-" - Para el radio del borde superior derecho
"bbl-" - Para el radio del borde inferior izquierdo
"bbr-" - Para el radio del borde inferior derecho
"bt-"  - Para el radio del borde superior izquierdo y derecho
"bb-"  - Para el radio del borde inferior izquierdo y derecho
"bl-"  - Para el radio del borde izquierdo superior e inferior
"br-"  - Para el radio del borde derecho superior e inferior
"bn"   - Para no mostrar bordes

Atención con los últimos prefijos para el radio de los bordes no lleva - antes del número, ejemplo:

<!-- Caja con borde superior izquierdo y derecho de 8 píxeles --->
<div class="bt-8px"></div>

Display

Administre la propiedad display con los siguientes valores

.d-block
.d-xs-block
.d-sm-block
.d-md-block
.d-lg-block
.d-xl-block
.d-xxl-block
.d-inline
.d-xs-inline
.d-sm-inline
.d-md-inline
.d-lg-inline
.d-xl-inline
.d-xxl-inline
.d-grid
.d-xs-grid
.d-sm-grid
.d-md-grid
.d-lg-grid
.d-xl-grid
.d-xxl-grid
.d-inline-block
.d-xs-inline-block
.d-sm-inline-block
.d-md-inline-block
.d-lg-inline-block
.d-xl-inline-block
.d-xxl-inline-block
.d-inline-grid
.d-xs-inline-grid
.d-sm-inline-grid
.d-md-inline-grid
.d-lg-inline-grid
.d-xl-inline-grid
.d-xxl-inline-grid

Flex

Administre rápidamente el diseño, la alineación y el tamaño de las columnas de la cuadrícula, la navegación, los componentes y más con un conjunto completo de utilidades flexibles de respuesta. Para implementaciones más complejas, puede ser necesario un CSS personalizado.

Display Flex

Aplique utilidades de visualización para crear un contenedor de caja flexible y transformar elementos secundarios directos en elementos flexibles. Los contenedores y elementos flexibles se pueden modificar aún más con propiedades flexibles adicionales.

.d-flex
.d-inline-flex
.d-sm-flex
.d-sm-inline-flex
.d-md-flex
.d-md-inline-flex
.d-lg-flex
.d-lg-inline-flex
.d-xl-flex
.d-xl-inline-flex
.d-xxl-flex
.d-xxl-inline-flex

Flex Direction

Utilice "flex-row" para establecer una dirección horizontal (el valor predeterminado del navegador), o .flex-row-reverse para iniciar la dirección horizontal desde el lado opuesto.

.flex-row
.flex-row-reverse
.flex-column
.flex-column-reverse
.flex-sm-row
.flex-sm-row-reverse
.flex-sm-column
.flex-sm-column-reverse
.flex-md-row
.flex-md-row-reverse
.flex-md-column
.flex-md-column-reverse
.flex-lg-row
.flex-lg-row-reverse
.flex-lg-column
.flex-lg-column-reverse
.flex-xl-row
.flex-xl-row-reverse
.flex-xl-column
.flex-xl-column-reverse
.flex-xxl-row
.flex-xxl-row-reverse
.flex-xxl-column
.flex-xxl-column-reverse

Justify Content

Use las utilidades de justificación de contenido en los contenedores de flexbox para cambiar la alineación de los elementos flexibles en el eje principal (el eje x para comenzar, el eje y si es dirección flexible: columna). Elija entre inicio (predeterminado del navegador), final, centro, entre, alrededor o uniformemente.

.justify-content-start
.justify-content-end
.justify-content-center
.justify-content-between
.justify-content-around
.justify-content-evenly
.justify-content-sm-start
.justify-content-sm-end
.justify-content-sm-center
.justify-content-sm-between
.justify-content-sm-around
.justify-content-sm-evenly
.justify-content-md-start
.justify-content-md-end
.justify-content-md-center
.justify-content-md-between
.justify-content-md-around
.justify-content-md-evenly
.justify-content-lg-start
.justify-content-lg-end
.justify-content-lg-center
.justify-content-lg-between
.justify-content-lg-around
.justify-content-lg-evenly
.justify-content-xl-start
.justify-content-xl-end
.justify-content-xl-center
.justify-content-xl-between
.justify-content-xl-around
.justify-content-xl-evenly
.justify-content-xxl-start
.justify-content-xxl-end
.justify-content-xxl-center
.justify-content-xxl-between
.justify-content-xxl-around
.justify-content-xxl-evenly

Align Items

Use las utilidades de alineación de elementos en los contenedores de flexbox para cambiar la alineación de los elementos flexibles en el eje transversal (el eje y para comenzar, el eje x si es dirección flexible: columna). Elija entre inicio, final, centro, línea de base o extensión (predeterminado del navegador).

.align-items-start
.align-items-end
.align-items-center
.align-items-baseline
.align-items-stretch
.align-items-sm-start
.align-items-sm-end
.align-items-sm-center
.align-items-sm-baseline
.align-items-sm-stretch
.align-items-md-start
.align-items-md-end
.align-items-md-center
.align-items-md-baseline
.align-items-md-stretch
.align-items-lg-start
.align-items-lg-end
.align-items-lg-center
.align-items-lg-baseline
.align-items-lg-stretch
.align-items-xl-start
.align-items-xl-end
.align-items-xl-center
.align-items-xl-baseline
.align-items-xl-stretch
.align-items-xxl-start
.align-items-xxl-end
.align-items-xxl-center
.align-items-xxl-baseline
.align-items-xxl-stretch

Align Self

Use las utilidades de autoalineación en los elementos de Flexbox para cambiar individualmente su alineación en el eje transversal (el eje Y para comenzar, el eje X si es de dirección flexible: columna). Elija entre las mismas opciones que los elementos de alineación: inicio, fin, centro, línea de base o estiramiento (predeterminado del navegador).

.align-self-start
.align-self-end
.align-self-center
.align-self-baseline
.align-self-stretch
.align-self-sm-start
.align-self-sm-end
.align-self-sm-center
.align-self-sm-baseline
.align-self-sm-stretch
.align-self-md-start
.align-self-md-end
.align-self-md-center
.align-self-md-baseline
.align-self-md-stretch
.align-self-lg-start
.align-self-lg-end
.align-self-lg-center
.align-self-lg-baseline
.align-self-lg-stretch
.align-self-xl-start
.align-self-xl-end
.align-self-xl-center
.align-self-xl-baseline
.align-self-xl-stretch
.align-self-xxl-start
.align-self-xxl-end
.align-self-xxl-center
.align-self-xxl-baseline
.align-self-xxl-stretch

Flex Fill

Use la clase "flex-fill" en una serie de elementos hermanos para obligarlos a tener anchos iguales a su contenido (o anchos iguales si su contenido no supera sus cuadros de borde) mientras ocupa todo el espacio horizontal disponible.

.flex-fill
.flex-sm-fill
.flex-md-fill
.flex-lg-fill
.flex-xl-fill
.flex-xxl-fill

Flex Grow | Shrink

Grow

Use las utilidades .flex-grow-* para alternar la capacidad de crecimiento de un elemento flexible para llenar el espacio disponible. En el siguiente ejemplo, los elementos "flex-grow-1" usan todo el espacio disponible que pueden, mientras permiten que los dos elementos flexibles restantes tengan el espacio necesario.

Shrink

Use las utilidades .flex-shrink-* para alternar la capacidad de encoger un elemento flexible si es necesario. En el siguiente ejemplo, el segundo elemento flexible con "flex-shrink-1" se ve obligado a envolver su contenido en una nueva línea, "reduciéndose" para dejar más espacio para el elemento flexible anterior con "w-100".

.flex-{grow|shrink}-0
.flex-{grow|shrink}-1
.flex-sm-{grow|shrink}-0
.flex-sm-{grow|shrink}-1
.flex-md-{grow|shrink}-0
.flex-md-{grow|shrink}-1
.flex-lg-{grow|shrink}-0
.flex-lg-{grow|shrink}-1
.flex-xl-{grow|shrink}-0
.flex-xl-{grow|shrink}-1
.flex-xxl-{grow|shrink}-0
.flex-xxl-{grow|shrink}-1

Flex Wrap

Cambie la forma en que los elementos flexibles se envuelven en un contenedor flexible. Elija entre ningún ajuste (el valor predeterminado del navegador) con "flex-nowrap", ajuste con "flex-wrap" o ajuste inverso con "flex-wrap-reverse".

.flex-nowrap
.flex-wrap
.flex-wrap-reverse
.flex-sm-nowrap
.flex-sm-wrap
.flex-sm-wrap-reverse
.flex-md-nowrap
.flex-md-wrap
.flex-md-wrap-reverse
.flex-lg-nowrap
.flex-lg-wrap
.flex-lg-wrap-reverse
.flex-xl-nowrap
.flex-xl-wrap
.flex-xl-wrap-reverse
.flex-xxl-nowrap
.flex-xxl-wrap
.flex-xxl-wrap-reverse

Flex Order

Cambie el orden visual de elementos flexibles específicos con un puñado de utilidades de pedido. Solo proporcionamos opciones para hacer que un artículo sea el primero o el último, así como un reinicio para usar el orden DOM. Como order toma cualquier valor entero de 0 a 5, agregue CSS personalizado para cualquier valor adicional necesario.

.order-0
.order-1
.order-2
.order-3
.order-4
.order-5
.order-sm-0
.order-sm-1
.order-sm-2
.order-sm-3
.order-sm-4
.order-sm-5
.order-md-0
.order-md-1
.order-md-2
.order-md-3
.order-md-4
.order-md-5
.order-lg-0
.order-lg-1
.order-lg-2
.order-lg-3
.order-lg-4
.order-lg-5
.order-xl-0
.order-xl-1
.order-xl-2
.order-xl-3
.order-xl-4
.order-xl-5
.order-xxl-0
.order-xxl-1
.order-xxl-2
.order-xxl-3
.order-xxl-4
.order-xxl-5

Además, también hay clases receptivas "order-first" y "order-last" que cambian el orden de un elemento aplicando orden: -1 y orden: 6, respectivamente.

.order-first
.order-last
.order-sm-first
.order-sm-last
.order-md-first
.order-md-last
.order-lg-first
.order-lg-last
.order-xl-first
.order-xl-last
.order-xxl-first
.order-xxl-last

Align Content

Use las utilidades de alineación de contenido en los contenedores de flexbox para alinear los elementos flexibles en el eje transversal. Elija entre inicio (predeterminado del navegador), final, centro, entre, alrededor o estirar. Para demostrar estas utilidades, aplicamos flex-wrap: wrap y aumentamos la cantidad de elementos flexibles.

.align-content-start
.align-content-end
.align-content-center
.align-content-around
.align-content-stretch
.align-content-sm-start
.align-content-sm-end
.align-content-sm-center
.align-content-sm-around
.align-content-sm-stretch
.align-content-md-start
.align-content-md-end
.align-content-md-center
.align-content-md-around
.align-content-md-stretch
.align-content-lg-start
.align-content-lg-end
.align-content-lg-center
.align-content-lg-around
.align-content-lg-stretch
.align-content-xl-start
.align-content-xl-end
.align-content-xl-center
.align-content-xl-around
.align-content-xl-stretch
.align-content-xxl-start
.align-content-xxl-end
.align-content-xxl-center
.align-content-xxl-around
.align-content-xxl-stretch

Gap

La propiedad gap CSS establece los espacios (canalones) entre filas y columnas. Es una forma abreviada de espacio entre filas y espacio entre columnas. Se puede utilizar con el prefijo "gap-" seguido del valor correspondientes.

<!--- Esta propiedad establece un espaciado de 8% --->
<div class="d-flex gap-8"></div>

Nota: Funciona de la misma forma de los valores anteriores, si no específica una unidad de medida por defecto tomara %

<!--- Esta propiedad establece un espaciado de 8 píxeles para las filas y 4 píxeles para las columnas --->
<div class="d-flex gap-8px-4px"></div>