CSSフレームワークといえば、Bootstrapが一番有名で広く使われています。
ただしよく聞かれるのは、デザインがイケてないという声です。Bootstrapをそのまま使うと、「Bootstrap感」が出てしまうのです。つまり、分かる人には「あ、これBootstrapだな」と分かってしまい、知らない人にとっても「何だかよく見かけるデザイン」になってしまうのです。
そのため、表に出すページはデザインのカスタマイズが必要になり、結局フレームワークを使わない方が早かった、となることも……。
Bootstrapに劣らない使い勝手で、かつデザインが美しいフレームワークを探したところ、UIkitに行き当たりました。
Webインターフェースを開発するための、フロントエンド向けフレームワークです。Bootstrapと同じくレスポンシブ対応で、グリッドシステムもあります。
当サイトもUIkitを採用しています。
カードなんかのコンポーネントも見ての通り、モダンでスタイリッシュですね。
ボタンなんかはこの見た目。
ナビゲーションメニュー。
プロフィール表示やコメント欄なんかに使えるやつ。
数あるCSSフレームワークの中でも、UIkitが一番美しいのではないでしょうか。
特に余白へのこだわりを感じます。どのコンポーネントも余裕のあるpaddingがデフォルトになっており、そのおかげで、洗練された印象に見えます。
CSSを特に編集しなくても、UIkitを適用しただけでオシャレなサイトができて楽なのが、一番のポイントです。
これもBootstrapと同じです。
UIkitにjQueryは必要ありません。脱jQueryしたいと思っている方にもお勧めです。
Sassを使うと、メインカラーやサブカラーを変数で簡単に変更できます。デフォルトで用意されている色を好きな色に上書きできるので便利です。
他にも既定の余白、フォントサイズ、ブレークポイントなどを上書きできます。
デザインはデフォルトの状態でほぼ完成されているので、色を変えるだけでも十分なくらいです。
一番シンプルな導入方法。<head>内に以下を記述するだけ。
<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.6.5/dist/css/uikit.min.css" />
<!-- UIkit JS -->
<script src="https://cdn.jsdelivr.net/npm/uikit@3.6.5/dist/js/uikit.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/uikit@3.6.5/dist/js/uikit-icons.min.js"></script>
いくつか方法があります。
githubリポジトリをクローンしてもよし。
git clone git://github.com/uikit/uikit.git
zipをダウンロードしてもよし。
他の方法もこちらに載っています。
ダウンロードしたら、この三つを<head>で読み込みます。(パスはファイルを置いた場所に合わせて自由に変えてください)
<link rel="stylesheet" href="css/uikit.min.css" />
<script src="js/uikit.min.js"></script>
<script src="js/uikit-icons.min.js"></script>
UIkitをSassと合わせて導入してみたところ、とても快適でした。※Sassについての説明はここでは省力します。
UIkitでSassを使うには、CDNではなくダウンロード版を使います。ダウンロードしたパッケージの中に、uikit/src/scss/ というフォルダがあるので、cssではなくscssフォルダを使います。
まず、UIkitをインポートするためのメインのscssファイルを一つ用意します。例: sass site.scss > site.css
そのファイル中で、以下の順番でインポートしていきます。
// 1. UIkitの変数を自分でカスタムする場合、ここで上書きする
$global-link-color: #DA7D02;
// 2. デフォルトの変数とmixinをインポートする
@import "uikit/src/scss/variables-theme.scss";
@import "uikit/src/scss/mixins-theme.scss";
// 3. 自分でmixinをカスタムする場合、ここで上書きする
@mixin hook-card() { color: #000; }
// 4. UIkitをインポートする
@import "uikit/src/scss/uikit-theme.scss";
完了!
インポートしたら変数をカスタマイズしてみましょう。
UIkitのデフォルト変数一覧は、/src/scss/components/variables.scss に載っています。
たとえば $global-link-color はリンクの色です。他にも変えたい色があれば、上記の1番に記述して上書きしましょう。