• Resolved graftedin

    (@graftedin)


    I’ve never been convinced that I need to use rem in my css and so I don’t tend to like themes that force it on me. It makes changing font sizes, paddings, margins, anything else using that much more complicated.

    I’m dying to find a good base theme to then customize so I probably won’t throw yours away right away. However, it would really be nice if this was an option that I could opt in to rather than being forced to use it and then override it.

Viewing 3 replies - 1 through 3 (of 3 total)
  • Theme Author Anthony Hortin

    (@ahortin)

    In short, using REM makes it considerably easier to work out sizes/padding/margin as the size is relative to the root (html) elememt rather than relative to the parent.

    Here’s the original article that got me on to REM’s
    http://snook.ca/archives/html_and_css/font-size-with-rem

    This one is a few years old now so you can obviously find lots more on the topic, using google.

    The main takeaway is;

    The em unit is relative to the font-size of the parent, which causes the compounding issue. The rem unit is relative to the root—or the html—element. That means that we can define a single font size on the html element and define all rem units to be a percentage of that.

    If you plan on using Quark, there’s no reason why you can’t just use px if you need to change things or when you create your own child theme. Just use whatever you’re comfortable with.

    Thread Starter graftedin

    (@graftedin)

    I didn’t read that very closely but it would seem to me the primary reason do rem or even em is so that the font size is based on the browser’s settings for font size? And that would benefit people that have these purposefully set larger?

    If theme developers used a simple formula that allowed me to set these sizes on the fly with out a calculator I might be more on board. This is the example from the article….and I could get behind something that simple.

    =================================
    html { font-size: 62.5%; }
    body { font-size: 1.4rem; } /* =14px */
    h1 { font-size: 2.4rem; } /* =24px */
    =================================

    However in just a quick scan of your css I see your base size as 16px or 1rem which then doesn’t add up to a quick easy formula for setting these. And then I see the h1 bottom margin set at 10px/.625rem. Now I can do the calculation to 12px/.75rem with out a calculator but not for 10px. And in other themes I’ve seen much longer decimals where you absolutely need a calculator.

    The bottom line is I don’t want to have to pull out a calculator every time I want to set a size or margin.

    Theme Author Anthony Hortin

    (@ahortin)

    Then don’t. As I said, if you’d prefer to simply use px, then you’re welcome to do that when you make your child theme edits.

    The primary reason I use rem (over em) is that it makes calculating sizes considerably easier as it’s based on the root size, not the parent size.

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Why REM in CSS?’ is closed to new replies.