From 8126fc54b2dbb17ae524bcc407f1846aa9f35fe5 Mon Sep 17 00:00:00 2001
From: lancewillett <lancewillett@1a063a9b-81f0-0310-95a4-ce76da25c4cd>
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
---
 style.css | 35 +++++++++++++++++++++++++++++++++++
 1 file changed, 35 insertions(+)

diff --git a/style.css b/style.css
index 2af4934aa..4d79a7b1f 100644
--- a/style.css
+++ b/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
 -------------------------------------------------------------- */