The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Trying to figure out baseline grid

  • # January 8, 2013 at 2:22 am

    This reply has been reported for inappropriate content.

    @chrisburton Nothing wrong with that! Nice solution by the way, that’s how I would do it (now that I’ve seen it).

    Also, looking at @wolfcry911‘s version made me think of a way to handle it without relying on a ‘magic number’; use inline-block for both headings as that way you can take advantage of the vertical-align property (which aligns to the baseline by default). The only downside of that is that you would need to have the h2 appear before the h1 in the markup. With all that being said, I’d still use @chrisburton‘s solution.

    # January 8, 2013 at 9:32 am

    @joshuanhibbert Thanks, Josh.

    # January 21, 2013 at 4:34 pm

    Alright guys.. I went back to a whole separate div grid container for the number. Not ideal. The reason being is I couldn’t get the jquery to work correctly for the ol with the text below each title. Maybe i missed something.

    # January 21, 2013 at 6:04 pm

    @wragen22 Personally, I prefer that each section collapses when I click on another.

    # January 21, 2013 at 7:15 pm

    @chrisburton what do you mean?

    # January 21, 2013 at 7:17 pm

    When you click on each section (Duke, Mission Script, etc), they all expand.

    What I mean is, if I intially click on Duke but then want to see what Mission Script offers, I prefer that Duke collapses and Mission Script expands when I click on a different section.

    # January 21, 2013 at 7:18 pm

    @joshuanhibbert Took a look at your blogs. Would you recommend applying your methods to my site? I’ve applied css normalize so thinking I would be overriding some things there.

    # January 21, 2013 at 7:19 pm

    Ooh. I didn’t even think about `vertical-align:middle;`. That might be a solution for you.

    # January 21, 2013 at 8:00 pm

    This reply has been reported for inappropriate content.

    @wragen22 If you like. The way I’ve explained it on my website is a fairly easy way to keep everything nice and aligned vertically. There are other ways, but I find that technique the most consistent.

    # January 21, 2013 at 8:02 pm

    @chrisburton hmmm.. not seeing a solution in trying vertical-align:middle

    Ah yes.. I was planning on getting that in the jquery at some point.

    # January 21, 2013 at 11:33 pm

    This reply has been reported for inappropriate content.

    @wragen22 Any reason that you’re hiding the information in the first place? It’s generally considered bad UX to do so without a good reason. I would recommend you simply show everything.

    # January 22, 2013 at 4:33 am

    Yes, listen to Joshua. He got very good article on his blog about setting baseline grid.

    Cheers :)

Viewing 12 posts - 16 through 27 (of 27 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed