gatsby emotion tailwind starter

Gatsby Emotion Tailwind Starter

** Veuillez noter que ce modèle n'est plus maintenu **

Un modèle de démarrage pour créer un site Web statique rapide éclair. Vient pré-construit avec Gatsby, l'émotion et le vent arrière pour vous faire fonctionner rapidement. Inspiré par le blog de Gatsby-Starter

Demo hébergé sur Netlify.

Caractéristiques

• Réagir le générateur statique Gatsbyjs v2
• Émotion de la bibliothèque CSS-in-JS pour vos composants stylisés
• CSS Frame-utilité CSS CSS pour ajouter rapidement le style
• Support hors ligne
• Application Web progressive
• Des images de chargement paresseux avec la prise en charge de WebP
• Sitemap généré automatiquement
• Variante CSS en mode Dark Mode

Commencer

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

Commencer à développer

Naviguer dans le répertoire du modèle

 # 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

Utiliser l'émotion et le vent arrière

Avec le vent arrière de la bibliothèque utilitaire CSS, vous pouvez rapidement ajouter des styles et une conception réactive, le tout sans avoir à écrire de CSS. L'émotion vous permet de nommer et de styliser des éléments dans vos fichiers 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 >
 </ >
) ;

Les documents de vent arrière sont une excellente ressource pour vous aider à démarrer. Le démarreur utilise Twin.macro qui est une bibliothèque fantastique et comprend de nombreuses variantes supplémentaires.

Personnalisation

• Configuration du vent arrière. Ouvrez le fichier tailwind.config.js pour définir vos propres préférences et exigences de projet, telles que les points de rupture, les couleurs et les polices.

• Un composant de disposition ( src/components/Layout.js ) est utilisé pour définir une disposition par défaut standardisée pour envelopper les pages.

• Mode sombre et clair. Ouvrez src/components/styled/baseStyles.js et tailwind.config.js pour voir où / comment les variables personnalisées CSS sont ajoutées. Vous pouvez également utiliser la variante sombre de Tailwinds dans les composants stylisés, comme indiqué dans src/components/home/styled/card.js avec une variante sombre, et src/components/styled/socialList.js pour une variante légère.

• Ce modèle utilise les polices de caractères du plugin pour optimiser la livraison de polices. La modification des polices nécessite simplement d'installer votre Fonde de caractères préférée et d'importer dans gatsby-browser.js . N'oubliez pas d'ajouter vos polices dans tailwind.config.js , soit le tableau des polices sans / serif, afin de l'utiliser avec des utilitaires de vent arrière.

• Composant de référencement, tiré de Gatsby-Starter-blog, vous permettant d'ajouter vos descriptions et titres de référencement.

• Favicon. Généré automatiquement de Gatsby-Plugin-Manifest Set dans gatsby-config.js . Remplacez le favicon actuel ( src/images/icon/logo.png ) par votre propre icône 512x512