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
Gareth Redfern
36,217 PointsBaseline Line Grids
After watching the Typography videos in the latest CSS Deep Dive I wondered what people's thoughts were on trying to keep a vertical rhythm using a baseline grid.
It is really easy to keep to a baseline grid until you introduce images and videos as these tend to break the grid. There is a write up here which uses jQuery to help with this but using javascript seems excessive and just doesn't feel right.
Tim brown spoke about Fluid Line height which I blogged about last year but nothing seems to have been introduced into the spec.
Would be good to hear other people's thoughts.
3 Answers
Alexander Sobieski
6,555 PointsGood topic!
Thoughts: 1) At my end, the jquery example didn't seem to actually keep things on that much of a grid. (the text eventually started to have some vertical drift.
2) I know this is not a CSS option, but what about good 'ol fashioned standards. One could choose to only upload images to your site that (at 100% on a desktop display) are in multiples of your grid.
Example: Design a page to use a 14x14 grid (Width: 994px, 12col, col w: 70, gutter 14). Use photoshop to make sure your images are, for example, 210px tall, and add a margin of 14px or 28px to the CSS.
--Then go calculate/convert the % for responsive design.
If you make your original design fit a grid exactly, where are the issues with using CSS %, min/max width, etc. to keep a reasonably acceptable vertical harmony? As soon as the layout starts to break, throw-in a media query, no?
Certainly, having 25 media queries to help the spanse of displays seems a bit much, but we're also comparing print (a fixed and permanent object) to web - which is inherently fluid (and increasingly more so).
3) I suppose another "hack" would be to put each image inside an appropriately grid-friendly div, and make sure the div was perfectly conformed. Setting the CSS to "overflow-hidden:" to allow bits of it to clip if it's just outside the correct size, could help a bit.
alternately putting the image in a div, making the div conform to the baseline height, and giving the image the max-width 100% to conform to the width of the div. Then, any gap between the bottom of the image and the div would appear as margin.
But these aren't specifically semantic.
4) That said, in my designs, I worry about visual harmony at the block level. I try to make sure all the block elements, margin, and padding fit well, and then stuff within can have some leeway. The overall effect is to still have a grid-based (with vertical grid) feel because we can still recognize the pattern.
William Clark
1,701 PointsThis is something that I've struggled with in the past. I'd recommend reading this:
http://coding.smashingmagazine.com/2012/12/17/css-baseline-the-good-the-bad-and-the-ugly/
and also:
Alexander Sobieski
6,555 PointsAll Your Baseline Are Belong To Us
hehehehe