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。バツ テーマのバージョンがFoundationと連携する 3、
7.x-4。バツ バージョンはFoundationと連携します 4、 そしてその
7.x-5。バツ バージョンは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、および "_variables.scss"を使用してください!
このテーマのCSSを微調整する場合は、次の点を確認してください。
- 独自のカスタムサブテーマの基本テーマとしてZURB Foundationテーマを使用する
- このサブテーマを生成するには、
ドリル テーマによって提供されるコマンド。このような:
drush fst your_theme_name
- ゆっくりとすばらしい
_variables.scss ファイル
ザ
_variables.scss ファイルは自動的に作成されます
drush fst。この1つのファイルには、 何でも あなたのテーマのCSSを微調整したいかもしれません。すごい!一箇所で、デフォルトのフォントから画面幅、ブレッドクラム上の境界までのすべてを設定できます。
もちろん、追加のファイルもいつでも設定できます。しかし
_variables.scss 素晴らしい場所です。
ファイル拡張子に注目してください:
scss、ない
CSS。使用する
_variables.scssSASS(CSS拡張言語)とCompass(SASSで構築されたフレームワーク)を設定する必要があります。あなたが走るとき
コンパスコンパイル、 きみの
scss ファイルは別々のファイルで素敵なCSSに変わります。 (私は好きです
コンパス時計 - これはCSSを実行して更新し続けます。
scss ファイル。)
本当に、本当にSASSを気にしたくないのであれば、いつものようにCSSファイルを書き、あなたのテーマ
.info ファイル。しかし、私を信じてください - コンパイルするのに十分に学ぶための小さな投資
ZURB Foundationを使用する前に
ZURB Foundationは最も優れていますが、Drupalと統合された唯一のフロントエンドフレームワークではありません。あなたはDrupalのテーマを持っている同様のフレームワークであるBootstrapを検討したいかもしれません。今のところ私はZURB Foundationを自分で使っていますが、私の研究ではBootstrapよりもカスタマイズが容易であることが示されています。
また、Joyrideコンポーネントはかなり甘いです。
また、ZURB Foundation、Bootstrap、その他のフレームワークを使用している場合でも、Drupalでフレームワークを使用する上でこれらのヒントを得てください。