Foundation 6 がリリースされました

Zurb社が提供するCSSフレームワーク、『Foundation』が 6になりました。
「for Sites」「for Email」「for Apps」に分けてリリースされていて、各フレームワークは特化してシンプルに作られています。

また、Node.jsで作られた「foundation」コマンドで各ターゲット用のフレームワークを簡単に作ることができ、gulpfile.jsなどが自動的に生成されるため、すぐに本格的なプロジェクトを作ることができます。

Foundation 6の特徴を紹介していきましょう(英語読解力の不足につき、間違いがありましたら申し訳ありません)

コードの 50%軽量化

Foundation 6のファイルサイズは、CSSが 60KB、JSが 84KBで Foundation 5よりも 50%の軽量化を実現しているとのことです。

ARIA属性を採用し、アクセシビリティに配慮

Foundation 6はアクセシビリティに配慮されて作られており、ARIAの属性なども盛り込まれているとのこと。

カスタマイズしやすいシンプルなデザイン

Foundation 6のスタイルは、必要最低限に留められていて、簡単にカスタマイズすることができるようになっています。フォームの CSSなどを見ると良く分かります。

Sassでカスタマイズ

Foundationのカスタマイズは Sassを使って行ないます。グリッドの個数なども、標準で 12ですが mixinで簡単に変更することができます。

先の通り、gulpfile.jsも同梱されているため、foundationコマンドで Sassをコンパイルできます。

互換性を確保

これまでの、ZURB社のツール群と HTMLの互換性を保っているため、Foundation 6をすぐに導入することができるようです。

Motion UI

Motion UIという Sassライブラリを同梱しているため、アニメーションなどを簡単に実装することができます。以下でサンプルなどを見られます。

なお、Foundation 6は Macの場合は GUIソフト『Yeti Launch』を利用する事ができるようです。Windows版は開発中かな? また、Node.jsのコマンドラインツールもあります。

筆者もすでにプロジェクトを作成しはじめているため、今後も継続してブログの記事にしていきます。ぜひ、使ってみましょう!