Guachos-Layouts

Guachos 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 guachos-layouts --save

Con yarn

yarn add guachos-layouts

Luego necesitas agregar la dependencia en tu proyecto

styles.scss

...
@import "guachos-layouts/layouts";
...

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

"styles": [
  "./node_modules/guachos-layouts/layouts.scss"
]

Un ejemplo básico para mostrar elementos en columna y alinearlos usando la propiedad space-between

<div class="d-flex justify-content-between">
  <spa>Elemento Flex</spa>
  <spa>Elemento Flex</spa>
  <spa>Elemento Flex</spa>
</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>

Unidades de longitud absoluta

"mm" - Milímetros --> 1mm = 1/10 de 1cm
"cm" - Centímetros --> 1cm = 96px/2,54
"Q" - Cuartos de milímetros --> 1Q = 1/40 de 1cm
"in" - Pulgadas --> 1in = 2,54cm = 96px
"pc" - Picas --> 1pc = 1/6 de 1in
"pt" - Puntos --> 1pt = 1/72 de 1in
"px" - Píxeles --> 1px = 1/96 de 1in

Unidades de longitud relativa

em - Tamaño de letra del elemento padre, en el caso de propiedades tipográficas como font-size, y tamaño de la fuente del propio elemento en el caso de otras propiedades, como width.
ex - Altura x de la fuente del elemento.
ch - La medida de avance (ancho) del glifo "0" de la letra del elemento.
rem - Tamaño de la letra del elemento raíz.
lh - Altura de la línea del elemento.
vw - 1% del ancho de la ventana gráfica.
vh - 1% de la altura de la ventana gráfica.
vmin - 1% de la dimensión más pequeña de la ventana gráfica.
vmax - 1% de la dimensión más grande de la ventana gráfica.

Tamaño de la fuente

Se puede modificar el grosor de la fuente usando el prefijo "fs-" seguido de un número del 1 al 100 y opcional se puede especificar una unidad de medida.

<span class="fs-16">Tamaño de fuente de 16%</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-" seguido de 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-700">Fuente en negrita</span>

Width | Height

Se puede modificar la propiedad width usando el prefijo "w-" y la propiedad height usando el prefijo "h-" seguido de un número del 1 al 100 y opcional 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-auto
.cursor-default
.cursor-none
.cursor-context-menu
.cursor-help
.cursor-pointer
.cursor-pointer
.cursor-progress
.cursor-wait
.cursor-cell
.cursor-crosshair
.cursor-vertical-text
.cursor-alias
.cursor-copy
.cursor-move
.cursor-no-drop
.cursor-not-allowed
.cursor-grab
.cursor-grabbing
.cursor-all-scroll
.cursor-col-resize
.cursor-row-resize
.cursor-n-resize
.cursor-e-resize
.cursor-s-resize
.cursor-w-resize
.cursor-ne-resize
.cursor-nw-resize
.cursor-se-resize
.cursor-sw-resize
.cursor-ew-resize
.cursor-ns-resize
.cursor-nesw-resize
.cursor-nwse-resize
.cursor-zoom-in
.cursor-zoom-out

Color

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

<!-- Caja con color de fondo azul -->
<div class="bk-blue">
  <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:

aliceblue antiquewhite aqua aquamarine azure beige bisque black blanchedalmond blue blueviolet brown burlywood cadetblue chartreuse chocolate coral cornflowerblue cornsilk crimson cyan darkblue darkcyan darkgoldenrod darkgray darkgreen darkgrey darkkhaki darkmagenta darkolivegreen darkorange darkorchid darkred darksalmon darkseagreen darkslateblue darkslategray darkslategrey darkslateblue darkviolet deeppink deepskyblue dimgray dimgrey dodgerblue firebrick floralwhite forestgreen fuchsia gainsboro ghostwhite gold goldenrod gray green greenyellow grey honeydew hotpink indianred indigo ivory khaki lavender lavenderblush lawngreen lemonchiffon lightblue lightcoral lightcyan lightgoldenrodyellow lightgray lightgreen lightgrey lightpink lightsalmon lightseagreen lightskyblue lightslategray lightslategrey lightsteelblue lightyellow lime limegreen linen magenta maroon mediumaquamarine mediumblue mediumorchid mediumpurple mediumseagreen mediumslateblue mediumspringgreen mediumturquoise mediumvioletred midnightblue mintcream mistyrose moccasin navajowhite navy oldlace olive olivedrab orange orangered orchid palegoldenrod palegreen paleturquoise palevioletred papayawhip peachpuff peru pink plum powderblue purple red rosybrown royalblue saddlebrown salmon sandybrown seagreen seashell silver skyblue slateblue slategray slategrey snow springgreen steelblue tan teal thistle tomato turquoise violet wheat white whitesmoke yellow yellowgreen

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 y 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 pulgadas--->
  <span class="pl-16px br-4in"></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="bt8px"></div>

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
xxl - Dispositivos con resolución mayor de 1400 píxeles de pantalla

Para el trabajo responsive es necesario conocer los breakpoints definidos

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 un número del 1 al 100 o dos números separados por "-".

<!--- 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>