¡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.
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:
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;
}