gatsby theme superstylin

スーパースタイリンのテーマ ??

スタイリッシュなギャツビーのテーマ ?

スーパースタイリンとは何ですか？

Superstylin' は、Gatsby サイトのスタイルを設定する主な方法としてスタイル付きコンポーネントを使用する Gatsby テーマです。初めての Gatsby サイトを立ち上げて実行するための、簡単に始められる構造を提供します。

スタイル付きコンポーネントについて

簡単に言うと、styled-components は JS に CSS を追加する方法です。コンポーネントを作成してスタイルを設定すると、styled-components が得られます。これは非常にシンプルで非常に強力です。

スタイル付きコンポーネントを使用する利点

JS で CSS を使用すると、JavaScript の力を利用してスタイルを宣言する方法にさらに機能を追加できます。しかし、待ってください。それだけではありません。

以下は、スタイル付きコンポーネントの利点をさらに理解するための興味深い読み物です。

• スタイル付きコンポーネント: コンポーネントベースのシステムでのベスト プラクティスの適用
• 背後にある魔法?スタイル付きコンポーネント

スタイル付きコンポーネントを作成してくれた Glen Maddern と Max Stoiber に多大な感謝を申し上げます。

また、Gatsby ?? の立ち上げとメンテナンスを行ってくれた Kyle Mathews にも多大な感謝を申し上げます。

JS のインライン スタイルと CSS の比較

なぜ inline-styles !== css-in-js なのかについては、Max Stoiber によるこの優れた投稿を読んでください。

スーパースタイリンの特徴は？

• styled-components の魔法で css-in-js を使用しますか?
• Gatsby の組み込み GraphQL を使用してブログ投稿を取得して並べ替えます
• カスタマイズが簡単で、独自の Gatsby サイトを始めることができます。
• サイト、ブログ、またはその両方に最適
• すぐに起動して実行できる非常にシンプルなプロジェクト構造

インストール中

スターターの内部:

$ yarn add gatsby-theme-superstylin

最後に、 gatsby-config.jsにテーマを追加します。

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

例についてはデモを参照してください。

ライセンス

MIT ライセンスに基づいてライセンスされています。著作権 © 2018 Enrique Benitez

詳細については、ライセンスを参照してください。