【UIkit×Webpack】またブログのデザインを変えました

【UIkit×Webpack】またブログのデザインを変えました

みなさん、こんにちは!

投稿が遅れてしまい申し訳ございません。。。
当ブログのデザインに飽きてしまい、WordPressテーマを作成していたら遅くなってしまいました笑。

フロントエンドを構築する時によく「bootstrap」を活用していたのですが、それではよくあるサイト止まりになってしまいます。

なので違うフレームワークを探していたところ「UIkit」に出会いました。

UIkitでフロントエンドを構築

UIkitのいいところ

bootstrapではなくUIkitを選んだ理由としてはやはり見た目です。
bootstrapが決して悪いわけではないのですが、どうしても少し簡素になってしまいます。

UIkit
bootstrap

どのコンポーネントをとって見ても、結構UIkitのほうがイケてることが多いです。

あとはレイアウト用のコンポーネントが多いです。
タイルレイアウトやセクション用の上下パディングがあったりと、目的のレイアウトが大概あります。

UIkitとWebpackの導入方法

私は主にフロントエンドの開発は「Webpack」を使って管理しています。

webpackとはウェブコンテンツを構成するファイルをまとめてしまうツールです。一番多い使い方は、複数のJavaScriptを1つにまとめることでしょう。複数のJavaScriptをまとめるのは、いろんな利点があります。

引用元:iCS.media

Webpackの導入は下記の記事を参考にして導入しています。

最新版で学ぶwebpack 4入門 JavaScriptのモジュールバンドラ

また今回は主にUIkitのSassをカスタマイズしていく開発方法なのでWebpackでSassを使えるように下記の記事も参考にしました。

最新版で学ぶwebpack 4入門 スタイルシート(CSSやSass)を取り込む方法

Webpckの導入後、UIkitをnpmを使ってインストールします。

npm install uikit

Webpackで使用する「index.js」と「style.scss」に下記を記述し構築準備OKです!

// index.js

// Sassのインポート
import '../sass/style.scss';

// JSのインポート
import UIkit from 'uikit';
import Icons from 'uikit/dist/js/uikit-icons';

// UIkitのアイコンインポート
UIkit.use(Icons);
/* ../sass/style.scss */

/* この下にUIkitのオーバーライド用scssをインポート */

/* UIkitのインポート */
@import 'uikit/src/scss/mixins-theme.scss';
@import 'uikit/src/scss/uikit-theme.scss';

/* この下にオリジナルのscssをインポート */