Grow your CSS skills. Land your dream job.

Trying to figure out baseline grid

  • # January 8, 2013 at 2:22 am

    @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.

    http://jamilopitts.com/kirby

    # 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

    @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

    @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.
    Link: http://joshnh.com/2011/08/03/how-to-set-up-a-baseline-grid/

    Cheers :)

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

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".