Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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

Marston Gould
seal-mask
.a{fill-rule:evenodd;}techdegree
Marston Gould
PHP Development Techdegree Student 17,314 Points
Posted by Marston Gould
.a{fill-rule:evenodd;}techdegree
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
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.

sakatagintoki
sakatagintoki
12,624 Points
sakatagintoki
sakatagintoki
12,624 Points

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 ;-;

Ye Wang
Ye Wang
4,166 Points

Good reminder, dev-tools. Thank you.

rachaelhampton
rachaelhampton
3,352 Points
rachaelhampton
rachaelhampton
3,352 Points

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

Judd Higgins
Judd Higgins
8,846 Points

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

sakatagintoki
sakatagintoki
12,624 Points
sakatagintoki
sakatagintoki
12,624 Points

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.

rachaelhampton
rachaelhampton
3,352 Points

I agree, I use Brackets as well.