Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Generated by SassMeister.com.
<div class="content">
<h1>This is a test</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum suscipit semper libero, maximus ultrices risus gravida ac. Praesent aliquam, tortor sit amet lacinia tristique, justo nisi luctus enim, in lacinia elit neque eget enim. Nam id malesuada sapien, id laoreet nulla. Donec pretium metus id maximus faucibus. Duis quis purus et ante rutrum tincidunt ut sed nibh. Morbi bibendum ipsum et sem porttitor semper eu sed mi. Ut consequat posuere sem, quis commodo metus suscipit in.</p>
<p>Integer interdum vulputate lectus quis molestie. Donec dui massa, efficitur eu vestibulum pretium, luctus non magna. Nullam nec volutpat tortor. Morbi eget urna ac nunc aliquam semper in id ante. Donec elementum vel nisl id vestibulum. Sed lacinia vel est ut sollicitudin. Aliquam dapibus arcu gravida varius maximus. Proin diam purus, viverra sed ante in, fringilla imperdiet neque. Ut pellentesque lectus in mollis tincidunt. Pellentesque tempor tristique sapien, eget sollicitudin turpis. Morbi vestibulum, nisi nec fermentum blandit, metus risus commodo nunc, id commodo massa dolor sed metus. Suspendisse sed velit sit amet nunc vestibulum maximus. Etiam vel interdum eros, sit amet ultrices sapien.</p>
<img src="http://placehold.it/300x120">
</div>
<div class="grid">
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
</div>
// ----
// Sass (v3.4.0)
// Compass (v1.0.0)
// ----
$baseline: 6px;
@function get-space($line-height, $cap-height) {
$cap-height-em: 1em * $cap-height;
$space: ($line-height - $cap-height) / 2;
@return $space;
}
@mixin baselined($line-height: 1em, $cap-height: 0.65) {
line-height: $line-height;
&:before, &:after {
content: '';
display: block;
}
&:before {
margin-top: -(get-space($line-height, $cap-height) + $cap-height);
}
&:after {
margin-top: -(get-space($line-height, $cap-height));
}
}
* {
box-sizing: border-box;
margin: 0;
font-family: Helvetica, sans-serif;
}
img {
display: block;
}
.grid {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 0;
}
.grid-line {
height: $baseline;
border-top: 1px solid #eee;
}
.content {
position: relative;
z-index: 1;
padding-top: 6px * 20;
width: 500px;
margin: 0 auto;
}
h1 {
font-size: 1em;
@include baselined(1.2em);
}
p {
padding-top: $baseline * 6;
@include baselined(1.5em);
}
img {
margin-top: $baseline * 4;
}
* {
box-sizing: border-box;
margin: 0;
font-family: Helvetica, sans-serif;
}
img {
display: block;
}
.grid {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 0;
}
.grid-line {
height: 6px;
border-top: 1px solid #eee;
}
.content {
position: relative;
z-index: 1;
padding-top: 120px;
width: 500px;
margin: 0 auto;
}
h1 {
font-size: 1em;
line-height: 1.2em;
}
h1:before, h1:after {
content: '';
display: block;
}
h1:before {
margin-top: -0.925em;
}
h1:after {
margin-top: -0.275em;
}
p {
padding-top: 36px;
line-height: 1.5em;
}
p:before, p:after {
content: '';
display: block;
}
p:before {
margin-top: -1.075em;
}
p:after {
margin-top: -0.425em;
}
img {
margin-top: 24px;
}
<div class="content">
<h1>This is a test</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum suscipit semper libero, maximus ultrices risus gravida ac. Praesent aliquam, tortor sit amet lacinia tristique, justo nisi luctus enim, in lacinia elit neque eget enim. Nam id malesuada sapien, id laoreet nulla. Donec pretium metus id maximus faucibus. Duis quis purus et ante rutrum tincidunt ut sed nibh. Morbi bibendum ipsum et sem porttitor semper eu sed mi. Ut consequat posuere sem, quis commodo metus suscipit in.</p>
<p>Integer interdum vulputate lectus quis molestie. Donec dui massa, efficitur eu vestibulum pretium, luctus non magna. Nullam nec volutpat tortor. Morbi eget urna ac nunc aliquam semper in id ante. Donec elementum vel nisl id vestibulum. Sed lacinia vel est ut sollicitudin. Aliquam dapibus arcu gravida varius maximus. Proin diam purus, viverra sed ante in, fringilla imperdiet neque. Ut pellentesque lectus in mollis tincidunt. Pellentesque tempor tristique sapien, eget sollicitudin turpis. Morbi vestibulum, nisi nec fermentum blandit, metus risus commodo nunc, id commodo massa dolor sed metus. Suspendisse sed velit sit amet nunc vestibulum maximus. Etiam vel interdum eros, sit amet ultrices sapien.</p>
<img src="http://placehold.it/300x120">
</div>
<div class="grid">
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.