🖖 Inicio

SERVICIOS

Salir

nochedía

Entorno de trabajo

600 palabras
2 minutos
May 12, 2020

Entorno de trabajo

Bienvenidos en este curso de css y GatsbyJS aplicado al diseño de gradientes animados con distintas aplicaciones, donde la más evidente en el contexto en que nos movemos podría ser el diseño de una landing como alternativa o complemento a un video o imagen a pantalla completa

Primero de todo necesitamos el entorno de trabajo, y este será Gatsby

vamos allá

Instalar starter de Gatsby e incorporando theme-ui

No me entretengo en los detalles, puedes ver los distintos cursos de Gatsby para saber qué es un starter, que no es más que una especie de tema al estilo WordPress, más o menos

También asumo que tienes el vscode instalado y configurado, algo que también hemos visto anteriormente, con lo que ya podemos empezar

Con esta instrucción, si abrimos la carpeta animated-gradients con vscode ya tendremos nuestro starter preparado, puedes comprobarlo con un gatsby develop y luego ir a localhost:8000

Siguiente paso, vamos a instalar un paquete que aún no hemos visto, theme-ui, una manera de estilar (con @emotion) que nos impone ciertos límites, pero que a cambio nos proporciona ciertas ventajas

En una frase, esto significa delegar parte del diseño a una librería que nos permite definir estilos en un archivo muy separado del contenido

Separamos contenido y estética? Esto es lo contrario que buscábamos con CSS-in-JS no?

🔥🔥🔥

Correcto, eso no nos gusta porque queremos definirlo todo en cada componente, sino vamos de vuelta al css de siempre

Pero hay una excepción

Y ésta es, cuando delegamos

En este caso estamos trasladando la responsabilidad de cuidarnos la tipografía y estilos de texto a theme-ui, con lo que lo externalizamos

Y tiene sentido, porque el texto difícilmente estará ligado a un único componente, más bien son criterios que permean todo el website

Externalizando con theme-ui podremos aprovechar ciertos temas ya establecidos, establecer los nuestros, o simplemente retocar los estilos cuando queramos y fuera del ámbito de theme-ui, lo podemos hacer como lo hacemos habitualmente, con styled-components

Hablo de styled-components y de @emotion como si fueran lo mismo

Bien, que quede claro que en este curso no tocamos theme-ui, sólo lo utilizamos y la vemos a nivel de usuario (más o menos)

Vamos a instalarlo

Sin entrar en detalle, pero aquí también nos estamos bajando la fuente open-sans y el tema wordpress-2012 para utilizarlos en este curso

Y pasamos a configurar todo esto en gatsby-config.js

Y para configurar la librería theme-ui necesitamos crear la carpeta src/gatsby-plugin-theme-ui y allí creamos este archivo

Y el éste otro

Con esto ya tenemos cubierta una estética cuidada y coherente

Ahora ya nos podemos centrar en la página principal (y única), la src/pages/index.js

Antes también creamos la carpeta src/components y allí creamos el archivo /global.css con el siguiente contenido

Y ahora sí, nos vamos a index.js y implementamos todo lo anterior

La razón de utilizar un archivo css global y no controlado por @emotion es para evitar un flash de contenido no estilado (FOUC, FOUT, hay varios acrónimos)

Esto es un problema que ocurre cuando se carga el contenido y aún no se han cargado los estilos y/o las fuentes, y con styled-components (y derivados) parece ser un problema recurrente que a veces se soluciona y a veces no, no queda muy claro

Lo que sí queda claro se que puedes utilizar una hoja de css global y a la vieja usanza para asegurarte de que no tienes FOUC en lo que atañe a esos estilos

Lo suyo es utilizarlo para las fuentes y para estilar el <html> y <body>, aunque aquí no lo utilizamos con las fuentes ya que theme-ui se encarga de esto

Pero vamos, sigo conservando esta sana costumbre de tener una hoja de estilos global y por eso la incluyo aquí

image

Primer capítulo donde ya entramos en materia con un starter de Gatsby

Esto ya lo hemos visto en cursos anteriores y aquí lo hemos utilizado como vehículo para implementar el objetivo de este curso, esto es, una página que implemente animaciones de gradientes

Entonces, una vez tenemos nuestro entorno de trabajo preparado, nos vemos en el segundo capítulo, en Gradientes por css

Qué tal este capítulo?
👌 Bien 🙌🙌
👍 Bien, pero algunas cosas podrían explicarse mejor 😬
🤷‍♂️ Da por sentadas demasiadas cosas 😒
🤷‍♂️ A ver, hay poca chicha 😬
🤷‍♂️ Los ejemplos no son muy claros 🙇‍♂️
🤷‍♂️ No se entiende, está mal escrito 👎
✍️ Hay errores, revísalo en cuanto puedas 🙏

Newsletter de kuworking, un correo de tanto en cuanto

Quizá te interese

Privacidad
by kuworking.com
[ 2020 >> kuworking ]