Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Generated by SassMeister.com.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body id="parent" class="hello">
<div class="row two-col-right">
<div class="field field-left">Field</div>
<div class="field field-right">Field</div>
</div>
<div class="row three-col-equal">
<div class="field field-left">Field</div>
<div class="field field-center">Field</div>
<div class="field field-right">Field</div>
</div>
</body>
</html>
// ----
// Sass (v3.4.14)
// Compass (v1.0.3)
// Breakpoint (v2.5.0)
// Singularity Extras (v1.0.0)
// Singularity.gs (v1.6.2)
// ----
@import "breakpoint";
@import "singularitygs";
@import "singularity-extras";
$gutter-size: 5px;
$small: min-width 760px;
$medium: min-width 1000px;
$large: min-width 1200px;
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
.field{
background: #f6f6f6;
border: 1px solid red;
}
@include add-grid(24);
.row{
@include grid-span(24, 1);
overflow: hidden;
float: none;
max-width: 1400px;
margin: 0 auto;
position: relative;
margin-top: 50px;
margin-bottom: 100px;
}
// Two Col
.two-col-equal{
.field-left{@include grid-span(12, 1);}
.field-right{@include grid-span(12, 13);}
}
.two-col-left{
.field-left{@include grid-span(16, 1);}
.field-right{@include grid-span(8, 17);}
}
.two-col-right{
.field-left{@include grid-span(8, 1);}
.field-right{@include grid-span(16, 9);}
}
// Three Col
.three-col-equal{
.field-left{@include grid-span(8, 1);}
.field-center{@include grid-span(8, 9);}
.field-right{@include grid-span(8, 17);}
}
.three-col-left{
.field-left{@include grid-span(12, 1);}
.field-center{@include grid-span(6, 13);}
.field-right{@include grid-span(6, 19);}
}
.three-col-center{
.field-left{@include grid-span(6, 1);}
.field-center{@include grid-span(12, 7);}
.field-right{@include grid-span(6, 19);}
}
.three-col-right{
.field-left{@include grid-span(6, 1);}
.field-center{@include grid-span(6, 7);}
.field-right{@include grid-span(12, 13);}
}
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
.field {
background: #f6f6f6;
border: 1px solid red;
}
.row {
width: 100%;
float: right;
margin-left: 0;
margin-right: 0;
clear: none;
overflow: hidden;
float: none;
max-width: 1400px;
margin: 0 auto;
position: relative;
margin-top: 50px;
margin-bottom: 100px;
}
.two-col-equal .field-left {
width: 49.57983%;
float: left;
margin-right: -100%;
margin-left: 0;
clear: none;
}
.two-col-equal .field-right {
width: 49.57983%;
float: right;
margin-left: 0;
margin-right: 0;
clear: none;
}
.two-col-left .field-left {
width: 66.38655%;
float: left;
margin-right: -100%;
margin-left: 0;
clear: none;
}
.two-col-left .field-right {
width: 32.77311%;
float: right;
margin-left: 0;
margin-right: 0;
clear: none;
}
.two-col-right .field-left {
width: 32.77311%;
float: left;
margin-right: -100%;
margin-left: 0;
clear: none;
}
.two-col-right .field-right {
width: 66.38655%;
float: right;
margin-left: 0;
margin-right: 0;
clear: none;
}
.three-col-equal .field-left {
width: 32.77311%;
float: left;
margin-right: -100%;
margin-left: 0;
clear: none;
}
.three-col-equal .field-center {
width: 32.77311%;
float: left;
margin-right: -100%;
margin-left: 33.61345%;
clear: none;
}
.three-col-equal .field-right {
width: 32.77311%;
float: right;
margin-left: 0;
margin-right: 0;
clear: none;
}
.three-col-left .field-left {
width: 49.57983%;
float: left;
margin-right: -100%;
margin-left: 0;
clear: none;
}
.three-col-left .field-center {
width: 24.36975%;
float: left;
margin-right: -100%;
margin-left: 50.42017%;
clear: none;
}
.three-col-left .field-right {
width: 24.36975%;
float: right;
margin-left: 0;
margin-right: 0;
clear: none;
}
.three-col-center .field-left {
width: 24.36975%;
float: left;
margin-right: -100%;
margin-left: 0;
clear: none;
}
.three-col-center .field-center {
width: 49.57983%;
float: left;
margin-right: -100%;
margin-left: 25.21008%;
clear: none;
}
.three-col-center .field-right {
width: 24.36975%;
float: right;
margin-left: 0;
margin-right: 0;
clear: none;
}
.three-col-right .field-left {
width: 24.36975%;
float: left;
margin-right: -100%;
margin-left: 0;
clear: none;
}
.three-col-right .field-center {
width: 24.36975%;
float: left;
margin-right: -100%;
margin-left: 25.21008%;
clear: none;
}
.three-col-right .field-right {
width: 49.57983%;
float: right;
margin-left: 0;
margin-right: 0;
clear: none;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body id="parent" class="hello">
<div class="row two-col-right">
<div class="field field-left">Field</div>
<div class="field field-right">Field</div>
</div>
<div class="row three-col-equal">
<div class="field field-left">Field</div>
<div class="field field-center">Field</div>
<div class="field field-right">Field</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment