問題タブ [zurb-foundation-6]

Gulp を使用して、コンパス、オートプレフィクサー、ミニファイアー、および名前変更を実行しています。Compass が新しい Foundation 6 のすべてのコンポーネントをバンドルしていないという事実を除けば、問題なく動作します。Compass の config.rb ファイルは、私の Foundation 6 SCSS パスをインポートします。Foundation ディレクトリはすべてのコンポーネントをインポートしますが、normalize.scss にあるものを追加するだけです。

コマンドラインから Compass 自体を実行すると、すべてがうまくバンドルされます。ですから、Gulp がすべてをバンドルしていない理由がわかりません。

Gulpfile.js

pkg-core.scss

最小化されていないバンドルされた pkg-core.css 出力

新しい Zurb Foundation 6 完全パッケージ ( Foundation for Sites ) をダウンロードしました。アーカイブされたファイルには、次のファイルとフォルダーが含まれています。

JS ファイルをフッターに、CSS をヘッダーに含めました。

Chrome のエラー

REVEAL コンポーネントを使用しようとしました (Foundation 5 で動作しました) が、今回はエラーがスローされます。

Foundation.min.js の中を調べたところ、REVEAL が含まれています。完全なパッケージをダウンロードしたので、動作するはずですが、動作しません。

モーダルをトリガーする JS コード:

更新 1:新しいページで試してみました:

ポップアップのテキストがページに表示され、デフォルトでは非表示になっておらずUncaught ReferenceError: We're sorry, 'Reveal' is not an available method for Reveal、コマンドを実行しようとするとエラーが発生します。

コンソールから。

Foundation 6 は新しいリリースであり、何かを見逃している可能性があります。Foundation 5 から Foundation 6 にアップグレードしました。Foundation 5 Reveal は正常に機能しましたが、新しい Foundation 6 に変更した後、一部のコンポーネントが機能しなくなりました。

ドキュメントを確認しましたが、初期化とクラスは同じです。

zurb-foundation 6 を、うなり声を実行しているヨーマン生成プロジェクトに含めようとしています。を使用bower install foundation-sites --saveすると、次のファイルが追加されます。

1. app/index.html <script src="bower_components/what-input/what-input.js"></script>と
2. app/styles/main.scss で@import "foundation-sites/scss/foundation.scss";

結果の main.css には、zurb-foundation のすべてのコードが含まれているわけではありません。

• Foundation から必要なすべてのファイルを main.css に追加するにはどうすればよいですか?
• Foundation をサイトに初期化するにはどうすればよいですか?

上記は grunt または gulp を使用して行う必要があるため、すべてのプロジェクトのコードを手動で記述する必要はありません。

ファウンデーション 6 のトップバーがなぜか機能していません (どういうわけか、foundation.topbar.js がありません)。だから、それを追加するのを手伝ってください。

私はファンデーションの初心者です — 完全な初心者のように。私は 13 歳です。:)

そして、ここにコード全体があります：

これが起こることです：

これは私の JS フォルダーです。

ブログ用の注目の画像の小さなグリッドを構築するためのさまざまなソリューションを試しています。つまり、ブログ投稿にリンクするテキストが重ねられた最大 3 つの画像を水平に表示します。具体的には、最大で 3 つの画像が連続して表示されるため、さまざまな画面サイズに適切に対応する必要があります。したがって、次のようになります。

私は Foundation (6) を使用しているので、レスポンシブ グリッドに依存したいと思います。Block Gridsを試してみましたが、それらの間にパディングを追加するときに、オーバーレイされたテキストの配置を維持するのに問題がありました。次の例を考えてみましょう (ブロック グリッドは垂直に積み重なるため、ブロック グリッドは使用しません)。

目の鋭い人は、paragraph-element が親の article-element の幅に適合していないことに気付くでしょう。したがって、質問には次の 2 つの要素があります。

• オーバーレイされたテキストの段落の幅を親要素に合わせて制限しながら、画像間のスペースを確保し、行内で画像を均等に配置するにはどうすればよいですか?
• Foundation のレスポンシブ グリッド (またはその他のコンポーネント) を使用して実装すると、画像が 1 行に収まるという制約が追加されて、どのようになりますか?

Foundation 5 を 6 にアップグレードした後、順守の検証に問題があります。正しいデータを入力しても、無効と表示されます。

出荷時、Foundation for sites 6 CLI は、gulp タスク pages:reset が呼び出されるとエラーを生成します。これは、src/layouts または src/partials でファイルを編集するたびに発生します。

どうやら、gulp.run() は廃止されたようです。

run-sequence を使用すると、問題が修復されます。

gulpfile.js の 80 行目あたり: