logo
Ask your WordPress questions! Pay money and get answers fast! (more info)

Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.

If the asker does not get an answer then they have 10 days to request a refund.

$15
modify 2012 stylesheet

Hi, I'm trying to learn - get a handle on rem font sizing in wordpress 2012 so that I can use it in future themes.

While I think the concept is good, I can't get my head around the calculations they've used based on rembase: 14 and line-height of 24 And don't have time to get open the calculator for every small tweak.

The job here is easy, but I don't have the time to do it. I just would like someone to modify a default 2012 theme stylesheet to change it to a $rembase of "10". and maybe a line height of 20 (not sure if that's correct but it will be easier to build from) - and modify the rem numbers in the stylesheet to match (11px would be 1.1rem, etc..) wherever rem is used in 2012. The end result should look relatively the same but it doesn't have to be exact, or even pretty - I'm more interested in the math than the style.

I think a rembase of 10 would allow me to still use the feature going forward in a faster more friendly way.

Thanks for saving me the time to do this.

This question has been answered.

Connie Taylor | 01/31/13 at 3:26pm Edit
Tutorial: How to assign prize money


(7) Responses

See a threaded view of answers?

Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.

  • avatar
    Last edited:
    01/31/13
    6:43pm
    Monit Jadhav says:

    I think the link below can help you

    http://snook.ca/archives/html_and_css/font-size-with-rem

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

  • avatar
    Last edited:
    01/31/13
    7:55pm
    Duncan O'Neill says:

    You also want to set the line-height? Following from the above, I've copied and pasted the code from the twentytwelve theme's style.css, on line 480, and commented changes;


    /* Body, links, basics */
    html {
    font-size: 62.5%;/* changed from 87.5%, 14px */
    }
    body {
    font-size: 10px; /* was 14px */
    font-size: 1.4rem;
    line-height:2rem;/* line-height not specified in the original, this would set it to 20px */
    font-family: Helvetica, Arial, sans-serif;
    text-rendering: optimizeLegibility;
    color: #444;
    }


    At the risk of starting a religious war, there are reasonably good reasons not to set a 10px body font-size, partly because it means styling every element;

    http://csswizardry.com/2011/05/font-sizing-with-rem-could-be-avoided/

  • avatar
    Last edited:
    01/31/13
    9:38pm
    Naveen Chand says:

    Hi Connie,

    I guess I have saved the time for you ;) I have changed the rem values and line-height values in the entire stylesheet with a rembase of 10 and line-height of 20. Extensively used Excel to get the values. Changed over 175 remvalues and around 65 line-heights.

    Here is the code in paste-bin: http://pastebin.com/zZFCtzaK

    You can check for arithmetic accuracy.
    (Formula used remvalue = font-size/$rembase; line-height=$line-height/font-size;)

    Also, I think 20 line-height is okay. I have rechecked with Golden Ratio Typography Calculator by Pearsonified with these values: font-size:10 and content-width:480. The output it gave is 19. So I guess 20 is still okay with slight margin of error.


    Previous versions of this answer: 01/31/13 at 9:38pm

  • avatar
    Last edited:
    01/31/13
    8:33pm
    Connie Taylor says:

    Hi Duncan, nice to talk with you again. I understand what you are saying, but 2012 pretty much styles every element anyway with ridiculously rem numbers out to 9 decimal places including the padding and such they are also basing on the rembase. The very opposite of user friendly.

    Just out of curiosity - can't rem values be inherited?

    I can actually deal with the fonts easier as the px size fallbacks are there but would still need to do the calculations for the 14rem numbers. I definitely don't have the time to get a calculator out and figure out what all the paddings and line-heights are set to out to nine decimal places. I was hoping someone here could simplify it all so I could edit it without all the math. Open to suggestions.

    Am currently sticking with px, percent and em but do want to stay up with the times. Job will stay open for a bit hoping for an easier way to modify it.

  • avatar
    Last edited:
    01/31/13
    10:27pm
    Duncan O'Neill says:

    Hi Connie,

    Yes, it's been a while...

    As I understand it, rem values are relative to the root ( html element ) where em values are relative to the parent; http://snook.ca/archives/html_and_css/font-size-with-rem, which is actually quoted in the style.css.

    For what it's worth, I use ems and percentages.

    Without having looked at it, I think someone else has gone through, and offered you an edit of style.css

    If you're comfortable with the system you're used to, you could always use a decent text-editor to do a search and replace to get rid of all the rem values. In which case the fall-back would be px.

    best,

  • avatar
    Last edited:
    01/31/13
    10:46pm
    Connie Taylor says:

    Thank you very much Naveen - as I said it would just save a lot of time while getting to learn the new way and I can graduate to more complex calculations later.

  • avatar
    Last edited:
    01/31/13
    10:53pm
    Connie Taylor says:

    will read through that - your resources are always great. I will probably end up using a combination of both and naveen's changes will give me a start on that. Thank you for your input - as always great help.

This question has expired.



Connie Taylor, Arnav Joy, Dbranes voted on this question.



Current status of this question: Completed



Please log in to add additional discourse to this page.





Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.

If the asker does not get an answer then they have 10 days to request a refund.