Skip to content

Instantly share code, notes, and snippets.

@ianrose
Created December 13, 2014 21:02
Show Gist options
  • Save ianrose/07d7fe4d1de7c9eddb57 to your computer and use it in GitHub Desktop.
Save ianrose/07d7fe4d1de7c9eddb57 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
<div class="container">
<div class="row">
<div class="col col-xs-4">
<p>content</p>
<div class="row">
<div class="col col-xs-4">
<div class="gutter">
<p>content</p>
</div>
</div>
<div class="col col-xs-4">
<div class="gutter">
<p>content</p>
</div>
</div>
</div>
</div>
<div class="col col-xs-4">
<div class="gutter-left">
<p>content</p>
</div>
</div>
</div>
<div class="row">
<div class="col col-xs-8">
<p>content</p>
</div>
</div>
<div class="row">
<div class="col col-lg-1">
<p>content</p>
</div>
<div class="col col-lg-1">
<p>content</p>
</div>
<div class="col col-lg-1">
<p>content</p>
</div>
<div class="col col-lg-1">
<div class="gutter">
<p>content</p>
</div>
</div>
<div class="col col-lg-1">
<p>content</p>
</div>
<div class="col col-lg-1">
<div class="gutter">
<p>content</p>
</div>
</div>
<div class="col col-lg-1">
<p>content</p>
</div>
<div class="col col-lg-1">
<p>content</p>
</div>
</div>
</div>
// ----
// libsass (v3.0.2)
// ----
@charset "UTF-8";
// =============================================================================
// Gridsettings
// =============================================================================
// A Sass toolkit that creates responsive grids.
//
// Release Versions: https://github.com/ianrose/gridsettings/releases
// Github: https://github.com/ianrose/gridsettings
// License: The MIT License (MIT)
//
// Inspired by and used stuff from:
// https://github.com/twbs/bootstrap-sass
// https://github.com/kristoferjoseph/flexboxgrid
// Grid Type, either flexbox or float based
$flexbox-grid: true !default;
// Breakpoints TODO - Provide ability to generate any number of breakpoints
$screen-xs-min: 480px !default;
$screen-sm-min: 768px !default;
$screen-md-min: 992px !default;
$screen-lg-min: 1200px !default;
$screen-xs-max: ($screen-sm-min -1px) !default;
$screen-sm-max: ($screen-md-min - 1px) !default;
$screen-md-max: ($screen-lg-min - 1px) !default;
// Grid attributes
$grid-gutter: 24px !default;
$grid-columns: 8 !default;
$static-col-width: 300px !default;
$static-col-name: static !default;
$grid-col-name: col- !default;
$grid-xs-bp-name: xs- !default;
$grid-sm-bp-name: sm- !default;
$grid-md-bp-name: md- !default;
$grid-lg-bp-name: lg- !default;
$grid-push-name: push- !default;
$grid-pull-name: pull- !default;
$grid-offset-name: offset- !default;
$grid-container-name: container !default;
$grid-row-name: row !default;
$container-sm-width: 750px !default;
$container-md-width: 970px !default;
$container-lg-width: 1170px !default;
// Clearfix mixin
@mixin clearfix() {
&:before,
&:after {
content: " ";
display: table;
}
&:after {
clear: both;
}
}
// Centers the "container" on the page and clears floats.
@mixin make-container($flexbox-grid) {
margin-right: auto;
margin-left: auto;
@if ($flexbox-grid == false) {
@include clearfix();
}
}
// Creates a wrapper for a series of columns and with negative margin allows
// first and last column to be flush left and right of container. Clears
// "column" floats.
@mixin make-row($flexbox-grid) {
@if ($flexbox-grid) {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
-ms-box-orient: horizontal;
-webkit-box-direction: normal;
-moz-box-direction: normal;
-ms-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
} @else {
@include clearfix();
}
}
// Shared rules for all columns
.col {
position: relative;
@if ($flexbox-grid) {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
-ms-box-orient: vertical;
-webkit-box-direction: normal;
-moz-box-direction: normal;
-ms-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-flex: 0;
-ms-box-flex: 0;
-moz-box-flex: 0;
-webkit-flex-grow: 0;
-ms-flex-positive: 0;
flex-grow: 0;
-webkit-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
} @else {
min-height: 1px;
}
}
// Sets the width of a column based on the columns index and its type ie
// width, pull, offset, or push.
@mixin calc-grid-column($index, $bp, $type, $flexbox-grid) {
@if ($type == width) and ($index > 0) {
.#{$grid-col-name}#{$bp}#{$index} {
@if ($flexbox-grid) {
-webkit-flex-basis: percentage(($index / $grid-columns));
-ms-flex-preferred-size: percentage(($index / $grid-columns));
flex-basis: percentage(($index / $grid-columns));
max-width: percentage(($index / $grid-columns));
} @else {
width: percentage(($index / $grid-columns));
}
}
}
@if ($type == push) and ($index > 0) {
.#{$grid-col-name}#{$bp}#{$grid-push-name}#{$index} {
left: percentage(($index / $grid-columns));
}
}
@if ($type == push) and ($index == 0) {
.#{$grid-col-name}#{$bp}#{$grid-push-name}0 {
left: auto;
}
}
@if ($type == pull) and ($index > 0) {
.#{$grid-col-name}#{$bp}#{$grid-pull-name}#{$index} {
right: percentage(($index / $grid-columns));
}
}
@if ($type == pull) and ($index == 0) {
.#{$grid-col-name}#{$bp}#{$grid-pull-name}0 {
right: auto;
}
}
@if ($type == offset) {
.#{$grid-col-name}#{$bp}#{$grid-offset-name}#{$index} {
@if ($index > 0) {
margin-left: percentage(($index / $grid-columns));
} @else if ($index == 0) {
margin-left: ($index / $grid-columns);
}
}
}
}
// Float the column class based on breakpoint
@mixin float-grid-columns($bp, $flexbox-grid) {
@if ($flexbox-grid == false) {
$list: '';
$i: 1;
$list: ".#{$grid-col-name}#{$bp}#{$i}";
@for $i from (1 + 1) through $grid-columns {
$list: "#{$list}, .#{$grid-col-name}#{$bp}#{$i}";
}
#{$list} {
float: left;
}
}
}
// Calculate column classes
@mixin loop-grid-columns($columns, $bp, $type, $flexbox-grid) {
@for $i from 0 through $columns {
@include calc-grid-column($i, $bp, $type, $flexbox-grid);
}
}
// Make a grid based on breakpoint
@mixin make-grid($bp, $flexbox-grid) {
// Generate width column classes for a breakpoint
@include loop-grid-columns($grid-columns, $bp, width, $flexbox-grid);
// Float columns for specified breakpoint and up
@include float-grid-columns($bp, $flexbox-grid);
// Generate push column classes for a breakpoint
@include loop-grid-columns($grid-columns, $bp, push, $flexbox-grid);
// Generate pull column classes for a breakpoint
@include loop-grid-columns($grid-columns, $bp, pull, $flexbox-grid);
// Generate offset column classes for a breakpoint
@include loop-grid-columns($grid-columns, $bp, offset, $flexbox-grid);
}
@mixin make-static-fluid($bp) {
.#{$grid-col-name}#{$bp}#{$static-col-name} {
width: $static-col-width;
}
.fluid-#{$bp}wrapper {
width: 100%;
}
.static-right .fluid-#{$bp}wrapper {
float: left;
}
.static-left .fluid-#{$bp}wrapper {
float: right;
}
.static-right {
.#{$grid-col-name}#{$bp}fluid {
margin-right: $static-col-width;
}
.#{$grid-col-name}#{$bp}#{$static-col-name} {
float: left;
margin-left: $static-col-width * -1;
}
}
.static-left {
.#{$grid-col-name}#{$bp}fluid {
margin-left: $static-col-width;
}
.#{$grid-col-name}#{$bp}#{$static-col-name} {
float: right;
margin-right: $static-col-width * -1;
}
}
}
// TODO - later be part of optional generated CSS
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
@include make-grid($grid-xs-bp-name, $flexbox-grid);
@include make-static-fluid($grid-xs-bp-name);
@if ($flexbox-grid) {
.start-xs {
justify-content: flex-start;
text-align: start;
}
.center-xs {
justify-content: center;
text-align: center;
}
.end-xs {
justify-content: flex-end;
text-align: end;
}
.top-xs {
align-items: flex-start;
}
.middle-xs {
align-items: center;
}
.bottom-xs {
align-items: flex-end;
}
.around-xs {
justify-content: space-around;
}
.between-xs {
justify-content: space-between;
}
.first-xs {
order: -1;
}
.last-xs {
order: 1;
}
}
@media (min-width: $screen-sm-min) {
@include make-grid($grid-sm-bp-name, $flexbox-grid);
@include make-static-fluid($grid-sm-bp-name);
@if ($flexbox-grid) {
.start-sm {
justify-content: flex-start;
text-align: start;
}
.center-sm {
justify-content: center;
text-align: center;
}
.end-sm {
justify-content: flex-end;
text-align: end;
}
.top-sm {
align-items: flex-start;
}
.middle-sm {
align-items: center;
}
.bottom-sm {
align-items: flex-end;
}
.around-sm {
justify-content: space-around;
}
.between-sm {
justify-content: space-between;
}
.first-sm {
order: -1;
}
.last-sm {
order: 1;
}
}
}
@media (min-width: $screen-md-min) {
@include make-grid($grid-md-bp-name, $flexbox-grid);
@include make-static-fluid($grid-md-bp-name);
@if ($flexbox-grid) {
.start-md {
justify-content: flex-start;
text-align: start;
}
.center-md {
justify-content: center;
text-align: center;
}
.end-md {
justify-content: flex-end;
text-align: end;
}
.top-md {
align-items: flex-start;
}
.middle-md {
align-items: center;
}
.bottom-md {
align-items: flex-end;
}
.around-md {
justify-content: space-around;
}
.between-md {
justify-content: space-between;
}
.first-md {
order: -1;
}
.last-md {
order: 1;
}
}
}
@media (min-width: $screen-lg-min) {
@include make-grid($grid-lg-bp-name, $flexbox-grid);
@include make-static-fluid($grid-lg-bp-name);
@if ($flexbox-grid) {
.start-lg {
justify-content: flex-start;
text-align: start;
}
.center-lg {
justify-content: center;
text-align: center;
}
.end-lg {
justify-content: flex-end;
text-align: end;
}
.top-lg {
align-items: flex-start;
}
.middle-lg {
align-items: center;
}
.bottom-lg {
align-items: flex-end;
}
.around-lg {
justify-content: space-around;
}
.between-lg {
justify-content: space-between;
}
.first-lg {
order: -1;
}
.last-lg {
order: 1;
}
}
}
.#{$grid-container-name}fluid {
@include make-container($flexbox-grid);
}
.#{$grid-container-name} {
@include make-container($flexbox-grid);
@media (min-width: $screen-sm-min) {
width: $container-sm-width;
@include make-container($flexbox-grid);
}
@media (min-width: $screen-md-min) {
width: $container-md-width;
}
@media (min-width: $screen-lg-min) {
width: $container-lg-width;
}
}
.#{$grid-row-name} {
@include make-row($flexbox-grid);
@media (min-width: $screen-sm-min) {
@include make-row($flexbox-grid);
}
}
.gutter {
padding: $grid-gutter;
background-color: lightgreen;
}
p {
margin: 0;
background-color: lightgrey;
}
.col {
position: relative;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
-ms-box-orient: vertical;
-webkit-box-direction: normal;
-moz-box-direction: normal;
-ms-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-flex: 0;
-ms-box-flex: 0;
-moz-box-flex: 0;
-webkit-flex-grow: 0;
-ms-flex-positive: 0;
flex-grow: 0;
-webkit-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0; }
html {
box-sizing: border-box; }
*, *:before, *:after {
box-sizing: inherit; }
.col-xs-1 {
-webkit-flex-basis: 12.5%;
-ms-flex-preferred-size: 12.5%;
flex-basis: 12.5%;
max-width: 12.5%; }
.col-xs-2 {
-webkit-flex-basis: 25%;
-ms-flex-preferred-size: 25%;
flex-basis: 25%;
max-width: 25%; }
.col-xs-3 {
-webkit-flex-basis: 37.5%;
-ms-flex-preferred-size: 37.5%;
flex-basis: 37.5%;
max-width: 37.5%; }
.col-xs-4 {
-webkit-flex-basis: 50%;
-ms-flex-preferred-size: 50%;
flex-basis: 50%;
max-width: 50%; }
.col-xs-5 {
-webkit-flex-basis: 62.5%;
-ms-flex-preferred-size: 62.5%;
flex-basis: 62.5%;
max-width: 62.5%; }
.col-xs-6 {
-webkit-flex-basis: 75%;
-ms-flex-preferred-size: 75%;
flex-basis: 75%;
max-width: 75%; }
.col-xs-7 {
-webkit-flex-basis: 87.5%;
-ms-flex-preferred-size: 87.5%;
flex-basis: 87.5%;
max-width: 87.5%; }
.col-xs-8 {
-webkit-flex-basis: 100%;
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
max-width: 100%; }
.col-xs-push-0 {
left: auto; }
.col-xs-push-1 {
left: 12.5%; }
.col-xs-push-2 {
left: 25%; }
.col-xs-push-3 {
left: 37.5%; }
.col-xs-push-4 {
left: 50%; }
.col-xs-push-5 {
left: 62.5%; }
.col-xs-push-6 {
left: 75%; }
.col-xs-push-7 {
left: 87.5%; }
.col-xs-push-8 {
left: 100%; }
.col-xs-pull-0 {
right: auto; }
.col-xs-pull-1 {
right: 12.5%; }
.col-xs-pull-2 {
right: 25%; }
.col-xs-pull-3 {
right: 37.5%; }
.col-xs-pull-4 {
right: 50%; }
.col-xs-pull-5 {
right: 62.5%; }
.col-xs-pull-6 {
right: 75%; }
.col-xs-pull-7 {
right: 87.5%; }
.col-xs-pull-8 {
right: 100%; }
.col-xs-offset-0 {
margin-left: 0; }
.col-xs-offset-1 {
margin-left: 12.5%; }
.col-xs-offset-2 {
margin-left: 25%; }
.col-xs-offset-3 {
margin-left: 37.5%; }
.col-xs-offset-4 {
margin-left: 50%; }
.col-xs-offset-5 {
margin-left: 62.5%; }
.col-xs-offset-6 {
margin-left: 75%; }
.col-xs-offset-7 {
margin-left: 87.5%; }
.col-xs-offset-8 {
margin-left: 100%; }
.col-xs-static {
width: 300px; }
.fluid-xs-wrapper {
width: 100%; }
.static-right .fluid-xs-wrapper {
float: left; }
.static-left .fluid-xs-wrapper {
float: right; }
.static-right .col-xs-fluid {
margin-right: 300px; }
.static-right .col-xs-static {
float: left;
margin-left: -300px; }
.static-left .col-xs-fluid {
margin-left: 300px; }
.static-left .col-xs-static {
float: right;
margin-right: -300px; }
.start-xs {
justify-content: flex-start;
text-align: start; }
.center-xs {
justify-content: center;
text-align: center; }
.end-xs {
justify-content: flex-end;
text-align: end; }
.top-xs {
align-items: flex-start; }
.middle-xs {
align-items: center; }
.bottom-xs {
align-items: flex-end; }
.around-xs {
justify-content: space-around; }
.between-xs {
justify-content: space-between; }
.first-xs {
order: -1; }
.last-xs {
order: 1; }
@media (min-width: 768px) {
.col-sm-1 {
-webkit-flex-basis: 12.5%;
-ms-flex-preferred-size: 12.5%;
flex-basis: 12.5%;
max-width: 12.5%; }
.col-sm-2 {
-webkit-flex-basis: 25%;
-ms-flex-preferred-size: 25%;
flex-basis: 25%;
max-width: 25%; }
.col-sm-3 {
-webkit-flex-basis: 37.5%;
-ms-flex-preferred-size: 37.5%;
flex-basis: 37.5%;
max-width: 37.5%; }
.col-sm-4 {
-webkit-flex-basis: 50%;
-ms-flex-preferred-size: 50%;
flex-basis: 50%;
max-width: 50%; }
.col-sm-5 {
-webkit-flex-basis: 62.5%;
-ms-flex-preferred-size: 62.5%;
flex-basis: 62.5%;
max-width: 62.5%; }
.col-sm-6 {
-webkit-flex-basis: 75%;
-ms-flex-preferred-size: 75%;
flex-basis: 75%;
max-width: 75%; }
.col-sm-7 {
-webkit-flex-basis: 87.5%;
-ms-flex-preferred-size: 87.5%;
flex-basis: 87.5%;
max-width: 87.5%; }
.col-sm-8 {
-webkit-flex-basis: 100%;
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
max-width: 100%; }
.col-sm-push-0 {
left: auto; }
.col-sm-push-1 {
left: 12.5%; }
.col-sm-push-2 {
left: 25%; }
.col-sm-push-3 {
left: 37.5%; }
.col-sm-push-4 {
left: 50%; }
.col-sm-push-5 {
left: 62.5%; }
.col-sm-push-6 {
left: 75%; }
.col-sm-push-7 {
left: 87.5%; }
.col-sm-push-8 {
left: 100%; }
.col-sm-pull-0 {
right: auto; }
.col-sm-pull-1 {
right: 12.5%; }
.col-sm-pull-2 {
right: 25%; }
.col-sm-pull-3 {
right: 37.5%; }
.col-sm-pull-4 {
right: 50%; }
.col-sm-pull-5 {
right: 62.5%; }
.col-sm-pull-6 {
right: 75%; }
.col-sm-pull-7 {
right: 87.5%; }
.col-sm-pull-8 {
right: 100%; }
.col-sm-offset-0 {
margin-left: 0; }
.col-sm-offset-1 {
margin-left: 12.5%; }
.col-sm-offset-2 {
margin-left: 25%; }
.col-sm-offset-3 {
margin-left: 37.5%; }
.col-sm-offset-4 {
margin-left: 50%; }
.col-sm-offset-5 {
margin-left: 62.5%; }
.col-sm-offset-6 {
margin-left: 75%; }
.col-sm-offset-7 {
margin-left: 87.5%; }
.col-sm-offset-8 {
margin-left: 100%; }
.col-sm-static {
width: 300px; }
.fluid-sm-wrapper {
width: 100%; }
.static-right .fluid-sm-wrapper {
float: left; }
.static-left .fluid-sm-wrapper {
float: right; }
.static-right .col-sm-fluid {
margin-right: 300px; }
.static-right .col-sm-static {
float: left;
margin-left: -300px; }
.static-left .col-sm-fluid {
margin-left: 300px; }
.static-left .col-sm-static {
float: right;
margin-right: -300px; }
.start-sm {
justify-content: flex-start;
text-align: start; }
.center-sm {
justify-content: center;
text-align: center; }
.end-sm {
justify-content: flex-end;
text-align: end; }
.top-sm {
align-items: flex-start; }
.middle-sm {
align-items: center; }
.bottom-sm {
align-items: flex-end; }
.around-sm {
justify-content: space-around; }
.between-sm {
justify-content: space-between; }
.first-sm {
order: -1; }
.last-sm {
order: 1; }
}
@media (min-width: 992px) {
.col-md-1 {
-webkit-flex-basis: 12.5%;
-ms-flex-preferred-size: 12.5%;
flex-basis: 12.5%;
max-width: 12.5%; }
.col-md-2 {
-webkit-flex-basis: 25%;
-ms-flex-preferred-size: 25%;
flex-basis: 25%;
max-width: 25%; }
.col-md-3 {
-webkit-flex-basis: 37.5%;
-ms-flex-preferred-size: 37.5%;
flex-basis: 37.5%;
max-width: 37.5%; }
.col-md-4 {
-webkit-flex-basis: 50%;
-ms-flex-preferred-size: 50%;
flex-basis: 50%;
max-width: 50%; }
.col-md-5 {
-webkit-flex-basis: 62.5%;
-ms-flex-preferred-size: 62.5%;
flex-basis: 62.5%;
max-width: 62.5%; }
.col-md-6 {
-webkit-flex-basis: 75%;
-ms-flex-preferred-size: 75%;
flex-basis: 75%;
max-width: 75%; }
.col-md-7 {
-webkit-flex-basis: 87.5%;
-ms-flex-preferred-size: 87.5%;
flex-basis: 87.5%;
max-width: 87.5%; }
.col-md-8 {
-webkit-flex-basis: 100%;
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
max-width: 100%; }
.col-md-push-0 {
left: auto; }
.col-md-push-1 {
left: 12.5%; }
.col-md-push-2 {
left: 25%; }
.col-md-push-3 {
left: 37.5%; }
.col-md-push-4 {
left: 50%; }
.col-md-push-5 {
left: 62.5%; }
.col-md-push-6 {
left: 75%; }
.col-md-push-7 {
left: 87.5%; }
.col-md-push-8 {
left: 100%; }
.col-md-pull-0 {
right: auto; }
.col-md-pull-1 {
right: 12.5%; }
.col-md-pull-2 {
right: 25%; }
.col-md-pull-3 {
right: 37.5%; }
.col-md-pull-4 {
right: 50%; }
.col-md-pull-5 {
right: 62.5%; }
.col-md-pull-6 {
right: 75%; }
.col-md-pull-7 {
right: 87.5%; }
.col-md-pull-8 {
right: 100%; }
.col-md-offset-0 {
margin-left: 0; }
.col-md-offset-1 {
margin-left: 12.5%; }
.col-md-offset-2 {
margin-left: 25%; }
.col-md-offset-3 {
margin-left: 37.5%; }
.col-md-offset-4 {
margin-left: 50%; }
.col-md-offset-5 {
margin-left: 62.5%; }
.col-md-offset-6 {
margin-left: 75%; }
.col-md-offset-7 {
margin-left: 87.5%; }
.col-md-offset-8 {
margin-left: 100%; }
.col-md-static {
width: 300px; }
.fluid-md-wrapper {
width: 100%; }
.static-right .fluid-md-wrapper {
float: left; }
.static-left .fluid-md-wrapper {
float: right; }
.static-right .col-md-fluid {
margin-right: 300px; }
.static-right .col-md-static {
float: left;
margin-left: -300px; }
.static-left .col-md-fluid {
margin-left: 300px; }
.static-left .col-md-static {
float: right;
margin-right: -300px; }
.start-md {
justify-content: flex-start;
text-align: start; }
.center-md {
justify-content: center;
text-align: center; }
.end-md {
justify-content: flex-end;
text-align: end; }
.top-md {
align-items: flex-start; }
.middle-md {
align-items: center; }
.bottom-md {
align-items: flex-end; }
.around-md {
justify-content: space-around; }
.between-md {
justify-content: space-between; }
.first-md {
order: -1; }
.last-md {
order: 1; }
}
@media (min-width: 1200px) {
.col-lg-1 {
-webkit-flex-basis: 12.5%;
-ms-flex-preferred-size: 12.5%;
flex-basis: 12.5%;
max-width: 12.5%; }
.col-lg-2 {
-webkit-flex-basis: 25%;
-ms-flex-preferred-size: 25%;
flex-basis: 25%;
max-width: 25%; }
.col-lg-3 {
-webkit-flex-basis: 37.5%;
-ms-flex-preferred-size: 37.5%;
flex-basis: 37.5%;
max-width: 37.5%; }
.col-lg-4 {
-webkit-flex-basis: 50%;
-ms-flex-preferred-size: 50%;
flex-basis: 50%;
max-width: 50%; }
.col-lg-5 {
-webkit-flex-basis: 62.5%;
-ms-flex-preferred-size: 62.5%;
flex-basis: 62.5%;
max-width: 62.5%; }
.col-lg-6 {
-webkit-flex-basis: 75%;
-ms-flex-preferred-size: 75%;
flex-basis: 75%;
max-width: 75%; }
.col-lg-7 {
-webkit-flex-basis: 87.5%;
-ms-flex-preferred-size: 87.5%;
flex-basis: 87.5%;
max-width: 87.5%; }
.col-lg-8 {
-webkit-flex-basis: 100%;
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
max-width: 100%; }
.col-lg-push-0 {
left: auto; }
.col-lg-push-1 {
left: 12.5%; }
.col-lg-push-2 {
left: 25%; }
.col-lg-push-3 {
left: 37.5%; }
.col-lg-push-4 {
left: 50%; }
.col-lg-push-5 {
left: 62.5%; }
.col-lg-push-6 {
left: 75%; }
.col-lg-push-7 {
left: 87.5%; }
.col-lg-push-8 {
left: 100%; }
.col-lg-pull-0 {
right: auto; }
.col-lg-pull-1 {
right: 12.5%; }
.col-lg-pull-2 {
right: 25%; }
.col-lg-pull-3 {
right: 37.5%; }
.col-lg-pull-4 {
right: 50%; }
.col-lg-pull-5 {
right: 62.5%; }
.col-lg-pull-6 {
right: 75%; }
.col-lg-pull-7 {
right: 87.5%; }
.col-lg-pull-8 {
right: 100%; }
.col-lg-offset-0 {
margin-left: 0; }
.col-lg-offset-1 {
margin-left: 12.5%; }
.col-lg-offset-2 {
margin-left: 25%; }
.col-lg-offset-3 {
margin-left: 37.5%; }
.col-lg-offset-4 {
margin-left: 50%; }
.col-lg-offset-5 {
margin-left: 62.5%; }
.col-lg-offset-6 {
margin-left: 75%; }
.col-lg-offset-7 {
margin-left: 87.5%; }
.col-lg-offset-8 {
margin-left: 100%; }
.col-lg-static {
width: 300px; }
.fluid-lg-wrapper {
width: 100%; }
.static-right .fluid-lg-wrapper {
float: left; }
.static-left .fluid-lg-wrapper {
float: right; }
.static-right .col-lg-fluid {
margin-right: 300px; }
.static-right .col-lg-static {
float: left;
margin-left: -300px; }
.static-left .col-lg-fluid {
margin-left: 300px; }
.static-left .col-lg-static {
float: right;
margin-right: -300px; }
.start-lg {
justify-content: flex-start;
text-align: start; }
.center-lg {
justify-content: center;
text-align: center; }
.end-lg {
justify-content: flex-end;
text-align: end; }
.top-lg {
align-items: flex-start; }
.middle-lg {
align-items: center; }
.bottom-lg {
align-items: flex-end; }
.around-lg {
justify-content: space-around; }
.between-lg {
justify-content: space-between; }
.first-lg {
order: -1; }
.last-lg {
order: 1; }
}
.containerfluid {
margin-right: auto;
margin-left: auto; }
.container {
margin-right: auto;
margin-left: auto; }
@media (min-width: 768px) {
.container {
width: 750px;
margin-right: auto;
margin-left: auto; } }
@media (min-width: 992px) {
.container {
width: 970px; } }
@media (min-width: 1200px) {
.container {
width: 1170px; } }
.row {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
-ms-box-orient: horizontal;
-webkit-box-direction: normal;
-moz-box-direction: normal;
-ms-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap; }
@media (min-width: 768px) {
.row {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
-ms-box-orient: horizontal;
-webkit-box-direction: normal;
-moz-box-direction: normal;
-ms-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap; } }
.gutter {
padding: 24px;
background-color: lightgreen; }
p {
margin: 0;
background-color: lightgrey; }
<div class="container">
<div class="row">
<div class="col col-xs-4">
<p>content</p>
<div class="row">
<div class="col col-xs-4">
<div class="gutter">
<p>content</p>
</div>
</div>
<div class="col col-xs-4">
<div class="gutter">
<p>content</p>
</div>
</div>
</div>
</div>
<div class="col col-xs-4">
<div class="gutter-left">
<p>content</p>
</div>
</div>
</div>
<div class="row">
<div class="col col-xs-8">
<p>content</p>
</div>
</div>
<div class="row">
<div class="col col-lg-1">
<p>content</p>
</div>
<div class="col col-lg-1">
<p>content</p>
</div>
<div class="col col-lg-1">
<p>content</p>
</div>
<div class="col col-lg-1">
<div class="gutter">
<p>content</p>
</div>
</div>
<div class="col col-lg-1">
<p>content</p>
</div>
<div class="col col-lg-1">
<div class="gutter">
<p>content</p>
</div>
</div>
<div class="col col-lg-1">
<p>content</p>
</div>
<div class="col col-lg-1">
<p>content</p>
</div>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment