CSSフレームワークのMilligramを使ってみます。
使い方
公式サイトからダウンロードします。
ダウンロードしたファイルを解凍後、distディレクトリ内のmilligram.min.cssを使用します。
milligram.min.cssと合わせて、Robotoとnormalize.cssを読み込ませます。
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic"> <link rel="stylesheet" href="./normalize.css"> <link rel="stylesheet" href="./milligram.min.css">
いくつか簡単に使ってみます。
HTML
<a href="">Anchor</a> <em>Emphasis</em> <small>Small</small> <strong>Strong</strong> <u>Underline</u>
Typography
h1～h6のタイトルタグを使ってみます。
HTML
<h1>Heading</h1> <h2>Heading</h2> <h3>Heading</h3> <h4>Heading</h4> <h5>Heading</h5> <h6>Heading</h6>
Blockquotes
引用を表すblockquoteを使ってみます。
HTML
<blockquote> <p>Milligram provides a minimal setup of styles for a fast and clean starting point. Just it! Only 2kb gzipped! It's not about a UI framework. Specially designed for better performance and higher productivity with fewer properties to reset resulting in cleaner code. Hope you enjoy!</p> </blockquote>
Buttons
Buttonsは3種類あり、デフォルトでは色付きのボタン、.button-outlineを付与するとアウトライン付き、.button-clearはクリアになります。
HTML
<a class="button" href="#">Default Button</a> <button class="button button-outline">Outlined Button</button> <input class="button button-clear" type="submit" value="Clear Button">
Lists
リストタグを使ってみます。
HTML
<ul> <li>Unordered list item 1</li> <li>Unordered list item 2</li> </ul> <ol> <li>Ordered list item 1</li> <li>Ordered list item 2</li> </ol> <dl> <dt>Description list item 1</dt> <dd>Description list item 1.1</dd> </dl>
Forms
form関連のタグを使ってみます。
HTML
<form>
<fieldset>
<label for="nameField">Name</label>
<input type="text" placeholder="CJ Patoilo" id="nameField">
<label for="ageRangeField">Age Range</label>
<select id="ageRangeField">
<option value="0-13">0-13</option>
<option value="14-17">14-17</option>
<option value="18-23">18-23</option>
<option value="24+">24+</option>
</select>
<label for="commentField">Comment</label>
<textarea placeholder="Hi CJ …" id="commentField"></textarea>
<div class="float-right">
<input type="checkbox" id="confirmField">
<label class="label-inline" for="confirmField">Send a copy to yourself</label>
</div>
<input class="button-primary" type="submit" value="Send">
</fieldset>
</form>
Tables
tableタグを使ってみます。
HTML
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Height</th>
<th>Birthday</th>
</tr>
</thead>
<tbody>
<tr>
<td>Aoba Suzukaze</td>
<td>18</td>
<td>149</td>
<td>2/2</td>
</tr>
<tr>
<td>Yun Iijima</td>
<td>21</td>
<td>151</td>
<td>12/6</td>
</tr>
<tr>
<td>Koh Yagami</td>
<td>25</td>
<td>164</td>
<td>8/2</td>
</tr>
</tbody>
</table>
Grids
グリッドレイアウトを使ってみます。
HTML
<div class="container">
<div class="row">
<div class="column">.column</div>
<div class="column">.column</div>
<div class="column">.column</div>
<div class="column">.column</div>
</div>
<div class="row">
<div class="column">.column</div>
<div class="column column-50 column-offset-25">.column column-50 column-offset-25</div>
</div>
</div>
.column column-Xの形で幅の割合を指定できます。
HTML
<div class="container">
<div class="row">
<div class="column column-10">
<span>10%</span>
</div>
</div>
<div class="row">
<div class="column column-20">
<span>20%</span>
</div>
</div>
<div class="row">
<div class="column column-25">
<span>25%</span>
</div>
</div>
<div class="row">
<div class="column column-33">
<span>33%</span>
</div>
</div>
<div class="row">
<div class="column column-40">
<span>40%</span>
</div>
</div>
<div class="row">
<div class="column column-50">
<span>50%</span>
</div>
</div>
<div class="row">
<div class="column column-60">
<span>60%</span>
</div>
</div>
<div class="row">
<div class="column column-67">
<span>67%</span>
</div>
</div>
<div class="row">
<div class="column column-75">
<span>75%</span>
</div>
</div>
<div class="row">
<div class="column column-80">
<span>80%</span>
</div>
</div>
<div class="row">
<div class="column column-90">
<span>90%</span>
</div>
</div>
<div class="row">
<div class="column">
<span>100%</span>
</div>
</div>
</div>
Codes
Codesを使ってみます。
HTML
<p>Just wrap anything in a <code>code</code> and it will appear like this.</p>
<pre><code>.milligram {
color: #9b4dca;
}
</code></pre>
Mobile First
Milligramでは以下のようなブレークポイントを推奨しているようです。
HTML
<div class="sample">sample</div>
CSS
/* ベース(スマホ向け) */
.sample {
background: red;
}
/* スマホ(640px)以上 */
@media (min-width: 40.0rem) {
.sample {
background: blue;
}
}
/* タブレット(1280px)以上 */
@media (min-width: 80.0rem) {
.sample {
background: green;
}
}
/* デスクトップ(1920px)以上 */
/* Larger than desktop screen */
@media (min-width: 120.0rem) {
.sample {
background: orange;
}
}
Embed Font
Milligramはデフォルトではfont-familyにRobotoを使用しているので、はんなり明朝を使ってみます。
<link href="https://fonts.googleapis.com/earlyaccess/hannari.css" rel="stylesheet">
HTML
<p>はんなり明朝のテスト。</p>
CSS
body {
font-family: "Hannari";
}
Extending The Inheritances
ボタンのスタイルを拡張してみます。
HTML
<h1>button-black</h1> <a class="button button-black" href="#">Default Button</a> <a class="button button-outline button-black" href="#">Outlined Button</a> <a class="button button-clear button-black" href="#">Clear Button</a> <h1>button-small</h1> <a class="button button-small" href="#">Default Button</a> <a class="button button-outline button-small" href="#">Outlined Button</a> <a class="button button-clear button-small" href="#">Clear Button</a> <h1>button-large</h1> <a class="button button-large" href="#">Default Button</a> <a class="button button-outline button-large" href="#">Outlined Button</a> <a class="button button-clear button-large" href="#">Clear Button</a>
CSS
/* Custom color */
.button-black {
background-color: black;
border-color: black;
}
.button-black.button-clear,
.button-black.button-outline {
background-color: transparent;
color: black;
}
.button-black.button-clear {
border-color: transparent;
}
/* Custom size */
.button-small {
font-size: .8rem;
height: 2.8rem;
line-height: 2.8rem;
padding: 0 1.5rem;
}
.button-large {
font-size: 1.4rem;
height: 4.5rem;
line-height: 4.5rem;
padding: 0 2rem;
}
Extending The Inheritancesのデモページ
最小限のスタイルが用意しているCSSフレームワークなので、実装のベースとして使うとよさそうです。
【参考サイト】
コメントが承認されるまで時間がかかります。