サイト制作に関するメモ書き

HOME > HTML・CSS > CSSフレームワークのMilligramを使ってみる

CSSフレームワークのMilligramを使ってみる

CSSフレームワークのMilligramを使ってみます。

使い方

公式サイトからダウンロードします。

ダウンロードしたファイルを解凍後、distディレクトリ内のmilligram.min.cssを使用します。
milligram.min.cssと合わせて、Robotonormalize.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>

milligram.cssのデモページ
 

Typography

h1~h6のタイトルタグを使ってみます。

HTML

<h1>Heading</h1>
<h2>Heading</h2>
<h3>Heading</h3>
<h4>Heading</h4>
<h5>Heading</h5>
<h6>Heading</h6>

Typographyのデモページ
 

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>

Blockquotesのデモページ
 

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">

Buttonsのデモページ
 

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>

Listsのデモページ
 

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>

Formsのデモページ
 

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>

Tablesのデモページ
 

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>

Gridsのデモページ
 

.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>

Gridsのデモページ2
 

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>

Codesのデモページ
 

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;
	}
}

Mobile Firstのデモページ
 

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";
}

Embed Fontのデモページ
 

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フレームワークなので、実装のベースとして使うとよさそうです。
 

【参考サイト】

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

▲PAGE TOP