Pure.CSS（特にGrids）を使ってみたメモ

WEB見習い中でCSSフレームワークについて色々調べていたところ、とっても軽量な"Pure.CSS"なるものを発見したので使ってみました。

私は組み込みの人なので（？）"軽量"とか"高速"という単語を聞くと心が踊ります。

Pure.CSSとは

Yahoo!さんが開発したCSS軽量高速のCSSフレームワークです。

Pure.css公式
私が使用したバージョンは1.0でした。

まず公式のトップページを見ると何やらポリシー的なものが書かれていました。

ものすごく雑にまとめると

モバイルデバイスを考慮してめっちゃミニマルにしました。たったの3.8KBで、必要な機能だけ使う場合はもっと少なくできるよ。
本当に最低限のスタイルで構成されているから、なんか必要なものがあればどんどん追加してあなたにぴったりなものを作りましょう。それの方が簡単でしょ？

ええやん。

とりあえず使ってみる

私が今回使用してみた機能は下記の５つです。

Grids
Froms
Buttons
Tables
Menus

ですが今回は主にGridsについて書こうと思います。

Pure.CSSのGrids

分割可能数が多い

Bootstrapなどのメジャーなフレームワークだと12列がMAXだったりするのですがこれは24列まで使えます。

3分の1であればpure-u-1-3とかpure-u-8-24とかで指定できるので感覚的にも分かりやすいのかなと感じました。

レスポンシブ対応

もちろんレスポンシブ対応です。

pure-u-sm-*-*　　// >= 568px
pure-u-md-*-*　　// >= 768px
pure-u-lg-*-*　　// >= 1024px
pure-u-xl-*-*　　// >= 1280px

例えば、私の技術調査用のソース（React.js使用）ですと

        <div className="pure-g">
          <div className="colorPalette greenTone pure-u-md-1-2 pure-u-lg-1-4">
            <img className="sampleImage pure-u-2-3" src={require("../img/radybug.JPG")} alt="spring" />
            <div className="colors pure-u-1-3">
              <div className="myColorGreen_0 gridItem paletteItem">#385918</div>
              <div className="myColorGreen_1 gridItem paletteItem">#9DAD53</div>
              <div className="myColorGreen_2 gridItem paletteItem">#A1B258</div>
              <div className="myColorGreen_3 gridItem paletteItem">#E5F3CF</div>
            </div>
          </div>

          <div className="colorPalette yellowTone pure-u-md-1-2 pure-u-lg-1-4">
            <img className="sampleImage pure-u-2-3" src={require("../img/sunflower.JPG")} alt="summer" />
            <div className="colors pure-u-1-3">
              <div className="myColorYellow_0 gridItem paletteItem">#AA6724</div>
              <div className="myColorYellow_1 gridItem paletteItem">#F2C242</div>
              <div className="myColorYellow_2 gridItem paletteItem">#F6F6F6</div>
              <div className="myColorYellow_3 gridItem paletteItem">#8FA845</div>
            </div>
          </div>

          <div className="colorPalette redTone pure-u-md-1-2 pure-u-lg-1-4">
            <img className="sampleImage pure-u-2-3" src={require("../img/momiji.JPG")} alt="autumn" />
            <div className="colors pure-u-1-3">
              <div className="myColorRed_0 gridItem paletteItem">#BB2F1E</div>
              <div className="myColorRed_1 gridItem paletteItem">#E3CB5E</div>
              <div className="myColorRed_2 gridItem paletteItem">#C8C781</div>
              <div className="myColorRed_3 gridItem paletteItem">#562B15</div>
            </div>
          </div>

          <div className="colorPalette blueTone pure-u-md-1-2 pure-u-lg-1-4">
            <img className="sampleImage pure-u-2-3" src={require("../img/snow.JPG")} alt="winter" />
            <div className="colors pure-u-1-3">
              <div className="myColorBlue_0 gridItem paletteItem">#28437B</div>
              <div className="myColorBlue_1 gridItem paletteItem">#4578D6</div>
              <div className="myColorBlue_2 gridItem paletteItem">#6B8CCE</div>
              <div className="myColorBlue_3 gridItem paletteItem">#92A8DB</div>
            </div>
          </div>
        </div>

こんな感じで指定してみました。
表示はこんな感じです。

あとは
  <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/grids-responsive-min.css"> 

これを記述しさえすれば問題なく動作しました。
モバイル対応を〜とか言っておいてレスポンシブ対応じゃ無かったら話になりませんね。

まとめ

特に今までCSSに明るかったわけではないですが、今のところ何の引っ掛かりもなく使用できています。
普段はRS-232Cがどうのこうの言っている知人に触らせて見たところ、すんなりとグリッドレイアウトについて理解が出来たようなので、やはり軽量シンプルは正義だなと感じました。

次回はFormsかButtonsについて書きたいと思います。

Pure.CSSについての備忘録(Grids編)