技術検証のためにちょっとしたWebアプリを作ってるんですが、UIを組むのにゼロからデザインを作るのがめんどくさいのでCSSフレームワークを使うことに。いつもだったらBootstrapを使うんですけど、なんかそこまでじゃないんだよな〜それにBootstrap感マジ嫌いなんだよなーということで、別のフレームワークを使うことに。
色々探してたら超軽量なCSSフレームワーク「Milligram」を見つけたので試したところ、なんかいい感じだったので紹介します。
目次
とにかく軽い
「A minimalist CSS framework」のキャッチコピーをうたっている通り、軽い。軽いです。なんとOnly 2kb gzipped!
使い方
Google Web FontsのRobotoと、normalize.cssを組み合わせて使います。
CDNで使う場合はこれを<head>の中に書けばOK。
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic"> <link rel="stylesheet" href="//cdn.rawgit.com/necolas/normalize.css/master/normalize.css"> <link rel="stylesheet" href="//cdn.rawgit.com/milligram/milligram/master/dist/milligram.min.css">
ちなみに今回はRailsで作っているので、gemで入れました。
# Milligram gem 'milligram'
主な特徴
Webフォントの「Roboto」がデフォ
タイポグラフィにWebフォントの「Roboto」が設定されています。なので英語だと文字がわりと綺麗な感じで出ます。
キーカラーは紫
確か今年の流行カラー？って紫でしたよね？違ったかな。
全体的に紫です。
参考
| 色見本帳の作成で、世界的に知られているパントン（PANTONE）社が、2018年の流行カラー、すみれ色「ウルトラ・バイオレット」（Ultra Violet 18-3838）を発表しました。独創的で想像力豊かで、未来への道を切り開くカラーリングが特徴となっています。 2018年流行カラー決定！すみれ色「Ultra Violet ウルトラ・バイオレット」を使った... - PhotoshopVIP |
ボタンは3種
塗りボタン・枠ボタン・透明ボタンの３つが用意されています。
フォームもいい感じでキレイ
最低限のインタラクションデザインが備わってるので、特になんもしなくてもいい感じになります
グリッドレイアウト
グリッドレイアウトはCSSのFlexible Boxで実装されてます。書き方もめっちゃ簡単。
Floatをいい感じにしてくれるやつ
<div class="clearfix"> <div class="float-left"></div> <div class="float-right"></div> </div>
コレ書くだけでfloatいい感じにしてくれる
ささっと作ってみたのがコチラ
まだ作り途中なんですけどこんな感じ
あんまりCSS書かないでもいい感じにキレイにできました。
詳しくはコチラ
| Milligram - A minimalist CSS framework. Milligram - A minimalist CSS framework. - Milligram - A minimalist CSS framework. |
なかなかいい感じでした。サクッとプロトタイプ作るんならコレぐらいがちょうどいいかも。