← Back to menu
Dark and Responsive
Atention: This section is temporarily only available in Spanish!
Responsive múltiple
Todas las clases que no están relacionadas o usen colores tienen modificadores responsive, lo que significa que puedes definir los modificadores que
quieres que se apliquen para cada elemento.
Por ejemplo, observa como cambia el número de columnas de este layout al cambiar de tamaño la pantalla:
De manera predeterminada debería tener 3 columnas
En tablet debería tener 2 columnas
En desktop debería tener 4 columnas
En full-desktop debería tener 1 columna
Tamaños de pantalla
Cómo usar las clases responsive
Todo lo relacionado con estas clases se puede modificar desde el archivo variables.scss:
- Posición: La variable $media-separator se usa para establecer el separador usado en las clases.
- Separador: La variable $media-position establece si la clase responsive usa un formato izquierdo o derecho.
- Tamaño: La variable $media-sizes establece los tamaños y los palabras para definir a cada uno de ellos.
Estas clases se pueden usar para cualquier propiedad, y se pueden usar varias a la vez. Veamos como las usamos en este ejemplo:
Nimbus CSS
Clases usadas: c-dev-box g--text-decoration-underline g--text-decoration-line-through@tablet g--text-decoration-overline@desktop g--text-decoration-underline-overline@full-desktop
Modo oscuro
El dark mode funciona de la misma forma que las clases responsive. Simplemente añade la clase de dark mode a la clase global que quieras que use colores y observa los cambios.
Todo lo relacionado con estas clases se puede modificar desde el archivo variables.scss:
- Posición: La variable $dark-mode-separator se usa para establecer el separador usado en las clases.
- Separador: La variable $dark-mode-position establece si la clase dark mode usa un formato izquierdo o derecho.
- Keyword: La variable $dark-mode-keyword establece la palabra usada para el modo oscuro.
Cambia el tema del navegador a modo oscuro y oserva los cambios: