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;
        }

Aprende más sobre web fonts

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

Omar García Betanzos

student•

Me parece que una variable para poder ser efectiva debería tener un nombre que no haga referencia directa al color que se usa, si no al uso. Por ejemplo, si cambiamos el valor de "Hospital Green" por otro tono de verde o por otro color se volvería confuso. Si en lugar de ello ponemos nombres como "background_secundary" puede ser más practico.

Luis Alejandro Vera Hernandez

student•

Coincido

Esteban Luján Ramírez

student•

No había pensado en ese detalle y me parece muy coherente.

Gera Meraki

student•

Conejos importantes antes de continuar con la siguiente clase

Una muy buena practica es el tener código HTML y CSS por separado. Recuerda que la profesora lo esta trabajando todo en el HTML para una mejor explicación.

Para conectar tu HTML con tu CSS solo basta con agregar esta linea de código dentro de tu head en HTML

  <link href="styles/style.css" rel="stylesheet" type="text/css">

Después del href vas a colocar la ruta de donde esta tu archivo, yo tengo una carpeta llamada "styles" y dentro de ella mis estilos llamados "style.css". Es importante que no olvides agregar la extension del archivo.

Al igual tener una estructura en tu carpeta de trabajo para tener un mejor orden. La estructura que yo estoy manejando es la siguiente:

Assets: Contiene una carpeta img y esta misma los archivos gráficos que utilizaremos durante el curso o desarrollo. Puedes descargar los assets aqui (Cortesia de Jonathan Alejandro)
styles: Aqui colocamos el o los archivos css que generemos en nuestro proyecto.

Por ultimo te comparto mi código completo, por si llegas a tener algún problema

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="styles/style.css" rel="stylesheet" type="text/css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <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">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

CSS

:root {
    --white: #ffffff;
    --black: #000000;
    --very-light-pinki: #c7c7c7;
    --text-input-field: #f7f7f7;
    --hospital-green: #acd982;
}

body {
    font-family: 'Quicksand', sans-serif;
}

Gera Meraki

student•

JAJAJA puse "Conejos" en lugar de consejos 🐰 PD: @TeamPlatzi nos hace falta una opción de editar aporte :c

Martin Alvarez

student•

qué tema estas usando en tu editor? se ve cool

Ederson Felipe Lopez Bolivar

student•

La profe usa la terminal para crear carpetas y moverse entre archivos , etc. NO TE ASUSTES LA TERMINAL SERA TU MEJOR AMIGA Y DEBES APRENDER A USARLA.

Recuerda que en Platzi hay un curso genial sobre terminal y linea de comandos LINK DEL CURSO

También es probable que si estas en Windows estos comandos no te funcionen y te salga un error , pero CALMA. Es porque la profe usa Mac , los comandos varían un poco para Windows , si quieres tener los mismo comandos en la terminal que la profe , puedes tomar este curso Curso de Prework: Configuración de Entorno de Desarrollo en Windows

En este curso te enseñan a instalar WSL , es como tener un S.O Linux!!! en tu pc y poder seguir usando Windows sin problema.

SERAS UN CASI hacker y mas importante te serviran los mismo comandos que usa la profe en la terminal.

Adriel Francesco Pezo Vizcarra

student•

Gran aporte, confirmo sobre todo los expuesto, si de verdad se quiere crecer como programador se debe saber Linux, y para evitar tener que comprar otra PC desde un comienzo para aprender, WSL es una gran alternativa.

Alex Gonzalez

student•

Excelente, Justo me dio error, por hacerlo desde windows, pero se soluciono con el wsl, mil gracias!

Brandon Argel Verdeja Domínguez

student•

Hola! como consejo que se me hizo muy interesante de la profesora del curso de diseño en modo oscuro:

Los nombres de las variables deben ser definidos por su función, no por su valor.

. Y bueno, a lo que se refiere, es que en lugar de poner:

--very-light-pink: #C7C7C7 ❌
// debemos poner algo como:
--background-color: #C7C7C7 ✅
o por la función que será de esa variable

