Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Generated by SassMeister.com.
<main id="grid">
<section id="main_background_container">
<div id="main_side_img">main_side_img</div>
<div id="main_primary_container">main_primary_container</div>
</section>
</main>
// ----
// libsass (v3.2.5)
// ----
@import 'susy';
$susy: (columns: 8);
#grid{
@include container(8 show);
}
#main_background_container{
height: 30em;
}
#main_side_img{
@include span(1 no-gutter);
background: green;
height: 65%;
}
#main_primary_container{
@include span(4 wide);
background: yellow;
height: 65%;
}
#grid {
max-width: 100%;
margin-left: auto;
margin-right: auto;
background-image: linear-gradient(to right, rgba(102, 102, 255, 0.25), rgba(179, 179, 255, 0.25) 80%, transparent 80%);
background-size: 12.82051%;
background-origin: content-box;
background-clip: content-box;
background-position: left top;
}
#grid:after {
content: " ";
display: block;
clear: both;
}
#main_background_container {
height: 30em;
}
#main_side_img {
width: 10.25641%;
float: left;
background: green;
height: 65%;
}
#main_primary_container {
width: 51.28205%;
float: left;
margin-right: 2.5%;
background: yellow;
height: 65%;
}
<main id="grid">
<section id="main_background_container">
<div id="main_side_img">main_side_img</div>
<div id="main_primary_container">main_primary_container</div>
</section>
</main>
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.