Created
January 29, 2015 21:15
-
-
Save scottdavis/72b44e7c1ee8551e07cf to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
This file contains hidden or 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
<section class='wrapper'> | |
<header> | |
<nav> | |
<ul> | |
<li>Button</li> | |
</ul> | |
</nav> | |
</header> | |
<section class='content'> | |
<p> | |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet iaculis nisi. Duis id leo nisl. Sed in nulla nisi. Donec mi neque, commodo et iaculis non, dignissim sed odio. Etiam rutrum, orci quis rhoncus tempor, ligula ligula porttitor magna, ac pulvinar libero felis vel orci. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi sodales convallis ex, id interdum tortor condimentum sed. Suspendisse posuere orci vitae turpis commodo rhoncus. Maecenas semper ante et ornare iaculis. Morbi urna orci, laoreet in metus vitae, commodo tristique nisi. Pellentesque accumsan leo id odio facilisis accumsan. Suspendisse ut sapien consectetur erat facilisis gravida id condimentum purus. Mauris sed felis nibh. In id tortor molestie, lacinia eros nec, pellentesque turpis. | |
Phasellus urna ex, imperdiet vel aliquam cursus, sagittis in massa. Nunc id vehicula sapien, sed sollicitudin diam. Praesent et ex quis libero lacinia vulputate. Suspendisse aliquam varius eros eget egestas. Aenean risus massa, commodo non tellus pharetra, semper efficitur ipsum. Aliquam erat volutpat. Etiam id ligula neque. Nam non ligula massa. Curabitur non congue lacus, et fringilla risus. Proin hendrerit ligula a imperdiet placerat. | |
</p> | |
</section> | |
<section class='content'> | |
<p> | |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet iaculis nisi. Duis id leo nisl. Sed in nulla nisi. Donec mi neque, commodo et iaculis non, dignissim sed odio. Etiam rutrum, orci quis rhoncus tempor, ligula ligula porttitor magna, ac pulvinar libero felis vel orci. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi sodales convallis ex, id interdum tortor condimentum sed. Suspendisse posuere orci vitae turpis commodo rhoncus. Maecenas semper ante et ornare iaculis. Morbi urna orci, laoreet in metus vitae, commodo tristique nisi. Pellentesque accumsan leo id odio facilisis accumsan. Suspendisse ut sapien consectetur erat facilisis gravida id condimentum purus. Mauris sed felis nibh. In id tortor molestie, lacinia eros nec, pellentesque turpis. | |
Phasellus urna ex, imperdiet vel aliquam cursus, sagittis in massa. Nunc id vehicula sapien, sed sollicitudin diam. Praesent et ex quis libero lacinia vulputate. Suspendisse aliquam varius eros eget egestas. Aenean risus massa, commodo non tellus pharetra, semper efficitur ipsum. Aliquam erat volutpat. Etiam id ligula neque. Nam non ligula massa. Curabitur non congue lacus, et fringilla risus. Proin hendrerit ligula a imperdiet placerat. | |
</p> | |
</section> | |
<section class='map'> | |
<p> | |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet iaculis nisi. Duis id leo nisl. Sed in nulla nisi. Donec mi neque, commodo et iaculis non, dignissim sed odio. Etiam rutrum, orci quis rhoncus tempor, ligula ligula porttitor magna, ac pulvinar libero felis vel orci. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi sodales convallis ex, id interdum tortor condimentum sed. Suspendisse posuere orci vitae turpis commodo rhoncus. Maecenas semper ante et ornare iaculis. Morbi urna orci, laoreet in metus vitae, commodo tristique nisi. Pellentesque accumsan leo id odio facilisis accumsan. Suspendisse ut sapien consectetur erat facilisis gravida id condimentum purus. Mauris sed felis nibh. In id tortor molestie, lacinia eros nec, pellentesque turpis. | |
Phasellus urna ex, imperdiet vel aliquam cursus, sagittis in massa. Nunc id vehicula sapien, sed sollicitudin diam. Praesent et ex quis libero lacinia vulputate. Suspendisse aliquam varius eros eget egestas. Aenean risus massa, commodo non tellus pharetra, semper efficitur ipsum. Aliquam erat volutpat. Etiam id ligula neque. Nam non ligula massa. Curabitur non congue lacus, et fringilla risus. Proin hendrerit ligula a imperdiet placerat. | |
</p> | |
</section> | |
<section class='content'> | |
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet iaculis nisi. Duis id leo nisl. Sed in nulla nisi. Donec mi neque, commodo et iaculis non, dignissim sed odio. Etiam rutrum, orci quis rhoncus tempor, ligula ligula porttitor magna, ac pulvinar libero felis vel orci. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi sodales convallis ex, id interdum tortor condimentum sed. Suspendisse posuere orci vitae turpis commodo rhoncus. Maecenas semper ante et ornare iaculis. Morbi urna orci, laoreet in metus vitae, commodo tristique nisi. Pellentesque accumsan leo id odio facilisis accumsan. Suspendisse ut sapien consectetur erat facilisis gravida id condimentum purus. Mauris sed felis nibh. In id tortor molestie, lacinia eros nec, pellentesque turpis. | |
Phasellus urna ex, imperdiet vel aliquam cursus, sagittis in massa. Nunc id vehicula sapien, sed sollicitudin diam. Praesent et ex quis libero lacinia vulputate. Suspendisse aliquam varius eros eget egestas. Aenean risus massa, commodo non tellus pharetra, semper efficitur ipsum. Aliquam erat volutpat. Etiam id ligula neque. Nam non ligula massa. Curabitur non congue lacus, et fringilla risus. Proin hendrerit ligula a imperdiet placerat. | |
</p> | |
</section> | |
</section> |
This file contains hidden or 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
// ---- | |
// Sass (v3.4.9) | |
// Compass (v1.0.1) | |
// Susy (v2.1.3) | |
// ---- | |
@import "compass/reset"; | |
@import "susy"; | |
nav { | |
height : 120px; | |
background-color : green; | |
} | |
.map { | |
background-color: green; | |
height : 120px; | |
} | |
.wrapper { | |
@include container; | |
background-color : red; | |
} | |
.content { | |
@include container(80%); | |
background-color: blue; | |
&:nth-of-type(even) { | |
background-color : orange; | |
} | |
p { | |
@include span (isolate 10 at 2 of 12); | |
} | |
} |
This file contains hidden or 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
html, body, div, span, applet, object, iframe, | |
h1, h2, h3, h4, h5, h6, p, blockquote, pre, | |
a, abbr, acronym, address, big, cite, code, | |
del, dfn, em, img, ins, kbd, q, s, samp, | |
small, strike, strong, sub, sup, tt, var, | |
b, u, i, center, | |
dl, dt, dd, ol, ul, li, | |
fieldset, form, label, legend, | |
table, caption, tbody, tfoot, thead, tr, th, td, | |
article, aside, canvas, details, embed, | |
figure, figcaption, footer, header, hgroup, | |
menu, nav, output, ruby, section, summary, | |
time, mark, audio, video { | |
margin: 0; | |
padding: 0; | |
border: 0; | |
font: inherit; | |
font-size: 100%; | |
vertical-align: baseline; | |
} | |
html { | |
line-height: 1; | |
} | |
ol, ul { | |
list-style: none; | |
} | |
table { | |
border-collapse: collapse; | |
border-spacing: 0; | |
} | |
caption, th, td { | |
text-align: left; | |
font-weight: normal; | |
vertical-align: middle; | |
} | |
q, blockquote { | |
quotes: none; | |
} | |
q:before, q:after, blockquote:before, blockquote:after { | |
content: ""; | |
content: none; | |
} | |
a img { | |
border: none; | |
} | |
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { | |
display: block; | |
} | |
nav { | |
height: 120px; | |
background-color: green; | |
} | |
.map { | |
background-color: green; | |
height: 120px; | |
} | |
.wrapper { | |
max-width: 100%; | |
margin-left: auto; | |
margin-right: auto; | |
background-color: red; | |
} | |
.wrapper:after { | |
content: " "; | |
display: block; | |
clear: both; | |
} | |
.content { | |
max-width: 80%; | |
margin-left: auto; | |
margin-right: auto; | |
background-color: blue; | |
} | |
.content:after { | |
content: " "; | |
display: block; | |
clear: both; | |
} | |
.content:nth-of-type(even) { | |
background-color: orange; | |
} | |
.content p { | |
width: 83.05085%; | |
float: left; | |
margin-left: 8.47458%; | |
margin-right: -100%; | |
} |
This file contains hidden or 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
<section class='wrapper'> | |
<header> | |
<nav> | |
<ul> | |
<li>Button</li> | |
</ul> | |
</nav> | |
</header> | |
<section class='content'> | |
<p> | |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet iaculis nisi. Duis id leo nisl. Sed in nulla nisi. Donec mi neque, commodo et iaculis non, dignissim sed odio. Etiam rutrum, orci quis rhoncus tempor, ligula ligula porttitor magna, ac pulvinar libero felis vel orci. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi sodales convallis ex, id interdum tortor condimentum sed. Suspendisse posuere orci vitae turpis commodo rhoncus. Maecenas semper ante et ornare iaculis. Morbi urna orci, laoreet in metus vitae, commodo tristique nisi. Pellentesque accumsan leo id odio facilisis accumsan. Suspendisse ut sapien consectetur erat facilisis gravida id condimentum purus. Mauris sed felis nibh. In id tortor molestie, lacinia eros nec, pellentesque turpis. | |
Phasellus urna ex, imperdiet vel aliquam cursus, sagittis in massa. Nunc id vehicula sapien, sed sollicitudin diam. Praesent et ex quis libero lacinia vulputate. Suspendisse aliquam varius eros eget egestas. Aenean risus massa, commodo non tellus pharetra, semper efficitur ipsum. Aliquam erat volutpat. Etiam id ligula neque. Nam non ligula massa. Curabitur non congue lacus, et fringilla risus. Proin hendrerit ligula a imperdiet placerat. | |
</p> | |
</section> | |
<section class='content'> | |
<p> | |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet iaculis nisi. Duis id leo nisl. Sed in nulla nisi. Donec mi neque, commodo et iaculis non, dignissim sed odio. Etiam rutrum, orci quis rhoncus tempor, ligula ligula porttitor magna, ac pulvinar libero felis vel orci. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi sodales convallis ex, id interdum tortor condimentum sed. Suspendisse posuere orci vitae turpis commodo rhoncus. Maecenas semper ante et ornare iaculis. Morbi urna orci, laoreet in metus vitae, commodo tristique nisi. Pellentesque accumsan leo id odio facilisis accumsan. Suspendisse ut sapien consectetur erat facilisis gravida id condimentum purus. Mauris sed felis nibh. In id tortor molestie, lacinia eros nec, pellentesque turpis. | |
Phasellus urna ex, imperdiet vel aliquam cursus, sagittis in massa. Nunc id vehicula sapien, sed sollicitudin diam. Praesent et ex quis libero lacinia vulputate. Suspendisse aliquam varius eros eget egestas. Aenean risus massa, commodo non tellus pharetra, semper efficitur ipsum. Aliquam erat volutpat. Etiam id ligula neque. Nam non ligula massa. Curabitur non congue lacus, et fringilla risus. Proin hendrerit ligula a imperdiet placerat. | |
</p> | |
</section> | |
<section class='map'> | |
<p> | |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet iaculis nisi. Duis id leo nisl. Sed in nulla nisi. Donec mi neque, commodo et iaculis non, dignissim sed odio. Etiam rutrum, orci quis rhoncus tempor, ligula ligula porttitor magna, ac pulvinar libero felis vel orci. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi sodales convallis ex, id interdum tortor condimentum sed. Suspendisse posuere orci vitae turpis commodo rhoncus. Maecenas semper ante et ornare iaculis. Morbi urna orci, laoreet in metus vitae, commodo tristique nisi. Pellentesque accumsan leo id odio facilisis accumsan. Suspendisse ut sapien consectetur erat facilisis gravida id condimentum purus. Mauris sed felis nibh. In id tortor molestie, lacinia eros nec, pellentesque turpis. | |
Phasellus urna ex, imperdiet vel aliquam cursus, sagittis in massa. Nunc id vehicula sapien, sed sollicitudin diam. Praesent et ex quis libero lacinia vulputate. Suspendisse aliquam varius eros eget egestas. Aenean risus massa, commodo non tellus pharetra, semper efficitur ipsum. Aliquam erat volutpat. Etiam id ligula neque. Nam non ligula massa. Curabitur non congue lacus, et fringilla risus. Proin hendrerit ligula a imperdiet placerat. | |
</p> | |
</section> | |
<section class='content'> | |
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet iaculis nisi. Duis id leo nisl. Sed in nulla nisi. Donec mi neque, commodo et iaculis non, dignissim sed odio. Etiam rutrum, orci quis rhoncus tempor, ligula ligula porttitor magna, ac pulvinar libero felis vel orci. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi sodales convallis ex, id interdum tortor condimentum sed. Suspendisse posuere orci vitae turpis commodo rhoncus. Maecenas semper ante et ornare iaculis. Morbi urna orci, laoreet in metus vitae, commodo tristique nisi. Pellentesque accumsan leo id odio facilisis accumsan. Suspendisse ut sapien consectetur erat facilisis gravida id condimentum purus. Mauris sed felis nibh. In id tortor molestie, lacinia eros nec, pellentesque turpis. | |
Phasellus urna ex, imperdiet vel aliquam cursus, sagittis in massa. Nunc id vehicula sapien, sed sollicitudin diam. Praesent et ex quis libero lacinia vulputate. Suspendisse aliquam varius eros eget egestas. Aenean risus massa, commodo non tellus pharetra, semper efficitur ipsum. Aliquam erat volutpat. Etiam id ligula neque. Nam non ligula massa. Curabitur non congue lacus, et fringilla risus. Proin hendrerit ligula a imperdiet placerat. | |
</p> | |
</section> | |
</section> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment