Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Foundations Web Typography Responsive Text and Vertical Rhythm: Part 2

Marston Gould
Marston Gould
PHP Development Techdegree Student 17,314 Points

Whoa nelly....

Okay its very easy to understand the concept that is being shown in the baseline.it stylesheet, but the where all those new values came from to space the various text items to sit exactly on those lines seem to have come out of thin air. How is someone supposed to know how to do that themselves without a ton of frustration?

4 Answers

Geoffrey Powell
Geoffrey Powell
15,358 Points

I'm guessing that Guil already had those values calculated for the vertical rhythm. If you google 'css baseline grids' you'll find lots of resources on how to calculate/generate them.

One needs to tinker with things in chrome dev-tools I imagine, and it probably isn't all that hard with practice. If he explained how he came up with the padding and margin figures by trial and error 'twould be a looooonng video.

EDIT: Oops, necro'd a 4-month-old thread ;-;

Good reminder, dev-tools. Thank you.

Feeling that same way as Marston posted 7 months ago..

Me, too! I thought maybe I missed a video somewhere explaining how those were all found out magically!

I strongly recommend Adobe Brackets as a text editor for anyone who is still struggling to wrap their heads around the box-model and how to calculate padding/margin/border measurements. It has a preview feature that updates in real time as you write your code. You can always experiment in the dev tools (like I said 3 months ago), but Brackets is a little simpler.

I agree, I use Brackets as well.