Tematizando aplicaciones Gatsby con Theme UI

Rate this content
Bookmark

Hay muchas bibliotecas CSS-in-JS para que elijamos. Imagina poder tomar tus partes favoritas de esas bibliotecas y usarlas en una sola. Aprende sobre el poder de Theme UI.

Pariss Athena
Pariss Athena
6 min
17 Jun, 2021

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Bienvenido a la tematización de aplicaciones Gatsby con Theme UI. Gatsby es un marco de trabajo basado en React para construir sitios web y aplicaciones estáticas. Theme UI es una biblioteca de estilos que permite a los desarrolladores configurar diseños para componentes utilizando valores predefinidos. En Theme UI, puedes hacer referencia fácilmente a tu objeto de tema en todo tu proyecto. Las variantes te permiten definir estilos para componentes comunes como botones.

Available in English

1. Introducción a Gatsby y Theme UI

Short description:

Bienvenido a la personalización de aplicaciones Gatsby con Theme UI. Gatsby es un marco basado en React para construir sitios web y aplicaciones estáticas. Theme UI es una biblioteca de estilos que permite a los desarrolladores configurar diseños para componentes utilizando valores predefinidos. Proporciona una plantilla para estilos configurables y reutilizables y es fácil de instalar. Puedes acceder a los valores en tu objeto de tema utilizando la propiedad Sx.

