mirror of
https://github.com/WordPress/WordPress.git
synced 2024-12-23 17:48:01 +01:00
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
This commit is contained in:
parent
f42eabe82b
commit
d7ba9b6944
@ -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
|
||||
-------------------------------------------------------------- */
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user