Utilidades

Cactus CSS posee clases útiles, que son añadidos que pueden ir en conjunto con otras clases o que agregan una utilidad extra.

Colores

La siguiente tabla de colores aplica de forma conjunta para las clases br-color,txt-color y color. (Conoce como personalizarlos).

Nombre	Color en Modo Oscuro	Color
primary	● #00e67a	● #1aff94
secondary	● #D8FF3D	● #e7c88e
accent	● #0a78b8	● #47b5f5
yellow	● #f2c94c	● #f2c94c
blue	● #2495ca	● #2495ca
red	● #dc3243	● #dc3243
green	● #45d25a	● #45d25a
dark	● #2b2b2b	● #0e0e0e
light	● #f1f2e9	● #fefefe
contrast	● #2b2b2b	● #fefefe
background	● #212121	● radial-gradient(hsl(220, 40%, 94%), hsl(220, 14%, 94%))
gradient	● linear-gradient(120deg, var(—primary), var(—accent))	● linear-gradient(120deg, var(—primary), var(—accent))
transparent	transparent	transparent

Note

Todas las clases de colores son compatibles con txt-color, br-color y color (para los backgrounds). Donde color es el nombre de los colores disponibles en la tabla superior. Sin embargo, existen 3 colores especiales que no se pueden aplicar en todas las clases estos son:

• background : disponible unicamente en : color(.background).
• gradient: disponible unicamente en : color(.gradient) y txt-color (.txt-gradient).
• transparent : disponible unicamente en : color(.transparent)

Redondeo

Al usar la clase .radius. Aplica un borde redondeado usando la variable --radius :7rem .

<img
  src="https://images.pexels.com/photos/1903965/pexels-photo-1903965.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
  class="radius"
/>

Resultado:

---

---

Clases de Visibilidad

Caution

La clases tiene un especificidad de !important

Hidden

Al usar la clase hidden, desaparecerá el bloque. Util para agregarla desde JS

<div class="hidden">Adios</div>

Resultado:

---

Adios

---

br-none

Al usar la clase br-none, desaparecerá el borde. Ejemplo:

<button class="chip br-none">Abrir</button>

Resultado:

---

Abrir

---

None en Móviles

Puedes usar la clase sm-none para ocultar cosas en dispositivos pequeños.

<p class="sm-none">👻</p>

Resultado:

---

👻

---

Transparent

Puedes usar la clase transparent para tener un background transparente.

<button class="btn transparent br-blue txt-blue">Outline</button>

Resultado:

---

Outline

---

Espaciados

• .px: Aplica padding en todas las direcciones usando la variable --space.

• .pr: padding-right.

• .pl: padding-left.

• .pt: padding-top.

• .pb: padding-bottom.

• .mx: Aplica margin en todas las direcciones.

• .mr: margin-right.

• .ml: margin-left.

• .mt: margin-top.

• .mb: margin-bottom.

.gap-sm, .gap-nm, .gap-bg: Usadas dentro de un contenedor Flexbox o Grid para crear espaciado consistente entre elementos (gap).

<div class="container px pt">
  <p class="mb">Párrafo con espaciado interno y margen inferior</p>
</div>

Resultado:

---

Párrafo con espaciado interno y margen inferior

---

Alineaciones

• .left: Alinea elementos horizontalmente al inicio (justify-content: flex-start).

• .right: Alinea elementos horizontalmente al final (justify-content: flex-end).

• .center: Centra elementos horizontalmente (justify-content: center).

• .between: Distribuye elementos con espacio entre ellos (justify-content: space-between).

• .up: Alinea elementos verticalmente al inicio (align-items: flex-start).

• .middle: Centra elementos verticalmente (align-items: center).

• .down: Alinea elementos verticalmente al final (align-items: flex-end).

• .stretch: Estira los elementos verticalmente para que ocupen el alto del contenedor (align-items: stretch).

Control de Overflow

• .overflow-h: Oculta el contenido que se desborda horizontalmente (overflow: hidden).
• .overflow-h-x: Oculta el contenido desbordado en el eje x (overflow-x: hidden)
• .overflow-h-y: Oculta el contenido desbordado en el eje y (overflow-y: hidden)