Milligram CSS framework

Milligram CSSフレームワークの使い方をご紹介します。このページもMilligramを使って作られていますので、そのままサンプルとなっています。ただし、見やすさを考慮して、HTMLコードに関してはシンタックスハイライターPrismも使用しています。

Milligram
公式サイト https://milligram.io/
開発者 CJ Patoilo
ライセンス MIT
グリッド 10列
GitHub stars 9.2k
Twitter @milligramcss
Milligram v1.4.1
モジュールサイズ
milligram.min.css 8.8KB
Normalize.css v8.0.1
モジュールサイズ
mormalize.css 5.99KB

CDN template

Milligramを使うには、CSSをインポートします。CSSはCDN (Contents Delivery Network) を通じてインポートすることもできます。

Milligramはnormalize.cssをベースにしているので、これもインポートします。

MilligramはGoogle fontsのRobotoを使用することを推奨しています。Google fontsを使用しなくてもMilligramを使用できますが、WindowsやMac、AndroidなどのOSによってフォントのデザインが異なります。Google fontsのRobotoを使用するには、フォントをインポートします。

<!DOCTYPE html>
<html>
  <head>
    <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">
  <head>
  <body>
    <!-- contents -->
  </body>
</html>

.container

<div class="container">
  Milligram is a minimalist CSS framework.
</div>
Milligram is a minimalist CSS framework.

A

<a href="#">
  Link
</a>
Link

.button

<a class="button" href="#">
  Link
</a>
Link

.button-outline

<a class="button button-outline" href="#">
  Link
</a>
Link

.button-clear

<a class="button button-clear" href="#">
  Link
</a>
Link

.column

<div class="container">
  <div class="row">
    <div class="column">first</div>
    <div class="column">second</div>
  </div>
</div>
first
second
<div class="container">
  <div class="row">
    <div class="column">first</div>
    <div class="column">second</div>
    <div class="column">third</div>
  </div>
</div>
first
second
third

.column-10

Milligram のグリッドレイアウトシステムにおいて横幅を10%にするには、column-10 クラスを指定する。

<div class="container">
  <div class="row">
    <div class="column column-10">10%</div>
    <div class="column column-90">90%</div>
  </div>
</div>
10%
90%

.column-20

Milligram のグリッドレイアウトシステムにおいて横幅を20%にするには、column-20 クラスを指定する。

<div class="container">
  <div class="row">
    <div class="column column-20">20%</div>
    <div class="column column-80">80%</div>
  </div>
</div>
20%
80%

.column-25

Milligram のグリッドレイアウトシステムにおいて横幅を25%にするには、column-25 クラスを指定する。

<div class="container">
  <div class="row">
    <div class="column column-25">25%</div>
    <div class="column column-75">75%</div>
  </div>
</div>
25%
75%

.column-33

Milligram のグリッドレイアウトシステムにおいて横幅を33%にするには、column-33 クラスを指定する。

<div class="container">
  <div class="row">
    <div class="column column-33">33%</div>
    <div class="column column-67">67%</div>
  </div>
</div>
33%
67%

.column-40

Milligram のグリッドレイアウトシステムにおいて横幅を40%にするには、column-40 クラスを指定する。

<div class="container">
  <div class="row">
    <div class="column column-40">40%</div>
    <div class="column column-60">60%</div>
  </div>
</div>
40%
60%

.column-50

Milligram のグリッドレイアウトシステムにおいて横幅を50%にするには、column-50 クラスを指定する。

<div class="container">
  <div class="row">
    <div class="column column-50">50%</div>
    <div class="column column-50">50%</div>
  </div>
</div>
50%
50%

.column-60

Milligram のグリッドレイアウトシステムにおいて横幅を60%にするには、column-60 クラスを指定する。

<div class="container">
  <div class="row">
    <div class="column column-60">60%</div>
    <div class="column column-40">40%</div>
  </div>
</div>
60%
40%

.column-67

Milligram のグリッドレイアウトシステムにおいて横幅を67%にするには、column-67 クラスを指定する。

<div class="container">
  <div class="row">
    <div class="column column-67">67%</div>
    <div class="column column-33">33%</div>
  </div>
</div>
67%
33%

.column-75

Milligram のグリッドレイアウトシステムにおいて横幅を75%にするには、column-75 クラスを指定する。

<div class="container">
  <div class="row">
    <div class="column column-75">75%</div>
    <div class="column column-25">25%</div>
  </div>
</div>
75%
25%

.column-80

Milligram のグリッドレイアウトシステムにおいて横幅を80%にするには、column-80 クラスを指定する。

<div class="container">
  <div class="row">
    <div class="column column-80">80%</div>
    <div class="column column-20">20%</div>
  </div>
</div>
80%
20%

.column-90

