gatsby theme superstylin

Superstylin-Theme ??

Ein Gatsby-Thema mit Stil?

Was ist Superstylin?

Superstylin' ist ein Gatsby-Theme, das gestaltete Komponenten als Hauptmethode zum Gestalten Ihrer Gatsby-Site verwendet. Es bietet eine einfach zu startende Struktur, mit der Sie mit Ihrer ersten Gatsby-basierten Site loslegen können.

Über gestaltete Komponenten

Einfach ausgedrückt ist Styled-Components eine Möglichkeit, Ihr CSS in Ihr JS einzufügen. Es funktioniert, indem Sie eine Komponente erstellen und diese formatieren, dann erhalten Sie eine Styled-Komponente, es ist wirklich einfach und sehr leistungsstark.

Vorteile der Verwendung von Styled-Components

Durch die Verwendung Ihres CSS in Ihrem JS erhalten Sie die Leistungsfähigkeit von Javascript, um der Art und Weise, wie Sie Ihre Stile deklarieren, mehr Funktionalität hinzuzufügen, aber warten Sie, das ist noch nicht alles!

Nachfolgend finden Sie einige interessante Lektüren, um die Vorteile von Styled-Components näher kennenzulernen.

• Styled-Components: Best Practices in komponentenbasierten Systemen durchsetzen
• Die Magie dahinter? gestylte Komponenten

Ein großes Dankeschön an Glen Maddern und Max Stoiber für die Erstellung der Styled-Komponenten ??.

Ein großes Dankeschön geht auch an Kyle Mathews für den Start und die Betreuung von Gatsby.

Inline-Stile vs. CSS in JS

Lesen Sie diesen hervorragenden Beitrag über „Warum inline-styles !== css-in-js“ von Max Stoiber.

Merkmale von Superstylin ?

• CSS-in-JS mit der Magie von Styled-Components verwenden?
• Verwendet das in Gatsby integrierte GraphQL zum Abrufen und Sortieren von Blogbeiträgen
• Einfach anzupassen und mit Ihrer eigenen Gatsby-Site zu beginnen
• Perfekt für Websites, Blogs oder beides
• Super einfache Projektstruktur, damit Sie schnell einsatzbereit sind

Installieren

In Ihrem Starter:

$ yarn add gatsby-theme-superstylin

Und schließlich fügen Sie das Thema in Ihre gatsby-config.js ein:

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

Ein Beispiel finden Sie in der Demo.

Lizenz

Lizenziert unter der MIT-Lizenz, Copyright © 2018 Enrique Benitez

Weitere Informationen finden Sie in der Lizenz.