CSS

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

May 16, 2016

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

Quick start

pintsize.cssかpintsize.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>

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

Demo/Download