Milligram のグリッドレイアウトシステムにおいて横幅を90%にするには、column-90 クラスを指定する。

<div class="container">
  <div class="row">
    <div class="column column-90">90%</div>
    <div class="column column-10">10%</div>
  </div>
</div>
90%
10%

.column-100

Milligram のグリッドレイアウトシステムにおいて横幅を100%にするには、column-100 クラスを指定する。

<div class="container">
  <div class="row">
    <div class="column column-100">100%</div>
  </div>
</div>
100%

EM

<em>Emphasis</em>

Emphasis

.clearfix

Milligram でフロートをクリアするには、clearfix クラスを指定する。

<div class="clearfix">
  <div class="float-right">float-right</div>
</div>
float-right

.float-left

Milligram でフロートを左寄せにするには、float-left クラスを指定する。

<div class="clearfix">
  <div class="float-left">#1</div>
  <div class="float-left">#2</div>
</div>
#1
#2
<div class="clearfix">
  <div class="float-left">float-left</div>
  <div class="float-right">float-right</div>
</div>
float-left
float-right

.float-right

Milligram でフロートを右寄せにするには、float-left クラスを指定する。

<div class="clearfix">
  <div class="float-right">#1</div>
  <div class="float-right">#2</div>
</div>
#1
#2

BLOCKQUOTE

Milligramでは、blockquoteタグに指定するクラスはありません。

<blockquote>Blockquote</blockquote>
Blockquote

.button

<button class="button">
  Button
</button>

.button-outline

<button class="button button-outline">
  Outline
</button>

.button-clear

<button class="button button-clear">
  Clear
</button>

CODE

<code>code</code>

code

DL

Milligramでは、dlやその子要素に指定するクラスはありません。

<dl>
  <dt>Definition term</dt>
  <dd>Definition decription</dd>
</dl>
Definition term
Definition decription

INPUT

<input type="checkbox" id="cb">
<label class="label-inline" for="cb">
  同意する
</label>
<input type="radio" name="radio" id="s" checked>
<label class="label-inline" for="s">
  普通預金
</label>
<input type="radio" name="radio" id="c" checked>
<label class="label-inline" for="c">
  当座預金
</label>
<label for="first_name">
  First name
</label>
<input type="text" id="first_name" placeholder="John">

.button

<input class="button" type="submit">
<input class="button" type="reset">

.button-outline

<input class="button button-outline" type="submit">
<input class="button button-outline" type="reset">

.button-clear

<input class="button button-clear" type="submit">
<input class="button button-clear" type="reset">

SELECT

<label for="bank">
  銀行
</label>
<select id="bank">
  <option value="0001">みずほ銀行</option>
  <option value="0005">三菱UFJ銀行</option>
  <option value="0009">三井住友銀行</option>
</select>

TEXTAREA

<label for="textarea">
  Textarea
</label>
<textarea placeholder="textarea" id="textarea">
</textarea>

H1 - H6

Milligramでは、h1 - h6 に指定するクラスはありません。

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

h2

h3

h4

h5
h6

OL

Milligramでは、olやその子要素に指定するクラスはありません。

<ol>
  <li>tutorial</li>
  <li>examples
    <ol>
      <li>responsive</li>
    </ol>
  </li>
</ol>
  1. tutorial
  2. examples
    1. responsive

PRE

Milligramでは、preタグに指定するクラスはありません。

<pre>pre</pre>
pre
<pre><code>pre code</code></pre>
pre code

SMALL

<small>Small</small>
Small

STRONG

<strong>Strong</strong>
Strong

TABLE

Milligramでは、tableやその子要素に指定するクラスはありません。

<table>
  <caption>ブレークポイント</caption>
  <thead>
    <tr>
      <th>ブレークポイント</th>
      <th>寸法</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>mobile</td>
      <td>≤640px</td>
    </tr>
    <tr>
      <td>tablet</td>
      <td>>640px</td>
    </tr>
    <tr>
      <td>desktop</td>
      <td>>1280px</td>
    </tr>
    <tr>
      <td>large desktop</td>
      <td>>1920px</td>
    </tr>
  </tbody>
<table>
ブレークポイント
ブレークポイント 寸法
mobile ≤640px
tablet >640px
desktop >1280px
large desktop >1920px

U

<u>Underline</u>

Underline

UL

Milligramでは、ulやその子要素に指定するクラスはありません。

<ul>
  <li>tutorial</li>
  <li>examples
    <ul>
      <li>responsive</li>
    </ul>
  </li>
</ul>

Modal

Milligram CSSフレームワークは、Modalコンポーネントを提供していない。

Card

Milligram CSSフレームワークは、Cardコンポーネントを提供していない。

NavBar

Milligram CSSフレームワークは、NavBarコンポーネントを提供していない。