A mí se me hizo muy interesante, por que:

Mejor organizado.
Si modificamos algo, sabemos que es exactamente lo que cambiamos.
Si cambiamos los colores de la marca, por ejemplo ya no queremos el rosita, ahora queremos un azul cielo, ya no tendrían sentido los nombres de las variables...

Entre otras cosas que estarían mejor 😃

Luis Alfredo Diaz Restrepo

student•

me parece muy acertivo lo que comentas. y si se necesita relamente reconocer el nombre se puede comentar a un lado. talq ue así:

--bottom: #ACD9B2 /* verde hospital*/

Emily García

student•

Totalmente de acuerdo, muchas gracias!

Juan camilo piedrahita londoño

student•

Aqui puede descargar los archivo de la clase

Primero debemos crear nuestro “root”, y poder así modificar, las variables de manera global

:root {
            --white: #FFFFFF;
            --black: #000000;
            --very-light-pink: #C7C7C7;
            --text-input-field: #F7F7F7;
	    --hospital-green: #ACD9B2
        }

buscamos tipografía en Google Fonts

<link rel="preconnect" href="https://fonts.googleapis.com">
<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">

Agregamos font-family a nuestro body

body{
            font-family: 'Quicksand', sans-serif;
        }

Descargamos los archivos de la clase

Luis Pedro Cisneros

student•

Gracias

Max Andy Diaz Neyra

student•

Gracias por el aporte

Emiliano Luna George

student•

Hola para quienes usen windows subsytem for linux y tengan problemas para pasar los assets del curso de su carpeta descargas de windows a su carpeta en wsl (frontend-developer-1)

Confirma que estes en home/usuario
Escribe explorer.exe .
Te va a abrir un explorador de archivos en windows, busca la carpeta en la que tengas tus proyectos.
Abre la carpeta y arrastra normalmente las carpetas o archivos que necesites

Ese fue mi método si alguien sabe como hacerlod esde la consola se los agradecería mucho! :)

Si no me entiendes por aca te dejo el video de referencia: https://www.youtube.com/watch?v=fzhnC_gQ0B4

Geffry Ceballos

student•

Excelente, gracias!

Samuel Medardo Hernández Ortiz

student•

Excelente aporte compañero

Katerin Calderón

student•

Una buena practica que aprendí en los cursos de la escuela de desarrollo web para los proyectos es incluir en el archivo de style.css esta estructura, que te permitirá formatear los estilos del navegador y trabajar los tamaños de las fuentes con rem, esto también los vimos en el primer curso de Frontend developer:

:root{
    --white: #FFFFFF;
    --black: #000000;
    --very-light-pink: #C7C7C7;
    --text-input-field: #F7F7F7;
    --hospital-green: #ACD9B2;
    --sm: 14px;
    --md: 16px;
    --lg: 18px;
}

html{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    font-family: 'Quicksand', sans-serif;
    font-size: 62.5%;
}

Sara Acevedo Maya

student•

Está super, gracias compañera!

Rafael Martínez Rodríguez

student•

Muy buen aporte. Como anotación y algo que también vi en aportes de otros compañeros es que para usar rem como medida y hacerlo un poquito más práctico, el font-size lo podemos poner en 6.25%, así, 1rem sería igual a 1px.

Sergio Francisco Arteaga Rodríguez

student•

¿No se supone que poner Styles dentro de html es una mala práctica? Al menos eso entendí con el profe Diego con el Curso Definitivo de HTML y CSS. Aún no sé si en clases futuras lo elimina pero de momento esto me causa algo de ruido.

Sebastian Pedroza

student•

Opino lo mismo, creo que lo hace para efectos de la explicación, pero considero que deberían tener en cuenta aplicar esas buenas prácticas durante este tipo de cursos.

Sergio Francisco Arteaga Rodríguez

student•

Varios cursos de otros profes diciendo "Esto es una mala practica" para que en las actualizaciones que hacen vengan y hagan justo lo que nos dicen que no hagamos ._. Esto será un problema para los que vengan iniciando con HTML y CSS

