PostCSSでレスポンシブに対応したCSSフレームワークを作ってみました

このエントリーをはてなブックマークに追加

PostCSSでレスポンシブに対応したCSSフレームワークを作ってみました

今までがっつりPostCSSを触ったことがなかったので勉強の意味も込めてNimbusというCSSフレームワークを作ってみました。Nimbus(筋斗雲)にしたかというとレスポンシブに大きさを変えるという意味で命名しました。というかtable周りとレイアウト系はレスポンシブにこだわって作りたかったのでこれがいいなと。あとは僕がドラゴンボールの大ファンだからです(笑)ということでNimbusの概要や設計、あとはPostCssを使って困ったとこなどをご紹介します。

Ads

Nimbusの概要

PstCSSで作られたレスポンシブ対応のCSSフレームワークです。

使い方

npm install --save nimbus-jquery
<link rel="stylesheet" href="./node_modules/nimbus-jquery/assets/css/app.min.css">
<script src="./node_modules/nimbus-jquery/assets/js/jquery-3.2.0.min.js"></script>
<script src="./node_modules/nimbus-jquery/assets/js/common.js"></script>

対応ブラウザ

  • Chrome最新
  • FireFox最新
  • Safari最新
  • IE11以上

2017年4月11日をもって、IE9のサポート終了が終了します。(2017/3/27執筆時点)ということでFloatでのレイアウトなどは無くし、基本的にFlexboxを使ったレイアウトができるようにしています。

使っているパッケージ

極力最小限に収まるようにしました。Sassみたいにfor文やif文など使いたかったのですが、あまりパッケージを使いすぎるとオレオレ設計になりすぎるので注意です。Gulpなどのタスクランナーで動かすときにもパッケージを使う順番にも気をつけなけばいけないなどあります。オススメはcssnextとあとはimportとネストができればほぼほぼいい感じにCSSを書くことができます。cssnanoはminify用に使っています。

  • postcss-cssnext
  • postcss-import
  • postcss-nested
  • cssnano

作った経緯

以前作ったレスポンシブ対応のCSSフレームワークを業務で使っていました。B to Bのサイトなので、管理画面っぽい部分が多かったんですね。特にFormやTableを使った表などです。その際に結構困ることが多かったんですよね。

例えば・・・

  • PCでは綺麗にtableが表示されるけど、SPだとテキストが変な改行してしまっていて見にくい
  • いろんなレイアウトのTableに対応できるレスポンシブなTableが欲しい
  • input要素と横並びでボタンを表示したい

結構Table周りのレイアウト周りのレスポンシブには結構困りました。付け足しでスタイルを作っていたのですが、その辺をまとめていい感じにしたいなーと思っていたので、だったら新しくフレームワークとして作ろう!!ってことでNimbusを作りはじめました。

設計について

FLOCSSを採用しています。理由としては、BEMを使っているのと日本語ドキュメントだからです。今後の展望になってしまうのですが、Reactのcomponentでも使えるようにしていきたいので、BEMのBlockがcomponent名と一致するように作れそうだなと思っています。近いうちにReact用のNimbusも作ります!!ご期待ください。

├ core/
├ foundation/
├ layout/
└ object/
  ├ component/
  ├ project/
  └ utility/

ちなみに、coreディレクトリではvariables.pcssで変数の管理をしています。あとは基本的にFLOCSSと同じです。なので、サイトに合わせてオリジナルのスタイルを書く場合はprojectに書いていくのもありです。

基本スタイルについて

h1〜h6pul, lidl,dt,ddなどはクラスでスタイルを適用せずタイプセレクタで適用しています。サイトに合わせてあとはクラスを作った方が拡張しやすいのかなと思ったので、できるだけ余計なクラスを作らずに設計しています。

グリッドレイアウト

IE9のサポート終了が間近に迫っているので、Flexboxを採用しています。それにより柔軟なレイアウトが可能になっています。

グリッドレイアウト

