軽量でシンプルなレスポンシブフレームワーク「Skeleton」

グリッドシステム

960gsベースの、グリッドシステムです。HDなPCサイズでのみ横幅を広げるなど、イレギュラーなこともCSSをいじれば可能です。シンプルなコンポーネントのみだからオーバーライドしなくてもできるのが素敵。

<!-- .container is main centered wrapper -->
<div class="container">

  <!-- columns should be the immediate child of a .row -->
  <div class="row">
    <div class="one column">One</div>
    <div class="eleven columns">Eleven</div>
  </div>

  <!-- just use a number and class 'column' or 'columns' -->
  <div class="row">
    <div class="two columns">Two</div>
    <div class="ten columns">Ten</div>
  </div>

  <!-- there are a few shorthand columns widths as well -->
  <div class="row">
    <div class="one-third column">1/3</div>
    <div class="two-thirds column">2/3</div>
  </div>
  <div class="row">
    <div class="one-half column">1/2</div>
    <div class="one-half column">1/2</div>
  </div>

</div>

columが、すぐに１カラムに落ちて、columsがぎりぎりまでカラムとして生きるclassになります。

メディアクエリは５分岐。

Desktop HD: 1200px
Desktop: 1000px
Tablet: 750px
Phablet: 550px
Mobile: 400px

となってます。

/* Mobile first queries */

/* Larger than mobile */
@media (min-width: 400px) {}

/* Larger than phablet */
@media (min-width: 550px) {}

/* Larger than tablet */
@media (min-width: 750px) {}

/* Larger than desktop */
@media (min-width: 1000px) {}

/* Larger than Desktop HD */
@media (min-width: 1200px) {}

順番が重要で、モバイルファーストなので、ほぼ !important が必要ないです。
CSS表示的には優しいのですが、PCビューから切り崩すときは、頭の使い方が逆になるので注意です。

ユーティリティもきちんと。

/* Utility Classes */

/* Make element full width */
.u-full-width {
  width: 100%;
  box-sizing: border-box; }

/* Make sure elements don't run outside containers (great for images in columns) */
.u-max-full-width {
  max-width: 100%;
  box-sizing: border-box; }

/* Float either direction */
.u-pull-right {
  float: right; }
.u-pull-left {
  float: left; }

/* Clear a float */
.u-cf {
  content: "";
  display: table;
  clear: both; }

画像の扱いに関する .u-max-full-width など、便利でシンプルなユーティリティがレスポンシブなサイトを構築するのに役立ちそうですね。

☆

bootstrapのがっつりコンポーネントがいっぱいあるフレームワークも便利で好きですが、フルオーダーなデザインの場合は基本的な設定だけが揃った軽いもの欲しくなるもの。
融通がきいて、レスポンシブという条件のなかでも自由にやりたい人におすすめなフレームワークです。

ご参考にどうぞ。