Arianna Corona

student•

Por buena práctica es recomendable hacer el css en un archivo aparte...

Reynaldo Fuentes Garcia

student•

si tienes razon, pero por alguna razon la profesora debe hacerlo en el mismo index.html

Eliaz Bobadilla

student•

Creo que lo hace para que a la hora de grabar podamos ver todo el archivo.

Reynaldo Fuentes Garcia

student•

Las variables deben declararse dentro de un selector, se acostumbra usar :root para que la variable sea global, se declaran con dos guiones y el nombre para utilizarlas se usa la funcion var() y entre los paréntesis se escribe el nombre de la variable

:root {
  --my-color: red
}

body {
  color: var(--my-color)
}

El nombre exacto es Custom properties aunque no está mal decirles variables (hasta la W3C las llama variables). Pero ¿por qué se llaman custom properties y no variables? Son dos las razones

El valor es heredado a los hijos
El valor puede redefinirse por cascada

Estos dos conceptos (cascada y herencia) son muy propios de las propiedades CSS y no tienen relación con el comportamiento de una variable en ningún lenguaje de programación.

:root {
  --my-color: red
}

body {
  color: var(--my-color)
}

En este caso todos los textos (párrafos, títulos, etc.) serán de color rojo por herencia, porque descienden de body al resto de elementos (comportamiento propio de CSS) Ahora el caso de la cascada con el mismo ejemplo

:root {
  color: red
}

body {
  color: var(--color)
}

h1 {
  --color: blue;
}

En este caso todos los textos (párrafos, títulos, etc.) serán de color rojo por herencia, pero todos los h1 serán azules porque hemos usado la cascada para redefinir el valor de la propiedad personalizada --color

Miguel Ángel Ramón Candia

student•

Increíble aporte gracias!!!!

Eduardo Peña Ramos

student•

Gracias, muy conciso y claro.

Marianna Guedez

student•

VARIABLES CSS

Eduardo Peña Ramos

student•

¡Gracias por recordarlo!

Marcos Monteverde

student•

gracias, buen aporte!!

Ricardo Rito Anguiano

student•

Si gustan tambien pueden importar las fuentes desde la misma stylesheet (:

@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap');

Luis Alejandro Vera Hernandez

student•

Que forma es mejor en el sentido del Performance? Cual forma impacta menos tiempo al renderizado?

Daniel Flores

student•

En sentido del performance es recomendable descargar las fuentes que se utilizaran y llamarlas desde el proyecto en si 😁

Romen Ter Gazarian

student•

Vengo del curso de React, pues me salte este curso ya que antes habia hecho el curso de html y css largo, y ademas ansioso. Y cuando la profe empezo a hablar sobre la globalizacion de variables me exploto la cabeza. Globalizacion de variables + componentes = MUNDO DE POSIBILIDADES. Derrepente cambiando un par de colores se puede crear un modo nocturno, o cambiar de idiomas, o los templates. Se crea casi completamente un proyecto nuevo solo cambiando las variables ME ENCANTA. Voy a disfrutar mucho este curso

Eduardo Peña Ramos

student•

Es correcto. Supongo que por cuestiones de tiempo o longitud en ese curso de React no se hace uso de variables en el CSS, pero es super útil y práctico.

Alan Cabrera

student•

Nota: El comando "take" solo funciona en la shell zsh que es la que tiene mac, si tienes wsl o alguna distro de linux, estas tienen por defecto la shell bash y ahí no puedes usar dicho comando, pero en esta clase del curso de curso de terminal y línea de comandos el profe devars te enseña cómo personalizar tu terminal y cambiar la shel por zsh y ahí sí está este gran comando que aunque no parezca ahorra tiempo. Espero te sirva. Saludos! :)

Miguel Jonathan Madrigal González

student•

Asi es, quiero añadir que el comando take es un comando personalizado, viene ya configurado al instalar un tema de terminal (bash framework) llamado Oh My Zsh, dicho tema solo es compatible con Zsh y no con Bash. Como dice mi compañero Alan, pueden buscar un tutorial en youtube sobre como cambiar en tu terminal tu shell, para pasar de bash a zsh.

