KNACSS/sass/_layout.scss

/* ----------------------------- */
/* ==layouts                     */
/* ----------------------------- */

/**
 * Switching box-model for all elements
 * 1. ...and pseudo-elements 
 */
*, 
*:after, /* 1 */
*:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/**
 * Float layout
 * module, contains floats (.item is the same) 
 */
.mod, 
.item { 
    overflow: hidden;
}

/** 
 * Blocks that needs to be placed under floats 
 */
.clear, 
.line, 
.row {
    clear: both;
}

/**
 * Blocks that must contain floats 
 */
.clearfix, 
.line, 
.mod {
    @extend .clearfix;
}

/**
 * Table layout 
 */
.row {
    display: table;
    table-layout: fixed;
    width: 100%;
}

.row > *,
.col {
    display: table-cell;
    vertical-align: top;
}

/**
 * Inline-blocks
 */
.inbl {
    @include inline-block(top);
    margin-right: -.25em;
}

/**
 * Flexbox layout 
 */
.flex {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

.flex-h {
    -webkit-box-orient: horizontal;
       -moz-box-orient: horizontal;
    -webkit-flex-direction: row;
        -ms-flex-direction: row;
            flex-direction: row;
}

.flex-v {
    -webkit-box-orient: vertical;
       -moz-box-orient: vertical;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
}

.flex-fluid {
    -webkit-box-flox: 1;
       -moz-box-flex: 1;
        -webkit-flex: 1;
           -moz-flex: 1;
            -ms-flex: 1;
                flex: 1;
}

.flex-start {
    -webkit-box-ordinal-group: -1;
       -moz-box-ordinal-group:  0;
               -ms-flex-order: -1;
                -webkit-order: -1;
                   -moz-order: -1;
                        order: -1;
}

.flex-mid {
    -webkit-box-ordinal-group:  1;
       -moz-box-ordinal-group:  1;
               -ms-flex-order:  1;
                -webkit-order:  1;
                   -moz-order:  1;
                        order:  1;
}

.flex-end {
    -webkit-box-ordinal-group: 42;
       -moz-box-ordinal-group: 42;
               -ms-flex-order: 42;
                -webkit-order: 42;
                   -moz-order: 42;
                        order: 42;
}

/* Alignments (blocks and inline) */
/* ------------------------------ */

.left  { float: left;  }
.right { float: right; }

img.left { margin-right: 1em; }
img.right { margin-left: 1em; }

img.left, 
img.right { margin-bottom: 5px; }

.center    { margin-left: auto; margin-right: auto; }
.txtleft   { text-align: left; }
.txtright  { text-align: right; }
.txtcenter { text-align: center; }

/**
 * Blocks widths 
 * (percentages and pixels) 
 */
%width-helper {
    @include mq(small) {
        width: auto;
    }
}

.w10    { width: 10%; }
.w20    { width: 20%; }
.w25    { width: 25%; }
.w30    { width: 30%; }
.w33    { width: 33.333%; }
.w40    { width: 40%; }
.w50    { width: 50%; }
.w60    { width: 60%;     @extend %width-helper; }
.w66    { width: 66.666%; @extend %width-helper; }
.w70    { width: 70%;     @extend %width-helper; }
.w75    { width: 75%;     @extend %width-helper; }
.w80    { width: 80%;     @extend %width-helper; }
.w90    { width: 90%;     @extend %width-helper; }
.w100   { width: 100%;    @extend %width-helper; }

.w50p   { width:  50px; }
.w100p  { width: 100px; }
.w150p  { width: 150px; }
.w200p  { width: 200px; }
.w300p  { width: 300px; }
.w400p  { width: 400px; }
.w500p  { width: 500px; }
.w600p  { width: 600px; @extend %width-helper; }
.w700p  { width: 700px; @extend %width-helper; }
.w800p  { width: 800px; @extend %width-helper; }
.w960p  { width: 960px; @extend %width-helper; }
.mw960p { max-width: 960px; }

/**
 * Spacing helpers
 * p, m = padding,margin
 * a, t, r, b, l = all, top, right, bottom, left
 * s, m, l, n, 0 = small(10px), medium(20px), large(30px), zero or none(0)
 * Source: https://github.com/stubbornella/oocss/blob/master/core/spacing/space.css
 */
.m-reset, .ma0 { margin: 0 !important; }
.p-reset, .pa0 { padding: 0 !important; }
.ma1, .mas { margin: 10px !important; }
.ma2, .mam { margin: 20px !important; }
.ma3, .mal { margin: 30px !important; }
.pa1, .pas { padding: 10px; }
.pa2, .pam { padding: 20px; }
.pa3, .pal { padding: 30px; }

.mt0, .mtn { margin-top: 0 !important; }
.mt1, .mts { margin-top: 10px !important; }
.mt2, .mtm { margin-top: 20px !important; }
.mt3, .mtl { margin-top: 30px !important; }
.mr0, .mrn { margin-right: 0; }
.mr1, .mrs { margin-right: 10px; }
.mr2, .mrm { margin-right: 20px; }
.mr3, .mrl { margin-right: 30px; }
.mb0, .mbn { margin-bottom: 0 !important; }
.mb1, .mbs { margin-bottom: 10px !important; }
.mb2, .mbm { margin-bottom: 20px !important; }
.mb3, .mbl { margin-bottom: 30px !important; }
.ml0, .mln { margin-left: 0; }
.ml1, .mls { margin-left: 10px; }
.ml2, .mlm { margin-left: 20px; }
.ml3, .mll { margin-left: 30px; }

.pt0, .ptn { padding-top: 0; }
.pt1, .pts { padding-top: 10px; }
.pt2, .ptm { padding-top: 20px; }
.pt3, .ptl { padding-top: 30px; }
.pr0, .prn { padding-right: 0; }
.pr1, .prs { padding-right: 10px; }
.pr2, .prm { padding-right: 20px; }
.pr3, .prl { padding-right: 30px; }
.pb0, .pbn { padding-bottom: 0; }
.pb1, .pbs { padding-bottom: 10px; }
.pb2, .pbm { padding-bottom: 20px; }
.pb3, .pbl { padding-bottom: 30px; }
.pl0, .pln { padding-left: 0; }
.pl1, .pls { padding-left: 10px; }
.pl2, .plm { padding-left: 20px; }
.pl3, .pll { padding-left: 30px; }