From d7ba9b6944ecee32407612eafb770b6965330e25 Mon Sep 17 00:00:00 2001 From: lancewillett Date: Wed, 25 Jul 2012 16:46:21 +0000 Subject: [PATCH] Twenty Twelve: add explanatory notes to top of style.css for the use of rem and pixel units for font-size and line-height values, props drewstrojny. See #21379. git-svn-id: http://core.svn.wordpress.org/trunk@21326 1a063a9b-81f0-0310-95a4-ce76da25c4cd --- wp-content/themes/twentytwelve/style.css | 35 ++++++++++++++++++++++++ 1 file changed, 35 insertions(+) diff --git a/wp-content/themes/twentytwelve/style.css b/wp-content/themes/twentytwelve/style.css index 2af4934aa3..4d79a7b1f1 100644 --- a/wp-content/themes/twentytwelve/style.css +++ b/wp-content/themes/twentytwelve/style.css @@ -14,6 +14,41 @@ This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned with others. */ +/* =Notes +-------------------------------------------------------------- +This stylesheet uses rem values with a pixel fallback. The rem +values (and line heights) are calculated using two variables: + +$rembase: 14; +$line-height: 24; + +---------- Examples + +* Use a pixel value with a rem fallback for font-size, padding, margins, etc. + padding: 5px 0; + padding: 0.357142857rem 0; (5 / $rembase) + +* Set a font-size and then set a line-height based on the font-size + font-size: 16px + font-size: 1.142857143rem; (16 / $rembase) + line-height: 1.846153846; ($line-height / 16) + +---------- Vertical spacing + +Vertical spacing between most elements should use 24px or 48px +to maintain vertical rhythm: + +.my-new-div { + margin: 24px 0; + margin: 1.714285714rem 0; ( 24 / $rembase ) +} + +---------- Further reading + +http://snook.ca/archives/html_and_css/font-size-with-rem +http://blog.typekit.com/2011/11/09/type-study-sizing-the-legible-letter/ + + /* =Reset -------------------------------------------------------------- */