gatsby emotion tailwind starter

Gatsby Emotion Tailwind Starter

** Tenga en cuenta que esta plantilla ya no se mantiene **

Una plantilla de inicio para crear un sitio web estático de rimas. Viene preconstruido con Gatsby, emoción y viento de cola para llevarte a correr rápidamente. Inspirado en el blog Gatsby-Starter

Demo alojada en Netlify.

Características

• React Static Generator Gatsbyjs V2
• Emoción de la biblioteca CSS-in-JS para sus componentes de estilo
• CSS Utility Framework Tailwind CSS para agregar rápidamente estilo
• Soporte fuera de línea
• Aplicación web progresiva
• Imágenes de carga perezosa con soporte de webp
• Mapa del mapa del sitio generado por auto
• Variante CSS de viento de cola oscura

Empezando

 # download the template zip via dropdown or
git clone https://github.com/chrismwilliams/gatsby-emotion-tailwind-starter.git

Empezar a desarrollar

Navegar por el directorio de plantillas

 # install dependencies
npm install
# yarn
yarn

# development with hot re-load
npm run dev
# yarn
yarn dev

# build for production
npm run build
# yarn
yarn build

Usando emoción y viento de cola

Con el viento de cola de la biblioteca de utilidad CSS puede agregar rápidamente estilos y diseño receptivo, todo sin tener que escribir CSS. La emoción le permite nombrar y estilo elementos dentro de sus archivos JS.

 /*
  import tw, { styled } from 'twin.macro';

  ** Creating a styled div, centering children via flex-box **
*/

const StyledDiv = styled . div `
  ${ tw `flex justify-center items-center` }
`

/*
  ** Or with grid **
*/
const AltStyledDiv = tw . div `grid place-content-center place-items-center`

return (
 < >
    < StyledDiv >
      < p > I'm centred </ p >
      < p > Me too! </ p >
    </ StyledDiv >
    < AltStyledDiv >
      < p > Same here </ p >
    </ AltStyledDiv >
 </ >
) ;

Los Docs de Valor de Tail son un gran recurso para comenzar. El inicio usa Twin.Macro, que es una biblioteca fantástica e incluye muchas variantes adicionales.

Personalización

• Configuración de viento de cola. Abra el archivo tailwind.config.js para establecer sus propias preferencias y requisitos de proyectos, como puntos de descanso, colores y fuentes.

• Se utiliza un componente de diseño ( src/components/Layout.js ) para establecer un diseño predeterminado estandarizado para envolver páginas.

• Modo oscuro y ligero. Abra src/components/styled/baseStyles.js y tailwind.config.js para ver dónde/cómo se agregan las variables personalizadas CSS. También puede usar la variante oscura de Tailwinds dentro de los componentes de estilo, como se muestra en src/components/home/styled/card.js con una variante oscura, y src/components/styled/socialList.js para una variante ligera.

• Esta plantilla utiliza los tipos de letra del complemento para optimizar la entrega de fuentes. Cambiar (s) de fuente simplemente requiere instalar su fuente de tipos de letra favorita e importar a gatsby-browser.js . Recuerde agregar sus fuentes a tailwind.config.js , ya sea la matriz Fonts SANS/Serif, para usarlo con utilidades de Vaño Tail.

• El componente de SEO, tomado del blog Gatsby-Starter, que le permite agregar sus descripciones de SEO y títulos.

• Favicon. Generado automático de Gatsby-Plugin-Manifest establecido en gatsby-config.js . Reemplace el Favicon actual ( src/images/icon/logo.png ) con su propio icono 512x512