vtex-course-hub[bot]
commented
4 years ago You did great! :grin:
Results
:white_check_mark::white_check_mark::white_check_mark::white_check_mark:
Tests
:white_check_mark: Getting the file
:white_check_mark: Code compilation
:white_check_mark: Make the correct color changes
:white_check_mark: Change the heading 1 size to 2.5rem
github-learning-lab[bot]
Estilos globales
:sparkles: Branch: styles
Introducción
Además de css, que ya se aprendió anteriormente, Store Framework ofrece otro tipo de personalización de diseño, proporcionada a partir de
style.json.Estilización semántica
Todos los bloques de Store Framework utilizan las mismas definiciones semánticas de estilo, definidas usando Tachyons. En la práctica, esto significa que en lugar de tener que cambiar todos los fondos de los botones para usar el color que le interesa, apenas tiene que redefinir el color que tiene un
backgroundde unaaction-primary.Las personalizaciones a través de
style.jsontienden a tener un impacto mucho mayor que a través de css, pues, en general, mantienen la identidad visual de la tienda a lo largo de todas las páginas siendo necesarios pocos cambios. Por esta razón, siempre que sea posible, se debe utilizar esta herramienta, evitando así overhead de css innecesario.Investigando
style.jsonColores
styles/configs/style.jsonpuede ser confuso en un primer momento, por contener todas las definiciones de estilo que usan todos los bloques visuales de Store Framework. Sin embargo, un buen flujo para identificar qué estilos cambiar es mediante la inspección de elementos en el browser.Por ejemplo, haga clic derecho en cualquier botón de la tienda y pulse inspeccionar.
Observando la barra lateral que abrió en Chrome es posible ver una serie de definiciones, una de estas es el color de background del botón (#0f3e99):
Además, si inspecciona en el momento en que está solamente pasando el mouse por encima del botón, descubrirá el color de hover (#072c75):
Si buscamos las ocurrencias de ambos colores en
style.json, los colores que descubrimos son, respectivamente, los usados paraacción-primariaenhover-backgroundybackground, por ejemplo. Esto nos da una mejor idea de dónde podemos encontrar otras ocurrencias de esta misma definición.Tipografía
Para descubrir definiciones semánticas de texto y qué campos son editables, el proceso es el mismo que el anterior, podemos buscar atributos como tamaño de fuente, peso, familia.
En una cabecera nivel 1, por ejemplo, cuando inspeccionamos descubrimos que su tamaño se definió en 3 rem.
Actividad
style.json, reemplace todas las ocurrencias de los colores que encontramos, cambiando:El resultado final esperado debe ser semejante a este:
:no_entry_sign: ¿Perdido?
¿Hay algún problema con este paso? ¿Qué tal si nos envía un feedback? :pray:
Crear feedback
Si aún tiene alguna duda sobre cómo enviar su respuesta, puede revisar aquí.