Suplemento Plantillas CSS

Plantillas CSS complementarias que puedes personalizar sin reconstruir

Una plantilla CSS complementaria es un diseño de página terminado que incluye su hoja de estilos lista para usar: el marcado ya existe, y los colores, fuentes, espaciado, botones y comportamiento de la cuadrícula se encuentran en reglas CSS que puedes editar. No estás creando una hoja de estilos desde cero. Estás modificando la de otra persona, lo cual es un trabajo diferente con sus propias dificultades.

Qué editar realmente

La mayor parte del trabajo se reduce a un pequeño conjunto de valores. Los colores de la marca reemplazan la paleta de la plantilla, que generalmente consta de unos pocos valores hexadecimales. Las fuentes cambian en una o dos declaraciones de font-family, además de los tamaños y el interlineado. El espaciado es la parte que se suele subestimar: el relleno y los márgenes de las secciones son lo que impide que una plantilla se vea como su demo, y ahí es donde se acumulan las ediciones.

Luego vienen las clases reutilizables. Una plantilla te proporciona estilos para botones, tarjetas, insignias y niveles de encabezado. Modifica cada clase una vez, y todas las instancias se adaptarán automáticamente. Editar la misma regla quince veces o añadir anulaciones en línea a elementos individuales suele indicar que alguien omitió la clase y fue directamente al elemento.

El diseño se basa en las reglas de Grid y Flexbox: recuento de columnas, espacios, alineación. Lo mismo ocurre con el comportamiento responsivo, dentro de las consultas de medios que redibujan los elementos en pantallas de tabletas y teléfonos. Cambia el recuento de columnas en un ordenador de escritorio y comprueba los puntos de interrupción inmediatamente. Ahí es donde suele fallar el rediseño.

Antes de comprometerte con una plantilla CSS complementaria, conviene revisar cómo está escrita la hoja de estilos, si la vista previa lo permite. Las clases y variables con nombre implican una tarde de rediseño. Miles de selectores generados implican una semana.

Dónde encajan las reglas personalizadas

Nicepage mantiene los controles integrados para el estilo rutinario y deja el código CSS personalizado para todo lo demás. Las reglas pueden aplicarse a un solo elemento, una sola página o todo el sitio. La guía de CSS personalizado explica los tres niveles y cómo se aplican en cascada. Las reglas personalizadas se aplican a un estado de desplazamiento específico, a una forma que los controles estándar no generan o a una única excepción dentro de una sección. La opción "Exportar CSS mínimo por página" reduce la salida de cada página a los estilos que utiliza, lo cual es útil cuando una plantilla compleja alimenta muchas páginas sencillas.

La mayor parte del diseño de una página complementaria se compone de cuatro valores repetidos: una pila de fuentes, una paleta, una escala de espaciado y un radio de borde. Si se modifican de forma consistente, la plantilla se vuelve irreconocible. Si se modifican ocho de los diez lugares, seguirá siendo reconocible en los dos que se omitieron.