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のコマンドラインツールもあります。
筆者もすでにプロジェクトを作成しはじめているため、今後も継続してブログの記事にしていきます。ぜひ、使ってみましょう!