Created
January 30, 2015 02:58
-
-
Save jdlehman/9edd8ade9f8f1d0990f5 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
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
<h2>Large Text</h2> | |
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sollicitudin pulvinar est, vel consequat mauris blandit sed. Duis sed nisl eu dolor laoreet luctus. Ut id vulputate mauris. Sed ac lacus orci. Sed quis metus nisi. Mauris interdum tincidunt tellus, eu cursus sem consequat eu. Vivamus dapibus purus ac purus dictum, ut hendrerit massa varius. In hac habitasse platea dictumst. Suspendisse convallis neque nec felis adipiscing, a volutpat leo laoreet. Pellentesque massa velit, tincidunt nec dolor vel, tincidunt lacinia tellus. Morbi vitae tellus bibendum, commodo tortor a, venenatis turpis. Curabitur vestibulum ut massa sit amet tempus. Fusce nisl mauris, tincidunt quis pulvinar sit amet, consectetur id ante. Maecenas non dapibus leo. Suspendisse interdum tortor eu hendrerit sagittis. Ut eleifend ac neque non convallis.</p> | |
<ul> | |
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> | |
<li>Curabitur eget est at massa mattis aliquet.</li> | |
<li>Sed feugiat lacus non purus vulputate, ac pellentesque augue luctus.</li> | |
</ul> | |
<div class="box"> | |
<span>Lorem ipsum</span> | |
</div> | |
<ul> | |
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> | |
<li>Curabitur eget est at massa mattis aliquet.</li> | |
<li>Sed feugiat lacus non purus vulputate, ac pellentesque augue luctus.</li> | |
</ul> |
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
// ---- | |
// libsass (v3.1.0-beta) | |
// ---- | |
$base-font-size: 16px; | |
$line-height-ratio: 1.5; | |
$line-height-base: 1rem * $line-height-ratio; | |
// restrict font-size to rems so everything scales well | |
@mixin vertical-rhythm($font-size, $bottom-rows: 1, $top-rows: 0, $use-height: false, $border: 0rem) { | |
$multiplier: ceil($font-size / $line-height-base); | |
// check if height-based element | |
// if so use height property for height, otherwise use line-height property | |
@if $use-height { | |
$leftover: $line-height-base * $multiplier - $font-size; | |
height: $font-size; | |
margin-top: $line-height-base * $top-rows + $leftover / 2; | |
margin-bottom: $line-height-base * $bottom-rows + $leftover / 2; | |
} | |
@else { // text based element (uses line-height) | |
font-size: $font-size; | |
line-height: $line-height-base * $multiplier; | |
margin-top: $line-height-base * $top-rows; | |
margin-bottom: $line-height-base * $bottom-rows - $border; | |
} | |
} | |
h2 { | |
@include vertical-rhythm(3.4rem); | |
} | |
.box { | |
@include vertical-rhythm(5.2rem, $use-height: true); | |
background-color: blue; | |
width: 200px; | |
} | |
html { | |
font-size: $base-font-size; | |
line-height: $line-height-ratio; | |
background: url(http://basehold.it/i/24); | |
} | |
* { | |
margin-top: 0; | |
margin-bottom: 0; | |
padding-top: 0; | |
padding-bottom: 0; | |
} |
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
h2 { | |
font-size: 3.4rem; | |
line-height: 4.5rem; | |
margin-top: 0rem; | |
margin-bottom: 1.5rem; } | |
.box { | |
height: 5.2rem; | |
margin-top: 0.4rem; | |
margin-bottom: 1.9rem; | |
background-color: blue; | |
width: 200px; } | |
html { | |
font-size: 16px; | |
line-height: 1.5; | |
background: url(http://basehold.it/i/24); } | |
* { | |
margin-top: 0; | |
margin-bottom: 0; | |
padding-top: 0; | |
padding-bottom: 0; } |
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
<h2>Large Text</h2> | |
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sollicitudin pulvinar est, vel consequat mauris blandit sed. Duis sed nisl eu dolor laoreet luctus. Ut id vulputate mauris. Sed ac lacus orci. Sed quis metus nisi. Mauris interdum tincidunt tellus, eu cursus sem consequat eu. Vivamus dapibus purus ac purus dictum, ut hendrerit massa varius. In hac habitasse platea dictumst. Suspendisse convallis neque nec felis adipiscing, a volutpat leo laoreet. Pellentesque massa velit, tincidunt nec dolor vel, tincidunt lacinia tellus. Morbi vitae tellus bibendum, commodo tortor a, venenatis turpis. Curabitur vestibulum ut massa sit amet tempus. Fusce nisl mauris, tincidunt quis pulvinar sit amet, consectetur id ante. Maecenas non dapibus leo. Suspendisse interdum tortor eu hendrerit sagittis. Ut eleifend ac neque non convallis.</p> | |
<ul> | |
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> | |
<li>Curabitur eget est at massa mattis aliquet.</li> | |
<li>Sed feugiat lacus non purus vulputate, ac pellentesque augue luctus.</li> | |
</ul> | |
<div class="box"> | |
<span>Lorem ipsum</span> | |
</div> | |
<ul> | |
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> | |
<li>Curabitur eget est at massa mattis aliquet.</li> | |
<li>Sed feugiat lacus non purus vulputate, ac pellentesque augue luctus.</li> | |
</ul> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment