generator-robonkey/generators/styles/templates/stylus/tpl/base/jeet/_grid.styl

A Yeoman generator for Gulp, Templating, CSS Preprocessors, Coffeescript, PostCSS, Modernizr, svg icons/icon font generator, BrowserSync, and some libraries to choose from. Express, Wordpress, Drupal, CodeIgniter, Laravel subgenerators are available.

/**
 * Style an element as a column with a gutter.
 * @param {number} [ratios=1] - A width relative to its container as a fraction.
 * @param {number} [offset=0] - A offset specified as a fraction (see ratios).
 * @param {number} [cycle=0] - Easily create an nth column grid where cycle equals the number of columns.
 * @param {number} [gutter=jeet.gutter] - Specify the gutter width as a percentage of the containers width.
 */
j-column(ratios = 1, offset = 0, cycle = 0, gutter = jeet.gutter)
  side = jeet-get-layout-direction()
  opposite-side = opposite-position(side)
  column-widths = jeet-get-column(ratios, gutter)
  margin-last = 0
  margin-l = margin-last
  margin-r = column-widths[1]

  unless offset == 0
    if offset < 0
      offset *= -1
      offset = jeet-get-column(offset, column-widths[1])[0]
      margin-r = margin-last = offset + column-widths[1] * 2
    else
      offset = jeet-get-column(offset, column-widths[1])[0]
      margin-l = offset + column-widths[1]

  float: side
  clear: none
  width: jeet-get-percentage(column-widths[0])
  margin-{side}: jeet-get-percentage(margin-l)
  margin-{opposite-side}: jeet-get-percentage(margin-r)

  if cycle != 0
    &:nth-of-type(n)
      margin-{opposite-side}: jeet-get-percentage(margin-r)
      float: side
      clear: none
    &:nth-of-type({cycle}n)
      margin-{opposite-side}: jeet-get-percentage(margin-last)
      float: opposite-side
    &:nth-of-type({cycle}n+1)
      clear: both
  else
    &:last-child
      margin-{opposite-side}: jeet-get-percentage(margin-last)

/**
 * Get the width of a column and nothing else.
 * @param {number} [ratios=1] - A width relative to its container as a fraction.
 * @param {number} [gutter=jeet.gutter] - Specify the gutter width as a percentage of the containers width.
 */
j-column-width(ratios = 1, gutter = jeet.gutter)
  return jeet-get-percentage(jeet-get-column(ratios, gutter)[0])

/**
 * Get the gutter size of a column and nothing else.
 * @param {number} [ratios=1] - A width relative to its container as a fraction.
 * @param {number} [gutter=jeet.gutter] - Specify the gutter width as a percentage of the containers width.
 */
j-column-gutter(ratios = 1, gutter = jeet.gutter)
  return jeet-get-percentage(jeet-get-column(ratios, gutter)[1])

/**
 * Style an element as a column without any gutters for a seamless row.
 * @param {number} [ratios=1] - A width relative to its container as a fraction.
 * @param {number} [offset=0] - A offset specified as a fraction (see ratios).
 * @param {number} [cycle=0] - Easily create an nth column grid where cycle equals the number of columns.
 * @param {number} [uncycle=0] - Undo a previous cycle value to allow for a new one.
 */
j-span(ratio = 1, offset = 0, cycle = 0, uncycle = 0)
  side = jeet-get-layout-direction()
  opposite-side = opposite-position(side)
  span-width = jeet-get-span(ratio)
  margin-r = 0
  margin-l = margin-r

  unless offset == 0
    if offset < 0
      offset *= -1
      margin-r = jeet-get-span(offset)
    else
      margin-l = jeet-get-span(offset)

  float: side
  clear: none
  width: jeet-get-percentage(span-width)
  margin-{side}: jeet-get-percentage(margin-l)
  margin-{opposite-side}: jeet-get-percentage(margin-r)

  if cycle != 0
    &:nth-of-type({cycle}n)
      float: opposite-side
    &:nth-of-type({cycle}n + 1)
      clear: both

  if uncycle != 0
    &:nth-of-type({uncycle}n)
      float: side
    &:nth-of-type({uncycle}n + 1)
      clear: none

/**
 * Reorder columns without altering the HTML.
 * @param {number} [ratios=0] - Specify how far along you want the element to move.
 * @param {string} [col-or-span=column] - Specify whether the element has a gutter or not.
 * @param {number} [gutter=jeet.gutter] - Specify the gutter width as a percentage of the containers width.
 */
j-shift(ratios = 0, col-or-span = column, gutter = jeet.gutter)
  translate = ''
  side = jeet-get-layout-direction()

  if side == right
    ratios = jeet-replace-nth(ratios, 0, ratios[0] * -1)

  if col-or-span == column or col-or-span == col or col-or-span == c
    column-widths = jeet-get-column(ratios, gutter)
    translate = column-widths[0] + column-widths[1]
  else
    translate = jeet-get-span(ratios)

  position: relative
  left: jeet-get-percentage(translate)

/**
 * Reset an element that has had shift() applied to it.
 */
j-unshift()
  position: static
  left: 0

/**
 * View the grid and its layers for easy debugging.
 * @param {string} [color=black] - The background tint applied.
 * @param {boolean} [important=false] - Whether to apply the style as !important.
 */
j-edit(color = black, important = false)
  if important
    *
      background: rgba(color, 5%) !important
  else
    *
      background: rgba(color, 5%)

/**
 * Horizontally center an element.
 * @param {number} [max-width=jeet.max-width] - The max width the element can be.
 * @param {number} [pad=0] - Specify the element's left and right padding.
 */
j-center(max-width = jeet.max-width, pad = 0)
  width: auto
  max-width: max-width
  float: none
  display: unquote('block')
  margin-right: auto
  margin-left: auto
  padding-left: pad
  padding-right: pad

/**
 * Uncenter an element.
 */
j-uncenter()
  max-width: none
  margin-right: 0
  margin-left: 0
  padding-left: 0
  padding-right: 0

/**
 * Stack an element so that nothing is either side of it.
 * @param {number} [pad=0] - Specify the element's left and right padding.
 * @param {bollean/string} [align=false] - Specify the text align for the element.
 */
j-stack(pad = 0, align = false)
  side = jeet-get-layout-direction()
  opposite-side = opposite-position(side)

  display: unquote('block')
  clear: both
  float: none
  width: 100%
  margin-left: auto
  margin-right: auto

  &:first-child
    margin-{side}: auto

  &:last-child
    margin-{opposite-side}: auto

  if pad != 0
    padding-left: pad
    padding-right: pad

  if (align is not false)
    if (align == center) or (align == c)
      text-align: center
    if (align == left) or (align == l)
      text-align: left
    if (align == right) or (align == r)
      text-align: right

/**
 * Unstack an element.
 */
j-unstack()
  side = jeet-get-layout-direction()
  opposite-side = opposite-position(side)

  text-align: side
  display: inline
  clear: none
  width: auto
  margin-left: 0
  margin-right: 0

  &:first-child
    margin-{side}: 0

  &:last-child
    margin-{opposite-side}: 0

/**
 * Center an element on either or both axes.
 * @requires A parent container with relative positioning.
 * @param {string} [direction=both] - Specify which axes to center the element on.
 */
j-align(direction = both)
  position: absolute
  transform-style: preserve-3d

  if (direction == horizontal) or (direction == h)
    left: 50%
    transform: translateX(-50%)
  else if (direction == vertical) or (direction == v)
    top: 50%
    transform: translateY(-50%)
  else if (direction == none)
    top: auto
    left: auto
    transform: translate(0, 0)
  else
    top: 50%
    left: 50%
    transform: translate(-50%, -50%)

/**
 * Apply a clearfix to an element.
 */
j-cf()
  *zoom: 1

  &:before, &:after
    content: ''
    display: table

  &:after
    clear: both