1

プロジェクトで BluePrint.css フレームワークを使用してきました。それはうまくいきます。

ただし、私が調べたほとんどの CSS フレームワークと同様に、テキストの多い新聞風のレイアウトにより適しているように見えます。SharePoint や iGoogle などの「ウィジェット」メタファを利用する Web アプリケーションの構築に使用すると、使用が少し難しくなります。重要な問題は、Web アプリでは、多くの場合、情報の視覚的なコンテナーを作成することが標準になっていることです。これにより、グリッドを壊してしまうパディングが必要なボックスが導入されます。

別の説明としては、コンテナー ボックスが 8 つのグリッド列にまたがる場合、コンテナー ボックスにはパディングがあるため、8 つのグリッド列に収まらないということです。

これに対する回避策を見つけましたが、それらはすべて、少し面倒な別の CSS レイヤーを追加する必要があります。次のプロジェクトに進む前に、他の誰かがこの問題に遭遇したかどうかを確認し、a) この視覚的要件に対応するグリッド システムを見つけたか、b) のいずれかでこれに対応するいくつかの巧妙な方法を見つけたかどうかを確認したいと思いました。既存の CSS フレームワーク。

4

2 に答える 2

0

これを処理する方法は、グリッド割り当てを持つコンテナー/ラッパーを使用し、その中に任意のパディング/マージンを含む div を追加することです。

<style type="text/css">.widgetType {padding: 10px;}</style>
<div class="span-8 column clearfix">
  <div id="myWidget" class="widgetType widgetType-skin-myskin">
    <!-- content -->
  </div>
</div>

実際、ブループリントには、これを実行してグリッドを維持するための基本クラスさえあります。クラスは .box であり、思い出すと 1.5em のパディングが追加されます。もちろん、このパディングは好みに合わせて深すぎる可能性があるため、そのクラスを使用できず、必要に応じて任意のものを使用できます

于 2009-12-01T20:05:21.903 に答える
0

@roberkules は、私が解決策を思いついたかどうかを尋ねました。並べ替え。少なくとも、それは当時の目的を果たしました。長い間ブログに投稿しようと思っていたのですが、なかなかできなかったので、ここで答えをまとめてみます。

一般的に、私たちは2つのことをしました。1 では、グリッドを壊さずに `.span-x' に境界線を与えることで「ボックス」を作成する機能を追加しました。2 では、グリッド システムに「半分」と「4 分の 1」の測定値の概念を追加することで、標準的な 24 列の構造をより詳細に分割しました。

ボーダー付きのコンテナ ボックスを作成するために、次のクラスを追加しましたspan-border(独自の追加でできる限りブループリントの span-x 構文を維持しました)。

注: すべての例は、幅 15 ピクセルのガター (各スパン x は 40 ピクセル) を持つ幅 25 ピクセルの列のグリッドに基づいています。

div.span-border {
margin-left: -1px;
margin-right: 14px;
border-width: 1px;
border-style: solid;
}

したがって、ボーダー付きのコンテナー「ボックス」を作成したいときはいつでも、そのクラスを追加できます。例：

<div class="span-8 span-border">our box</div>

これにより、8 列にまたがる境界線付きのボックスが得られます。目標は、ページ上の小さなボックスごとに新しい CSS を作成する必要がないように、開発者がそこにブループリント グリッド CSS を引き続き使用する要素を作成できるようにすることでした。

そのボックスの中に 2 つの列が必要だとしましょう。一方が他方より狭い。スパン 3 とスパン 5 を入れることができ、それらは収まりますが、ボックスの端までぶつけてしまい、見苦しくなります。

そのため、グリッドの分数を使用して物事を引き伸ばすためにいくつか-halfのスタイルを追加しました。-quarter

CSS の例:

.pad-1 {
padding: 20px;
}

これにより、div 全体に 20px のパディングが追加されます。これは、水平方向 = 40px の「1」グリッド単位です。では、ボックスの HTML を次のように書き直してみましょう。

<div class="span-7 pad-1 span-border">our box</div>

私たちのボックスは、7 + 1 = 8 として 8 ブループリント グリッド ユニットを使用します。違いは、コンテンツ用の 8 ユニットではなく、1 つの完全なユニットとして 7 を使用することです。つまり、パディングに使用されます。

次の中に列を追加できるようになりました。

<div class="span-7 pad-1 span-border">
    <div class="span-3">left column</div>
    <div class="span-4 last">right column</div>
</div>

出来上がり！ブループリントがネストされた要素の概念を処理できるようになりました。

このシステムでは、必要に応じて無限にネストできます。

時間の経過とともに、新しい状況に対応するために少し調整しました。たとえば、奇数のグリッド列を持つ要素を 2 つの等しい列に分割することが必要になる場合がありました。そのために、次の概念を追加しましたstretch-x。

.span-1.stretch-half {width:45px;}

.span-1通常、幅は 25 ピクセル (40 ピクセル - 15 ピクセルの右余白) です。これで、フル グリッド単位 (20px) の 1/2 だけ引き伸ばされました。

既存のすべての span-x 設定に対してこれを行います。

.span-2.stretch-half {width:85px;}
.span-3.stretch-half {width:125px;}
.span-4.stretch-half {width:165px;}
...
.span-23.stretch-half {width:925px;}

最初の例に戻ると、2 つの等しいネストされた列を次のように作成できます。

<div class="span-7 pad-1 span-border">
    <div class="span-3 stretch-half">left column</div>
    <div class="span-3 stretch-half last">right column</div>
</div>

3 + 3 + 半分 + 半分 = 7.

それで、それが私たちが思いついたものです。時間が経つにつれてうまくいきました。最初にニーズを把握して微調整するのは少し面倒ですが、一度構築すると、ラピッド プロトタイピングが非常に簡単になり、グリッドの概念に全員を参加させることができれば、大量の CSS の肥大化を防ぐことができます。

サイトが大規模なグループによって構築および保守されている場合は、このアプローチを強くお勧めします。サイトが 1 人で構築されており、時間の経過とともにソース HTML に大量の更新が必要になるとは限らない場合、これは少しやり過ぎかもしれません。必要に応じて独自のカスタム CSS を作成する方が簡単かもしれません。特定のサイト。

おー！もう 1 つ: 免責事項: IE6 は一度に 2 つのクラスを参照する CSS を処理できないため、上記のいずれも IE6 では機能しません。当時、IE6 をサポートする必要がありました。私たちが行ったことは、たとえば、 の div を探して、class="span-8 stretch-half"IE6 のspan-8-stretch-half.

その後、IE6 は、そのような個々のクラスで少し肥大化した別のスタイル シートを取得しました。それは醜いものでしたが、うまくいきました。そして、私たちは本当に抗議のためにだけ IE6 をサポートしていました ;)

于 2011-11-02T18:35:59.457 に答える