DrupalテーマでのZURB Foundationフレームワークのパワーを手に入れよう
Twitter Bootstrapが登場する前は、ZURB Foundationがありました.ZURB Foundationは、きれいなボタン、ブロックグリッド、プログレスバー、価格表などを追加できます。 DrupalのZURB Foundationテーマを使用すると、Drupalサイトのすべてのblingを致命的な容易性で解き放つことができます。
ZURB Foundationフレームワークとは何ですか？
ZURB Foundationフレームワークは、おそらくあなたのウェブサイトに必要なものの束のためのCSSとJavascriptコードのコレクションです。 これには、前述のボタンのようなクリック可能なキャンデーだけでなく、本当に素晴らしいレスポンシブなパワーも含まれます。
これらの機能のほとんどは、特別なCSSクラスを追加して使用します。 例えば：
ZURB Foundationフレームワークは、Drupalとはまったく別です。 WordPress、Joomla、そして静的なHTMLサイトでも使用されています。
ZURB Foundation Drupalテーマとは何ですか？
Drupal ZURB Foundation テーマでは、テーマをダウンロードして有効にするだけで、このZURBishのすべてのパワーを発揮できます（ドキュメントを読んで、いくつかの追加ステップを講じてください）。
たとえば、ZURB FoundationはjQuery Javascriptライブラリに依存しているので、おそらくjQuery Updateをインストールする必要があります。 jQueryに依存する他のモジュールを使用しているかどうかを確認してください。 新しいバージョンのjQueryを使用すると、これらのモジュールが機能しなくなることがあります。
また、このテーマを独自のカスタムテーマのベーステーマとして使用することもできます。 カスタマイズは、ZURB Foundationが本当に輝く場所です。
あなたはDrupalでZURB Foundationを使うためにこのテーマが必要ですか？
ZURB Foundationフレームワークを使用するには、このテーマは必要ありません。 最も単純なのは、ZURB Foundation CSSとJavascriptをサイトに追加するだけで、手動で行うことができます。
しかし、このテーマはそれをより簡単にし、Drupalとのさらなる統合も含みます。
さらに、さらに小さなモジュールを追加して、さらに統合することもできます。 たとえば、ZURB Orbitモジュールを使用すると、イメージフィールドで軌道スライドショーを作成できます。 ZURBクリアリングモジュールを使用すると、メディアイメージで応答するライトボックスを作成できます。
注：私はこれらの小さなモジュールをまだ自分で使用していないので、危険にさらされているかもしれません。 この記事の執筆時点では、ZURB ClearingにはMedia-2.x-devが必要です。Media 1.xを使用している場合は危険なアップグレードになる可能性があります。 モジュールの開発版の要件は、常に1つの一時停止を与える必要があります。 それでも、これらのZURBモジュールと他のZURBモジュールは検討する価値があります。
使用するZURB Foundationのバージョンを選択する
ZURB Foundationのテーマをダウンロードする前に、使用するバージョンを確認してください。 ZURB Foundationフレームワークの主なバージョンはさまざまですが、テーマの主なバージョン番号は、それが動作するフレームワークに対応しています。 したがって、テーマの7.x- 3.xバージョンは、Foundation 3で動作し、7.x- 4 .xバージョンはFoundation 4で動作し、7.x- 5 .xバージョンはFoundation 5で動作します。
この記事の執筆時点では、最新の安定版のテーマは、Foundation 4で動作する7.x-4.xです。7.x-5.xのバージョンはまだ開発中です。 したがって、FoundationフレームワークのWebサイトではFoundation 5を使用することを前提としていますが、今のところFoundation 4を使用することをお勧めします。
Foundation 5には特別な要件があります。特にjQuery 1.10が必要です。 Foundation 4はjQuery 1.7以上が必要です。
オンラインドキュメントを読むときに使用しているFoundationのバージョンを確認してください。 これは特に、フレームワークの最新バージョンを使用していない場合に当てはまります。 例えば、Foundation 5のようなドキュメントを読んでしまって、Foundation 4のサイトで新しい機能が動作しなくなってしまったら、挫折してしまいます。
たとえば、Foundation 5には、中規模の画面用のメディアクラス全体が含まれています。 Foundation 4では、余分な手順を取らない限り、これらは不思議に失敗します。
SASS、Compass、＆＃34; _variables.scss＆＃34;を使用してください
このテーマのCSSを微調整する場合は、次の点を確認してください。
- 独自のカスタムサブテーマの基本テーマとしてZURB Foundationテーマを使用する
- テーマによって提供されるdrushコマンドを使用して、このサブテーマを生成します。 このように：drush fst your_theme_name
- ゆっくりと優れた_variables.scssファイルを閲覧する
_variables.scssファイルは、drush fstによって自動的に作成されます。 この1つのファイルには、テーマCSSで微調整したいと思うほとんどのものの変数が含まれています。 すごい！ 一箇所で、デフォルトのフォントから画面幅、ブレッドクラム上の境界までのすべてを設定できます。
もちろん、追加のファイルもいつでも設定できます。 しかし、_variables.scssは素晴らしい場所です。
ファイルの拡張子：scssではなくcssに注目してください。 _variables.scssを使用するには、SASS（CSS拡張言語）とCompass（SASSで構築されたフレームワーク）を設定する必要があります。 compassコンパイルを実行すると、scssファイルは別々のファイルで素敵なCSSに変わります。 （私はコンパスの時計を好む - これはあなたがscssファイルを微調整するようにCSSを更新し続けている。）
本当に、本当にSASSを気にしたくなければ、いつものようにCSSファイルを書いてテーマの.infoファイルにリストすることができます。 しかし、私を信じてください。_variables.scssをコンパイルするのに十分な時間を払って投資することは、ほぼ即座に返済されます。
ZURB Foundationを使用する前に
ZURB Foundationは最も優れていますが、Drupalと統合された唯一のフロントエンドフレームワークではありません。 あなたはDrupalのテーマを持っている同様のフレームワークであるBootstrapを検討したいかもしれません。 今のところ私はZURB Foundationを自分で使っていますが、私の研究ではBootstrapよりもカスタマイズが容易であることが示されています。
また、Joyrideコンポーネントはかなり甘いです。
また、ZURB Foundation、Bootstrap、その他のフレームワークを使用している場合でも、Drupalでフレームワークを使用する上でこれらのヒントを得てください。