holygrailcss, la nueva evolución del Design System de Black&Yellow.
holygrailcss
Colores
Paleta de colores disponibles con sus variables CSS.
Colores primarios
Blancos, negros, grises y fondos neutros.
white
--hg-color-white
#ffffff
black
--hg-color-black
#0c0a08
dark-grey
--hg-color-dark-grey
#6e6a68
middle-grey
--hg-color-middle-grey
#d2cecb
light-grey
--hg-color-light-grey
#f4f2f0
grey-ultra
--hg-color-grey-ultra
#1a1919
orange
--hg-color-orange
#e96516
mustard
--hg-color-mustard
#FFE693
bg-light
--hg-color-bg-light
#fcfbfa
bg-cream
--hg-color-bg-cream
#f4f2ed
Colores semánticos
Colores por significado (marca, estados, feedback).
primary
--hg-color-primary
#0c0a08
error
--hg-color-error
#dd2d01
info
--hg-color-info
#5683d2
success
--hg-color-success
#12882C
warning
--hg-color-warning
#ffce4e
feel
--hg-color-feel
#fb9962
feel-dark
--hg-color-feel-dark
#c94c07
silver
--hg-color-silver
#87888D
gold
--hg-color-gold
#A38A6B
platinum
--hg-color-platinum
#5B7FA1
solar
--hg-color-solar
#e4f222
solar-light
--hg-color-solar-light
#f5ff78
smolder
--hg-color-smolder
#17332d
blaze
--hg-color-blaze
#e96516
spring
--hg-color-spring
#5683d2
spring-light
--hg-color-spring-light
#e4ebf6
Typography
Font families disponibles para la tipografía.
Aa
FAMILY
Neutrif
WEIGHT
Light, Regular, Medium, Semibold
a
b
c
d
e
f
g
h
i
j
k
l
m
n
o
p
q
r
s
t
u
v
w
x
y
z
A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
P
Q
R
S
T
U
V
W
X
Y
Z
0
1
2
3
4
5
6
7
8
9
!
"
#
$
%
&
'
(
)
*
+
.
-
,
/
=
| Nombre | Preview | Valor | Variable CSS |
|---|---|---|---|
| primary-light | Aa | "neutrif-light", Arial, Helvetica, sans-serif | --hg-typo-font-family-primary-light |
| primary-regular | Aa | "neutrif-regular", Arial, Helvetica, sans-serif | --hg-typo-font-family-primary-regular |
| primary-bold | Aa | "neutrif-semibold", Arial, Helvetica, sans-serif | --hg-typo-font-family-primary-bold |
| secondary | Aa | "neutrif-medium", Arial, Helvetica, sans-serif | --hg-typo-font-family-secondary |
Tipografía
Cada fila usa la clase real generada en dist/output.css a partir de config.json → typo.
La columna Preview aplica la clase tal cual, así puedes comparar el valor numérico con el render en vivo.
| Preview | Clase | Font family | Weight | Mobile | Desktop | Line height | Letter spacing | Text transform |
|---|---|---|---|---|---|---|---|---|
| Aa Bb Cc 123 | .headline-xs |
primary-bold |
600 | 20px | 24px | 24px | 0 | — |
| Aa Bb Cc 123 | .headline-s |
primary-bold |
600 | 22px | 28px | 26px | 0 | — |
| Aa Bb Cc 123 | .headline-m |
primary-bold |
600 | 28px | 40px | 32px | -0.005em | — |
| Aa Bb Cc 123 | .headline-l |
primary-bold |
600 | 34px | 48px | 38px | -0.01em | — |
| Aa Bb Cc 123 | .headline-xl |
primary-bold |
700 | 40px | 64px | 42px | -0.01em | — |
| Aa Bb Cc 123 | .body-xs |
primary-regular |
400 | 12px | 13px | 18px | 0 | — |
| Aa Bb Cc 123 | .body-s |
primary-regular |
400 | 14px | 14px | 20px | 0 | — |
| Aa Bb Cc 123 | .body-m |
primary-regular |
400 | 15px | 16px | 21px | 0 | — |
| Aa Bb Cc 123 | .body-l |
primary-regular |
400 | 17px | 18px | 23px | 0 | — |
| Aa Bb Cc 123 | .body-xl |
primary-regular |
400 | 18px | 20px | 22px | 0 | — |
Spacing
Clases helper para padding y margin basadas en el spacingMap. Usa las variables CSS definidas en :root.
Variables CSS
Variables compartidas usadas por el spacing y el sistema.
Font family (3)
--hg-typo-font-family-primary-regular
"neutrif-regular", Arial, Helvetica, sans-serif
--hg-typo-font-family-primary-bold
"neutrif-semibold", Arial, Helvetica, sans-serif
--hg-typo-font-family-primary-light
"neutrif-light", Arial, Helvetica, sans-serif
Font weight (5)
--hg-typo-font-weight-100
100
--hg-typo-font-weight-300
300
--hg-typo-font-weight-400
400
--hg-typo-font-weight-600
600
--hg-typo-font-weight-700
700
Line height (18)
--hg-typo-line-height-1
1
--hg-typo-line-height-1-2
1.2
--hg-typo-line-height-1-4
1.4
--hg-typo-line-height-1-5
1.5
--hg-typo-line-height-24px
24px
--hg-typo-line-height-28px
28px
--hg-typo-line-height-26px
26px
--hg-typo-line-height-32px
32px
--hg-typo-line-height-42px
42px
--hg-typo-line-height-38px
38px
--hg-typo-line-height-50px
50px
--hg-typo-line-height-64px
64px
--hg-typo-line-height-18px
18px
--hg-typo-line-height-19px
19px
--hg-typo-line-height-20px
20px
--hg-typo-line-height-21px
21px
--hg-typo-line-height-22px
22px
--hg-typo-line-height-23px
23px
Letter spacing (7)
--hg-typo-letter-spacing-0
0
--hg-typo-letter-spacing-0
0rem
--hg-typo-letter-spacing-0-16em
0.16em
--hg-typo-letter-spacing-0-04em
0.04em
--hg-typo-letter-spacing-0-06em
0.06em
--hg-typo-letter-spacing--0-005em
-0.005em
--hg-typo-letter-spacing--0-01em
-0.01em
Text transform (2)
--hg-typo-text-transform-none
none
--hg-typo-text-transform-uppercase
uppercase
Font size (17)
--hg-typo-font-size-24
1.5rem
24px
--hg-typo-font-size-18
1.125rem
18px
--hg-typo-font-size-12
0.75rem
12px
--hg-typo-font-size-13
0.8125rem
13px
--hg-typo-font-size-10
0.625rem
10px
--hg-typo-font-size-9
0.5625rem
9px
--hg-typo-font-size-20
1.25rem
20px
--hg-typo-font-size-22
1.375rem
22px
--hg-typo-font-size-28
1.75rem
28px
--hg-typo-font-size-40
2.5rem
40px
--hg-typo-font-size-34
2.125rem
34px
--hg-typo-font-size-48
3rem
48px
--hg-typo-font-size-64
4rem
64px
--hg-typo-font-size-14
0.875rem
14px
--hg-typo-font-size-15
0.9375rem
15px
--hg-typo-font-size-16
1rem
16px
--hg-typo-font-size-17
1.0625rem
17px
Spacing (34)
--hg-spacing-0
0
--hg-spacing-4
0.25rem
4px
--hg-spacing-8
0.5rem
8px
--hg-spacing-12
0.75rem
12px
--hg-spacing-16
1rem
16px
--hg-spacing-20
1.25rem
20px
--hg-spacing-24
1.5rem
24px
--hg-spacing-32
2rem
32px
--hg-spacing-36
2.25rem
36px
--hg-spacing-40
2.5rem
40px
--hg-spacing-48
3rem
48px
--hg-spacing-56
3.5rem
56px
--hg-spacing-64
4rem
64px
--hg-spacing-72
4.5rem
72px
--hg-spacing-80
5rem
80px
--hg-spacing-88
5.5rem
88px
--hg-spacing-96
6rem
96px
--hg-spacing-104
6.5rem
104px
--hg-spacing-112
7rem
112px
--hg-spacing-120
7.5rem
120px
--hg-spacing-128
8rem
128px
--hg-spacing-136
8.5rem
136px
--hg-spacing-144
9rem
144px
--hg-spacing-152
9.5rem
152px
--hg-spacing-160
10rem
160px
--hg-spacing-20-percent
20%
--hg-spacing-25-percent
25%
--hg-spacing-33-percent
33.333333%
--hg-spacing-40-percent
40%
--hg-spacing-50-percent
50%
--hg-spacing-60-percent
60%
--hg-spacing-66-percent
66.666667%
--hg-spacing-75-percent
75%
--hg-spacing-100-percent
100%
Color (26)
--hg-color-white
#ffffff
--hg-color-black
#0c0a08
--hg-color-dark-grey
#6e6a68
--hg-color-middle-grey
#d2cecb
--hg-color-light-grey
#f4f2f0
--hg-color-grey-ultra
#1a1919
--hg-color-orange
#e96516
--hg-color-mustard
#FFE693
--hg-color-primary
#0c0a08
--hg-color-error
#dd2d01
--hg-color-info
#5683d2
--hg-color-success
#12882C
--hg-color-warning
#ffce4e
--hg-color-feel
#fb9962
--hg-color-feel-dark
#c94c07
--hg-color-silver
#87888D
--hg-color-gold
#A38A6B
--hg-color-platinum
#5B7FA1
--hg-color-bg-light
#fcfbfa
--hg-color-bg-cream
#f4f2ed
--hg-color-solar
#e4f222
--hg-color-solar-light
#f5ff78
--hg-color-smolder
#17332d
--hg-color-blaze
#e96516
--hg-color-spring
#5683d2
--hg-color-spring-light
#e4ebf6
¿Cómo se generan los helpers de espaciado?
Primera letra: Tipo de spacing → p (padding) o m (margin).
Segunda letra: Dirección → t (top), r (right/end), b (bottom), l (left/start). Si no hay segunda letra, se aplica a todos los lados.
Guion + valor: El valor del spacing → -4, -16, -50-percent
Ejemplos Legacy: p-16 (padding todos lados), pt-8 (padding-top), pr-4 (padding-right), mb-24 (margin-bottom), ml-12 (margin-left).
Clases Modernas (RTL-aware): A estas clases legacy se añaden versiones inline con prefijo hg-: .hg-px-{valor} (padding-inline/horizontal), .hg-py-{valor} (padding-block/vertical), .hg-mx-{valor} (margin-inline/horizontal), .hg-my-{valor} (margin-block/vertical).
Nota: Los helpers con prefijo md: funcionan como en Tailwind CSS y solo se aplican en el breakpoint desktop (≥992px). Puedes combinar clases base y con prefijo md: para crear diseños responsive. Las clases con ! aplican !important y tienen prioridad sobre otras reglas CSS.
Ejemplos de uso:
.p-4— Aplica padding de 4px en todos los tamaños de pantalla.md:p-4— Aplica padding de 4px solo en desktop (≥992px).md:pr-8— Aplica padding-right de 8px solo en desktop.md:mt-16— Aplica margin-top de 16px solo en desktop.p-0!— Aplica padding de 0 con !important (útil para sobrescribir otros estilos)
Valores para <variable>
| 0 | 4 | 8 | 12 | 16 | 20 | 24 | 32 | 36 | 40 | 48 | 56 | 64 | 72 | 80 | 88 | 96 | 104 | 112 | 120 | 128 | 136 | 144 | 152 | 160 | |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Valor | 0 | 4 | 8 | 12 | 16 | 20 | 24 | 32 | 36 | 40 | 48 | 56 | 64 | 72 | 80 | 88 | 96 | 104 | 112 | 120 | 128 | 136 | 144 | 152 | 160 |
| rem | 0 | 0.25rem | 0.5rem | 0.75rem | 1rem | 1.25rem | 1.5rem | 2rem | 2.25rem | 2.5rem | 3rem | 3.5rem | 4rem | 4.5rem | 5rem | 5.5rem | 6rem | 6.5rem | 7rem | 7.5rem | 8rem | 8.5rem | 9rem | 9.5rem | 10rem |
| px | 0 | 4px | 8px | 12px | 16px | 20px | 24px | 32px | 36px | 40px | 48px | 56px | 64px | 72px | 80px | 88px | 96px | 104px | 112px | 120px | 128px | 136px | 144px | 152px | 160px |
Variable CSS --hg-spacing-<valor>.
Valores para <n>-percent
| 20 | 25 | 33 | 40 | 50 | 60 | 66 | 75 | 100 | |
|---|---|---|---|---|---|---|---|---|---|
| % | 20% | 25% | 33.333333% | 40% | 50% | 60% | 66.666667% | 75% | 100% |
Variable CSS --hg-spacing-<n>-percent. Sustituye <n> por el número (20, 25, 33, etc.).
| Lados | Clase | Explicación | Valor (rem) | Valor (px) |
|---|---|---|---|---|
.p-<variable> |
Padding en los cuatro lados. | según valor | según valor | |
.pt-<variable> |
Padding en el lado superior. | según valor | según valor | |
.pr-<variable> |
Padding en el lado derecho. | según valor | según valor | |
.pb-<variable> |
Padding en el lado inferior. | según valor | según valor | |
.pl-<variable> |
Padding en el lado izquierdo. | según valor | según valor | |
.m-<variable> |
Margin en los cuatro lados. | según valor | según valor | |
.mt-<variable> |
Margin en el lado superior. | según valor | según valor | |
.mr-<variable> |
Margin en el lado derecho. | según valor | según valor | |
.mb-<variable> |
Margin en el lado inferior. | según valor | según valor | |
.ml-<variable> |
Margin en el lado izquierdo. | según valor | según valor | |
.p-<n>-percent |
Padding en los cuatro lados (porcentaje). | según valor | según valor | |
.pt-<n>-percent |
Padding superior en porcentaje. | según valor | según valor | |
.pr-<n>-percent |
Padding derecho en porcentaje. | según valor | según valor | |
.pb-<n>-percent |
Padding inferior en porcentaje. | según valor | según valor | |
.pl-<n>-percent |
Padding izquierdo en porcentaje. | según valor | según valor | |
.m-<n>-percent |
Margin en los cuatro lados (porcentaje). | según valor | según valor | |
.mt-<n>-percent |
Margin superior en porcentaje. | según valor | según valor | |
.mr-<n>-percent |
Margin derecho en porcentaje. | según valor | según valor | |
.mb-<n>-percent |
Margin inferior en porcentaje. | según valor | según valor | |
.ml-<n>-percent |
Margin izquierdo en porcentaje. | según valor | según valor | |
.mx-auto |
Centrado horizontal (margin-inline: auto). | auto | auto | |
| Valores para <n>-percent | 20, 25, 33, 40, 50, 60, 66, 75, 100. | |||
Clases modernas (Inline/Block · RTL-aware)
| Lados | Clase | Explicación | Ejemplo |
|---|---|---|---|
.hg-px-<valor> |
Padding horizontal (izquierda y derecha). Usa padding-inline. |
.hg-px-16 |
|
.hg-py-<valor> |
Padding vertical (arriba y abajo). Usa padding-block. |
.hg-py-8 |
|
.hg-mx-<valor> |
Margin horizontal (izquierda y derecha). Usa margin-inline. |
.hg-mx-24 |
|
.hg-my-<valor> |
Margin vertical (arriba y abajo). Usa margin-block. |
.hg-my-16 |
|
.hg-px-<n>-percent |
Padding horizontal en porcentaje del contenedor. | .hg-px-50-percent |
|
.hg-py-<n>-percent |
Padding vertical en porcentaje del contenedor. | .hg-py-25-percent |
|
.hg-mx-<n>-percent |
Margin horizontal en porcentaje. | .hg-mx-33-percent |
|
.hg-my-<n>-percent |
Margin vertical en porcentaje. | .hg-my-50-percent |
|
.hg-mx-auto |
Centra el bloque horizontalmente (margin-inline: auto). |
.hg-mx-auto |
|
| Valores para <valor> | 0, 4, 8, 12, 16, 20, 24, 32, 36, 40, 48, 56, 64, 72, 80, 88, 96, 104, 112, 120, 128, 136, 144, 152, 160. Ver tabla Legacy arriba para rem/px. | ||
| Valores para <n>-percent | 20, 25, 33, 40, 50, 60, 66, 75, 100. Ver tabla Legacy arriba para equivalencias. | ||
Layout
Clases helper para display, flexbox, alignment y gap. Todos los helpers marcados como responsive tienen variantes con prefijo .md: para desktop (≥992px).
| Clases Helper | Clases Helper (md:) | Propiedad CSS | Descripción |
|---|---|---|---|
| .hg-d-contents | .md:hg-d-contents | display: contents | Tipo de caja de renderizado |
| .hg-d-inline | .md:hg-d-inline | display: inline | Tipo de caja de renderizado |
| .hg-d-inline-block | .md:hg-d-inline-block | display: inline-block | Tipo de caja de renderizado |
| .hg-d-block | .md:hg-d-block | display: block | Tipo de caja de renderizado |
| .hg-d-flex | .md:hg-d-flex | display: flex | Tipo de caja de renderizado |
| .hg-d-inline-flex | .md:hg-d-inline-flex | display: inline-flex | Tipo de caja de renderizado |
| .hg-d-none | .md:hg-d-none | display: none | Tipo de caja de renderizado |
| .hg-flex-row | .md:hg-flex-row | flex-direction: row | Dirección del eje principal (horizontal o vertical) |
| .hg-flex-column | .md:hg-flex-column | flex-direction: column | Dirección del eje principal (horizontal o vertical) |
| .hg-flex-nowrap | .md:hg-flex-nowrap | flex-wrap: nowrap | Permite o no el ajuste en múltiples líneas |
| .hg-flex-wrap | .md:hg-flex-wrap | flex-wrap: wrap | Permite o no el ajuste en múltiples líneas |
| .hg-flex-wrap-reverse | .md:hg-flex-wrap-reverse | flex-wrap: wrap-reverse | Envolver en orden inverso |
| .hg-grow-0 | .md:hg-grow-0 | flex-grow: 0 | Capacidad de crecer para ocupar espacio disponible |
| .hg-grow-1 | .md:hg-grow-1 | flex-grow: 1 | Capacidad de crecer para ocupar espacio disponible |
| .hg-grow-2 | .md:hg-grow-2 | flex-grow: 2 | Capacidad de crecer para ocupar espacio disponible |
| .hg-grow-3 | .md:hg-grow-3 | flex-grow: 3 | Capacidad de crecer para ocupar espacio disponible |
| .hg-grow-auto | .md:hg-grow-auto | flex-grow: auto | Capacidad de crecer para ocupar espacio disponible |
| .hg-shrink-0 | .md:hg-shrink-0 | flex-shrink: 0 | Capacidad de encogerse cuando el espacio es limitado |
| .hg-shrink-1 | .md:hg-shrink-1 | flex-shrink: 1 | Capacidad de encogerse cuando el espacio es limitado |
| .hg-shrink-2 | .md:hg-shrink-2 | flex-shrink: 2 | Capacidad de encogerse cuando el espacio es limitado |
| .hg-shrink-3 | .md:hg-shrink-3 | flex-shrink: 3 | Capacidad de encogerse cuando el espacio es limitado |
| .hg-shrink-auto | .md:hg-shrink-auto | flex-shrink: auto | Capacidad de encogerse cuando el espacio es limitado |
| .hg-flex-1 | .md:hg-flex-1 | flex: 1 1 0% | Shortcuts comunes de flex |
| .hg-flex-auto | .md:hg-flex-auto | flex: 1 1 auto | Shortcuts comunes de flex |
| .hg-flex-initial | .md:hg-flex-initial | flex: 0 1 auto | Shortcuts comunes de flex |
| .hg-flex-none | .md:hg-flex-none | flex: none | Shortcuts comunes de flex |
| .hg-basis-0 | .md:hg-basis-0 | flex-basis: 0 | Tamaño base del elemento flexible |
| .hg-basis-auto | .md:hg-basis-auto | flex-basis: auto | Tamaño base del elemento flexible |
| .hg-basis-full | .md:hg-basis-full | flex-basis: 100% | Tamaño base del elemento flexible |
| .hg-order-0 | .md:hg-order-0 | order: 0 | Orden de visualización independiente del HTML |
| .hg-order-1 | .md:hg-order-1 | order: 1 | Orden de visualización independiente del HTML |
| .hg-order-2 | .md:hg-order-2 | order: 2 | Orden de visualización independiente del HTML |
| .hg-order-3 | .md:hg-order-3 | order: 3 | Orden de visualización independiente del HTML |
| .hg-order-3-neg | .md:hg-order-3-neg | order: -3 | Orden de visualización independiente del HTML |
| .hg-order-2-neg | .md:hg-order-2-neg | order: -2 | Orden de visualización independiente del HTML |
| .hg-order-1-neg | .md:hg-order-1-neg | order: -1 | Orden de visualización independiente del HTML |
| .hg-order-first | .md:hg-order-first | order: -9999 | Orden de visualización independiente del HTML |
| .hg-order-last | .md:hg-order-last | order: 9999 | Orden de visualización independiente del HTML |
| .hg-justify-stretch | .md:hg-justify-stretch | justify-content: stretch | Alineación en el eje principal |
| .hg-justify-start | .md:hg-justify-start | justify-content: flex-start | Alineación en el eje principal |
| .hg-justify-end | .md:hg-justify-end | justify-content: flex-end | Alineación en el eje principal |
| .hg-justify-center | .md:hg-justify-center | justify-content: center | Alineación en el eje principal |
| .hg-justify-between | .md:hg-justify-between | justify-content: space-between | Alineación en el eje principal |
| .hg-justify-around | .md:hg-justify-around | justify-content: space-around | Alineación en el eje principal |
| .hg-justify-evenly | .md:hg-justify-evenly | justify-content: space-evenly | Alineación en el eje principal |
| .hg-justify-items-stretch | .md:hg-justify-items-stretch | justify-items: stretch | Alineación horizontal en grid |
| .hg-justify-items-start | .md:hg-justify-items-start | justify-items: start | Alineación horizontal en grid |
| .hg-justify-items-end | .md:hg-justify-items-end | justify-items: end | Alineación horizontal en grid |
| .hg-justify-items-center | .md:hg-justify-items-center | justify-items: center | Alineación horizontal en grid |
| .hg-content-stretch | .md:hg-content-stretch | align-content: stretch | Alineación de líneas en el eje cruzado |
| .hg-content-start | .md:hg-content-start | align-content: flex-start | Alineación de líneas en el eje cruzado |
| .hg-content-end | .md:hg-content-end | align-content: flex-end | Alineación de líneas en el eje cruzado |
| .hg-content-center | .md:hg-content-center | align-content: center | Alineación de líneas en el eje cruzado |
| .hg-content-between | .md:hg-content-between | align-content: space-between | Alineación de líneas en el eje cruzado |
| .hg-content-around | .md:hg-content-around | align-content: space-around | Alineación de líneas en el eje cruzado |
| .hg-content-evenly | .md:hg-content-evenly | align-content: space-evenly | Alineación de líneas en el eje cruzado |
| .hg-items-stretch | .md:hg-items-stretch | align-items: stretch | Alineación en el eje cruzado |
| .hg-items-start | .md:hg-items-start | align-items: flex-start | Alineación en el eje cruzado |
| .hg-items-end | .md:hg-items-end | align-items: flex-end | Alineación en el eje cruzado |
| .hg-items-center | .md:hg-items-center | align-items: center | Alineación en el eje cruzado |
| .hg-items-baseline | .md:hg-items-baseline | align-items: baseline | Alineación en el eje cruzado |
| .hg-gap-0 | .md:hg-gap-0 | gap: 0 | Espacio entre filas y columnas |
| .hg-gap-4 | .md:hg-gap-4 | gap: 0.25rem | Espacio entre filas y columnas |
| .hg-gap-8 | .md:hg-gap-8 | gap: 0.5rem | Espacio entre filas y columnas |
| .hg-gap-12 | .md:hg-gap-12 | gap: 0.75rem | Espacio entre filas y columnas |
| .hg-gap-16 | .md:hg-gap-16 | gap: 1rem | Espacio entre filas y columnas |
| .hg-gap-20 | .md:hg-gap-20 | gap: 1.25rem | Espacio entre filas y columnas |
| .hg-gap-24 | .md:hg-gap-24 | gap: 1.5rem | Espacio entre filas y columnas |
| .hg-gap-32 | .md:hg-gap-32 | gap: 2rem | Espacio entre filas y columnas |
| .hg-gap-36 | .md:hg-gap-36 | gap: 2.25rem | Espacio entre filas y columnas |
| .hg-gap-40 | .md:hg-gap-40 | gap: 2.5rem | Espacio entre filas y columnas |
| .hg-gap-48 | .md:hg-gap-48 | gap: 3rem | Espacio entre filas y columnas |
| .hg-gap-56 | .md:hg-gap-56 | gap: 3.5rem | Espacio entre filas y columnas |
| .hg-gap-64 | .md:hg-gap-64 | gap: 4rem | Espacio entre filas y columnas |
| .hg-gap-72 | .md:hg-gap-72 | gap: 4.5rem | Espacio entre filas y columnas |
| .hg-gap-80 | .md:hg-gap-80 | gap: 5rem | Espacio entre filas y columnas |
| .hg-gap-88 | .md:hg-gap-88 | gap: 5.5rem | Espacio entre filas y columnas |
| .hg-gap-96 | .md:hg-gap-96 | gap: 6rem | Espacio entre filas y columnas |
| .hg-gap-104 | .md:hg-gap-104 | gap: 6.5rem | Espacio entre filas y columnas |
| .hg-gap-112 | .md:hg-gap-112 | gap: 7rem | Espacio entre filas y columnas |
| .hg-gap-120 | .md:hg-gap-120 | gap: 7.5rem | Espacio entre filas y columnas |
| .hg-gap-128 | .md:hg-gap-128 | gap: 8rem | Espacio entre filas y columnas |
| .hg-gap-136 | .md:hg-gap-136 | gap: 8.5rem | Espacio entre filas y columnas |
| .hg-gap-144 | .md:hg-gap-144 | gap: 9rem | Espacio entre filas y columnas |
| .hg-gap-152 | .md:hg-gap-152 | gap: 9.5rem | Espacio entre filas y columnas |
| .hg-gap-160 | .md:hg-gap-160 | gap: 10rem | Espacio entre filas y columnas |
| .hg-gap-20-percent | .md:hg-gap-20-percent | gap: 20% | Espacio entre filas y columnas |
| .hg-gap-25-percent | .md:hg-gap-25-percent | gap: 25% | Espacio entre filas y columnas |
| .hg-gap-33-percent | .md:hg-gap-33-percent | gap: 33.333333% | Espacio entre filas y columnas |
| .hg-gap-40-percent | .md:hg-gap-40-percent | gap: 40% | Espacio entre filas y columnas |
| .hg-gap-50-percent | .md:hg-gap-50-percent | gap: 50% | Espacio entre filas y columnas |
| .hg-gap-60-percent | .md:hg-gap-60-percent | gap: 60% | Espacio entre filas y columnas |
| .hg-gap-66-percent | .md:hg-gap-66-percent | gap: 66.666667% | Espacio entre filas y columnas |
| .hg-gap-75-percent | .md:hg-gap-75-percent | gap: 75% | Espacio entre filas y columnas |
| .hg-gap-100-percent | .md:hg-gap-100-percent | gap: 100% | Espacio entre filas y columnas |
| .hg-gap-y-0 | .md:hg-gap-y-0 | row-gap: 0 | Espacio entre filas |
| .hg-gap-y-4 | .md:hg-gap-y-4 | row-gap: 0.25rem | Espacio entre filas |
| .hg-gap-y-8 | .md:hg-gap-y-8 | row-gap: 0.5rem | Espacio entre filas |
| .hg-gap-y-12 | .md:hg-gap-y-12 | row-gap: 0.75rem | Espacio entre filas |
| .hg-gap-y-16 | .md:hg-gap-y-16 | row-gap: 1rem | Espacio entre filas |
| .hg-gap-y-20 | .md:hg-gap-y-20 | row-gap: 1.25rem | Espacio entre filas |
| .hg-gap-y-24 | .md:hg-gap-y-24 | row-gap: 1.5rem | Espacio entre filas |
| .hg-gap-y-32 | .md:hg-gap-y-32 | row-gap: 2rem | Espacio entre filas |
| .hg-gap-y-36 | .md:hg-gap-y-36 | row-gap: 2.25rem | Espacio entre filas |
| .hg-gap-y-40 | .md:hg-gap-y-40 | row-gap: 2.5rem | Espacio entre filas |
| .hg-gap-y-48 | .md:hg-gap-y-48 | row-gap: 3rem | Espacio entre filas |
| .hg-gap-y-56 | .md:hg-gap-y-56 | row-gap: 3.5rem | Espacio entre filas |
| .hg-gap-y-64 | .md:hg-gap-y-64 | row-gap: 4rem | Espacio entre filas |
| .hg-gap-y-72 | .md:hg-gap-y-72 | row-gap: 4.5rem | Espacio entre filas |
| .hg-gap-y-80 | .md:hg-gap-y-80 | row-gap: 5rem | Espacio entre filas |
| .hg-gap-y-88 | .md:hg-gap-y-88 | row-gap: 5.5rem | Espacio entre filas |
| .hg-gap-y-96 | .md:hg-gap-y-96 | row-gap: 6rem | Espacio entre filas |
| .hg-gap-y-104 | .md:hg-gap-y-104 | row-gap: 6.5rem | Espacio entre filas |
| .hg-gap-y-112 | .md:hg-gap-y-112 | row-gap: 7rem | Espacio entre filas |
| .hg-gap-y-120 | .md:hg-gap-y-120 | row-gap: 7.5rem | Espacio entre filas |
| .hg-gap-y-128 | .md:hg-gap-y-128 | row-gap: 8rem | Espacio entre filas |
| .hg-gap-y-136 | .md:hg-gap-y-136 | row-gap: 8.5rem | Espacio entre filas |
| .hg-gap-y-144 | .md:hg-gap-y-144 | row-gap: 9rem | Espacio entre filas |
| .hg-gap-y-152 | .md:hg-gap-y-152 | row-gap: 9.5rem | Espacio entre filas |
| .hg-gap-y-160 | .md:hg-gap-y-160 | row-gap: 10rem | Espacio entre filas |
| .hg-gap-y-20-percent | .md:hg-gap-y-20-percent | row-gap: 20% | Espacio entre filas |
| .hg-gap-y-25-percent | .md:hg-gap-y-25-percent | row-gap: 25% | Espacio entre filas |
| .hg-gap-y-33-percent | .md:hg-gap-y-33-percent | row-gap: 33.333333% | Espacio entre filas |
| .hg-gap-y-40-percent | .md:hg-gap-y-40-percent | row-gap: 40% | Espacio entre filas |
| .hg-gap-y-50-percent | .md:hg-gap-y-50-percent | row-gap: 50% | Espacio entre filas |
| .hg-gap-y-60-percent | .md:hg-gap-y-60-percent | row-gap: 60% | Espacio entre filas |
| .hg-gap-y-66-percent | .md:hg-gap-y-66-percent | row-gap: 66.666667% | Espacio entre filas |
| .hg-gap-y-75-percent | .md:hg-gap-y-75-percent | row-gap: 75% | Espacio entre filas |
| .hg-gap-y-100-percent | .md:hg-gap-y-100-percent | row-gap: 100% | Espacio entre filas |
| .hg-gap-x-0 | .md:hg-gap-x-0 | column-gap: 0 | Espacio entre columnas |
| .hg-gap-x-4 | .md:hg-gap-x-4 | column-gap: 0.25rem | Espacio entre columnas |
| .hg-gap-x-8 | .md:hg-gap-x-8 | column-gap: 0.5rem | Espacio entre columnas |
| .hg-gap-x-12 | .md:hg-gap-x-12 | column-gap: 0.75rem | Espacio entre columnas |
| .hg-gap-x-16 | .md:hg-gap-x-16 | column-gap: 1rem | Espacio entre columnas |
| .hg-gap-x-20 | .md:hg-gap-x-20 | column-gap: 1.25rem | Espacio entre columnas |
| .hg-gap-x-24 | .md:hg-gap-x-24 | column-gap: 1.5rem | Espacio entre columnas |
| .hg-gap-x-32 | .md:hg-gap-x-32 | column-gap: 2rem | Espacio entre columnas |
| .hg-gap-x-36 | .md:hg-gap-x-36 | column-gap: 2.25rem | Espacio entre columnas |
| .hg-gap-x-40 | .md:hg-gap-x-40 | column-gap: 2.5rem | Espacio entre columnas |
| .hg-gap-x-48 | .md:hg-gap-x-48 | column-gap: 3rem | Espacio entre columnas |
| .hg-gap-x-56 | .md:hg-gap-x-56 | column-gap: 3.5rem | Espacio entre columnas |
| .hg-gap-x-64 | .md:hg-gap-x-64 | column-gap: 4rem | Espacio entre columnas |
| .hg-gap-x-72 | .md:hg-gap-x-72 | column-gap: 4.5rem | Espacio entre columnas |
| .hg-gap-x-80 | .md:hg-gap-x-80 | column-gap: 5rem | Espacio entre columnas |
| .hg-gap-x-88 | .md:hg-gap-x-88 | column-gap: 5.5rem | Espacio entre columnas |
| .hg-gap-x-96 | .md:hg-gap-x-96 | column-gap: 6rem | Espacio entre columnas |
| .hg-gap-x-104 | .md:hg-gap-x-104 | column-gap: 6.5rem | Espacio entre columnas |
| .hg-gap-x-112 | .md:hg-gap-x-112 | column-gap: 7rem | Espacio entre columnas |
| .hg-gap-x-120 | .md:hg-gap-x-120 | column-gap: 7.5rem | Espacio entre columnas |
| .hg-gap-x-128 | .md:hg-gap-x-128 | column-gap: 8rem | Espacio entre columnas |
| .hg-gap-x-136 | .md:hg-gap-x-136 | column-gap: 8.5rem | Espacio entre columnas |
| .hg-gap-x-144 | .md:hg-gap-x-144 | column-gap: 9rem | Espacio entre columnas |
| .hg-gap-x-152 | .md:hg-gap-x-152 | column-gap: 9.5rem | Espacio entre columnas |
| .hg-gap-x-160 | .md:hg-gap-x-160 | column-gap: 10rem | Espacio entre columnas |
| .hg-gap-x-20-percent | .md:hg-gap-x-20-percent | column-gap: 20% | Espacio entre columnas |
| .hg-gap-x-25-percent | .md:hg-gap-x-25-percent | column-gap: 25% | Espacio entre columnas |
| .hg-gap-x-33-percent | .md:hg-gap-x-33-percent | column-gap: 33.333333% | Espacio entre columnas |
| .hg-gap-x-40-percent | .md:hg-gap-x-40-percent | column-gap: 40% | Espacio entre columnas |
| .hg-gap-x-50-percent | .md:hg-gap-x-50-percent | column-gap: 50% | Espacio entre columnas |
| .hg-gap-x-60-percent | .md:hg-gap-x-60-percent | column-gap: 60% | Espacio entre columnas |
| .hg-gap-x-66-percent | .md:hg-gap-x-66-percent | column-gap: 66.666667% | Espacio entre columnas |
| .hg-gap-x-75-percent | .md:hg-gap-x-75-percent | column-gap: 75% | Espacio entre columnas |
| .hg-gap-x-100-percent | .md:hg-gap-x-100-percent | column-gap: 100% | Espacio entre columnas |
| .hg-w-auto | .md:hg-w-auto | width: auto | Ancho del elemento |
| .hg-w-100-percent | .md:hg-w-100-percent | width: 100% | Ancho del elemento |
| .hg-w-100vw | .md:hg-w-100vw | width: 100vw | Ancho del elemento |
| .hg-w-50-percent | .md:hg-w-50-percent | width: 50% | Ancho del elemento |
| .hg-w-75-percent | .md:hg-w-75-percent | width: 75% | Ancho del elemento |
| .hg-w-fit-content | .md:hg-w-fit-content | width: fit-content | Ancho del elemento |
| .hg-w-min-content | .md:hg-w-min-content | width: min-content | Ancho del elemento |
| .hg-w-max-content | .md:hg-w-max-content | width: max-content | Ancho del elemento |
| .hg-h-auto | .md:hg-h-auto | height: auto | Altura del elemento |
| .hg-h-100-percent | .md:hg-h-100-percent | height: 100% | Altura del elemento |
| .hg-h-100vh | .md:hg-h-100vh | height: 100vh | Altura del elemento |
| .hg-h-100svh | .md:hg-h-100svh | height: 100svh | Altura del elemento |
| .hg-h-100lvh | .md:hg-h-100lvh | height: 100lvh | Altura del elemento |
| .hg-h-100dvh | .md:hg-h-100dvh | height: 100dvh | Altura del elemento |
| .hg-h-50-percent | .md:hg-h-50-percent | height: 50% | Altura del elemento |
| .hg-h-75-percent | .md:hg-h-75-percent | height: 75% | Altura del elemento |
| .hg-h-fit-content | .md:hg-h-fit-content | height: fit-content | Altura del elemento |
| .hg-h-min-content | .md:hg-h-min-content | height: min-content | Altura del elemento |
| .hg-h-max-content | .md:hg-h-max-content | height: max-content | Altura del elemento |
| .hg-min-h-0 | .md:hg-min-h-0 | min-height: 0 | Altura mínima del elemento |
| .hg-min-h-100-percent | .md:hg-min-h-100-percent | min-height: 100% | Altura mínima del elemento |
| .hg-min-h-100vh | .md:hg-min-h-100vh | min-height: 100vh | Altura mínima del elemento |
| .hg-min-h-100svh | .md:hg-min-h-100svh | min-height: 100svh | Altura mínima del elemento |
| .hg-min-h-100lvh | .md:hg-min-h-100lvh | min-height: 100lvh | Altura mínima del elemento |
| .hg-min-h-100dvh | .md:hg-min-h-100dvh | min-height: 100dvh | Altura mínima del elemento |
| .hg-min-h-fit-content | .md:hg-min-h-fit-content | min-height: fit-content | Altura mínima del elemento |
| .hg-mx-auto | .md:hg-mx-auto | margin: 0 auto | Margin horizontal automático (centrado) |
| .hg-ml-auto | .md:hg-ml-auto | margin-left: auto | Margin izquierdo automático (alinear derecha) |
| .hg-mr-auto | .md:hg-mr-auto | margin-right: auto | Margin derecho automático (alinear izquierda) |
| .hg-text-left | .md:hg-text-left | text-align: left | Alineación del texto |
| .hg-text-center | .md:hg-text-center | text-align: center | Alineación del texto |
| .hg-text-right | .md:hg-text-right | text-align: right | Alineación del texto |
| .hg-text-justify | .md:hg-text-justify | text-align: justify | Alineación del texto |
| .hg-text-underline | - | text-decoration: underline | Decoración del texto (subrayado, etc.) |
| .hg-text-none | - | text-decoration: none | Decoración del texto (subrayado, etc.) |
| .hg-position-static | .md:hg-position-static | position: static | Tipo de posicionamiento |
| .hg-position-relative | .md:hg-position-relative | position: relative | Tipo de posicionamiento |
| .hg-position-absolute | .md:hg-position-absolute | position: absolute | Tipo de posicionamiento |
| .hg-position-fixed | .md:hg-position-fixed | position: fixed | Tipo de posicionamiento |
| .hg-position-sticky | .md:hg-position-sticky | position: sticky | Tipo de posicionamiento |
| .hg-z-0 | .md:hg-z-0 | z-index: 0 | Nivel de apilamiento |
| .hg-z-10 | .md:hg-z-10 | z-index: 10 | Nivel de apilamiento |
| .hg-z-20 | .md:hg-z-20 | z-index: 20 | Nivel de apilamiento |
| .hg-z-30 | .md:hg-z-30 | z-index: 30 | Nivel de apilamiento |
| .hg-z-40 | .md:hg-z-40 | z-index: 40 | Nivel de apilamiento |
| .hg-z-50 | .md:hg-z-50 | z-index: 50 | Nivel de apilamiento |
| .hg-z-auto | .md:hg-z-auto | z-index: auto | Nivel de apilamiento |
| .hg-overflow-auto | .md:hg-overflow-auto | overflow: auto | Control de desbordamiento |
| .hg-overflow-hidden | .md:hg-overflow-hidden | overflow: hidden | Control de desbordamiento |
| .hg-overflow-visible | .md:hg-overflow-visible | overflow: visible | Control de desbordamiento |
| .hg-overflow-scroll | .md:hg-overflow-scroll | overflow: scroll | Control de desbordamiento |
| .hg-overflow-x-auto | .md:hg-overflow-x-auto | overflow-x: auto | Control de desbordamiento horizontal |
| .hg-overflow-x-hidden | .md:hg-overflow-x-hidden | overflow-x: hidden | Control de desbordamiento horizontal |
| .hg-overflow-x-visible | .md:hg-overflow-x-visible | overflow-x: visible | Control de desbordamiento horizontal |
| .hg-overflow-x-scroll | .md:hg-overflow-x-scroll | overflow-x: scroll | Control de desbordamiento horizontal |
| .hg-overflow-y-auto | .md:hg-overflow-y-auto | overflow-y: auto | Control de desbordamiento vertical |
| .hg-overflow-y-hidden | .md:hg-overflow-y-hidden | overflow-y: hidden | Control de desbordamiento vertical |
| .hg-overflow-y-visible | .md:hg-overflow-y-visible | overflow-y: visible | Control de desbordamiento vertical |
| .hg-overflow-y-scroll | .md:hg-overflow-y-scroll | overflow-y: scroll | Control de desbordamiento vertical |
| .hg-visibility-visible | .md:hg-visibility-visible | visibility: visible | Visibilidad del elemento |
| .hg-visibility-hidden | .md:hg-visibility-hidden | visibility: hidden | Visibilidad del elemento |
| .hg-visibility-collapse | .md:hg-visibility-collapse | visibility: collapse | Visibilidad del elemento |
| .hg-opacity-0 | .md:hg-opacity-0 | opacity: 0 | Transparencia del elemento |
| .hg-opacity-25 | .md:hg-opacity-25 | opacity: 0.25 | Transparencia del elemento |
| .hg-opacity-50 | .md:hg-opacity-50 | opacity: 0.5 | Transparencia del elemento |
| .hg-opacity-70 | .md:hg-opacity-70 | opacity: 0.7 | Transparencia del elemento |
| .hg-opacity-75 | .md:hg-opacity-75 | opacity: 0.75 | Transparencia del elemento |
| .hg-opacity-100 | .md:hg-opacity-100 | opacity: 1 | Transparencia del elemento |
| .hg-cursor-auto | - | cursor: auto | Tipo de cursor |
| .hg-cursor-default | - | cursor: default | Tipo de cursor |
| .hg-cursor-pointer | - | cursor: pointer | Tipo de cursor |
| .hg-cursor-not-allowed | - | cursor: not-allowed | Tipo de cursor |
| .hg-cursor-wait | - | cursor: wait | Tipo de cursor |
| .hg-cursor-text | - | cursor: text | Tipo de cursor |
| .hg-cursor-move | - | cursor: move | Tipo de cursor |
| .hg-cursor-grab | - | cursor: grab | Tipo de cursor |
| .hg-cursor-grabbing | - | cursor: grabbing | Tipo de cursor |
| .hg-pointer-events-none | - | pointer-events: none | Control de eventos del puntero |
| .hg-pointer-events-auto | - | pointer-events: auto | Control de eventos del puntero |
| .hg-pointer-events-all | - | pointer-events: all | Control de eventos del puntero |
| .hg-object-contain | .md:hg-object-contain | object-fit: contain | Ajuste de objeto (imágenes) |
| .hg-object-cover | .md:hg-object-cover | object-fit: cover | Ajuste de objeto (imágenes) |
| .hg-object-fill | .md:hg-object-fill | object-fit: fill | Ajuste de objeto (imágenes) |
| .hg-object-none | .md:hg-object-none | object-fit: none | Ajuste de objeto (imágenes) |
| .hg-object-scale-down | .md:hg-object-scale-down | object-fit: scale-down | Ajuste de objeto (imágenes) |
Ejemplos de uso:
-
.d-flex- Display flex -
.flex-column- Flex direction column -
.justify-center- Justify content center -
.items-center- Align items center -
.gap-16- Gap de 16px (1rem) -
.md:flex-row- Flex direction row solo en desktop
Grid
Sistema de grid responsive estilo Bootstrap con 12 columnas (xs, sm, md, lg) y 24 columnas (xl).
El grid system utiliza flexbox y un sistema de 12 columnas para breakpoints xs, sm, md, lg, y 24 columnas para xl.
¿Cómo funciona el Grid?
- .row - Contenedor flex con márgenes negativos para compensar el gutter
- .col-xs-* - Columnas para pantallas desde [object Object] (12 columnas)
- .col-sm-* - Columnas para pantallas desde [object Object] (12 columnas)
- .col-md-* - Columnas para pantallas desde [object Object] (12 columnas)
- .col-lg-* - Columnas para pantallas desde [object Object] (12 columnas)
- .col-xl-* - Columnas para pantallas desde [object Object] (24 columnas)
- .bleed - Permite que las columnas vayan a sangre (full bleed), eliminando los márgenes laterales del gutter
- .bleed-0 - Elimina completamente el padding y márgenes, útil para contenido que debe ocupar todo el ancho sin espacios
- Gutter: 8px (padding horizontal en cada columna)
| Breakpoint | Min-width | Min-width (rem) | Columnas | Gutter (px) | Gutter (rem) | Margen lateral (px) | Margen lateral (rem) | Clases |
|---|---|---|---|---|---|---|---|---|
| xs | 1px | 0.0625rem | 12 | 8px | 0.5rem | 16px | 1rem | .col-xs-1 a .col-xs-12 |
| sm | 768px | 48rem | 12 | 8px | 0.5rem | 16px | 1rem | .col-sm-1 a .col-sm-12 |
| md | 992px | 62rem | 12 | 8px | 0.5rem | 16px | 1rem | .col-md-1 a .col-md-12 |
| lg | 1280px | 80rem | 12 | 8px | 0.5rem | 16px | 1rem | .col-lg-1 a .col-lg-12 |
| xl | 1440px | 90rem | 24 | 8px | 0.5rem | 16px | 1rem | .col-xl-1 a .col-xl-24 |
Columnas normales:
<div class="row">
<div class="col-xs-12 col-md-6 col-lg-4">
Columna 1
</div>
<div class="col-xs-12 col-md-6 col-lg-4">
Columna 2
</div>
<div class="col-xs-12 col-md-12 col-lg-4">
Columna 3
</div>
</div>Este ejemplo muestra 3 columnas que:
- En xs: Ocupan 12 columnas cada una (100% de ancho, apiladas)
- En md (≥[object Object]): Las dos primeras ocupan 6 columnas (50% cada una), la tercera 12 (100%)
- En lg (≥[object Object]): Cada una ocupa 4 columnas (33.33% cada una, 3 columnas por fila)
Columnas a sangre (Bleed)
Cuando necesitas que las columnas vayan a sangre (full bleed), eliminando los márgenes laterales del gutter, usa la clase .bleed:
<div class="row">
<div class="col-xs-12 bleed">
Contenido que va a sangre (sin márgenes laterales)
</div>
</div>
Para eliminar completamente el padding y márgenes, usa .bleed-0:
<div class="bleed-0">
<div class="row">
<div class="col-xs-12">
Contenido sin padding ni márgenes
</div>
</div>
</div>
Nota: .bleed aplica márgenes negativos iguales al gutter (8px) para que el contenido llegue hasta los bordes. .bleed-0 elimina todo el padding y márgenes, útil para imágenes o contenido que debe ocupar todo el ancho disponible.
Ratios
Clases para controlar el ratio de aspecto de los elementos. Útil para imágenes, videos y contenedores.
| Clase | Ratio | Descripción | Preview |
|---|---|---|---|
| .hg-aspect | 2:3 | Ratio por defecto (2:3) |
|
| .hg-aspect-1-1 | 1:1 | Ratio 1:1 (cuadrado) |
|
| .hg-aspect-4-3 | 4:3 | Ratio 4:3 (tradicional) |
|
| .hg-aspect-16-9 | 16:9 | Ratio 16:9 (widescreen) |
|
| .hg-aspect-2-1 | 2:1 | Ratio 2:1 (doble ancho) |
|
| .hg-aspect-2-3 | 2:3 | Ratio 2:3 (vertical) |
|
| .hg-aspect-3-4 | 3:4 | Ratio 3:4 (vertical) |
|
| .hg-aspect-3-1 | 3:1 | Ratio 3:1 (separador XL) |
|
| .hg-aspect-7-1 | 7:1 | Ratio 7:1 (separador LG) |
|
| .hg-aspect-12-1 | 12:1 | Ratio 12:1 (separador MD) |
|
| .hg-aspect-24-1 | 24:1 | Ratio 24:1 (separador SM) |
|
| .hg-aspect-9-20 | 9:20 | Ratio 9:20 (vertical móvil) |
|
| .hg-aspect-16-4 | 16:4 | Ratio 16:4 (banner) |
|
Ejemplo de uso básico:
<!-- Para imágenes y videos -->
<div class="hg-aspect-16-9">
<div class="hg-aspect-content">
<img class="hg-aspect-image" src="imagen.jpg" alt="Imagen" />
</div>
</div>
<!-- Para contenido personalizado -->
<div class="hg-aspect-16-9">
<div class="hg-aspect-content">
<!-- Tu contenido aquí -->
</div>
</div>
Usa .hg-aspect-content como contenedor principal (position: absolute; inset: 0).
Usa .hg-aspect-image para imágenes y videos (display: block, object-fit: cover).
Ratios comunes:
-
.hg-aspect- Ratio por defecto (2:3) -
.hg-aspect-1-1- Cuadrado perfecto (1:1) -
.hg-aspect-16-9- Widescreen estándar (16:9) -
.hg-aspect-4-3- Formato tradicional (4:3) -
.hg-aspect-9-20- Vertical móvil (9:20)
Nota: Los ratios usan la propiedad aspect-ratio nativa de CSS con fallback para navegadores antiguos.
Usa .hg-aspect-image para imágenes/videos con object-fit: cover o .hg-aspect-content para contenido personalizado con position: absolute; inset: 0;
Breakpoints
Las clases de tipografía se adaptan automáticamente a cada breakpoint. Resize la ventana del navegador para ver los cambios.
| Breakpoint | Min-width |
|---|---|
| Mobile | 1px (0.0625rem) |
| Desktop | 992px (62rem) |
Containers
Contenedores responsivos de los temas activos. Cada container define un max-width y padding adaptativo según breakpoint.
| Clase | Max-width | Responsive | Preview |
|---|---|---|---|
| .container | 800px (50rem) | sm: 768px (48rem) / md: 992px (62rem) / lg: 1280px (80rem) / xl: 1440px (90rem) | |
| .container-2 | 700px (43.75rem) | width: 90% | |
| .container-3 | 900px (56.25rem) | padding: 60px (3.75rem) → 20px (1.25rem) en sm+ | |
| .container-4 | 360px (22.5rem) | padding: 40px (2.5rem) | |
| .container-5 | 800px (50rem) | lg+: 1000px (62.5rem), padding: 0 | |
| .container-6 | 442px (27.625rem) | — | |
| .container-7 | 295px (18.44rem) → 595px (37.19rem) | sm: 460px (28.75rem) / md: 460px (28.75rem) / lg: 595px (37.19rem) | |
| .container-8 | 395px (24.69rem) | — | |
| .container-9 | 798px (49.88rem) | padding: 20px (1.25rem) | |
| .container-10 | 200px (12.5rem) | sin padding, sin margin auto | |
| .container-11 | 1080px (67.5rem) | padding: 20px (1.25rem) | |
| .container-12 | 1080px (67.5rem) | padding: 20px (1.25rem), sin margin auto | |
| .container-360 | 360px (22.5rem) | solo max-width | |
| .container-496 | 496px (31rem) | solo max-width | |
| .container-512 | 512px (32rem) | solo max-width | |
| .container-640 | 640px (40rem) | solo max-width |
Ejemplo de uso:
<div class="container">
<!-- Contenido centrado, max 800px, responsive -->
</div>
<div class="container-5">
<!-- 800px → 1000px en lg+, sin padding -->
</div>
<div class="container-11">
<!-- 1080px, padding adaptativo mobile/desktop -->
</div>
Los containers son parte del tema Black&Yellow. Requieren importar black-yellow.css además de output.css.
Tipos de container:
-
.container- Principal, responsive en todos los breakpoints -
.container-7- Progresivo: 295px → 460px → 595px -
.container-9, -11, -12- Padding mobile/desktop adaptativo -
.container-360, -496, -512, -640- Solo max-width, sin padding