-
-
Save bibhas/f8e9528743ca7f405df9388400395c4e to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// $base-font-size: 16px; // not sure this ever did anything | |
$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; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment