Personalizar Simple.css
Simple.css nos da una base para poner en marcha una página web agradable visualmente y muy limpia en diseño. Pero también ofrece bastante personalización sin tener que realizar mucho trabajo extra por nuestra parte. Utiliza un funcionalidad de CSS llamada propiedades personalizadas (a menudo llamadas variables). Estas variables nos permiten cambiar colores y fuentes tipográficas en una web con un mínimo de retoque en el código.
Echando un vistazo dentro de Simple.css
Vamos a abrir el archivo simple.css
que hemos añadido previamente a nuestro sitio web, para ver a cuales variables podemos acceder. No se deje disuadir por la cantidad de código que hay guardado en el archivo. Solo nos vamos a detener en una pequeña porción. Al inicio del archivo, verá un código similar al siguiente:
/* Global variables. */
:root,
::backdrop {
/* Set sans-serif & mono fonts */
--sans-font: -apple-system, BlinkMacSystemFont, 'Avenir Next', Avenir,
'Nimbus Sans L', Roboto, 'Noto Sans', 'Segoe UI', Arial, Helvetica,
'Helvetica Neue', sans-serif;
--mono-font: Consolas, Menlo, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
--standard-border-radius: 5px;
/* Default (light) theme */
--bg: #fff;
--accent-bg: #f5f7ff;
--text: #212121;
--text-light: #585858;
--border: #898ea4;
--accent: #0d47a1;
--accent-hover: #1266e2;
--accent-text: var(--bg);
--code: #d81b60;
--preformatted: #444;
--marked: #ffdd33;
--disabled: #efefef;
}
Nos estamos adentrando en algunas sintaxis CSS, pero tal vez no sea tan aterrador como parece. Vamos a desglosarlo.
En CSS, el navegador ignora el texto entre /*
y */
. Es una manera de escribir notas para usted mismo u otras personas que puedan leer su código, llamado comentarios. En este caso, los comentarios nos ayudan a separar el código en diferentes grupos relacionados.
La línea que dice :root
significa que el siguiente bloque de código, la parte que va entre llaves, {}
, se aplica a toda la página. De momento vamos a ignorar ::backdrop
.
Dentro de las llaves, encontramos una lista de propiedades. Ya vimos las propiedades de CSS en un capítulo previo. Por ejemplo, hemos utilizado columns: 2
en la página del currículum para ajustar una lista en dos columnas. En este caso las, columnas
son una propiedad y 2
es un valor.
Cualquier propiedad que comience con --
es una propiedad personalizada, o variable. Es una manera de reutilizar un valor en mútiples lugares. Por ejemplo, si tenemos una variable --accent: blue
, podemos utilizar simultáneamente el color --accent
en múltiples elementos. Y si incluso decidieramos configurar el color predominante en otro color, por ejemplo rojo
, podríamos actualizarlo en un único lugar escribiendo --accent: red
—y cada elemento que utilizara la variable --accent
se vería actualizada automáticamente.
Mirando más arriba en el código Simple.css anterior, vemos que tenemos dos grupos de variables. Hay propiedades relacionadas con las fuentes utilizadas, seguidas de una lista de variables relacionadas con el color que representan lo que simple llama al tema "predeterminado (claro)".
Veremos las fuentes más tarde. Primero veamos los colores.
En este caso, la mayoría de las variables de color se representan como códigos hexadecimales. Todo lo que necesita saber sobre los códigos hexadecimales es que son una de varias formas de especificar un color en CSS. Vaya a casi cualquier motor de búsqueda y busque "seleccionador de color". Será recibido con un widget que puede usar para elegir un color y recuperar su código hexadecimal junto con otros formatos.
Bien, entonces, ¿cómo establecemos nuestros propios colores? ¿Los cambiamos aquí por dentro de simple.css
? Realmente podría hacer eso ya que funcionaría. Pero hay una manera mejor.
Crear una hoja de estilo personalizada
CSS son las siglas en inglés de Cascading Style Sheets en español se podría traducir por hojas de estilo en cascada. La palabra cascading es particularmente útil. Para simplificar, esto significa que el orden de CSS importa, las reglas posteriores tienen preferencia sobre las reglas anteriores. Para nuestros propósitos, esto significa que podemos crear nuestro propio archivo CSS, y mientras este sea procesado por el navegador después de simple.css
, las reglas que escribamos tendrán preferencia. Así que no estamos cambiando simple.css
. Lo estamos sobreescribiendo.
Cree un archivo en su carpeta assets/css
llamada custom.css
.
Ahora, vamos a enlazarla a nuestro sitio. Necesitará hacer esto en cada página de su sitio web, pero por ahora vamos a empezar en la página principal, en el archivo en el nivel superior index.html
. Dentro de la sección <head>
, ya estamos haciendo referencia al archivo simple.css
con una etiqueta <link>
. Haremos lo mismo para nuestro nuevo archivo custom.css
justo debajo de esa línea. Como he dicho, aquí el orden en que se llamen a los archivos importa. Queremos que nuestra nueva hoja de estilo vaya detrás de la de Simple, así podremos sobreescribir sus variables.
<head>
<title>La web de Victorhck</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/simple.css">
<link rel="stylesheet" href="css/custom.css">
</head>
Ahora, vamos a sobreescribir algunas variables. En nuestro archivo custom.css
, primero vamos a establecer un bloque de código :root
similar al de simple.css
. Después vamos a coger una de las variables, por ejemplo --bg
(es el color del fondo), y establecerlo a otro color, por ejemplo rojo, así que usaremos red
.
:root {
--bg: red;
}
Si recarga la página en el navegador, debería ver un flameante rojo en el fondo de la página. Vamos a escoger un color algo más cómodo para leer. Puede utilizar esta herramienta para escoger un color para su web, utilice uno de los muchos colores disponibles en CSS, o, si utiliza Visual Studio Code, utilice la herramienta propia para escoger un color al pasar el ratón sobre el valor de un color.
Pero antes de escoger colores, vamos a hablar del modo oscuro.
El modo oscuro
Simple.css admite de manera automática el uso de modos claros y oscuros basándose en los ajustes del sistema del visitante de la web. Si tiene ajustado el modo oscuro o claro en su sistema, la web se verá con diferentes colores. Si echamos un vistazo al archivo simple.css
, podremos ver la versión de todas las variables para el modo oscuro justo debajo de las variables que hemos visto anteriormente.
/* Dark theme */
@media (prefers-color-scheme: dark) {
:root,
::backdrop {
color-scheme: dark;
--bg: #212121;
--accent-bg: #2b2b2b;
--text: #dcdcdc;
--text-light: #ababab;
--accent: #ffb300;
--accent-hover: #ffe099;
--accent-text: var(--bg);
--code: #f06292;
--preformatted: #ccc;
--disabled: #111;
}
/* Add a bit of transparency so light media isn't so glaring in dark mode */
img,
video {
opacity: 0.8;
}
}
Este bloque utiliza una funcionalidad llamada media queries. En este caso la regla @media
especifica que la regla de estilo dentro del bloque se debería utilizar si el usuario ha indicado su preferencia por el modo oscuro.
La primera regla establece el color del esquema a oscuro y entonces redefine el color de las variables que se aplican al documento (por ejemplo a toda la página). La segunda regla hace que las imágenes y vídeos sean un poco transparentes, para que no sean “muy deslumbrantes en el modo oscuro.”
No sabemos si las personas que visitan nuestra web prefieren el modo claro u oscuro, así que deberíamos configurar los colores de manera adecuada para ambos modos. Si quiere, puede copiar estos dos bloques de código (por ejemplo el bloque de “Global variables” y el bloque de “Dark theme”) del archivo simple.css
en su archivo custom.css
y después proceder a cambiar los valores de los colores a su elección. O podría especificar solo aquellos que desee cambiar. Sea como sea, asegúrese de tener los colores correctos en la sección adecuada.
Un ejemplo de personalización
Para el tema predeterminado claro, he decidido utilizar únicamente nombres de colores que entiende CSS como un ejercicio divertido. Puede pensar en los nombres ya establecidos como en una caja de pinturillas, hay muchas, pero no representan todos los colores posibles. Pero son una manera sencilla de referirse a un color de una manera similar a como lo hacemos entre las personas.
Y por otro lado, en el modo oscuro, necesito un toque más matizado. Utilizaré la herramienta para escoger colores de Visual Studio Code para seleccionar algunos colores muy específicos. Está representados en formato rbg
porque es lo que escogió el editor cuando seleccione los colores.
Este es el código que he creado en mi archivo custom.css
.
:root {
--bg: mintcream;
--border: darkslategray;
--accent-bg: honeydew;
--text: darkslategray;
--accent: mediumvioletred;
--accent-hover: mediumvioletred;
--marked: mediumspringgreen;
}
/* Dark theme */
@media (prefers-color-scheme: dark) {
:root,
::backdrop {
color-scheme: dark;
--bg: rgb(17, 18, 18);
--border: rgb(80, 90, 90);
--accent-bg: rgb(35, 35, 36);
--text: ghostwhite;
--accent: lightskyblue;
--accent-hover: lightblue;
--marked: gold;
}
}
Aquí hay una captura de las dos imágenes juntas del índice del blog de nuestra página web con los modos claro y oscuro.
Escoger colores accesibles
Algunas combinaciones de colores pueden hacer que sea difíciles de leer debido al poco contraste entre ellos. Debe asegurarse de que hay bastante contraste entre el color del texto y el color del fondo.
Hasta cierto punto puede confiar en sus propios ojos, pero debe tener en cuenta que todo el mundo no es igual. Afortunadamente hay estándares de cuanto contraste debería tener el texto. Puede utilizar este útil comprobador de contraste. Dele dos colores y le dirá si hay suficiente contraste entre ellos.
Cambiar la fuente tipográfica
Ya escribí sobre ello anteriormente, pero quizás ha notado un par de variables relacionadas con las fuentes y la variable de color definidas en simple.css
. Una de ellas es, --sans-font
, que es responsable de la mayoría del texto de la página (la otra, --mono-font
, es utilizada para cosas como mostrar el código, como estoy haciendo en este párrafo).
Si no está familiarizado, las fuentes sans-serif son aquellas que no tienen serifas, esas pequeñas protuberancias como pies que se encuentran en otras fuentes como Times New Roman. Simple utiliza la variable --sans-font
para la mayor parte del texto en la página de manera predeterminada, pero se puede sobreescribir con lo que queramos.
Primero, hablemos sobre las fuentes tipográficas en la web.
Fuentes en la web
Las personas que visiten su sitio web solo pueden ver las fuentes instaladas en sus sistemas. Eso significa que si usted, el autor de la página web, especifica en su archivo CSS alguna fuente aleatoria que descargó de un sitio web, usted verá esa fuente en la página web. Pero sus visitantes verán otra cosa, a menos que también tengan esa fuente instalada en sus sistemas.
Ese es el motivo, por el que se especifican múltiples fuentes tipográficas en un archivo CSS. Si la primera fuente especificada no está disponible en el equipo del visitante, el navegador probará con la siguiente, y así consecutivamente.
body {
/* la primera fuente necesita el uso de comillas porque el nombre contiene espacios */
font-family: "Some Rando Font", Georgia, serif;
}
El estilo anterior establece la fuente para la sección <body>
. El navegador intentará utilizar primero “Some Rando Font.” Si no está disponible en el equipo del visitante, lo intentará utilizando Georgia. Si esa tampoco está disponible, le diremos al navegador que utilice la fuente predeterminada serif
que tenga disponible.
Esta es una buena referencia para encontrar las fuentes más comunes encontradas en los dispositivos de las personas para ver sus opciones. Siempre es útil proporcionar un puñado de buenas opciones.
A veces, tiene una fuente que usted realmente quiere que sus visitantes puedan ver aunque sabe que no la van a tener instalada en sus sistemas. Afortunadamente, hay maneras de conseguir esto. Es lo que se llama fuentes web. Es demasiado complejo para tratarlo aquí, pero trataré sobre ello brevemente en el próximo capítulo, Lo básico de CSS. Para resumir, es un método para ofrecer de manera automática la fuente tipográfica que desea a quien visite su página web.
Sobreescribiendo la variable de la fuente
Vamos a utilizar una fuente con serifa. Aunque el archivo css Simple llame a la variable --sans-font
. Podemos establece la que queramos. Usaremos Georgia, que siempre es cómoda de leer.
Podemos cambiar la variable de Simple --sans-font
dentro del bloque :root
así se aplicará a toda la página.
:root {
--sans-font: Georgia, "Times New Roman", serif;
--bg: mintcream;
--border: darkslategray;
--accent-bg: honeydew;
--text: darkslategray;
--accent: mediumvioletred;
--accent-hover: mediumvioletred;
--marked: mediumspringgreen;
}
Hemos especificado la fuente, Georgia, pero también ofrecemos dos opciones de respaldo. Hemos especificado Times New Roman como nuestra segunda opción. Tenga en cuenta que esta debe ir entre comillas, ya que su nombre contiene espacios.
Utilizamos una palabra clave de CSS, serif
, para la tercera opción. Esto indica al navegador que utilice la fuente predeterminadas serif, cualquiera que sea. A menudo, será Times New Roman. Otras palabras clave que encuentra aquí son sans-serif
, monospace
, y cursive
, entre otras
Aquí tiene un ejemplo de un artículo del blog usando la fuente Georgia.
Hágalo a su medida
He escogido Simple.css para este libro porque hace que HTML se vea bien sin necesidad de ningún trabajo extra. Pero también lo escogí porque puede ser personalizado con unas cuantas variables CSS. Aunque solo sean los colores y las fuentes, hay un sin fín de posibilidades para que su sitio sea único.
Le animo a explorar el mundo del color y experimentar con distintas combinaciones. En el siguiente capítulo extra, trataré más aún sobre CSS y cómo ir más allá del uso de Simple.css y escribir sus propios estilos.