25

TwitterのBootstrapプロジェクトの垂直リズムを維持するための既存のプラグイン/拡張機能/メソッドはありますか？

優れた垂直リズムテンプレートを作成するのは非常に骨の折れる作業です。プリベークされたソリューションを使用したいと思います。私は創造的な提案を受け入れています。私は自分のページを最終的にうまく整列させたいだけです。

編集：私が何を求めているのかを明確にするために...

垂直リズムは、ページ上のすべての要素が水平グリッドに従って整列するようにするために使用される手法です。これは、すべてのアイテムの高さ、パディング、およびマージンを標準の単位ラインサイズに一致するように設定することによって実現されます。段落内のテキスト行の高さが20px（余白とパディングを含む）の場合、見出し4も20pxの高さになり、見出し1の高さは40pxになる可能性があります。これにより、列全体でテキストのリズムが維持されます。

この手法をブートストラップ（Twitterから）と組み合わせて使用​​したいのですが、すべてを美しく見せるためにはかなりの作業が必要になります。たとえば、すべてのボタンは、段落テキストなどと同じ垂直方向の高さの定義に準拠する必要があります。ブートストラップで使用される他の標準コントロールもあり、高さを適切に定義するためのルールも必要です。

私は垂直リズムの一般的な解決策から始めることができました。それは私が望むものを達成するのに大いに役立ちますが、他の誰かがこれを始めたかどうか、またはこれを達成する別の方法のアイデアを持っているかどうかを知りたいと思いました。

編集：私が欲しいもののようなものは何もないと仮定して...

たぶん、ちょうど良い垂直リズムベースのcssテンプレートが良い出発点になるでしょう。できれば、開発が続けられ、すでに使用可能で、よく考えられ、適応できるものが望ましい。

4

4 に答える 4

8

あなたが提案したように実際の垂直リズムボイラープレートにリンクしている人はいないので、私は使用しているものを取り上げてコメントし、ここでgithubリポジトリを作成しましたhttps://github.com/jonschlinkert/vertical-rhythm

readmeにあるように、これはあなた自身のプロジェクトの出発点です。

于 2012-10-04T02:46:32.750 に答える
5

あなたが何を求めているのか理解されていると思います。問題は次のとおりです。1次元のグリッドスキーマを探しています（たとえば、比例した線の高さに応じて設定された「垂直リズム」...言い方をすれば、特定のページに沿って物事を測定および整列しますY軸）...しかし、そのような方法で物事を行うことは、Bootstrapの既存の12列グリッドシステム（対照的に、ページのX軸に沿って物事を測定および整列する）と対立する可能性があります。フレームワークの各「行」の高さを「比例化」する必要があります。ただし、Bootstrapの設計は、見栄えを良くするためだけに列を介した比例関係を促進するだけでなく、ページのレスポンシブ化も目的としていることに注意してください。--つまり、ページ要素が互いに垂直方向に「流れる」ようにし、流動的にネストできるようにします。そして、その意味で、Y軸に沿って測定された要素の高さに関する問題はすでに説明されている可能性があります...ベースCSSファイルのほとんどの活版印刷要素は比例emサイズ、および/または同様に比例topを持っていることを思い出します一般的に言って、フレームワークがあなたが考えている方法で追加のスタイリングの必要性を叫ぶほど、物事は恣意的ではありません。

それでも、BootstrapのベースCSSファイルはそれほど広範ではないため、さまざまな要素クラスとIDの高さをそれほど問題なく自分で微調整することは不可能です。いずれにせよ、すべてのスタイル付き要素で実際にそれを行う必要がある可能性はほとんどありませんよね？実際、フレームワークとして、Bootstrapには、フロントエンドを設計しているアプリにはない可能性のある多くの要素のスタイリングが含まれています。（例：アプリにドロップダウンメニューがありますか？すばらしいです。ドロップダウンメニューの「垂直リズム」のスタイルを設定できます。ただし、ナビゲーションバーでピルやタブを使用していますか？ピルはありませんか？スタイルシートの数百行のコードを削除するだけで、これらの不要な要素に「垂直リズム」を適用する手間を省くことができます。）それ以外の場合は、実際に必要な場合は、テキストエディタを使用して検索します。行の高さ、上下のパディング、余白、フォントサイズなどの値を置き換えて、テストします。CSSフレームワークとして、Bootstrapがどのようにレイアウトされているかはかなり明確です。関連する要素は適切にソートされており、ほとんどの場合、スタイルシートのコード内でグループ化されています。ベースCSSファイルの微調整が完了したら、改訂されたスタイルシートを縮小して...既存の縮小バージョンを置き換えます...または、最適化する場合は、CloudFrontから提供します。

于 2012-04-01T09:54:23.473 に答える
4

Compass CSS Authoring Frameworkは、垂直リズムベースのタイポグラフィを明示的にサポートしています。手始めに、この短いビデオチュートリアルをチェックしてください。

于 2012-12-30T10:16:17.860 に答える
2

Square Grid CSSフレームワークを見たことがありますか？

http://thesquaregrid.com/

35の等しい幅の列に基づく、設計者と開発者向けのシンプルなCSSフレームワーク。開発時間を短縮し、美しい構造のWebサイトを作成できるようにすることを目的としています。

正方形グリッドは標準の水平グリッドを提供しますが、28pxの標準の「正方形」を使用して垂直グリッドも維持します。これは実際には単なるグリッドであり、Bootstrapのような完全なCSSライブラリではありません（つまり、ボタンやメニューなどはありません）。

以前は1つのプロジェクトに使用していて、非常に直感的であることがわかりましたが、特にレスポンシブデザインについて考える場合、垂直グリッドと水平グリッドの両方を追跡するのは難しいと最終的に判断しました。

この2つを組み合わせるか、少なくとも、非常に単純なCSSである正方形グリッドのソースコードを見て、ニーズに合わせてBootstrapを適応させる方法についていくつかのアイデアを得ることができる場合があります。

于 2012-06-23T19:27:55.973 に答える