gatsby theme superstylin

¿Tema Superstylin?

¿Un tema de Gatsby con estilo?

¿Qué es la superestilina?

Superstylin' es un tema de Gatsby que utiliza componentes con estilo como forma principal de diseñar su sitio Gatsby; proporciona una estructura fácil de iniciar para que pueda comenzar a utilizar su primer sitio con tecnología Gatsby.

Acerca de los componentes con estilo

En pocas palabras, los componentes con estilo son una forma de agregar su CSS en su js, funciona creando un componente y dándole estilo, luego obtendrá un componente con estilo, es realmente simple y muy poderoso.

Beneficios de usar componentes con estilo

Al usar tu CSS en tu js, obtienes el poder de JavaScript para agregar más funcionalidad a la forma en que declaras tus estilos, pero espera, ¡eso no es todo!

A continuación se muestran algunas lecturas interesantes para descubrir más a fondo los beneficios de los componentes con estilo.

• Componentes con estilo: aplicación de las mejores prácticas en sistemas basados ​​en componentes
• ¿La magia detrás? componentes con estilo

Muchas gracias a Glen Maddern y Max Stoiber por crear componentes con estilo.

También muchas gracias a Kyle Mathews por iniciar y mantener Gatsby.

Estilos en línea vs CSS en JS

Lea esta excelente publicación sobre por qué los estilos en línea! == css-in-js de Max Stoiber.

¿Características de Superstylin?

• ¿Usar css-in-js con la magia de los componentes con estilo?
• Utiliza GraphQL integrado de Gatsby para buscar y ordenar publicaciones de blog
• Fácil de personalizar y comenzar con su propio sitio Gatsby
• Perfecto para sitios, blogs o ambos
• Estructura de proyecto súper simple para que pueda comenzar a trabajar rápidamente

Instalación

Dentro de tu motor de arranque:

$ yarn add gatsby-theme-superstylin

Y finalmente, agrega el tema en tu gatsby-config.js :

 module . exports = {
  plugins : [ 'gatsby-theme-superstylin' ]
}

Vea la demostración para ver un ejemplo.

Licencia

Licenciado bajo la Licencia MIT, Copyright © 2018 Enrique Benítez

Ver licencia para más información.