Cómo configurar el tema del sitio con las variables CSS

Las propiedades personalizadas de CSS, comúnmente conocidas como variables CSS, ahora son compatibles con todos los principales navegadores modernos. Esto significa que para los proyectos que no están cargados por tener que apoyar a los navegadores heredados como Internet Explorer, se pueden considerar variables CSS, para todos los efectos y fines, seguros para usar.

Muchos desarrolladores ya usan variables con preprocesadores como SASS o Menos como un medio para reducir la repetición del código. Las variables CSS nativas funcionan en gran parte de la misma manera, pero no requieren ningún paso de construcción adicional, en cascada como una propiedad de CSS regular, y lo más importante, está disponible en tiempo de ejecución. (Para evitar que su sitio funcione sin problemas, asegúrese de que haya elegido la derecha Alojamiento web Servicio.)

• ¿Qué es el SASS?

Estos beneficios dan a las variables CSS nativas por un borde sobre sus hermanos de preprocesadores, y abre la puerta para que los desarrolladores hagan muchas cosas interesantes con un código mucho menos. ¿Interesado en opciones de código cero para su sitio? Aquí está nuestra guía a la cima. Creador de sitios web .

En este tutorial, exploraremos cómo podemos usar las variables CSS para implementar el tema del sitio web en una aplicación web simulada llamada NotEapp. Esto implicará la escritura. CSS y Javascript Para permitir al usuario cambiar el esquema de color y alternar la cantidad de columnas que se muestran. Luego, aprovechará la API de almacenamiento web para asegurarse de que se guardan cambios para futuras sesiones.

Obtener los archivos tutoriales

Primeras cosas primero, descarga los archivos del proyecto desde Filesilo de diseño web (Número 264). Nota: Los usuarios por primera vez deberán registrarse para usar Filesilo.

01. Configurar el espacio de trabajo.

En el / sitio web-plantilla Directorio Encontrará la página web de Static NotEapp en la que implementaremos el tema del sitio web utilizando las variables CSS y la API de almacenamiento web. Abra el directorio en su editor de texto preferido.

02. Configure nuestras variables CSS.

En main.csss , encontrarás gran parte del CSS del proyecto. En la parte superior, crea un bloque dirigido al raíz pseudo-clase. Dentro de ellos define las variables como en el fragmento de abajo. Este bloque raíz contiene variables globales que disminuirán en cascada a través de nuestra hoja de estilo como cualquier propiedad CSS regular.

: raíz {
  --Primary: # 2F353E;
  --Seconario: # 2b9bca;
  --Teria: # F3583F;
  --Cuenciar: # E0E1E2;
  --Quinario: #FFFFFF;
} 

03. Reemplace los colores con las variables.

Vaya a través de la hoja de estilo, ya sea manualmente o use Buscar / reemplazar, y canje cualquier código hexagonal de color estático con su variable correspondiente desde el bloque raíz. Para hacer esto, usa el vást Funciona y pasa el nombre de la variable. Esto le dice al navegador que haga referencia al valor de esa variable. Por ejemplo:

 .c-encabezado {
  fondo de fondo: var (- primario);
  Color: var (- quinaria);
} 

04. Localizar en línea SVG para los iconos

Abierto index.html Y una de las primeras cosas que nota es un elemento SVG grande. Esto contiene las rutas para todos los iconos de la página, cada uno envuelto en un elemento de símbolo y se le da una identificación única. Estos símbolos se hacen referencia cuando sea necesario con el usar Elemento, lo que permite la reutilización de los iconos sin ninguna duplicación del código SVG.

05. Agregue las variables CSS a la SVG

