問題タブ [singularitygs]

私はSingularityで以下を構築しました

幅 2/3 の画像の隣に幅 1/3 の画像があり、次の行ではその逆です。画像はピクチャーフィルで提供されます。しかし、私の問題は、コンテナーの最大幅からブレークポイント (750px) に向かってビューポートを絞り込むときです。そこでは、画像が 2 つの「列」レイアウトから 1 つの列に切り替わり、ソース ファイルの物理的なサイズがまったく同じでも高さが異なります。ピクセル単位の高さ。場合によっては数ピクセル、場合によっては 1 つだけ異なります。

背後にある削減されたセットアップは次のとおりです (Retina マークアップとその間の 2 つのブレークポイントが省略されています)。

ブレークポイントと特異点の設定は次のとおりです。

スタイリング:

最大幅での 3 分の 1 の画像と 3 分の 2 の画像の高さの間は、物理的に同一であり、一番下の行に配置されます。小さいビューポートでは異なります。写真が入ったガターを取り外しても、高さはまだ異なります。例えば

ピクチャフィル マークアップの代わりに記事タグを空にして、これらの 2 つのプロパティを scss に追加すると、高さが 1/3 か 2/3 かに関係なく、すべての記事要素でまったく同じになります。

ガター付き:

なし:

ビューポートの高さの違いがどのように変化するのか、誰にも考えられますか? 私自身は完全にアイデアがありません。:(

よろしくラルフ

1週間くらいやってる気がする！

誰かがそれを助けることができれば、私は特異点をインポートするために縫い合わせることができません

私のapp.sass

私の宝石ファイル

bundle update 実行時の bundler 出力

これら 2 つのグリッド システムに重要な違いがあるかどうか疑問に思っています。表面上は何も見えず、なぜ一方を他方よりも選択したいのかわかりません。ここ数か月で、singularity と susy 1 の両方でサイトを構築しましたが、どちらもうまく機能しました。どちらも堅実な人々によって積極的に開発および構築されているようです。一方が他方に対して提供する特定の利点はありますか? on の方が適している状況はありますか?

私が達成したいのは、(現在のコンテキストに基づいて) 特定の量の列の幅の値 (パーセンテージ) を取得することです。

これを行うためのグリッド ヘルパーはありますか(おそらくfind-grid関数)。使い方の例を教えてください。

5 行 2 列で 10 個のブログ投稿を表示するブログ ホームページを作成しています。各列の幅は 50% で、左に浮動します。ブートストラップのグリッドを使用すると.col-md-6、各ブログ記事に使用されます。

singularitygs を使用してこれを達成するにはどうすればよいですか

ここでは、記事を最初の列に配置するように指示しています。スパンしている場所から位置に依存しないグリッド クラスを作成するにはどうすればよいですか?

以下のように独自の CSS を実行するだけですか?

この動作を実現するために、すべてのブログ投稿に単一のクラスを使用したいと考えています。

すべての値を 'px' (グリッド、ガターなど) に変換したいと思います。流体を静的グリッドにチャンス。

「固定ガター」を試してみましたが、これはグリッド全体ではなく、ガターだけで機能します。

これどうやってするの？

ありがとう
オグニ

gulp を使用するのはこれが初めてです。これまで、scss ファイルをコンパイルするために bundle exec compass watch を使用してきました。

gulp を実行すると、コマンド プロンプトに次のエラーが表示されます。

私の _base.scss ファイルでは、次のようになっています。

これらの拡張機能はすべて config.rb ファイルと gemfile で宣言されており、 bundle exec compass watch を実行すると正常に動作します

singularitygs をコメントアウトすると、toolkit と sassy-buttons をコメントアウトすると同じエラーが発生します。それらをすべてコメントアウトすると、ツールキットが使用する変数に気付かないため、エラーがスローされます。

私のgulpfile.jsには以下が含まれています：

私はこれに4時間以上頭を悩ませており、運がなかった場合に何ができるかを他の場所で探していました。バンドルされた依存関係が gulp で機能しないのは、私が初めてではありません。

私の宝石はすべて最新であり、bundle exec compass watch でコンパイルするとすべて正常に動作します。また、次のようないくつかの異なる gulp パッケージを再インストールしようとしました。

私は WAMP と Windows 8 も使用しています。

御時間ありがとうございます。