<div class="c-grid c-grid--gutters">
  <div class="c-grid__col c-grid__col--1of12">
    <div style="background: #ccc; padding: 10px;">Col</div>
  </div>
  <div class="c-grid__col c-grid__col--1of12">
    <div style="background: #ccc; padding: 10px;">Col</div>
  </div>
  <div class="c-grid__col c-grid__col--1of12">
    <div style="background: #ccc; padding: 10px;">Col</div>
  </div>
  <div class="c-grid__col c-grid__col--1of12">
    <div style="background: #ccc; padding: 10px;">Col</div>
  </div>
  <div class="c-grid__col c-grid__col--1of12">
    <div style="background: #ccc; padding: 10px;">Col</div>
  </div>
  <div class="c-grid__col c-grid__col--1of12">
    <div style="background: #ccc; padding: 10px;">Col</div>
  </div>
  <div class="c-grid__col c-grid__col--1of12">
    <div style="background: #ccc; padding: 10px;">Col</div>
  </div>
  <div class="c-grid__col c-grid__col--1of12">
    <div style="background: #ccc; padding: 10px;">Col</div>
  </div>
  <div class="c-grid__col c-grid__col--1of12">
    <div style="background: #ccc; padding: 10px;">Col</div>
  </div>
  <div class="c-grid__col c-grid__col--1of12">
    <div style="background: #ccc; padding: 10px;">Col</div>
  </div>
  <div class="c-grid__col c-grid__col--1of12">
    <div style="background: #ccc; padding: 10px;">Col</div>
  </div>
  <div class="c-grid__col c-grid__col--1of12">
    <div style="background: #ccc; padding: 10px;">Col</div>
  </div>
</div>

<div class="c-grid c-grid--gutters">
  <div class="c-grid__col c-grid__col--2of12">
    <div style="background: #ccc; padding: 10px;">Col</div>
  </div>
  <div class="c-grid__col c-grid__col--2of12">
    <div style="background: #ccc; padding: 10px;">Col</div>
  </div>
  <div class="c-grid__col c-grid__col--2of12">
    <div style="background: #ccc; padding: 10px;">Col</div>
  </div>
  <div class="c-grid__col c-grid__col--2of12">
    <div style="background: #ccc; padding: 10px;">Col</div>
  </div>
  <div class="c-grid__col c-grid__col--2of12">
    <div style="background: #ccc; padding: 10px;">Col</div>
  </div>
  <div class="c-grid__col c-grid__col--2of12">
    <div style="background: #ccc; padding: 10px;">Col</div>
  </div>
</div>

<div class="c-grid c-grid--gutters">
  <div class="c-grid__col c-grid__col--3of12">
    <div style="background: #ccc; padding: 10px;">Col</div>
  </div>
  <div class="c-grid__col c-grid__col--3of12">
    <div style="background: #ccc; padding: 10px;">Col</div>
  </div>
  <div class="c-grid__col c-grid__col--3of12">
    <div style="background: #ccc; padding: 10px;">Col</div>
  </div>
  <div class="c-grid__col c-grid__col--3of12">
    <div style="background: #ccc; padding: 10px;">Col</div>
  </div>
</div>

<div class="c-grid c-grid--gutters">
  <div class="c-grid__col c-grid__col--4of12">
    <div style="background: #ccc; padding: 10px;">Col</div>
  </div>
  <div class="c-grid__col c-grid__col--4of12">
    <div style="background: #ccc; padding: 10px;">Col</div>
  </div>
  <div class="c-grid__col c-grid__col--4of12">
    <div style="background: #ccc; padding: 10px;">Col</div>
  </div>
</div>

<div class="c-grid c-grid--gutters">
  <div class="c-grid__col c-grid__col--5of12">
    <div style="background: #ccc; padding: 10px;">Col</div>
  </div>
  <div class="c-grid__col c-grid__col--5of12">
    <div style="background: #ccc; padding: 10px;">Col</div>
  </div>
  <div class="c-grid__col c-grid__col--2of12">
    <div style="background: #ccc; padding: 10px;">Col</div>
  </div>
</div>

