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
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.
-
Last edited:
01/31/13
6:43pmMonit 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 */ -
Last edited:
01/31/13
7:55pmDuncan 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/ -
Last edited:
01/31/13
9:38pmNaveen 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
-
Last edited:
01/31/13
8:33pmConnie 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. -
Last edited:
01/31/13
10:27pmDuncan 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, -
Last edited:
01/31/13
10:46pmConnie 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.
-
Last edited:
01/31/13
10:53pmConnie 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.