今回、ミニマルなCSSフレームワーク Milligram を使って、個人事業主としてのWebサイトを作ってみたのですが、ある程度使い方を把握できたと思うので、紹介したいと思います。

特徴

高速でクリーンに開発をスタートするための、最低限のスタイルだけを提供するというスタンスで作られたCSSフレームワークです。

  • 軽量（gzip圧縮で2KB）
  • 必要最低限のコンポーネント群
  • テンプレートやテーマなどが存在しない
  • ドキュメントも少なく、学習量も少ない

使い方

インストール

インストール方法は、 こちら にあります。

npm/yarnなどを使う方法と、

bower install milligram
npm install milligram
yarn add milligram

CDN を利用する方法があります。

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.4.1/milligram.css">

HTMLタグだけでスタイルが適用されるもの

以下のコンポーネントは、 classを指定せずに、HTMLタグを記載するだけでスタイルが適用されます。

Buttons

ボタンは、以下のようにclassを指定する必要があります。
disabled・hover・focus時のエフェクトを提供してくれてます。
ただし、デザインのバリエーションが少ないので、実際にはカスタマイズが必要になってくると思います。

<a class="button" href="#">Default Button</a>
<a class="button" href="#" disabled>Default Button</a>
<button class="button button-outline">Outlined Button</button>
<input class="button button-clear" type="submit" value="Clear Button">

実際、自分のサイトでも、以下のようにMilligramのスタイルを上書きして使いました。

/* overwrite milligram */
a, .button.button-outline {
  color: #4dacca;
}
.button {
  border-color: #4dacca;
}

Grids

個人的には、Milligramを導入する最大のメリットは、このグリッドシステムを手軽に導入できることだと感じています。
使い方はとても簡単で、container > row > column の順に記述していき、column-25のように幅を百分率で指定したり、column-offset-25のようにオフセットを指定したりするだけです。
これだけで、画面幅に応じてよしなに狭くしたり、縦並びにしたりしてくれます。

<div class="container">
  <div class="row">
    <div class="column">25</div>
    <div class="column">25</div>
    <div class="column">25</div>
    <div class="column">25</div>
  </div>
  <div class="row">
    <div class="column column-20">20</div>
    <div class="column column-20">20</div>
    <div class="column column-60">60</div>
  </div>
  <div class="row">
    <div class="column column-25">25</div>
    <div class="column column-50 column-offset-25">50 with offset</div>
  </div>
</div>

Utilities

少しだけ機能的な class も提供されてるらしいです。
といっても、float-leftとfloat-rightだけみたいです。テキストを回り込ませたい時に使っても良さそうです。

<div class="clearfix">
  <div class="float-left">float-left</div>
  <p>
  We, the Japanese people, acting through our duly elected representatives in the National Diet, determined that we shall secure for ourselves and our posterity the fruits of peaceful cooperation with all nations and the blessings of liberty throughout this land, and resolved that never again shall we be visited with the horrors of war through the action of government, do proclaim that sovereign power resides with the people and do firmly establish this Constitution. Government is a sacred trust of the people, the authority for which is derived from the people, the powers of which are exercised by the representatives of the people, and the benefits of which are enjoyed by the people. This is a universal principle of mankind upon which this Constitution is founded. We reject and revoke all constitutions, laws, ordinances, and rescripts in conflict herewith.
  </p>
</div>

Tips

  • Milligram はモバイルファーストで設計されていて、@mediaの外側のスタイルは全てのデバイスで適用される。これにより小さなデバイス向けの無駄に多いスタイル定義を防いでいる
  • Milligram は以下のブレークポイントを使っているので、カスタムする場合もここでブレークするとよさそう 
    @media (min-width: 40.0rem) { ... }
@media (min-width: 80.0rem) { ... }
@media (min-width: 120.0rem) { ... }
  • FontはRobotoを使ってる。他のGoogle Fontを指定することも可能。その場合は、以下のように指定する。 
    <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto+Slab">
<style>
body {
    font-family: 'Roboto Slab', serif;
}
</style>
  • Browser Support は以下の通り
    • Brave latest
    • Chrome latest
    • Edge latest
    • Firefox latest
    • Opera latest
    • Safari latest

実例

  • Milligramドキュメント
    • これを devtools で眺めるのが一番分かりやすいです。
  • ショーケース
    • いくつかのサイトが紹介されていますが、Milligram 以外のスタイル定義が多く、どこが Milligram 起因か分かりにくかったです
  • 今回作ったサイト
    • 一つのhtmlファイルだけなので、devtools で眺めればわかると思います。
    • app-xxxみたいなid／classが、個別に定義したもので、それ以外は Milligram 由来です

所感

今回 Milligram を使ってランディングページを作ってみたのですが、Milligramの良いところは、以下の二点に集約されると思います。

  • シンプルなグリッドシステム
  • htmlタグと最低限のclass指定だけで、統一感のあるデザインとhover／focus／disabledなどエフェクトを得られる

一方で、提供されているコンポーネントやデザインバリエーションが少ないので、自分である程度カスタマイズする必要があるのは間違いなく、既存の部品だけでやりたい、、というケースには向かないかな、と思います。
そういうケースでは、無難に BootStrap あたりを使うのが良いと思います。

関連記事
  1. PostgreSQLにおけるjson/jsonb型の取り扱い
  2. pythonでスクレイピングする際に利用するライブラリ比較
  3. GCR（Google Container Registry）を使ってみる
  4. Scrapyの使い方
  5. AirflowでDockerOperatorを動かす