Compass Tutorials #10 - Vertical Rhythm
Why Stack Overflow recommends it
Stack Overflow users link it when answering questions about vertical rhythm and baseline grids in Compass, as a short video starting point alongside the official docs.
Recommended by 2 people across 2 different months, 2012 to 2013.
What it is
A 9-minute screencast from the Level Up Tuts Compass series (Syntax channel) showing how to implement vertical rhythm in Sass using Compass's typography module. It walks through the Compass vertical rhythm helpers and links to the reference docs and a 24ways article on the concept.
What people said
Recommends patrick · 2012-08 · Stack Overflow · on “Compass Vertical Rhythm - HR tags breaks vertical grid”
I'm trying to understand vertical rhythm and read the whole day about, tried several things but my layout keeps breaking because I fail to apply compass padding trailer correctly as you can see in the screen shot: ! screenshot [LINK] The line with the yellow background is my hr tag. The ones with the orange background are articles. Here's my code: HTML: <article>…</article> <hr/> <article>…</article> CSS: hr { background: rgba(yellow, 0.3); @include trailing-border; //border: 0; //height: 0; //border-top: 1px solid rgba(0, 0, 0, 0.1); //border-bottom: 1px solid rgba(255, 255, 255, 0.3); } For the sake of keeping it simple I commented my HR styling out. Here's another example where the gap is
Recommends Titusz · 2012-12 · Stack Overflow · on “Vertical rhythm for Twitter's Bootstrap”
The Compass CSS Authoring Framework [LINK] has explicit support for vertical rhythm [LINK] based typography. For starters you can check out this short video tutorial [this video] .
Cites Andrey Mikhaylov - lolmaus · 2013-07 · Stack Overflow · on “CSS Typography - Why is the baseline grid totally off?”
Setting up vertical rhythm manually is a pain. You have tagged your question with scss , so why not use its awesomeness? Have a look at Compass's Vertical Rhythm! What Compass is: Snugug's training glossary [LINK] Official Vertical Rhythm documentation [LINK] Some useful guides, videos and articles on Compass Vertical Rhythm: Vertical Rhythm with Compass [LINK] Compass Tutorials #10 - Vertical Rhythm - YouTube [this video] Keep the Rhythm: Vertical rhythm on objects having dynamic heights [LINK] Introduction to Building Websites Using Susy and Compass's Vertical Rhythm [LINK] Google it [LINK] for more!
Cites Jonathan · 2013-08 · Stack Overflow · on “How to make Compass Vertical Rhythm output Rems instead of Ems with px fallback?”
I want to do this: [this video] but output rems (with px fallback) instead of ems. Apparently this [LINK] is added to compass and should somehow work, but I don't quite get what do I need from [LINK] to my .scss -file to make it. If I were to just take the code from [LINK] as a mixin (even without Compass at all) and use: @include set-font-size() instead of: @include adjust-font-size-to() It works beautifully with rem values and px fallback. But if I just try to use Compass and go with $font-unit: 1rem; $relative-font-sizing: false; It works but without px fallback. If someone could put the full .scss code needed for Vertical Rhythm to work with Rems, I'd appreciate it very much. And why do I nee