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

そろそろFlexboxを使ってみたいな、と考えている人にぴったりなCSS/Sassの超軽量フレームワークを紹介します。
もちろんFlexboxをバリバリ使っていて、シンプルなのが必要な人にもぴったりです。

FlexboxはIE11+対応ですが、IE9+にも一行加えるだけで同じHTMLで実装できます。

サイトのキャプチャ

FOX CSS
FOX CSS -GitHub

Flexboxの各プロパティの使い方は、以前の記事を参考にしてください。

FOX CSSの特徴

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

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

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

FOX CSSの使い方

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

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

FOX CSSのリセット

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

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

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

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

marginとpaddingをリセット。

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

不要なボーダーを削除。

フォームのスタイル。

abbrは各ブラウザ同じに。

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

FOX CSSのFlexbox

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

FOX CSSのデフォルトのグリッド

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

FOX CSSのレスポンシブ対応のグリッド

レスポンシブ対応には複数のclassを使用します。「-xs」がデフォルトで、-s, -m, -lに変更するだけでスマホ用・タブレット用・デスクトップ用が設定できます。

上記はグリッドの基本で、他にもさまざまなコンポーネントが用意されています。

top of page

©2017 coliss