Twitter的引導程序的垂直節奏

Question

是否有任何現有的插件/擴展/方法來維護Twitter的Bootstrap項目的垂直節奏？

創建良好的垂直節奏模板是一項相當費力的工作，我寧願使用預先製作的解決方案。我願意提出富有創意的建議，我只希望我的頁面能夠很好地對齊。

---

編輯：爲了澄清，我所追求的......

垂直節奏是用來確保根據水平網格在頁面排隊的每一個元素的技術。這是通過設置每個項目的高度，填充和邊距以符合標準單位線的大小來實現的。如果段落中的文本行高度爲20px（包括邊距和填充），那麼標題4也可能是20px高，標題1可能是40px高。這保持了文本跨列的節奏。

我想將這種技術與bootstrap（來自twitter）結合使用，但要讓所有的東西看起來不錯，這將是相當多的工作。例如，所有的按鈕都需要符合與段落文本相同的垂直高度定義......還有其他標準控件用於引導程序，它們也都需要規則來適當地定義它們的高度。

我可以從一個垂直節奏的通用解決方案開始，這將有助於實現我想要的東西，但我想知道是否有其他人已經開始這個，或者有任何其他方法來實現這一點。

---

編輯：假設有沒有像我想要什麼......

也許只是一個很好的垂直節奏基於CSS模板將是一個很好的起點。最好能夠繼續開發的東西已經可用，經過深思熟慮並具有適應性。

Answer 1

由於沒有人鏈接到一個實際的垂直節奏樣板如你所說，我把我使用的一個評論它，並創造了一個github上回購了在這裏https://github.com/jonschlinkert/vertical-rhythm

，因爲它說的自述，這是您自己項目的起點。

Answer 2

我認爲你所追求的是被理解的。問題是：你正在尋找一個維度上的網格模式（根據例如比例線高度設置的「垂直節奏」......以某種方式來衡量和對齊給定頁面上的東西Y軸）......但以這種方式做事可能會與Bootstrap現有的12列網格系統（相反，沿着頁面的X軸測量和排列事物）不一致。你想「比例」框架中每個「行」的高度。但請記住，Bootstrap的設計旨在通過專欄來提升不僅僅是爲了看起來不錯，而且還要使頁面響應-ie，以允許頁面元素彼此「流動」垂直，並流暢地嵌套。而且，從這個意義上講，與沿Y軸測量的元素的高度有關的問題可能已經被考慮到了......我記得基本CSS文件中的大多數印刷元素具有比例em大小，並且/或者同樣比例頂部和底部填充等等。一般來說，事情並不是那麼隨意，以至於框架尖叫着以您所考慮的方式需要額外的樣式。即使如此：Bootstrap的基本CSS文件並不是那麼令人無法忍受的廣泛，它不可能讓你自己調整各種元素類和ID的高度，而不會有太多的麻煩。在任何情況下，你都不太可能需要對每個樣式元素都這樣做，對吧？事實上，作爲一個框架，Bootstrap包含許多元素的樣式，這些元素甚至可能不在您設計前端的應用程序中。 （例如：你的應用程序是否有下拉菜單？好的，你可以設置下拉菜單的「垂直節奏」。但是：你還在導航欄中使用藥片或標籤嗎？沒有藥片，你說？那麼，你可以在樣式表中刪除幾百行代碼，並節省你不得不對這些不需要的元素應用你的「垂直節奏」的努力。）另外，對於仍然存在的元素，你實際上做了只需使用文本編輯器查找 - 替換線高度，頂部和底部填充，邊距，字體大小等值並進行測試。作爲一個CSS框架，Bootstrap的佈局非常清晰;相關的元素很好地排序，並且在樣式表的代碼中大部分組合在一起。一旦完成了對基本CSS文件的調整，就可以縮小修改後的樣式表......以替換預先存在的縮小版本......或者，如果您想優化，也許只需從CloudFront提供它即可。

Answer 3

你看過Square Grid CSS框架嗎？

http://thesquaregrid.com/

用於設計和開發一個簡單的CSS框架，基於35 等寬的列。它旨在縮短開發時間，並幫助您創建美觀結構的網站。

方形網格提供了一個標準的水平網格，但它也保持一個垂直網格，使用28px的標準「正方形」。它實際上只是一個網格，而不是像Bootstrap這樣的完整的CSS庫（即沒有按鈕，菜單等）。

我曾經爲一個項目，發現它很直觀，但我最終認爲，我很難跟蹤垂直和水平網格，特別是在考慮響應式設計時。

您可能可以將兩者結合起來，或者至少看一看非常簡單的CSS網格源代碼，以瞭解如何改編Bootstrap以滿足您的需求。

Answer 4

Compass CSS Authoring Framework明確支持基於vertical rhythm的排版。對於初學者，你可以看看這個短片video tutorial。