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

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

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

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

## Pure.CSSとは
![スクリーンショット 2017-09-21 11.37.02.png](https://qiita-image-store.s3.amazonaws.com/0/179198/e648d87c-2f59-823c-0398-e3006db76301.png)

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

[Pure.css公式](https://purecss.io/)
私が使用したバージョンは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>
```
こんな感じで指定してみました。
表示はこんな感じです。

![スクリーンショット 2017-09-21 11.52.46.png](https://qiita-image-store.s3.amazonaws.com/0/179198/970c6e20-b4a5-66ec-cb45-6827761a54c5.png)
![スクリーンショット 2017-09-21 11.53.00.png](https://qiita-image-store.s3.amazonaws.com/0/179198/6fe3b678-80d7-544c-1915-85aad18b2d36.png)
![スクリーンショット 2017-09-21 11.53.22.png](https://qiita-image-store.s3.amazonaws.com/0/179198/354a6480-78d9-4c07-5143-bd470bffb660.png)

あとは
```
<!--[if lte IE 8]>
    <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/grids-responsive-old-ie-min.css">
<![endif]-->
<!--[if gt IE 8]><!-->
    <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/grids-responsive-min.css">
<!--<![endif]-->
```

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

## まとめ

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

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