Created
November 6, 2015 09:26
-
-
Save maddesigns/8339a4c82b6a719e0988 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
<div class="sidebar"> Doloremque, accusantium mollitia quisquam quae eveniet deleniti recusandae, voluptate possimus ipsam voluptatum modi optio qui adipisci ipsa enim. Autem, illum maiores magni.</div> | |
<div class="block">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut est, omnis repellat tempora, soluta nisi, ab magnam officia cupiditate laborum perspiciatis. Vel inventore, possimus reprehenderit aperiam placeat omnis quam asperiores.</div> | |
<div class="block">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut est, omnis repellat tempora, soluta nisi, ab magnam officia cupiditate laborum perspiciatis. Vel inventore, possimus reprehenderit aperiam placeat omnis quam asperiores.</div> | |
<div class="block">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut est, omnis repellat tempora, soluta nisi, ab magnam officia cupiditate laborum perspiciatis. Vel inventore, possimus reprehenderit aperiam placeat omnis quam asperiores.</div> | |
<div class="sidebar"> Doloremque, accusantium mollitia quisquam quae eveniet deleniti recusandae, voluptate possimus ipsam voluptatum modi optio qui adipisci ipsa enim. Autem, illum maiores magni. Doloremque, accusantium mollitia quisquam quae eveniet deleniti recusandae, voluptate possimus ipsam voluptatum modi optio qui adipisci ipsa enim. Autem, illum maiores magni.Doloremque, accusantium mollitia quisquam quae eveniet deleniti recusandae, voluptate possimus ipsam voluptatum modi optio qui adipisci ipsa enim. Autem, illum maiores magni.</div> | |
<div class="block">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut est, omnis repellat tempora, soluta nisi, ab magnam officia cupiditate laborum perspiciatis. Vel inventore, possimus reprehenderit aperiam placeat omnis quam asperiores.</div> | |
<div class="block">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut est, omnis repellat tempora, soluta nisi, ab magnam officia cupiditate laborum perspiciatis. Vel inventore, possimus reprehenderit aperiam placeat omnis quam asperiores.</div> | |
<div class="block">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut est, omnis repellat tempora, soluta nisi, ab magnam officia cupiditate laborum perspiciatis. Vel inventore, possimus reprehenderit aperiam placeat omnis quam asperiores.</div> | |
<div class="sidebar"> Doloremque, accusantium mollitia quisquam quae eveniet deleniti recusandae, voluptate possimus ipsam voluptatum modi optio qui adipisci ipsa enim. Autem, illum maiores magni.</div> |
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.2.5) | |
// ---- | |
@import "breakpoint"; | |
@import "singularitygs"; | |
body { | |
max-width: 60em; | |
margin: 0 auto; | |
} | |
.block { | |
margin-bottom: 1em; | |
@include breakpoint(40em) { | |
@include grid-span(8,1); | |
clear: left; | |
} | |
} | |
.sidebar { | |
margin-bottom: 1em; | |
@include breakpoint(40em) { | |
@include grid-span(4,9); | |
clear: right; | |
} | |
} |
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
body { | |
max-width: 60em; | |
margin: 0 auto; | |
} | |
.block { | |
margin-bottom: 1em; | |
} | |
@media (min-width: 40em) { | |
.block { | |
width: 66.10169%; | |
float: left; | |
margin-right: -100%; | |
margin-left: 0; | |
clear: none; | |
clear: left; | |
} | |
} | |
.sidebar { | |
margin-bottom: 1em; | |
} | |
@media (min-width: 40em) { | |
.sidebar { | |
width: 32.20339%; | |
float: right; | |
margin-left: 0; | |
margin-right: 0; | |
clear: none; | |
clear: right; | |
} | |
} |
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
<div class="sidebar"> Doloremque, accusantium mollitia quisquam quae eveniet deleniti recusandae, voluptate possimus ipsam voluptatum modi optio qui adipisci ipsa enim. Autem, illum maiores magni.</div> | |
<div class="block">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut est, omnis repellat tempora, soluta nisi, ab magnam officia cupiditate laborum perspiciatis. Vel inventore, possimus reprehenderit aperiam placeat omnis quam asperiores.</div> | |
<div class="block">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut est, omnis repellat tempora, soluta nisi, ab magnam officia cupiditate laborum perspiciatis. Vel inventore, possimus reprehenderit aperiam placeat omnis quam asperiores.</div> | |
<div class="block">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut est, omnis repellat tempora, soluta nisi, ab magnam officia cupiditate laborum perspiciatis. Vel inventore, possimus reprehenderit aperiam placeat omnis quam asperiores.</div> | |
<div class="sidebar"> Doloremque, accusantium mollitia quisquam quae eveniet deleniti recusandae, voluptate possimus ipsam voluptatum modi optio qui adipisci ipsa enim. Autem, illum maiores magni. Doloremque, accusantium mollitia quisquam quae eveniet deleniti recusandae, voluptate possimus ipsam voluptatum modi optio qui adipisci ipsa enim. Autem, illum maiores magni.Doloremque, accusantium mollitia quisquam quae eveniet deleniti recusandae, voluptate possimus ipsam voluptatum modi optio qui adipisci ipsa enim. Autem, illum maiores magni.</div> | |
<div class="block">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut est, omnis repellat tempora, soluta nisi, ab magnam officia cupiditate laborum perspiciatis. Vel inventore, possimus reprehenderit aperiam placeat omnis quam asperiores.</div> | |
<div class="block">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut est, omnis repellat tempora, soluta nisi, ab magnam officia cupiditate laborum perspiciatis. Vel inventore, possimus reprehenderit aperiam placeat omnis quam asperiores.</div> | |
<div class="block">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut est, omnis repellat tempora, soluta nisi, ab magnam officia cupiditate laborum perspiciatis. Vel inventore, possimus reprehenderit aperiam placeat omnis quam asperiores.</div> | |
<div class="sidebar"> Doloremque, accusantium mollitia quisquam quae eveniet deleniti recusandae, voluptate possimus ipsam voluptatum modi optio qui adipisci ipsa enim. Autem, illum maiores magni.</div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment