IE9+もサポート、CSS3 Flexboxを始める人にぴったりな極めてシンプルな使いやすいフレームワーク -FOX CSS

サイト構築 -CSS

Post on:2015年10月20日

FOX CSSの特徴

FOX CSSはモバイルファーストで設計されており、その半分がCSSリセット、もう半分がマイクロフレームワークで構成されています。

ライセンスはCC BY 3.0で、個人でも商用でも無料で利用でき、再編集したり、改変して別のプロジェクトのベースに利用することもできます。

Lightweight -軽量: FOX CSSは最低限必要なスタイルシートのみで構成されたCSSファイルで、ミニファイ版で23KBの超軽量サイズです。
Secure -セキュア: このフレームワークで使用しているclassは接頭辞を使ったネームスペースで管理されており、既存のものと組み合わせても簡単に利用できます。
Modular -モジュール: FOX CSSはモジュール性を重要視して設計しています。それぞれが機能するために他の残りの何かが必要ということはありません。例えば、もしグリッドが必要でないなら、そのスタイルシートを削除しても機能します。
Grid-dy -グリッドが簡単: グリッドはFlexboxをベースに構築しており、レスポンシブ対応の柔軟なレイアウトを簡単に実装できます。; Flexboxの対応ブラウザはIE11+ですが、このフレームワークはIE9+をサポートします。

FOX CSSの使い方

FOX CSSのセットアップは簡単です。
下記の一行を記述するだけ。

<head>
  <link rel="stylesheet" type="text/css" href="path/to/fox.min.css" />
</head>

<head>

</head>

IE9+対応にする際は、下記のコードを<html>の下に記述します。

<!--[if IE 9]> <html class="ie9"> <![endif]-->

1	<!--[if IE 9]> <html class="ie9"> <![endif]-->

FOX CSSのリセット

CSSのリセットは特に気にすることなく利用できますが、中身を確認しておきましょう。

FOX CSSで使用しているリセットは、Normalize.cssに、Flexboxとレスポンシブ用のと他にいくつか追加したものになっています。
下記は、追加分のスタイルシートです。

まずは、パディングと幅計算を統一。

* {
  box-sizing: border-box;
}

* {

box-sizing: border-box;

}

bodyのデフォルトのスタイル、ここはページのデザインに合わせて変更。

body {
  font-family: Arial, Helvetica, Sans-serif;
  color: #000;
  background: #fff;
}

body {

font-family: Arial, Helvetica, Sans-serif;

color: #000;

background: #fff;

}

marginとpaddingをリセット。

html, body, blockquote, form {
  margin: 0;
  padding: 0;
}

html, body, blockquote, form {

margin: 0;

padding: 0;

}

最大幅を100%にし、高さをautoに。

blockquote, code, embed, iframe, img, input, object, pre, table, td, textarea, video {
  max-width: 100%;
  height: auto;
}

blockquote, code, embed, iframe, img, input, object, pre, table, td, textarea, video {

max-width: 100%;

height: auto;

}

不要なボーダーを削除。

a img, form, fieldset {
  border: none;
}

a img, form, fieldset {

border: none;

}

フォームのスタイル。

input, button, select {
  vertical-align: middle;
}

textarea {
  overflow: auto;
  vertical-align: top;
}

input, button, select {

vertical-align: middle;

}

textarea {

overflow: auto;

vertical-align: top;

}

abbrは各ブラウザ同じに。

abbr {
  cursor: help;
  border-bottom: 1px dotted #bbb;
}

abbr {

cursor: help;

border-bottom: 1px dotted #bbb;

}

フォントのサイズは、親の値を継承するように。

blockquote p, button, input, li h1, li h2, li h3, li h4, li h5, li h6, li li, li p, select, td p, th p {
  font-size: 100%;
}

blockquote p, button, input, li h1, li h2, li h3, li h4, li h5, li h6, li li, li p, select, td p, th p {

font-size: 100%;

}

FOX CSSのFlexbox

FOX CSSのFlexboxを使ったグリッドは、非常にシンプルです。

<div class="fx-row">
  <div class="fx-col-50-xs"><span>1</span></div>
  <div class="fx-col-50-xs"><span>2</span></div>
</div>
<div class="fx-row">
  <div class="fx-col-100-xs"><span>3</span></div>
</div>

</div>

</div>

classに使用する数字（fx-col-50-xsだと50）で、カラムの幅を設定します。数値は、10-100まで10刻みと、25, 75, 33, 66があり、4分割・3分割も設定できます。

<div class="fx-row">
  <div class="fx-col-100-xs fx-col-30-s"><span>1</span></div>
  <div class="fx-col-100-xs fx-col-70-s"><span>2</span></div>
</div>

<div class="fx-row">
  <div class="fx-col-100-xs fx-col-60-m"><span>3</span></div>
  <div class="fx-col-100-xs fx-col-40-m"><span>4</span></div>
</div>