Skip to content

Instantly share code, notes, and snippets.

@daphotron

daphotron/SassMeister-input-HTML.html

Last active June 8, 2016 15:43
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save daphotron/9ab2e228c5730b49d6013f89201c5030 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save daphotron/9ab2e228c5730b49d6013f89201c5030 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
SassMeister-input-HTML.html
12 column grid generated by Bourbon and Neat.
<!-- First row -->
<section class="grid-wrapper">
<div class="grid-4">
<div class="box">
4 column
</div>
</div>
<div class="grid-2">
<div class="box">
2 column
</div>
</div>
<div class="grid-6">
<div class="box">
6 column
</div>
</div>
</section>
<!-- Second row -->
<section class="grid-wrapper">
<div class="grid-3">
<div class="box">
3 column
</div>
</div>
<div class="grid-7">
<div class="box">
5 column
</div>
</div>
<div class="grid-2">
<div class="box">
2 column
</div>
</div>
</section>
<!-- Third row -->
<section class="bg-accent">
<div class="grid-wrapper">
<div class="grid-6">
<div class="box">
6 column
</div>
</div>
<div class="grid-6">
<div class="box">
6 column
</div>
</div>
</div>
</section>
Raw
SassMeister-input.scss
// ----
// Sass (v3.4.21)
// Compass (v1.0.3)
// ----
// *********************
// For styling purposes
// *********************
.box {
background: aquamarine;
margin: 1em 0;
padding: 1em;
}
.bg-accent {
background: purple;
}
// *********************
.cf,
.grid-wrapper {
*zoom: 1;
max-width: 68em;
margin-left: auto;
margin-right: auto;
overflow: hidden;
}
.cf:before,
.cf:after
.grid-wrapper:before,
.grid-wrapper:after {
content: " ";
display: table;
}
.cf:after,
.grid-wrapper:after {
clear: both;
}
// ~GRID LAYOUT
//=========================================
// @for $i from 1 through 12 {
// .grid-#{$i} {
// @media(min-width: 700px) {
// @include span-columns($i);
// }
// }
// }
@media (min-width: 700px) {
.grid-1 {
float: left;
display: block;
margin-right: 2.35765%;
width: 6.17215%;
}
.grid-1:last-child {
margin-right: 0;
}
}
@media (min-width: 700px) {
.grid-2 {
float: left;
display: block;
margin-right: 2.35765%;
width: 14.70196%;
}
.grid-2:last-child {
margin-right: 0;
}
}
@media (min-width: 700px) {
.grid-3 {
float: left;
display: block;
margin-right: 2.35765%;
width: 23.23176%;
}
.grid-3:last-child {
margin-right: 0;
}
}
@media (min-width: 700px) {
.grid-4 {
float: left;
display: block;
margin-right: 2.35765%;
width: 31.76157%;
}
.grid-4:last-child {
margin-right: 0;
}
}
@media (min-width: 700px) {
.grid-5 {
float: left;
display: block;
margin-right: 2.35765%;
width: 40.29137%;
}
.grid-5:last-child {
margin-right: 0;
}
}
@media (min-width: 700px) {
.grid-6 {
float: left;
display: block;
margin-right: 2.35765%;
width: 48.82117%;
}
.grid-6:last-child {
margin-right: 0;
}
}
@media (min-width: 700px) {
.grid-7 {
float: left;
display: block;
margin-right: 2.35765%;
width: 57.35098%;
}
.grid-7:last-child {
margin-right: 0;
}
}
@media (min-width: 700px) {
.grid-8 {
float: left;
display: block;
margin-right: 2.35765%;
width: 65.88078%;
}
.grid-8:last-child {
margin-right: 0;
}
}
@media (min-width: 700px) {
.grid-9 {
float: left;
display: block;
margin-right: 2.35765%;
width: 74.41059%;
}
.grid-9:last-child {
margin-right: 0;
}
}
@media (min-width: 700px) {
.grid-10 {
float: left;
display: block;
margin-right: 2.35765%;
width: 82.94039%;
}
.grid-10:last-child {
margin-right: 0;
}
}
@media (min-width: 700px) {
.grid-11 {
float: left;
display: block;
margin-right: 2.35765%;
width: 91.4702%;
}
.grid-11:last-child {
margin-right: 0;
}
}
@media (min-width: 700px) {
.grid-12 {
float: left;
display: block;
margin-right: 2.35765%;
width: 100%;
}
.grid-12:last-child {
margin-right: 0;
}
}
// FLEXIBLE 3 COL ====================
$em-base: 16px;
$bp-widest: 900px/$em-base + 0em;
$bp-wide: 700px/$em-base + 0em;
.span3 {
display: block;
@media (min-width: $bp-wide) {
// 2 col
float: left;
margin-right: 2%;
width: 48%;
}
@media (min-width: $bp-widest) {
// 3 col
width: 32%;
}
}
// first of 2
.span3:nth-child(2n+1) {
@media (min-width: $bp-wide) and (max-width: $bp-widest) {
clear: left;
}
}
// last of 2
.span3:nth-child(2n) {
@media (min-width: $bp-wide) and (max-width: $bp-widest) {
margin-right: 0;
}
}
// first of 3
.span3:nth-child(3n+1) {
@media (min-width: $bp-widest) {
clear: left;
}
}
// last of 3
.span3:nth-child(3n) {
@media (min-width: $bp-widest) {
margin-right: 0;
}
}
// FLEXIBLE 2 COL ====================
.span2 {
display: block;
@media (min-width: $bp-wide) {
// 2 col
float: left;
margin-right: 2%;
width: 48%;
}
}
// first of 2
.span2:nth-child(2n+1) {
@media (min-width: $bp-wide) {
clear: left;
}
}
// last of 2
.span2:nth-child(2n) {
@media (min-width: $bp-wide) {
margin-right: 0;
}
}
// padding and margin =================
$space_orientation: (
v,
h
);
$space_direction: (
(t, top),
(r, right),
(b, bottom),
(l, left)
);
$space_sizes:
(xs, 0.25rem),
(s, 0.5rem),
(n, 1rem),
(m, 1.25rem),
(l, 1.5rem),
(xl, 1.75rem),
(xxl, 2rem)
;
@each $space_direction, $direction in $space_direction {
@each $space_sizes, $size in $space_sizes {
.pa#{$space_sizes} {
padding: $size;
}
.p#{$space_direction}#{$space_sizes} {
padding-#{$direction}: $size;
}
.ma#{$space_sizes} {
margin: $size;
}
.m#{$space_direction}#{$space_sizes} {
margin-#{$direction}: $size;
}
}
}
@each $space_orientation, $orientation in $space_orientation {
@each $space_sizes, $size in $space_sizes {
@if $space_orientation == "v" {
.p#{$space_orientation}#{$space_sizes} {
padding-bottom: $size;
padding-top: $size;
}
.m#{$space_orientation}#{$space_sizes} {
margin-bottom: $size;
margin-top: $size;
}
}
@else {
.p#{$space_orientation}#{$space_sizes} {
padding-left: $size;
padding-right: $size;
}
.m#{$space_orientation}#{$space_sizes} {
margin-left: $size;
margin-right: $size;
}
}
}
}
// border
$border_direction: (
(t, top),
(r, right),
(b, bottom),
(l, left)
);
$border_sizes:
(l, 5px),
(m 2px),
(n, 1px)
;
@each $border_direction, $direction in $border_direction {
@each $border_sizes, $width in $border_sizes {
.ba#{$border_sizes} {
border: $width solid #E9EAE4;
}
@if $border_sizes != "" {
.b#{$border_direction}#{$border_sizes} {
border-#{$direction}: $width solid #E9EAE4;
}
}
@else {
.b#{$border_direction} {
border-#{$direction}: $width solid #E9EAE4;
}
}
}
}
// ~TOOLBOX
//=========================================
.hidden {
display: none;
}
// ~clearfix
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
.clear {
clear: both;
}
.left {
float: left;
}
.right {
float: right;
}
.relative {
position: relative;
}
.inline-block {
display: inline-block;
}
.align-center {
text-align: center;
}
.align-right {
text-align: right;
}
.type-bold {
font-weight: 600;
}
// For prototyping
.trow {
display: table;
width: 100%;
}
.tcell {
display: inline;
@media (min-width: 1024px) {
display: table-cell;
vertical-align: middle;
}
}
// ~FLEX LAYOUT
//=========================================
.flex-layout-horizontal,
.flex-layout-horizontal-reverse,
.flex-layout-vertical,
.flex-layout-vertical-reverse {
display: flex;
}
.flex-layout-inline {
display: inline-flex;
}
.flex-layout-horizontal {
flex-direction: row;
}
.flex-layout-horizontal-reverse {
flex-direction: row-reverse;
}
.flex-layout-vertical {
flex-direction: column;
}
.flex-layout-vertical-reverse {
flex-direction: column-reverse;
}
.flex-layout-wrap {
flex-wrap: wrap;
}
.flex-layout-wrap-reverse {
flex-wrap: wrap-reverse;
}
.flex-auto {
flex: 1 1 auto;
}
.flex-none {
flex: none;
}
// generate grid columns
@for $i from 1 through 12 {
.flex-#{$i} {
flex: #{$i};
}
}
// alignment in cross axis
.flex-start {
align-items: flex-start;
}
.flex-center-center {
align-items: center;
}
.flex-end {
align-items: flex-end;
}
// alignment in main axis
.flex-start-justified {
justify-content: flex-start;
}
.flex-center-justified,.flex-center-center {
justify-content: center;
}
.flex-end-justified {
justify-content: flex-end;
}
.flex-around-justified {
justify-content: space-around;
}
.flex-justified {
justify-content: space-between;
}
// self alignment
.flex-self-start {
align-self: flex-start;
}
.flex-self-center {
align-self: center;
}
.flex-self-end {
align-self: flex-end;
}
.flex-self-stretch {
align-self: stretch;
}
Raw
SassMeister-output.css
.box {
background: aquamarine;
margin: 1em 0;
padding: 1em;
}
.bg-accent {
background: purple;
}
.cf,
.grid-wrapper {
*zoom: 1;
max-width: 68em;
margin-left: auto;
margin-right: auto;
overflow: hidden;
}
.cf:before,
.cf:after
.grid-wrapper:before,
.grid-wrapper:after {
content: " ";
display: table;
}
.cf:after,
.grid-wrapper:after {
clear: both;
}
@media (min-width: 700px) {
.grid-1 {
float: left;
display: block;
margin-right: 2.35765%;
width: 6.17215%;
}
.grid-1:last-child {
margin-right: 0;
}
}
@media (min-width: 700px) {
.grid-2 {
float: left;
display: block;
margin-right: 2.35765%;
width: 14.70196%;
}
.grid-2:last-child {
margin-right: 0;
}
}
@media (min-width: 700px) {
.grid-3 {
float: left;
display: block;
margin-right: 2.35765%;
width: 23.23176%;
}
.grid-3:last-child {
margin-right: 0;
}
}
@media (min-width: 700px) {
.grid-4 {
float: left;
display: block;
margin-right: 2.35765%;
width: 31.76157%;
}
.grid-4:last-child {
margin-right: 0;
}
}
@media (min-width: 700px) {
.grid-5 {
float: left;
display: block;
margin-right: 2.35765%;
width: 40.29137%;
}
.grid-5:last-child {
margin-right: 0;
}
}
@media (min-width: 700px) {
.grid-6 {
float: left;
display: block;
margin-right: 2.35765%;
width: 48.82117%;
}
.grid-6:last-child {
margin-right: 0;
}
}
@media (min-width: 700px) {
.grid-7 {
float: left;
display: block;
margin-right: 2.35765%;
width: 57.35098%;
}
.grid-7:last-child {
margin-right: 0;
}
}
@media (min-width: 700px) {
.grid-8 {
float: left;
display: block;
margin-right: 2.35765%;
width: 65.88078%;
}
.grid-8:last-child {
margin-right: 0;
}
}
@media (min-width: 700px) {
.grid-9 {
float: left;
display: block;
margin-right: 2.35765%;
width: 74.41059%;
}
.grid-9:last-child {
margin-right: 0;
}
}
@media (min-width: 700px) {
.grid-10 {
float: left;
display: block;
margin-right: 2.35765%;
width: 82.94039%;
}
.grid-10:last-child {
margin-right: 0;
}
}
@media (min-width: 700px) {
.grid-11 {
float: left;
display: block;
margin-right: 2.35765%;
width: 91.4702%;
}
.grid-11:last-child {
margin-right: 0;
}
}
@media (min-width: 700px) {
.grid-12 {
float: left;
display: block;
margin-right: 2.35765%;
width: 100%;
}
.grid-12:last-child {
margin-right: 0;
}
}
.span3 {
display: block;
}
@media (min-width: 43.75em) {
.span3 {
float: left;
margin-right: 2%;
width: 48%;
}
}
@media (min-width: 56.25em) {
.span3 {
width: 32%;
}
}
@media (min-width: 43.75em) and (max-width: 56.25em) {
.span3:nth-child(2n+1) {
clear: left;
}
}
@media (min-width: 43.75em) and (max-width: 56.25em) {
.span3:nth-child(2n) {
margin-right: 0;
}
}
@media (min-width: 56.25em) {
.span3:nth-child(3n+1) {
clear: left;
}
}
@media (min-width: 56.25em) {
.span3:nth-child(3n) {
margin-right: 0;
}
}
.span2 {
display: block;
}
@media (min-width: 43.75em) {
.span2 {
float: left;
margin-right: 2%;
width: 48%;
}
}
@media (min-width: 43.75em) {
.span2:nth-child(2n+1) {
clear: left;
}
}
@media (min-width: 43.75em) {
.span2:nth-child(2n) {
margin-right: 0;
}
}
.paxs {
padding: 0.25rem;
}
.ptxs {
padding-top: 0.25rem;
}
.maxs {
margin: 0.25rem;
}
.mtxs {
margin-top: 0.25rem;
}
.pas {
padding: 0.5rem;
}
.pts {
padding-top: 0.5rem;
}
.mas {
margin: 0.5rem;
}
.mts {
margin-top: 0.5rem;
}
.pan {
padding: 1rem;
}
.ptn {
padding-top: 1rem;
}
.man {
margin: 1rem;
}
.mtn {
margin-top: 1rem;
}
.pam {
padding: 1.25rem;
}
.ptm {
padding-top: 1.25rem;
}
.mam {
margin: 1.25rem;
}
.mtm {
margin-top: 1.25rem;
}
.pal {
padding: 1.5rem;
}
.ptl {
padding-top: 1.5rem;
}
.mal {
margin: 1.5rem;
}
.mtl {
margin-top: 1.5rem;
}
.paxl {
padding: 1.75rem;
}
.ptxl {
padding-top: 1.75rem;
}
.maxl {
margin: 1.75rem;
}
.mtxl {
margin-top: 1.75rem;
}
.paxxl {
padding: 2rem;
}
.ptxxl {
padding-top: 2rem;
}
.maxxl {
margin: 2rem;
}
.mtxxl {
margin-top: 2rem;
}
.paxs {
padding: 0.25rem;
}
.prxs {
padding-right: 0.25rem;
}
.maxs {
margin: 0.25rem;
}
.mrxs {
margin-right: 0.25rem;
}
.pas {
padding: 0.5rem;
}
.prs {
padding-right: 0.5rem;
}
.mas {
margin: 0.5rem;
}
.mrs {
margin-right: 0.5rem;
}
.pan {
padding: 1rem;
}
.prn {
padding-right: 1rem;
}
.man {
margin: 1rem;
}
.mrn {
margin-right: 1rem;
}
.pam {
padding: 1.25rem;
}
.prm {
padding-right: 1.25rem;
}
.mam {
margin: 1.25rem;
}
.mrm {
margin-right: 1.25rem;
}
.pal {
padding: 1.5rem;
}
.prl {
padding-right: 1.5rem;
}
.mal {
margin: 1.5rem;
}
.mrl {
margin-right: 1.5rem;
}
.paxl {
padding: 1.75rem;
}
.prxl {
padding-right: 1.75rem;
}
.maxl {
margin: 1.75rem;
}
.mrxl {
margin-right: 1.75rem;
}
.paxxl {
padding: 2rem;
}
.prxxl {
padding-right: 2rem;
}
.maxxl {
margin: 2rem;
}
.mrxxl {
margin-right: 2rem;
}
.paxs {
padding: 0.25rem;
}
.pbxs {
padding-bottom: 0.25rem;
}
.maxs {
margin: 0.25rem;
}
.mbxs {
margin-bottom: 0.25rem;
}
.pas {
padding: 0.5rem;
}
.pbs {
padding-bottom: 0.5rem;
}
.mas {
margin: 0.5rem;
}
.mbs {
margin-bottom: 0.5rem;
}
.pan {
padding: 1rem;
}
.pbn {
padding-bottom: 1rem;
}
.man {
margin: 1rem;
}
.mbn {
margin-bottom: 1rem;
}
.pam {
padding: 1.25rem;
}
.pbm {
padding-bottom: 1.25rem;
}
.mam {
margin: 1.25rem;
}
.mbm {
margin-bottom: 1.25rem;
}
.pal {
padding: 1.5rem;
}
.pbl {
padding-bottom: 1.5rem;
}
.mal {
margin: 1.5rem;
}
.mbl {
margin-bottom: 1.5rem;
}
.paxl {
padding: 1.75rem;
}
.pbxl {
padding-bottom: 1.75rem;
}
.maxl {
margin: 1.75rem;
}
.mbxl {
margin-bottom: 1.75rem;
}
.paxxl {
padding: 2rem;
}
.pbxxl {
padding-bottom: 2rem;
}
.maxxl {
margin: 2rem;
}
.mbxxl {
margin-bottom: 2rem;
}
.paxs {
padding: 0.25rem;
}
.plxs {
padding-left: 0.25rem;
}
.maxs {
margin: 0.25rem;
}
.mlxs {
margin-left: 0.25rem;
}
.pas {
padding: 0.5rem;
}
.pls {
padding-left: 0.5rem;
}
.mas {
margin: 0.5rem;
}
.mls {
margin-left: 0.5rem;
}
.pan {
padding: 1rem;
}
.pln {
padding-left: 1rem;
}
.man {
margin: 1rem;
}
.mln {
margin-left: 1rem;
}
.pam {
padding: 1.25rem;
}
.plm {
padding-left: 1.25rem;
}
.mam {
margin: 1.25rem;
}
.mlm {
margin-left: 1.25rem;
}
.pal {
padding: 1.5rem;
}
.pll {
padding-left: 1.5rem;
}
.mal {
margin: 1.5rem;
}
.mll {
margin-left: 1.5rem;
}
.paxl {
padding: 1.75rem;
}
.plxl {
padding-left: 1.75rem;
}
.maxl {
margin: 1.75rem;
}
.mlxl {
margin-left: 1.75rem;
}
.paxxl {
padding: 2rem;
}
.plxxl {
padding-left: 2rem;
}
.maxxl {
margin: 2rem;
}
.mlxxl {
margin-left: 2rem;
}
.pvxs {
padding-bottom: 0.25rem;
padding-top: 0.25rem;
}
.mvxs {
margin-bottom: 0.25rem;
margin-top: 0.25rem;
}
.pvs {
padding-bottom: 0.5rem;
padding-top: 0.5rem;
}
.mvs {
margin-bottom: 0.5rem;
margin-top: 0.5rem;
}
.pvn {
padding-bottom: 1rem;
padding-top: 1rem;
}
.mvn {
margin-bottom: 1rem;
margin-top: 1rem;
}
.pvm {
padding-bottom: 1.25rem;
padding-top: 1.25rem;
}
.mvm {
margin-bottom: 1.25rem;
margin-top: 1.25rem;
}
.pvl {
padding-bottom: 1.5rem;
padding-top: 1.5rem;
}
.mvl {
margin-bottom: 1.5rem;
margin-top: 1.5rem;
}
.pvxl {
padding-bottom: 1.75rem;
padding-top: 1.75rem;
}
.mvxl {
margin-bottom: 1.75rem;
margin-top: 1.75rem;
}
.pvxxl {
padding-bottom: 2rem;
padding-top: 2rem;
}
.mvxxl {
margin-bottom: 2rem;
margin-top: 2rem;
}
.phxs {
padding-left: 0.25rem;
padding-right: 0.25rem;
}
.mhxs {
margin-left: 0.25rem;
margin-right: 0.25rem;
}
.phs {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.mhs {
margin-left: 0.5rem;
margin-right: 0.5rem;
}
.phn {
padding-left: 1rem;
padding-right: 1rem;
}
.mhn {
margin-left: 1rem;
margin-right: 1rem;
}
.phm {
padding-left: 1.25rem;
padding-right: 1.25rem;
}
.mhm {
margin-left: 1.25rem;
margin-right: 1.25rem;
}
.phl {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
.mhl {
margin-left: 1.5rem;
margin-right: 1.5rem;
}
.phxl {
padding-left: 1.75rem;
padding-right: 1.75rem;
}
.mhxl {
margin-left: 1.75rem;
margin-right: 1.75rem;
}
.phxxl {
padding-left: 2rem;
padding-right: 2rem;
}
.mhxxl {
margin-left: 2rem;
margin-right: 2rem;
}
.bal {
border: 5px solid #E9EAE4;
}
.btl {
border-top: 5px solid #E9EAE4;
}
.bam {
border: 2px solid #E9EAE4;
}
.btm {
border-top: 2px solid #E9EAE4;
}
.ban {
border: 1px solid #E9EAE4;
}
.btn {
border-top: 1px solid #E9EAE4;
}
.bal {
border: 5px solid #E9EAE4;
}
.brl {
border-right: 5px solid #E9EAE4;
}
.bam {
border: 2px solid #E9EAE4;
}
.brm {
border-right: 2px solid #E9EAE4;
}
.ban {
border: 1px solid #E9EAE4;
}
.brn {
border-right: 1px solid #E9EAE4;
}
.bal {
border: 5px solid #E9EAE4;
}
.bbl {
border-bottom: 5px solid #E9EAE4;
}
.bam {
border: 2px solid #E9EAE4;
}
.bbm {
border-bottom: 2px solid #E9EAE4;
}
.ban {
border: 1px solid #E9EAE4;
}
.bbn {
border-bottom: 1px solid #E9EAE4;
}
.bal {
border: 5px solid #E9EAE4;
}
.bll {
border-left: 5px solid #E9EAE4;
}
.bam {
border: 2px solid #E9EAE4;
}
.blm {
border-left: 2px solid #E9EAE4;
}
.ban {
border: 1px solid #E9EAE4;
}
.bln {
border-left: 1px solid #E9EAE4;
}
.hidden {
display: none;
}
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
.clear {
clear: both;
}
.left {
float: left;
}
.right {
float: right;
}
.relative {
position: relative;
}
.inline-block {
display: inline-block;
}
.align-center {
text-align: center;
}
.align-right {
text-align: right;
}
.type-bold {
font-weight: 600;
}
.trow {
display: table;
width: 100%;
}
.tcell {
display: inline;
}
@media (min-width: 1024px) {
.tcell {
display: table-cell;
vertical-align: middle;
}
}
.flex-layout-horizontal,
.flex-layout-horizontal-reverse,
.flex-layout-vertical,
.flex-layout-vertical-reverse {
display: flex;
}
.flex-layout-inline {
display: inline-flex;
}
.flex-layout-horizontal {
flex-direction: row;
}
.flex-layout-horizontal-reverse {
flex-direction: row-reverse;
}
.flex-layout-vertical {
flex-direction: column;
}
.flex-layout-vertical-reverse {
flex-direction: column-reverse;
}
.flex-layout-wrap {
flex-wrap: wrap;
}
.flex-layout-wrap-reverse {
flex-wrap: wrap-reverse;
}
.flex-auto {
flex: 1 1 auto;
}
.flex-none {
flex: none;
}
.flex-1 {
flex: 1;
}
.flex-2 {
flex: 2;
}
.flex-3 {
flex: 3;
}
.flex-4 {
flex: 4;
}
.flex-5 {
flex: 5;
}
.flex-6 {
flex: 6;
}
.flex-7 {
flex: 7;
}
.flex-8 {
flex: 8;
}
.flex-9 {
flex: 9;
}
.flex-10 {
flex: 10;
}
.flex-11 {
flex: 11;
}
.flex-12 {
flex: 12;
}
.flex-start {
align-items: flex-start;
}
.flex-center-center {
align-items: center;
}
.flex-end {
align-items: flex-end;
}
.flex-start-justified {
justify-content: flex-start;
}
.flex-center-justified, .flex-center-center {
justify-content: center;
}
.flex-end-justified {
justify-content: flex-end;
}
.flex-around-justified {
justify-content: space-around;
}
.flex-justified {
justify-content: space-between;
}
.flex-self-start {
align-self: flex-start;
}
.flex-self-center {
align-self: center;
}
.flex-self-end {
align-self: flex-end;
}
.flex-self-stretch {
align-self: stretch;
}
Raw
SassMeister-rendered.html
12 column grid generated by Bourbon and Neat.
<!-- First row -->
<section class="grid-wrapper">
<div class="grid-4">
<div class="box">
4 column
</div>
</div>
<div class="grid-2">
<div class="box">
2 column
</div>
</div>
<div class="grid-6">
<div class="box">
6 column
</div>
</div>
</section>
<!-- Second row -->
<section class="grid-wrapper">
<div class="grid-3">
<div class="box">
3 column
</div>
</div>
<div class="grid-7">
<div class="box">
5 column
</div>
</div>
<div class="grid-2">
<div class="box">
2 column
</div>
</div>
</section>
<!-- Third row -->
<section class="bg-accent">
<div class="grid-wrapper">
<div class="grid-6">
<div class="box">
6 column
</div>
</div>
<div class="grid-6">
<div class="box">
6 column
</div>
</div>
</div>
</section>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment