問題タブ [zurb-foundation-6]

私はFoundation 6とSCSSが初めてです。onclic で多くのトランジションを作成できますが、ロード ページでアクティブにする方法がわかりません。

このコードはindex.htmlにあります

data-toggler なしで body load で motion-ui-transitions を実行するにはどうすればよいですか?

ZURB Foundation 6 Media Queriesのドキュメントを読むと、ZURB Foundation 5 と比較していくつかの変更点があることがわかります。変更につながった理由がわからないため、新機能についていくつか質問があります。

1) breakpointmixin、上ではなく下方向

• これにより、バージョン 5 からバージョン 6 への移行が困難になります。アップ方向も使用し続けるオプションがないのはなぜですか?
• 方向を上から下に変更した理由は何ですか? 小さいデバイスだけでスタイルが異なり、中型と大型のデバイスが同じスタイル (メニューなど) を使用することは、依然として非常に一般的です。繰り返しますが、キーワードの上下を選択するオプションがない理由がわかりません。
• モバイル ファーストの設計アプローチに関して、どちらの方向性が優れていますか? これらの変更は何らかの形でこれと関連していますか?

2)MediaQuery.atLeast機能、方向性の不一致

• この関数は、画面にある程度のサイズがあるか、このサイズよりも大きいかを示します。これは、breakpointmixin ( down キーワードを使用) とは完全に逆の動作です。なぜ動作が同じでないのか、または選択肢がないのはなぜですか?

そのため、Laravel プロジェクトで Foundation 6 を取り込んでコンパイルしようとしていますが、期待どおりに動作させるために、gulpfile.js から何かが欠けているようです。

まず、使用してパッケージをダウンロードします

bower installfoundation-sites --save

問題ない。

次に、gulpfile.jsにこれがあります

});

(ええ、私はコピー コマンドを組み合わせることができることを知っていますし、そうします。)

gulp を実行すると、すべてが良さそうに見えます。

ただし、生成された CSS を HTML ファイルで使用すると、少し奇妙に見えます。

ただし、すべてが見栄えがするように変更<link rel="stylesheet" href="/css/app.css" type="text/css">すると:<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/css/foundation.css" type="text/css">

これは、gulpfile.js に Sass ファイルを含めるときに、何か間違ったことをしていると思わせてくれます。コンパイルした CSS を配布バージョンと一致させる方法についてのアイデアはありますか?

更新＃1これは、現時点でgulpfile.jsにあるものですが、結果は同じです-ページはまだ奇妙に見えます。

私は現在、新しい Foundation 6 でレスポンシブ Web サイトを開発していますが、バージョン 5 のチュートリアルでレスポンシブ グリッドを無効にする方法が見つからないようです (顧客に対してオプションにする必要があります)。

どうもありがとうございました。

SASS で Foundation 6 を使用していますが、質問があります。

_panels.scssファイルのコピーを作成し、いくつかの変更を加えたいと考えていますが、標準の _panels.scss のフォーマットも維持したいと考えています。

_panels-foo.scssというタイトルの直接コピーを作成し、foundation.scss ファイルに @import を追加しました。

バンドル ウォッチャーが CSS ファイルに新しいエントリを作成したことを確認しましたが、_panels-foo.scss ファイルへの変更は更新されません。_panels.scssへの変更のみがCSS を変更します

私は何を間違っていましたか？