Riske · June 15, 2016 23:27 · May 5, 2016 · May 5, 2016 · May 5, 2016 · Apr 14, 2014
diff --git a/_baseline.scss b/_baseline.scss
@@ -59,6 +59,6 @@ $font-cap-height: 	0.7em;
 
 	// ensure the next box top edge is $line-height + $base-line-height below the current box top edge
 	// in particular, the next box top edge falls onto our grid 
-	// (i.e. integer multiple of $base-line-height away from the top edge)
+	// (i.e. integer multiple of $rhythm away from the top edge)
 	margin-bottom: $base-line-height - $baseline-distance;
 }
diff --git a/_baseline.scss b/_baseline.scss
@@ -52,7 +52,7 @@ $font-cap-height: 	0.7em;
 	// you can use this method with no worries. 
 	// this method assumes the direction is down and the margin is $base-line-height
 
-	// move font's baseline down to the previous position of the box bottom edge,
+	// move current font baseline down to the previous position of the box bottom edge,
 	// which is integer multiple of $rhytm away from the top,
 	// assuming the mixing has been consistently applied above:
 	padding-top: $baseline-distance;

diff --git a/_baseline.scss b/_baseline.scss
@@ -1,36 +1,46 @@
+// font-size of the regular font used
 $base-font-size: 	16px;
-$base-line-height: 	1.5;
 
-// this value may vary for each font
-// unitless value relative to 1em
-$cap-height: 		0.68;
+// it is convenient to declare a fixed base-line-height,
+// so every other line-height is a simple multiple of base-line-height
+$base-line-height: 	21px;	// 1.5 * base-font-size
 
+// allow fractional line-height as integer multiple of base-line-height / line-height-scale
+$line-height-scale: 1;
 
-@mixin baseline($font-size, $scale: 2) {
+// rhythm is that fraction of the base-line-height 
+$rhythm: $base-line-height / $line-height-scale;
 
-	// rhythm unit
-	$rhythm: $base-line-height * $font-size / $scale;
+// The height of a capital letter for the typeface chosen (may vary)
+// https://en.wikipedia.org/wiki/Cap_height
+// Usually about 0.7em (see http://jsbin.com/gofexi/edit?html,css,output)
+$font-cap-height: 	0.7em;
+
+@mixin baseline($font-size) {
 
 	// number of rhythm units that can fit the font-size
 	$lines: ceil(($font-size + 0.001px) / $rhythm);
 
-	// calculate the new line-height
-	$line-height: $rhythm * $lines / $font-size;
+	// set the new line-height 
+	// to be the minimum integer multiple of $rythm exceeding current $font-size
+	$line-height: $lines * $rhythm;
 
 	// use the results
 	font-size: $font-size;
 	line-height: $line-height;
 
+	// distance between current font's baseline and its box bottom edge 
 	$baseline-distance: ($line-height - $cap-height) / 2;
-
-
+	
+	
 
 	// METHOD 1
 	/////////////////
 
 	// this method can relatively move down elements you may not want to
+
 	// position: relative;
-	// top: $baseline-distance + em;
+	// top: $baseline-distance;
 
 
 
@@ -41,6 +51,14 @@ $cap-height: 		0.68;
 	// http://csswizardry.com/2012/06/single-direction-margin-declarations/
 	// you can use this method with no worries. 
 	// this method assumes the direction is down and the margin is $base-line-height
-	padding-top: $baseline-distance + em;
-	margin-bottom: $base-line-height - $baseline-distance + em;
+
+	// move font's baseline down to the previous position of the box bottom edge,
+	// which is integer multiple of $rhytm away from the top,
+	// assuming the mixing has been consistently applied above:
+	padding-top: $baseline-distance;
+
+	// ensure the next box top edge is $line-height + $base-line-height below the current box top edge
+	// in particular, the next box top edge falls onto our grid 
+	// (i.e. integer multiple of $base-line-height away from the top edge)
+	margin-bottom: $base-line-height - $baseline-distance;
 }
diff --git a/_baseline.scss b/_baseline.scss
@@ -0,0 +1,46 @@
+$base-font-size: 	16px;
+$base-line-height: 	1.5;
+
+// this value may vary for each font
+// unitless value relative to 1em
+$cap-height: 		0.68;
+
+
+@mixin baseline($font-size, $scale: 2) {
+
+	// rhythm unit
+	$rhythm: $base-line-height * $font-size / $scale;
+
+	// number of rhythm units that can fit the font-size
+	$lines: ceil(($font-size + 0.001px) / $rhythm);
+
+	// calculate the new line-height
+	$line-height: $rhythm * $lines / $font-size;
+
+	// use the results
+	font-size: $font-size;
+	line-height: $line-height;
+
+	$baseline-distance: ($line-height - $cap-height) / 2;
+
+
+
+	// METHOD 1
+	/////////////////
+
+	// this method can relatively move down elements you may not want to
+	// position: relative;
+	// top: $baseline-distance + em;
+
+
+
+	// METHOD 2
+	/////////////////
+
+	// if you use this mixin only on elements that have one direction margins
+	// http://csswizardry.com/2012/06/single-direction-margin-declarations/
+	// you can use this method with no worries. 
+	// this method assumes the direction is down and the margin is $base-line-height
+	padding-top: $baseline-distance + em;
+	margin-bottom: $base-line-height - $baseline-distance + em;
+}
No results found