KNACSS/styl/utilities/_layout.styl

/* ----------------------------- */
/* ==Global Layout               */
/* ----------------------------- */
@import '../vendor/flexbox-stylus/stylus/flexbox.styl'
/* module, gains superpower "BFC" Block Formating Context */
.mod
.bfc
  overflow hidden

/* blocks that needs to be placed under floats */
.clear
  clear both

/* blocks that must contain floats */
.clearfix
  &::after
    content ""
    display table
    clear both
    border-collapse collapse

/* simple blocks alignment */
.{kna-namespace}left
  margin-right auto

.{kna-namespace}right
  margin-left auto

.{kna-namespace}center
  margin-left auto
  margin-right auto

/* text and contents alignment */
.{kna-namespace}txtleft
  text-align left

.{kna-namespace}txtright
  text-align right

.{kna-namespace}txtcenter
  text-align center

/* floating elements */
.{kna-namespace}fl
  float left

img.{kna-namespace}fl
  margin-right small-value

.{kna-namespace}fr
  float right

img.{kna-namespace}fr
  margin-left small-value

img.{kna-namespace}fl
img.{kna-namespace}fr
  margin-bottom tiny-value

/* inline-block */
.{kna-namespace}inbl
  display inline-block
  vertical-align top

/* flexbox layout
http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
*/

[class*={kna-namespace}"flex-container"]
.{kna-namespace}flex-container
  flexbox(flex)
  flex-wrap(wrap)

.{kna-namespace}flex-container-h
  flex-direction(row)

.{kna-namespace}flex-container-v
  flex-direction(column)

.{kna-namespace}flex-item-fluid
  flex 1
  min-width 0

.{kna-namespace}flex-item-first
.{kna-namespace}item-first
  order -1

.{kna-namespace}flex-item-medium
.{kna-namespace}item-medium
  order 0

.{kna-namespace}flex-item-last
.{kna-namespace}item-last
  order 1

.{kna-namespace}flex-item-center
.{kna-namespace}item-center
  margin auto