grid.styl

// Happy Grid
// A simple grid system for Stylus based on Lost Grid circa v5.1.6 (i.e. before the PostCSS conversion)
// This is intentionally stripped down to the basics: make columns, offset and move them.
// Thanks to Cory Simmons for sorting out the grid math
// If you want more features, check out https://github.com/corysimmons/lost
// Uses CSS calc so IE9+. To support IE8, use a calc polyfill https://github.com/closingtag/calc-polyfill

/**
 * Set the default gutter for padding and margin and the default max site width
 */

gutter ?= 3%
max-site-width ?= 60em


/**
 * Clearfix
 * Used on a parent container to clear floated children elements. http://nicolasgallagher.com/micro-clearfix-hack
 *
 * @example
 *   .parent
 *     clearfix()
 *     .child
 *       column('1/2')
 */

clearfix()
  *zoom 1

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

  &:after
    clear: both

// Clearfix Aliases
cf = group = clearfix

/**
 * Center
 * Horizontally center a container element and apply a clearfix and optional padding to it.
 *
 * @param {unit} [max-size=max-site-width] - A max-width to assign. Can be any unit.
 * @param {unit} [pad=null] - Padding on the left and right of the element. Can be any unit.
 *
 * @example
 *   section
 *     center(30em, gutter)
 */

center(max-size = max-site-width, pad = null)
  clearfix()
  max-width max-size
  margin-left auto
  margin-right auto

  if pad
    padding-left pad
    padding-right pad

// Center Alias
row = center


/**
 * Column
 * Creates a column that is a fraction of the size of it's containing element with a gutter. You don't need to pass any additional ratios (fractions) as the grid system will make use of calc(). Note that fractions must always be wrapped in quotes.
 *
 * @param {string} [fraction='1/1'] - This is a simple fraction of the containing element's width. This must be a string written as a fraction.
 * @param {number} [cycle=convert(unquote(split('/', fraction)[1]))] - The grid works by assigning a margin-right to all elements except the last in the row. It does this by default by using the denominator of the fraction you pick. To override this default use this param. e.g. column('2/4', cycle: 2)
 * @param {number} [margin=gutter] - The margin on the right side of the element used to create a gutter. Typically this is left alone and the global gutter will be used, but you can override it here if you want certain elements to have a particularly large or small gutter (pass 0 for no gutter at all).
 *
 * @example
 *   .column
 *     column('1/3')
 */

column(fraction = '1/1', margin = gutter, cycle = convert(unquote(split('/', fraction)[1])))
  _get-size()
    if margin is 0
      return s('calc(99.999999% * %s)', unquote(fraction))
    else
      return s('calc(99.99% * %s - (%s - %s * %s))', unquote(fraction), margin, margin, unquote(fraction))
  
  width _get-size()
  
  &:nth-child(n)
    margin-right margin
    float left
    clear none

  &:last-child
    margin-right 0

  &:nth-child({cycle}n)
    margin-right 0
    float right

  &:nth-child({cycle}n + 1)
    clear left

// Column Alias
col = column


/**
 * Offset
 * Margin to the left or right of an element depending on if the fraction passed is positive or negative.
 *
 * @param {string} [fraction='1/1'] - Fraction of the container to be offset. Must be a string.
 * @param {number} [margin=gutter] - How large the gutter involved is, typically this won't be adjusted, but if you have set the elements for that container to have different gutters than default, you will need to match that gutter here as well.
 *
 * @example
 *   .two-elements
 *     column('1/3')
 *     &:first-child
 *       offset('1/3')
 */

offset(fraction = '1/1', margin = gutter)
  numerator = convert(unquote(split('/', fraction)[0]))

  _get-size()
    if numerator > 0
      if margin is 0
        return s('calc(99.999999% * %s)', unquote(fraction))
      else
        return s('calc(99.99% * %s - (%s - %s * %s) + (%s * 2))', unquote(fraction), margin, margin, unquote(fraction), margin)

    if numerator < 0
      if margin is 0
        return s('calc(99.999999% * (%s * -1))', unquote(fraction))
      else
        return s('calc(99.99% * (%s * -1) - (%s - %s * (%s * -1)) + %s)', unquote(fraction), margin, margin, unquote(fraction), margin)

  if numerator > 0
    margin-right _get-size() !important
  else if numerator < 0
    margin-left _get-size() !important
  else
    margin-left 0 !important
    margin-right margin !important


/**
 * Move
 * Source ordering. Shift elements left or right by passing a positive or negative fraction.
 *
 * @param {string} [fraction='1/1'] - Fraction of the container to be shifted. Must be a string.
 * @param {number} [margin=gutter] - Adjust the size of the gutter for this movement. Should match the element's gutter.
 *
 * @example
 *   .reversed-order
 *     column('1/2')
 *     &:first-child
 *       move('1/2')
 *     &:last-child
 *       move('-1/2')
 */

move(fraction = '1/1', margin = gutter)
  _get-size()
    if margin is 0
      return s('calc(99.999999% * %s)', unquote(fraction))
    else
      return s('calc(99.99% * %s - (%s - %s * %s) + %s)', unquote(fraction), margin, margin, unquote(fraction), margin)
  
  position relative
  left _get-size()

// Move Alias
shift = move