問題タブ [singularitygs]

Web開発を始める初心者です。

私は多くのグリッド システムを経験してきましたが、singularitygs の背後にあるコンセプトが本当に気に入っています。とてもユニークです。

Singularitygs はまだ試していませんが、他のグリッド システムで発生しているこの 1 つの問題について質問したいと思います。

これは入れ子になったセルをコンテナ内で上下に並べる問題です。

CSS3 はストレッチ オプション付きのフレックスボックスを提供しますが、IE8 または 9 ではサポートされていません。

singularitygs は、この書式設定の問題に対する解決策を提供していますか? singularitygs を使用しているときに、CSS テーブル レイアウトに頼らずにセルを並べるにはどうすればよいですか?

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

Singularity でネストされたグリッドを取得するにはどうすればよいですか? シンプルなグリッドを作成しましたが、フローティング メソッドでネストされたグリッドが必要です。

私のサンプル: http://sassmeister.com/gist/7326030

私の webapp には、列を使用して propertyName -> propertyValue ペアを配置する場所 (ユーザー プロファイルなど) がいくつかあります。プロパティ値が短く、プロパティ名と値の両方を 1 つの行に入れる余裕がある場合もありますが、プロパティ値が大きい場合 (ユーザーの関心の雲や何かを説明する段落など) があるため、新しい行全体を property_value に割り当てることが理にかなっています。

property-value が長すぎる場合に、(主に singularity.gs を使用して) property-value を別の行に移動させる方法はありますか?

新しいプロジェクトのために Singularity にひねりを加えました。今までSusyを使っていました。通常、私は質問を個別に投稿することを好みますが、現在の場合、質問は 1 つの中心点を扱って接続されています。設定は以下です。

私のメイン ページは、背景画像を含むヘッダーとグラデーションを含むフッターであり、コンテンツを含むコンテナーはマージンで囲まれている必要があります。メインのマークアップ スケルトンは次のようになります。

ラップとコンテナの基本的なスタイリングは次のようになります。

今、私は2つの問題があります:

1) ページに 2 つのギャップがあります。

最初のものは、overflow-x: hidden; で修正できます。%wrap または .mainwrap で。しかし、.mainwrap と .footwrap の間の 2 番目のギャップは、それでは修正できません。.mainwrap と .footwrap の間の境界の望ましい外観は、次のようになります。メインラップの下に視覚的に表示されるフッターとメインラップには、目に見えるドロップシャドウがあります。

しかし、説明されている html と css のセットアップでは、既に上で見たようなギャップが常に発生します。

理由はありますか？:(

2) コンテナーの設定 これは、私が最も問題を抱えている最も不確実な部分であり、処理するベスト プラクティスは何かを自問します。私の基本設定は次のとおりです。

そして.containerのために私は追加しました：

Github の Singularity のフォーラム スレッドの 1 つで提案されているように。しかし、ベストプラクティスが何であるかはまだわかりません。基本的に、margin: 0 auto; に切り替わる最小のパディングがあります。コンテナーの定義された最大幅に達したとき。padding-left/right と gutter-span および max-width の方法は適切ですか?

コンテナの基本的な列数と最大幅を定義する必要があることを意味しますか。その最大幅に達したら、最大幅を上に変更し、add-grid() でアクティブなグリッド設定を再定義して、パディングを調整します。コンテナーの最大幅が 1400 または 1600px になるまで、これを続けます。また、より広いビューポートのブレークポイントでは、ガター スパンの倍数を使用する必要があります。要約すると、例えばそのようになりますか？

しかし、基本的に、コンテナーで細かい方法で物事を制御したい場合、それはかなりの数のブレークポイントにつながりますか? または、何とかよりエレガントなソリューションがありますか?

よろしくラルフ

Singularity を使用してプロジェクトのリストを表示するための最適なソリューションを見つけようとしています。

基本的に各行の最後の項目のパディングを削除したいのですが、そのパディングをすべてのプロジェクトのプロジェクト全体の幅に戻します。

解決策は特異点よりもcssに関係があると思いますが、特異点内に私が見逃している良い解決策があるのではないでしょうか?

これらのプロジェクトは、最終的に cms によって定期的に追加されます。

例: http://sassmeister.com/gist/7916151

Singularity の適用におけるいくつかの特定の側面について、私はまだ戸惑っています。たとえば、あることについて疑問に思います。次の要点では、いくつかの単純な要素を設定しました。下部の青はフッター、中央の黄色はコンテンツ、上部の 3 つのセル (赤、緑のフクシア - グリッドスパンによって構築) はヘッダーを構築します。3 つの部分はすべて同じコンテナーによってビルドされます。

http://sassmeister.com/gist/8010028

ヘッダーを他の2つよりも広くするための最もクリーンなアプローチは何でしょうか。

• ラッピングヘッダー要素の幅をパーセンテージで定義することによって?
• ヘッダー要素にレイアウト mixin を適用し、まったく新しいコンテキストを設定することによって?

それとも、すべて同じコンテナ設定とコンテキストに依存している場合、3 つのうちの 1 つに異なる幅を持たせることは不可能でしょうか? よろしくラルフ