Skip to main content

DrupalのZURB Foundationテーマの使用

Drupal 8 + Foundation 6: The Perfect Combination (六月 2025)

Drupal 8 + Foundation 6: The Perfect Combination (六月 2025)
Anonim

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 ファイル。しかし、私を信じてください - コンパイルするのに十分に学ぶための小さな投資

_variables.scss ほぼ即座に返済されます。

ZURB Foundationを使用する前に

ZURB Foundationは最も優れていますが、Drupalと統合された唯一のフロントエンドフレームワークではありません。あなたはDrupalのテーマを持っている同様のフレームワークであるBootstrapを検討したいかもしれません。今のところ私はZURB Foundationを自分で使っていますが、私の研究ではBootstrapよりもカスタマイズが容易であることが示されています。

また、Joyrideコンポーネントはかなり甘いです。

また、ZURB Foundation、Bootstrap、その他のフレームワークを使用している場合でも、Drupalでフレームワークを使用する上でこれらのヒントを得てください。