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

2017.07.23

HTML・CSS

CSSフレームワーク

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>

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

【参考サイト】

Milligram – A minimalist CSS framework.

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

使い方

HTML

Typography

HTML

Blockquotes

HTML

Buttons

HTML

Lists

HTML

Forms

HTML

Tables

HTML

Grids

HTML

HTML

Codes

HTML

Mobile First

HTML

CSS

Embed Font

HTML

CSS

Extending The Inheritances

HTML

CSS

コメントを残すコメントをキャンセル

Category

Tag

Recent

2024年4月
日	月	火	水	木	金	土
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30

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

使い方

HTML

Typography

HTML

Blockquotes

HTML

Buttons

HTML

Lists

HTML

Forms

HTML

Tables

HTML

Grids

HTML

HTML

Codes

HTML

Mobile First

HTML

CSS

Embed Font

HTML

CSS

Extending The Inheritances

HTML

CSS

関連記事

Frow CSSを使ってみる

無料プランでAdobe FontsをWebフォントとして使用する

WebフォントサービスのTypeSquareを使ってみる

capture属性を使ってみる

font-size 10px未満が適用されるかどうか試してみる

コメントを残す コメントをキャンセル

Category

Tag

Recent

コメントを残すコメントをキャンセル