CSS

【CSS】シンプルなレスポンシブ・軽量のCSSグリッドPills

June 22, 2016
Pills

Pillsはシンプルなレスポンシブ・4キロバイトと軽量のCSSグリッド。IE8+, Firefox, Chrome, Safari, Operaで動作するようです。

pills_1

Stylesheet

headセクションにスタイルシートを追加します。

<link rel="stylesheet" href="bower_components/pills/dist/pills.min.css">

Viewport

headセクションにメタタグを追加します。

<meta name="viewport" content="width=device-width,initial-scale=1">

Usage

1. First

row classにcolumnsを入れます。twelve columns12列のグリッドを使用

        <div class="row">
            <div class="twelve columns">
            </div>
        </div>

列をミックス

        <div class="row">
            <div class="four columns">
            </div>
            <div class="eight columns">
            </div>
        </div>

row classをcolumnsの中に入れることもできます。

        <div class="row">
            <div class="four columns">
            </div>
            <div class="eight columns">
                <div class="row">
                    <div class="six columns">
                    </div>
                    <div class="six columns">
                    </div>
                </div>
            </div>
        </div>

列を相殺することもできます。

        <div class="row">
                <div class="eight columns offset by-four">
        </div>

2. Second

wholeでも構築できます。

        <div class="row">
            <div class="column whole">
            </div>
        </div>

半分

        <div class="row">
            <div class="column half">
            </div>
            <div class="column half">
            </div>
        </div>

上記のように入れ子にすることができます。

       <div class="row">
            <div class="column one-fourth">
            </div>
            <div class="column three-fourths">
                <div class="row">
                    <div class="column two-fifths">
                    </div>
                    <div class="column three-fifths">
                    </div>
                </div>
            </div>
        </div>

列の相殺もできます。

        <div class="row">
                <div class="column two-thirds offset by-one-third">
        </div>

MITライセンス