Sistemas de Diseño: Uso de Variables CSS y Gestión de Assets
Clase 4 de 22 • Curso Práctico de Frontend Developer
Resumen
¡Comenzamos a trabajar! Seguiremos un sistema de diseño que permitirá conseguir un proyecto uniforme. Para esto, declararemos variables en CSS con los colores que utilizaremos y ordenaremos en carpetas los íconos y logos.
¿Cuál es la utilidad de un sistema de diseño?
La principal ventaja de implementar un sistema de diseño es que facilita las tareas de diseñadores y desarrolladores en el proceso de creación. También agiliza la toma de decisión entre equipos.
Profundiza en este tema:
Variables en CSS
En CSS, llamamos variables a las propiedades personalizadas.
Contienen valores específicos que se pueden reutilizar muchas veces en un documento.
Se establecen mediante la notación de dos guiones
--nombre-variable: valor;
Se acceden mediante la función var()
propiedad: var(--nombre-variable);
Normalmente las declaramos dentro del selector :root para que su alcance (scope) sea global.
Nuestro proyecto quedaría así:
:root {
--black:#000000;
--white: #FFFFFF;
--very-light-pink: #C7C7C7;
--text-input-field: #F7F7F7;
--dark: #232830;
--hospital-green: #ACD9B2;
}
También puedes nombrar a tus variables según su función.
Ejemplos: --background-color, --primary-color, etcétera.
Fonts
Buscaremos las fuentes propuestas por diseño en Google fonts
Colocamos los links dentro de la etiqueta head del HTML
<head>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300;500;700&display=swap" rel="stylesheet">
</head>
Dentro de la etiqueta style le decimos a CSS que la implemente
body {
font-family: 'Quicksand', sans-serif;
}
Assets
Desde aquí puedes descargar los íconos y logotipos que usaremos en nuestra tienda.
Contribución creada por Guadalupe Monge Barale con los aportes de Reynaldo Lenin Fuentes Garcia y Brandon Argel Verdeja Dominguez