CSS

【CSS】シンプルでモダンなカスタマイズ可能なグリッドシステム。Pintsize

May 16, 2016
Pints​​ize

Pints​​izeはシンプルでカスタマイズ可能なレスポンシブ対応のグリッドシステムを構築してくれるCSS。

Quick start

pintsize.csspintsize.min.cssを読み込みます。

<link rel="stylesheet" href="css/pintsize.min.css" type="text/css">

View examplesではグリッドがどのように動作するかの例が紹介されています。

Basic grid

 <div class="flex">

        <div class="col col--6">
            <div class="demo--content-block"></div>
        </div>

        <div class="col col--6">
            <div class="demo--content-block"></div>
        </div>

    </div>

    <div class="flex">

        <div class="col col--8">
            <div class="demo--content-block"></div>
        </div>

        <div class="col col--4">
            <div class="demo--content-block"></div>
        </div>

    </div>

    <div class="flex">

        <div class="col col--6">
            <div class="demo--content-block"></div>
        </div>
        <div class="col col--3">
            <div class="demo--content-block"></div>
        </div>
        <div class="col col--3">
            <div class="demo--content-block"></div>
        </div>

    </div>

    <div class="flex">

        <div class="col col--3">
            <div class="demo--content-block"></div>
        </div>
        <div class="col col--9">
            <div class="demo--content-block"></div>
        </div>

    </div>

Auto flex grid

<div class="flex flex--auto">

        <div class="col">
            <div class="demo--content-block"></div>
        </div>
        <div class="col">
            <div class="demo--content-block"></div>
        </div>
        <div class="col">
            <div class="demo--content-block"></div>
        </div>

Using media queries

<div class="flex">

        <div class="col col--12 col__md--6 col__lg--3">
            <div class="demo--content-block demo--class-display"></div>
        </div>
        <div class="col col--12 col__md--6 col__lg--3">
            <div class="demo--content-block demo--class-display"></div>
        </div>
        <div class="col col--12 col__md--6 col__lg--3">
            <div class="demo--content-block demo--class-display"></div>
        </div>
        <div class="col col--12 col__md--6 col__lg--3">
            <div class="demo--content-block demo--class-display"></div>
        </div>

    </div>         

Nesting

<div class="flex">

    <div class="col col--6">

        <div class="demo--content-block">

            <div class="flex">

                    <div class="col col col--6"><div class="demo--content-block"></div></div>
                    <div class="col col col--6"><div class="demo--content-block"></div></div>

            </div>

        </div>


    </div>

    <div class="col col--6">

        <div class="demo--content-block">

            <div class="flex">

                    <div class="col col col--6"><div class="demo--content-block"></div></div>
                    <div class="col col col--6"><div class="demo--content-block"></div></div>

            </div>

        </div>


    </div>

    <div class="col col--6">

        <div class="demo--content-block">

            <div class="flex">

                    <div class="col col col--6"><div class="demo--content-block"></div></div>
                    <div class="col col col--6"><div class="demo--content-block"></div></div>

            </div>

        </div>


    </div>

    <div class="col col--6">

        <div class="demo--content-block">

            <div class="flex">

                    <div class="col col col--6"><div class="demo--content-block"></div></div>
                    <div class="col col col--6"><div class="demo--content-block"></div></div>

            </div>

        </div>


    </div>

</div>

Offsetting

<div class="flex">

        <div class="col col--2 col__offset--10">
            <div class="demo--content-block"></div>
        </div>

    </div>

    <div class="flex">

        <div class="col col--3 col__offset--9">
            <div class="demo--content-block"></div>
        </div>

    </div>

    <div class="flex">

        <div class="col col--4 col__offset--8">
            <div class="demo--content-block"></div>
        </div>

    </div>

    <div class="flex">

        <div class="col col--5 col__offset--7">
            <div class="demo--content-block"></div>
        </div>

    </div>

    <div class="flex">

        <div class="col col--6 col__offset--6">
            <div class="demo--content-block"></div>
        </div>

    </div>

その他にも幾つか紹介されています。