Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Vertical rhythm for Twitter's Bootstrap

Tags:

Are there any existing plugins/extensions/methods to maintain vertical rhythm for Twitter's Bootstrap project?

It is quite a laborious task to create good vertical rhythm templates, I would rather use a pre-baked solution. I am open to creative suggestions, I just want my pages nicely aligned in the end.


Edit: To clarify what I am after...

Vertical rhythm is a technique used to ensure that every element on a page lines up according to a horizontal grid. This is achieved by setting the height, padding and margin of every item to conform to a standard unit line size. If a line of text in a paragraph is 20px high (including margin and padding) then maybe a heading 4 will also be 20px high, and a heading 1 might be 40px high. This maintains the rhythm of the text across columns.

I want to use this technique in combination with bootstrap (from twitter), but it would be quite a lot of work to get everything looking nice. For example, all the buttons would need to conform to the same vertical height definition as paragraph text etc... There are other standard controls used in bootstrap which would also all need rules to define their height appropriately.

I could start with a generic solution for vertical rhythm, which would go a long way to achieving what I want, but I wanted to know if anyone else has started this, or has any idea of another way to achieve this.


Edit: Assuming there is nothing like what I want...

Maybe just a good vertical-rhythm based css template would be a good starting point. Preferably something that is continuing to be developed, is already usable, well thought out, and adaptable.

like image 867
Billy Moon Avatar asked Mar 17 '12 15:03

Billy Moon


1 Answers

Since no one has linked to an actual vertical rhythm boilerplate as you suggested, I took the one I use, commented it, and created a github repo for it here https://github.com/jonschlinkert/vertical-rhythm

As it says in the readme, this is a starting point for your own project.

like image 196
jonschlinkert Avatar answered Nov 27 '22 06:11

jonschlinkert