gatsby emotion tailwind starter

Gatsby Emotion Rückenwind Starter

** Bitte beachten Sie, dass diese Vorlage in nicht mehr gepflegt wurde **

Eine Starter-Vorlage zum Erstellen einer blitzschnellen statischen Website. Kommt mit Gatsby, Emotion und Rückenwind vorgefertigt, um dich schnell zum Laufen zu bringen. Inspiriert vom Gatsby-Starter-Blog

Demo veranstaltet auf Netlify.

Merkmale

• Reagieren statischer Generator Gatsbyjs v2
• CSS-in-JS-Bibliothek Emotionen für Ihre gestalteten Komponenten
• CSS Utility Framework Rückenwind -CSS, um schnell Stil hinzuzufügen
• Offline -Unterstützung
• Progressive Web -App
• Faules Laden von Bildern mit WebP -Unterstützung
• Automatisch generierter Sitemap
• Dunkle Modus Railwind CSS Variante

Erste Schritte

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

Sich entwickeln

Navigieren Sie in das Vorlagenverzeichnis

 # 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

Verwenden Sie Emotion & Rückenwind

Mit dem Tailwind der CSS Utility Library können Sie schnell Stile und reaktionsschnelles Design hinzufügen, ohne CSS schreiben zu müssen. Mit Emotion können Sie Elemente in Ihren JS -Dateien benennen und stylen.

 /*
  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 >
 </ >
) ;

Die Rückenwind -Dokumente sind eine großartige Ressource, um Ihnen den Einstieg zu erleichtern. Der Starter verwendet Twin.macro, eine fantastische Bibliothek und enthält viele zusätzliche Varianten.

Anpassung

• Rückenwindkonfiguration. Öffnen Sie die Datei tailwind.config.js , um Ihre eigenen Projekteinstellungen und -anforderungen wie Bruchpunkte, Farben und Schriftarten festzulegen.

• Eine Layoutkomponente ( src/components/Layout.js ) wird zum Einstellen eines standardisierten Standardlayouts für Wickeln verwendet.

• Dunkler und Lichtmodus. Öffnen Sie src/components/styled/baseStyles.js und tailwind.config.js um zu sehen, wo/wie CSS -benutzerdefinierte Variablen hinzugefügt werden. Sie können auch die dunkle Variante von Tailwinds in gestalteten Komponenten verwenden, wie in src/components/home/styled/card.js mit einer dunklen Variante und src/components/styled/socialList.js für eine helle Variante gezeigt.

• Diese Vorlage verwendet die Plugin -Schriftarten, um die Schriftart zu optimieren. Um Schriftarten zu ändern, muss lediglich die Installation Ihrer bevorzugten Schriftartinformation und das Importieren von gatsby-browser.js installiert werden. Denken Sie daran, Ihre Schriftart (s) in tailwind.config.js , entweder das Sans/Serifen -Array, um sie mit Rückenwind -Dienstprogrammen zu verwenden.

• SEO-Komponente, entnommen von Gatsby-Starter-Blog, sodass Sie Ihre SEO-Beschreibungen und Titel hinzufügen können.

• Favicon. Automatisch generiert von Gatsby-Plugin-Manifest in gatsby-config.js . Ersetzen Sie das aktuelle Favicon ( src/images/icon/logo.png ) durch Ihr eigenes 512x512 -Symbol