CSSフレームワーク Zurb Foundationを使って高速コーディング！

こんにちは！　佐々木です。

今回はCSSフレームワーク Zurb Foundationの紹介です。

The most advanced responsive front-end framework in the world. | Foundation

Zurb Foundationとは

簡単に言うとTwiitterのBootstrapのようなものです。

使ってみた印象としては、Twitter Bootstrapよりも、より現場のHTMLコーディングに対応でき、柔軟性があるような印象でした。
また、HTMLコーダーの痒い所に手が届く機能の数々もあります。

使ってみて

前項にも書きましたが、よりコードをバリバリ書いてきた人向けのCSSフレームワークだと思います。

基礎の部分で利用し、細かな装飾はCSSで調整するのが理想だと思います。

また、最大の特徴？sassを使うことで、必要なクラス・IDにのみZurb Foundationのスタイルを当てる事も可能です。

絶対必須のJS動作も最初からビルトイン！！！

例えば

• 要素の高さを揃える「Equalizer」
• アンカーをスムーススクロールさせる「Smooth Scroll」
• フォームのバリデーションを行う「Abide」
• カルーセルスライダー「Orbit」
• 要素をアコーディオンさせるための「Accordion」
• 開閉式のサイドメニュー等を実装する「Off-canvas」
• モーダルウィンドウを実装する「Reveal」
• タブ切り替えを実装する「Tabs」
• ドロップダウンメニューを実装するための「Dropdown Menu」

その他、かゆい所に手が届く機能の数々。

だいたい使うjQueryプラグイン等があったりするので、最初から入っているととっても楽です。

Zurb Foundationのルールを理解してデザインを作成

CSSフレームワークのメリットを最大限に生かすためには、フレームワークの特性を理解してデザインする事です。

そうする事で、パズルをはめていくようにHTMLコーディングが可能です。

たとえば、デザイナーはグリッドレイアウトを意識してデザインをするとよいと思います。

https://foundation.zurb.com/sites/docs/xy-grid.html

※Twitter Bootstrapが大変流行っていた時期には、仕組みをよくわからないで作ったデザインなのか、
普通にHTMLコーディングした方が早い・・・・なんてデザインも多くありました。

総評

今、まさに何かCSSフレームワークを使おうと思っているのであれば、アリだと思います。
私は何度かプロジェクトで使ってみたいと思っています。

以上、佐々木でした！