[♪ comienza la música instrumental suave ♪ [♪ la música instrumental suave continúa ♪ [♪ la música instrumental suave continúa ♪ [♪ la música instrumental suave continúa ♪ [♪ la música instrumental suave continúa ♪ [♪ la música instrumental suave continúa ♪ [♪ la música instrumental suave continúa ♪ [♪ la música instrumental suave continúa ♪ [♪ la música instrumental suave continúa ♪ [♪ la música instrumental suave continúa ♪ [♪ la música instrumental suave continúa ♪ [♪ la música instrumental suave continúa ♪ [♪ la música instrumental suave continúa ♪ [♪ la música instrumental suave continúa ♪ [♪ la música instrumental suave termina ♪ Hola a todos. Bienvenidos a la personalización de aplicaciones Gatsby con Theme UI. Soy Paris Chandler. Soy parte del equipo de Éxito del Desarrollador en G2I. Soy un desarrollador front-end, creador de BlackTech Twitter, y fundador de BlackTech Pipeline. Entonces, para empezar, lo primero, ¿qué es Gatsby? Gatsby es un marco basado en React que permite a los desarrolladores construir rápidamente sitios web y aplicaciones estáticas. Y su instalación es muy sencilla, solo toma tres comandos. Instalas la CLI de Gatsby, creas un proyecto de Gatsby, inicias tu sitio con Gatsby develop, y luego puedes acceder a tu nuevo sitio en localhost 8000. Es tan sencillo como eso. Lo primero que verás es esta página de inicio. Y lo genial de esto es que estas páginas están optimizadas para un rendimiento y accesibilidad ideales. Viene con muchas configuraciones bajo el capó que no necesitarás configurar tú mismo. Ahora, entrando en materia, ¿qué es Theme UI? Theme UI es una biblioteca de estilos que permite a los desarrolladores configurar diseños para componentes dándoles valores predefinidos en un objeto compartido. Los desarrolladores de Theme UI llaman a esto principios de diseño basados en restricciones. En mis propias palabras, Theme UI es una plantilla para estilos configurables, reutilizables que ayudarán a construir sistemas de estilos para tus proyectos. Estos, una vez más, son muy fáciles de instalar. Solo tienes que instalar el complemento Theme UI de Gatsby, agregarlo a tu matriz de complementos, crear una carpeta src, y dentro de ella, crear la carpeta de tema del complemento Gatsby, y dentro de esa carpeta, crear un archivo index.js. Luego puedes exportar tu objeto Theme UI en ese archivo. Ah, disculpa. Bien, este es un ejemplo de un objeto Theme UI. Tienes tus colores, tus fuentes, tus tamaños de fuente y espaciado, y estos son los estilos que se definen en toda tu aplicación. Y si no quieres construir un objeto Theme UI desde cero, Theme UI tiene una herramienta de tema personalizado que te permite construir tu objeto haciendo clic, arrastrando y soltando. Creará tu objeto de tema por ti, y luego puedes copiarlo y pegarlo desde allí en tu proyecto. Hay dos formas de acceder a los valores en tu objeto de tema. Puedes usar los componentes que vienen con Theme UI y estilizarlos con la propiedad Sx. Y si no quieres usar componentes, necesitarás usar el JSX Pragma para usar la propiedad Sx, y la propiedad Sx es la única forma de acceder a los valores de tu objeto de tema. Aquí, esta es la propiedad Sx y cómo accederías a los estilos dentro de tu objeto. Te darás cuenta de que dentro de la propiedad Sx hay claves de objeto que son cadenas y eso se debe a que se refieren a las claves en tu objeto de tema. Se refieren a las claves en tu objeto de tema. Solo para darte una idea de cómo usar la propiedad Sx a un nivel básico, aquí tengo un objeto de tema con un color primario de Rebecca purple y un color secundario de coral.

2. Usando Theme UI en tu proyecto

Short description:

En Theme UI, puedes hacer referencia fácilmente a tu objeto de tema en todo tu proyecto. Las variantes te permiten definir estilos para componentes comunes como botones. Puedes anular los puntos de interrupción predefinidos y crear modos de color. Los objetos de tema son donde residen los valores de estilo para toda tu aplicación. Recuerda agregar e importar tu pragma JSX y usar la propiedad SX para acceder a tus estilos. Theme UI ofrece muchas características como variantes, puntos de interrupción y modos de color.

A continuación, en mi componente cuadrado, estoy estableciendo el color de fondo como primario y el otro como secundario. Y así de fácil es hacer referencia a tu objeto de tema en todo tu proyecto. Y este es un ejemplo de tus valores primarios y secundarios.

Luego, hay variantes que te permiten definir variaciones de estilos para componentes comunes como botones. Entonces tienes un objeto de botón con dos objetos dentro de ellos. Uno es un objeto primario con un conjunto de estilos y el otro es un objeto secundario con un conjunto de estilos. Puedes aplicar cualquiera de las variantes usando la propiedad de variante y esto funciona muy bien para cosas como botones o enlaces.

Theme UI también tiene puntos de interrupción predefinidos pero puedes anularlos con tus propios valores de puntos de interrupción. Y también hay modos de color. Los modos de color te permiten crear cosas como el modo oscuro en tu objeto de tema. Creas esos modos agregando un objeto de modo anidado a tu objeto de colores y definiendo tus estilos de modo allí. Algo importante a tener en cuenta es que todos los colores definidos en tu objeto de colores son tus colores predeterminados, y todos los colores definidos en tus modos son tus estilos secundarios.

Entonces, aunque eso fue muy rápido, repasemos lo que hemos aprendido. Los objetos de tema son donde residen los valores de estilo para toda tu aplicación. Es una herramienta personalizada que construirá tu, hay una herramienta personalizada que construirá tu objeto de tema para que lo copies y pegues. Y recuerda agregar e importar tu pragma JSX y usar la propiedad SX para acceder a tus estilos. Y Theme UI viene con muchas características geniales como variantes, puntos de interrupción, modos de color y más. Y nuevamente, soy Paris Athena. Trabajo en G2Y y soy fundadora de Blacktech Pipeline. Y espero conocerte pronto. [♪ música reproduciéndose ♪

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Rethinking CSS - Introducing Stylex
React Finland 2021React Finland 2021
25 min
Rethinking CSS - Introducing Stylex
Top Content
CSS + superpowers - bloat. How Stylex creates a zero-cost abstraction that gives CSS superpowers.
Styles and Theming with Restyle in React Native
React Summit Remote Edition 2020React Summit Remote Edition 2020
8 min
Styles and Theming with Restyle in React Native
Top Content
Haris is talking about the newly open-sourced library Restyle (https://github.com/Shopify/restyle); how it addresses many problems and pain points developers experience when managing evolving styles and theme support (gotta have dark mode!) in a React Native app.
Zero-runtime CSS-in-TypeScript with vanilla-extract
React Finland 2021React Finland 2021
29 min
Zero-runtime CSS-in-TypeScript with vanilla-extract
Can we have themeable CSS-in-TypeScript without the runtime cost? In this talk we'll have a quick look at how this can be achieved with vanilla-extract.
Type-safe Styling for React Component Packages: Vanilla Extract CSS
React Advanced Conference 2023React Advanced Conference 2023
19 min
Type-safe Styling for React Component Packages: Vanilla Extract CSS
Unlock the power of type-safe styling in React component packages with Vanilla Extract CSS. Learn how to effortlessly write scalable and maintainable styles, leveraging CSS-in-Typescript. Discover the seamless integration of Vanilla Extract CSS and take your React components to the next level.
Moving on From Runtime Css-In-Js at Scale
React Summit 2023React Summit 2023
29 min
Moving on From Runtime Css-In-Js at Scale
In this talk, Siddharth shares the challenges his team faced with optimising runtime css in js (styled-components) for performance. At GitHub, there are about 4000 React components that contain styles, Siddharth dives into the reasons for rethinking styling architecture, the challenges faced and lessons learned by migrating a big application.
Gatsby v4's New Rendering Modes
React Advanced Conference 2021React Advanced Conference 2021
24 min
Gatsby v4's New Rendering Modes
Gats v4 now has SSR and a new rendering mode called DSG. Between SSG, SSR, DSG, ISR and DPR, the Jamstack has recently seen a flurry of new rendering modes that work for every use case that seemed unviable in the past. But knowing what to pick for your site or a portion of your site and what each of these really do under the hood is confusing and easy to do incorrectly.This track will clear the confusion and dive deep into each of these, discuss nuances and even peek under the hood to see how they work and what scalability and consistency promises they offer and which promises they keep.

Workshops on related topic

Intermediate Gatsby
React Summit Remote Edition 2021React Summit Remote Edition 2021
207 min
Intermediate Gatsby
Workshop
Sid Chatterjee
Sid Chatterjee
With Gats v3 out and freshly released, learn how to build modern, performant and accessible default websites from one of the maintainers of the project, Sid Chatterjee.