<div class="c-grid c-grid--gutters">
  <div class="c-grid__col c-grid__col--6of12">
    <div style="background: #ccc; padding: 10px;">Col</div>
  </div>
  <div class="c-grid__col c-grid__col--6of12">
    <div style="background: #ccc; padding: 10px;">Col</div>
  </div>
</div>

上下の揃えを変更したい場合

c-gridのModifireとしてクラスを付与

c-grid--top
c-grid--middle
c-grid--bottom
c-grid--stretch
c-grid--baseline

左右の揃えを変更したい場合

c-gridのModifireとしてクラスを付与

c-grid--left
c-grid--center
c-grid--right
c-grid--between

並びの順番

c-gridのModifireとしてクラスを付与

c-grid--row
c-grid--reverse

Tableのレスポンシブ対応

ここが一番こだわったところかもしれません。TableってPCでは綺麗に見えるんですけど、スマホだと変なレイアウトというかテキストが読みにくくなること多いんですよね。スマホでも綺麗に見やすいレイアウトのTableがあったらいいのにということで、今回のフレームワークを作りました。

Tableのレイアウトパターンとして「Basic」「Separate」「Overflow」の3種類を作りました。

Basic

これはスマホで見るとthtdが上下に並ぶようにしています。

table basic

<table class="c-table c-table--basic">
  <tr>
    <th>title</th>
    <td>description</td>
  </tr>
  <tr>
    <th>title</th>
    <td>description</td>
  </tr>
  <tr>
    <th>title</th>
    <td>description</td>
  </tr>
  <tr>
    <th>title</th>
    <td>description</td>
  </tr>
</table>

Separate

これはスマホで見ると、thごとにtableが別れるように作っています。

table separate

<table class="c-table c-table--separate">
  <thead>
    <tr>
      <th>Title1</th>
      <th>Title2</th>
      <th>Title3</th>
      <th>Title4</th>
      <th>Title5</th>
    </tr>
    </thead>
    <tbody>
    <tr>
      <td data-label="Title1">description1</td>
      <td data-label="Title2">description2</td>
      <td data-label="Title3">description3</td>
      <td data-label="Title4">description4</td>
      <td data-label="Title5">description5</td>
    </tr>
    <tr>
      <td data-label="Title1">description1</td>
      <td data-label="Title2">description2</td>
      <td data-label="Title3">description3</td>
      <td data-label="Title4">description4</td>
      <td data-label="Title5">description5</td>
    </tr>
  </tbody>
</table>

Overflow

これはスマホで見ると、はみ出た部分をスクロールしてみせます。

table overflow

<table class="c-table c-table--overflow">
  <thead>
    <tr>
      <th>Type</th>
      <th>Color</th>
      <th>Price</th>
      <th>Area</th>
    </tr>
    </thead>
    <tbody>
    <tr>
      <td>Apple</td>
      <td>Red</td>
      <td>200</td>
      <td>Aomori</td>
    </tr>
    <tr>
      <td>Orange</td>
      <td>Orange</td>
      <td>350</td>
      <td>Ehime</td>
    </tr>
    <tr>
      <td>Grape</td>
      <td>Purple</td>
      <td>400</td>
      <td>Yamanasi</td>
    </tr>
    <tr>
      <td>Melon</td>
      <td>Yellow green</td>
      <td>800</td>
      <td>hokkaido</td>
    </tr>
  </tbody>
</table>

まとめ

今回CSSフレームワークとしてNimbusをご紹介させていただきました。まだまだできたばっかりのフレームワークなので今後改善を繰り返してより良いものにしていきたいと思います。無料で使えるのでぜひぜひ使っていただいて修正・改善してほしいとこなどあればご連絡もしくはGitHubのIssueにあげていただければ嬉しいです。

イチマルニデザインブログをフォローしよう

イチマルニデザインブログではTwitterアカウントでWebに関する情報をつぶやいています。フォローすることで最新情報をすぐに受け取ることができます

いいなと思ったらシェアお願いします

このエントリーをはてなブックマークに追加

同じカテゴリーの記事

Ads
ページの先頭へ