Igualmente yo te quiero mostrar como crear este atajo en tu terminal (Ojo, no hablo de CMD ni Powershell de Windows, sino de la terminal linux, que en windows puedes habilitarla instalando <u>WSL 2</u>).

Para crear el comando take se escribe lo siguiente en el archivo .bashrc en el caso que tengas bash, y .zshrc en caso que tengas zsh...

function take() { mkdir -p "$1" && cd "$1"; }

<u>Ayudate con chat gpt, utiliza el siguiente prompt: </u>

En la terminal de linux, como averiguo el shell , y deacuerdo a eso como puedo crear el alias take para guardarlo en el source del shell.

Alejandro Jimenez

student•

Esta guía me ha ayudado mucho a saber qué espaciados y tamaños colocar en los elementos: https://spec.fm/specifics/8-pt-grid

Edwin Sebastian Cabascango Salazar

student•

No me funciona el comando take, uso windows. Help me please!

Carlos Eduardo Gomez García

teacher•

¡Hola! Este comando solo funciona con macOS. ¿De casualidad tienes instalado WSL? WSL usa Linux en Windows, y sus comandos son similares a los de macOS. Si no lo tienes puedes ver el Curso de Prework: Configuración de Entorno de Desarrollo en Windows :D

Jair Yara

student•

Te funciona en windows solo si tienes wsl instalado y configurado zsh en tu terminal.

Antonio Mora

student•

Variables en CSS

En CSS, las propiedades personalizadas (también conocidas como variables) son entidades definidas por autores de CSS que contienen valores específicos que se pueden volver a utilizar en un documento. Se establecen mediante la notación de propiedades personalizadas (por ejemplo, --main-color: black;) y se acceden mediante la función var() (por ejemplo, color: var (--main-color);).

Para declarar propiedades personalizadas (variables) usamos un nombre que comienze con dos guiones (--), y un valor que puede ser cualquier valor válido de CSS. Como cualquier otra propiedad, la escribimos dentro de un set de reglas de estilo, algo así:

elemento {
  --main-bg-color: brown;
}

Ten en cuenta que el selector que usemos para las reglas de estilo define el ámbito (scope) en el que podremos usar la propiedad personalizada (variable). Una buena práctica común es declarar variables en la pseudo-clase :root, y así aplicarlas globalmente al documento HTML:

:root {
  --main-bg-color: brown;
}

:root

La pseudo-clase :root de CSS selecciona el elemento raíz de un árbol que representa el documento. En HTML, :root representa el elemento <html> y es idéntico al selector html, excepto que su especificidad es mayor.

/* Selecciona el elemento raíz del documento:
   <html> en el caso de HTML */
:root {
  background: yellow;
}

Santiago Hoyos

student•

Si estás desde la terminal, puedes abrir el proyecto donde te encuentras con VS Code usando el siguiente comando:

code .

Ulises Faya Bessone

student•

Explicas tremendamente rapido, obviando pausas necesarias y mostrando en algunos casos escasos segundos el codigo que se esta explicando. No soy yo el que comprende lento, sino que esta exagerada la velocidad aca como si no quisiera explicar en detalle o como si tuviese un tiempo que cumplir. Sea como sea es una torutra consumir las clases de esta profesora, vengo del curso anterior y lo mismo.

Holtzwuer Reyes Morales

student•

Me siento igual! Voy pausando y regresando cada segundo. :(

Juan David Tobón Arroyave

student•

Es muy cierto, Estefany la tiene clara, y tal vez piensa que todos los estudiantes van al ritmo de ella, y es un gran error, hay muchos que venimos desde cero.

Jacobo Montes castaño

student•

Las carpetas de los iconos y logos están en el repositorio de github que nos dejaron en los recursos de la clase…

Para descargarlos se pueden apoyar de este video:[https://www.youtube.com/watch?v=KzZcnBzI3OU]