Un beneficio de usar SVG en línea en lugar de un archivo .svg es que CSS puede acceder a su estructura interna. Esto significa que pueden nuestras variables CSS (verifique el soporte del navegador aquí ). En index.html , reemplace el bloque de estilo de SVG con el fragmento de abajo. Ahora, cada uno de los colores de SVG está vinculado a los valores de nuestras variables CSS.

 & lt; Style & GT;
  .primario {
  Rellenar: VAR (-Primary, # 2F353E);
  }
  .seconario {
  Rellenar: var (-secondario, # 2b9bca);
  }
& lt; / estilo & gt; 

06. Crea una variable de columnas

También podemos usar variables CSS para propiedades distintas del color. Crea una nueva variable en el bloque raíz, llámalo columnas y dale un valor de 3. Esto debería coincidir con el valor predeterminado de la Columnas Componente UI en la página. Cuando funcional, este componente alternará el número de columnas.

: raíz {
  --Primary: # 2F353E;
  --Seconario: # 2b9bca;
  --Teria: # F3583F;
  --Cuenciar: # E0E1E2;
  --Quinario: #FFFFFF;
  --Columnas: 3;
} 

07. Implementar un conmutador de columnas

Utilizando nuestra nueva variable de columnas y la calc () Función, ahora calcularemos la ampliaidad de cada componente de nota para crear el número correcto de columnas. Por ejemplo, si las columnas se establecen en 4, cada nota debe tener un ancho del 25%.

 .c-note {
  Ancho: Calc (100% / var (- columnas));
} 

08. Añadir clases JS y atributos de datos.

Al aplicar el comportamiento de JS a un elemento DOM, enganche a ella a través de una clase con un prefijo JS. Esto desacopla los aspectos funcionales de un elemento de los CSS. Vamos a agregar un JS-update-variable clase a todas las entradas de color y radio, así como un atributo de datos Referencia de la variable correspondiente para actualizar.

 & lt; Tipo de entrada = "Color" valor = "# 2F353E"
Clase = "JS-update-Variable U-Hidden-Visualmente"
Data-variable = "primario" & gt; 

09. Añadir JS para actualizar las variables CSS

Abierto main.js y agregue el fragmento de abajo. Esto se bucea a través de todos nuestros JS-update-variable Entradas y agrega lógica, por lo que en el cambio, la variable a la que se hace referencia en su atributo de variable de datos se actualiza con el valor de las entradas. ¡Las muestras de color y la palanca de columna ahora deberían estar funcionando!

 var vartrig = documento
.queryselectorall (". JS-update-variable");
para (var i = 0; i & lt; vartrig.length; i ++) {
VARTRIG [I]
.addeventlistener ("cambio", función () {
document.documentelement.style
.SsetProperty ("-" + este.dataset.Variable,
este valor);
});
} 

10. Adjunte una clase JS al botón Guardar

Tiene sentido guardar solo guardar el esquema de color del usuario cuando haga clic en el botón Guardar, ya que eso les permite experimentar con temas tanto como quisieran sin anular automáticamente la actual. Para empezar, agregue .js-save-colores hacia Salvar Botón para funcionar como nuestro gancho JS.

 & lt; Button Class = "C-Botón JS-Guardar-Colors"
Datos-Modal = "JS-MODAL" DATOS-MODAL
-Content = "JS-Colors-Modal-Content" & GT;
Guardar & lt; / Botón & GT; 

11. Crea matriz de colores.

De nuevo en main.js , declara una nueva variable llamada colores y asignarle una nueva matriz que contiene todas las variables de color que queremos guardar una vez que se haya hecho clic en el botón Guardar.

 VAR COLORES = [
  "primario",
  "secundario",
  "terciario",
  "cuaternario",
  "quinario"
]; 

12. Build Save Button Event Sidese

Debajo de la matriz de colores, cree un escuchador de eventos de clic para el JS-Save-Colors Clase que previamente agregamos al botón Guardar. En su interior crea una nueva variable llamada htmlstyles y asigne las propiedades computadas del elemento HTML raíz. Usaremos esto para acceder a nuestras variables CSS.

 Document.QuerySelector (". JS-Save-Colors")
.addeventlistener ("clic", función () {
var htmlstyles = ventana
.getcomputedstyle (documento
.Queryselector ("HTML")),
}), 

13. Registrar las variables de color CSS

A continuación, dentro del oyente de eventos, cree una nueva variable llamada coloursteave y asigne un objeto vacío. Siguiente, crea un POR bucle usando el colores matriz del paso 11. Dentro de él, agregaremos un registro completo de clave / valor de las variables mencionadas en el colores matriz a la coloursteave objeto.

 Array al objeto 'ColoursTosave'.
colourstrosave = nuevo objeto;
para (var i = 0; i & lt; colors.length; i ++) {
colourstalave [colores [i]] = htmlstyles
.getpropertyValue ("-" + colores [I]);
} 

14. Envía ColoursTosave a localStorage

Ahora tenemos todas las variables de color guardadas en coloursteave , lo enviaremos a un componente de la API de almacenamiento web llamada LocalStorage. Esto es esencialmente un objeto que persiste en las sesiones. Podemos almacenar otros objetos dentro de ella usando su Setitem () método. Vamos a enviarlo nuestro coloursteave objeto.

 localStorage.setItem ("Colores",
JSON.Stringify (ColoursTosave); 

15. Añadir una clase JS a columnas

Además de los colores, también queremos asegurarnos de que nuestro número de columnas elegido también persiste en las sesiones. El primer paso hacia esto sería agregar. JS-update-colums a todas las entradas de radio dentro del componente de las columnas.

 & lt; type = "radio" nombre = "columnas" clase
= "js-update-variable js-update-colums
U-Hidden-Visualmente "Valor =" 1 "
Data-variable = "columnas" & gt; 

16. Enviar columnas a localStorage

Para cada JS-update-colums Además, nos asignaremos a los oyentes de eventos para ver los cambios. En la detección, enviaremos el valor actual de la columnas variable a almacenamiento local , de nuevo usando su Setitem () método. A diferencia de los colores, no necesitamos rinificar este valor, ya que no es un objeto.

 var colinputs = documento
.queryselectorall (". JS-Update-Columns");
para (var i = 0; i & lt; colinputs; i ++) {
colinputs [i] .addeventlistener ("cambio",
Función () {var htmlstyles = ventana
.getcomputedstyle (documento
.Queryselector ("HTML"));
LocalStorage.setItem ("Columnas",
htmlstyles.getpropertyValue ("- Columnas"));
});} 

17. Manejar nuevas sesiones.

Si el usuario regresa después de elegir previamente una preferencia de color y columna, necesitamos crear lógica para que estos datos guardados se vuelvan de nuevo en las variables CSS. El primer paso es definir un Domcontentloaded Ayector de eventos, y luego un si Declaración para verificar si hay datos guardados en LocalStorage usando su obtiene el objeto() método.

 Documento.AddeventListener
("Domcontentloaded", función () {
if (localstorage.getitem ("colores")) {
}
if (localstorage.getitem ("columnas")) {
}
}); 

18. Enmendar las variables de color.

En los colores si declaración, crea una nueva variable llamada SavedColours y asigne el valor de un objeto de colores analizados de almacenamiento local . Usando un En bucle con SavedColours , agarre cada par de teclas de color / valor y agréguelo al elemento HTML raíz como una variable CSS.

 Var SavedColours = JSON.Parse
(localstorage.getitem ("colores"));
para (color en salvavidas) {
document.documentelement.style.setProperty
("-" + color, SavedColours [Color]); } 

19. Recopilar datos de variables de columna

Antes de que podamos enmendar la variable de las columnas, primero debemos tomar referencias a los datos guardados en almacenamiento local y también las entradas de radio dentro de la Columnas componente. Este último es para que podamos actualizar su estado para asegurarse de que el número correcto esté preseleccionado.

 VAR Columnas = LocalStorage
.getitem ("columnas"),
Constractores = documento.
queryselectorall (". JS-Update-Columns"); 

20. Modificar la variable y el estado.

Finalmente, actualizaremos la variable CSS de columnas con su guardado almacenamiento local contraparte y establecer el atributo marcado de la entrada de radio relevante dentro del Columnas componente para verdadero. los Columnas - 1 es compensar el hecho de que las columnas Nodelista es cero basado en cero.

 Document.documentelement.style
.SsetProperty ("- Columnas", columnas);
Constractgers [columnas - 1] .Checked = True; 

21. Prueba el producto terminado.