Semantic UI Reactを導入した

2019.04.10

導入した背景

ブログのデザインをカスタマイズするためにフレームワークを導入したかったので、普段から使い慣れているSemantic UIを導入した。Reactコンポーネント版のSemantic UI Reactがあるので、そちらを導入した。

Semantic UI

Introduction - Semantic UI React

やったこと

今回は、テーマをいじらずに、必要に応じてオーバーライドしていくスタイルで開発していこうと思ったので、公式に従って、 Semantic-UI-CSSを入れる方針で進めた。

Usage - Semantic UI React

GitHub - Semantic-Org/Semantic-UI-CSS: CSS Only distribution

bash
$ npm install -S semantic-ui-react semantic-ui-css

あとは、コンポーネントをimportして使っていく。

テーマをカスタマイズしたい場合

テーマをいじりたい場合は、Semantic-UI-LESSを使うと良さそう。

GitHub - Semantic-Org/Semantic-UI-LESS: LESS only distribution

bash
$ npm install -S less gatsby-plugin-less semantic-ui-less semantic-ui-react

このスターターを参考にすると良い。

GitHub - pretzelhands/gatsby-starter-semantic-ui: A Gatsby 2 starter with Semantic UI added on top

おわりに

徐々にページをSemantic UI Reactのコンポーネントに置き換えていっている。とにかく快適な開発環境をどんどん整えていきたい。

キクナントカ

ソフトウェアエンジニアをしています。趣味でボードゲームを制作したり、個人開発でNakamyというサービスを開発しています。詳しくはこちら