Skip to content

Instantly share code, notes, and snippets.

@krisbulman
Created November 18, 2015 18:19
Show Gist options
  • Save krisbulman/1f0e4532179029276dd0 to your computer and use it in GitHub Desktop.
Save krisbulman/1f0e4532179029276dd0 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
<div class="container">
<!-- Note the order in DOM and rendered -->
<div class="content">content</div>
<div class="sidebar1">sidebar1</div>
<div class="sidebar2">sidebar2</div>
</div>
// ----
// libsass (v3.2.5)
// ----
@import "susy";
// Isolation grids refer to how an item is positioned on the page.
// With isolation grids in susy you need to explicately state the position
// on the grid. e.g. @span(6 of 12 at 1); This avoids the need to use
// push/pull classes or drop padding on the end of a grid.
/// Susy 2 grid defaults
/// @type Map
$susy: (
columns: 12, // 12 col grid by default
gutters: (30px/80px), // 30px spacing with 80px col sizes
global-box-sizing: border-box, // border-box or content-box
gutter-position: outside,
output: isolate, // isolation grids for easier positioning
math: fluid, // percentage based grids
debug: (
image: show-columns, // hide, or show-columns
)
);
.container {
// Purely to show the debug grid, set debug to hide to drop it
@include show-grid;
// centers the grid and sets a max width
@include container(1280px);
}
.content {
// 6 cols wide at 4th col position
@include span(6 at 4);
// basic styling for demo
background-color: rgba(lightblue, 0.8);
height: 100px;
}
.sidebar1 {
// 3 cols wide at 1st col position
@include span(3 at 1);
// can also be written @include span(3 of 12 at 1);
// but since we are already specifying a default of 12 cols
// there is no need.
// basic styling for demo
background-color: rgba(orange, 0.3);
height: 100px;
}
.sidebar2 {
// 6 cols wide at 4th col position
@include span(3 at 10);
// basic styling for demo
background-color: rgba(orange, 0.3);
height: 100px;
}
.container {
background-image: linear-gradient(to right, rgba(102, 102, 255, 0.25), rgba(179, 179, 255, 0.25) 72.72727%, transparent 72.72727%);
background-size: 8.52713%;
background-origin: content-box;
background-clip: content-box;
background-position: left top;
max-width: 1280px;
margin-left: auto;
margin-right: auto;
background-image: linear-gradient(to right, rgba(102, 102, 255, 0.25), rgba(179, 179, 255, 0.25) 72.72727%, transparent 72.72727%);
background-size: 8.52713%;
background-origin: content-box;
background-clip: content-box;
background-position: left top;
}
.container:after {
content: " ";
display: block;
clear: both;
}
.content {
width: 48.83721%;
float: left;
margin-left: 25.5814%;
margin-right: -100%;
background-color: rgba(173, 216, 230, 0.8);
height: 100px;
}
.sidebar1 {
width: 23.25581%;
float: left;
margin-left: 0;
margin-right: -100%;
background-color: rgba(255, 165, 0, 0.3);
height: 100px;
}
.sidebar2 {
width: 23.25581%;
float: left;
margin-left: 76.74419%;
margin-right: -100%;
background-color: rgba(255, 165, 0, 0.3);
height: 100px;
}
<div class="container">
<!-- Note the order in DOM and rendered -->
<div class="content">content</div>
<div class="sidebar1">sidebar1</div>
<div class="sidebar2">sidebar2</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment