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 | ● #98f098 | ● #98f098 |
secondary | ● #232529 | ● #cce0cc |
accent | ● #727fa1 | ● #313849 |
yellow | ● #f2c94c | ● #f2c94c |
blue | ● #2495ca | ● #2495ca |
red | ● #dc3243 | ● #dc3243 |
green | ● #45d25a | ● #45d25a |
Colores Especiales
Nombre | Color | Nota |
---|---|---|
outline | ○ #98f098 | Agrega un borde y texto con el color primario y un background transparente |
white | W #232529 | Si se usa la clase white por si sola agrega un color:#000 y un background:#fff |
black | B #727fa1 | Si se usa la clase black por si sola agrega un color:#fff y un background:#000 |
Clase None
None
Al usar la clase none, desaparecerá el bloque. Util para agregarla desde JS
<div class="none">Adios</div>
Resultado:
Adios
None en Móviles
Puedes usar la clase sm-none
para ocultar cosas en dispositivos pequeños.
<p class="sm-none">👻</p>
Resultado:
👻
Picture Image
Cactus CSS proporciona estilo básico para las imágenes.
Establece el estilo predeterminado para las imágenes, incluyendo:
max-width: 100%
: Asegura que la imagen no se estire más allá del ancho del contenedorheight: auto
: Permite que la altura de la imagen se ajuste automáticamente al ancho
<img src="https://images.pexels.com/photos/1022921/pexels-photo-1022921.jpeg" alt="Imagen de un cactus"/>
Resultado:
