jeet + rupture

gistfile1.css

// Jeet 5 - http://jeet.gs

/*  Syntax Quick Reference
	--------------------------
	column(ratios = 1, offset = 0, cycle = 0, uncycle = 0)
	span(ratio = 1, offset = 0)
	shift(ratios = 0, col_or_span = column)
	unshift()
	edit()
	center(max_width = 1410px, pad = 0)
	stack(pad = 0, align = false)
	unstack()
	align(direction = both)
	cf()
*/

/*
 * Support for ie defaulting to true.
 */

support-for-ie ?= true

/*
 * Default vendor prefixes.
 */

vendor-prefixes ?= webkit moz o ms official

// _settings.styl
// Grid Settings
jeet-gutter ?= 2
jeet-parent-first ?= false
jeet-layout-direction ?= LTR

g = jeet-gutter


// _functions.styl
-get_span(ratio = 1)
	return ratio * 100

-get_column(ratios = 1, gutter = jeet-gutter)
	ratios = -reverse(ratios) unless jeet-parent-first is true
	w = 100
	for ratio in ratios
		g = gutter / w * 100
		w = 100 * ratio - g + ratio * g
	return w g

-get_layout_direction()
	jeet-layout-direction == RTL ? result = right : result = left
	return result

-replace_nth(list, index, value)
	result = ()
	index = length(list) + index if index < 0
	for i in (0..(length(list) - 1))
		if i == index
			append(result, value)
		else
			append(result, list[i])
	return result

-reverse(list)
	result = ()
	for item in list
		prepend(result, item)
	return result


// _grid.styl
// Columns with Gutters
column(ratios = 1, offset = 0, cycle = 0, uncycle = 0, gutter = jeet-gutter)
	side = -get_layout_direction()
	column_widths = -get_column(ratios, gutter)
	margin_l = margin_last = 0
	margin_r = column_widths[1]
	unless offset == 0
		if offset < 0
			offset *= -1
			offset = -get_column(offset, column_widths[1])[0]
			margin_r = margin_last = offset + column_widths[1] * 2
		else
			offset = -get_column(offset, column_widths[1])[0]
			margin_l = offset + column_widths[1]
	@extend $cf
	float: side
	display: inline
	clear: none
	text-align: inherit
	padding-left: 0
	padding-right: 0
	width: (column_widths[0])%
	margin-{side}: (margin_l)%
	margin-{opposite-position(side)}: (margin_r)%
	if uncycle != 0
		&:nth-child({uncycle}n)
			margin-{opposite-position(side)}: (margin_r)%
			float: side
	if cycle != 0
		&:nth-child({cycle}n)
			margin-{opposite-position(side)}: (margin_last)%
			float: opposite-position(side)
	else
		&:last-child
			margin-{opposite-position(side)}: (margin_last)%

col = column

// Columns without Gutters
span(ratio = 1, offset = 0)
	side = -get_layout_direction()
	span_width = -get_span(ratio)
	margin_l = margin_r = 0
	unless offset == 0
		if offset < 0
			offset *= -1
			margin_r = -get_span(offset)
		else
			margin_l = -get_span(offset)
	@extend $cf
	float: side
	display: inline
	clear: none
	padding-left: 0
	padding-right: 0
	text-align: inherit
	width: (span_width)%
	margin-{side}: (margin_l)%
	margin-{opposite-position(side)}: (margin_r)%

// Source Ordering
shift(ratios = 0, col_or_span = column, gutter = jeet-gutter)
	side = -get_layout_direction()
	if side == right
		ratios = -replace_nth(ratios, 0, ratios[0] * -1)
	if col_or_span == column or col_or_span == col or col_or_span == c
		column_widths = -get_column(ratios, gutter)
		translate = column_widths[0] + column_widths[1]
	else
		translate = -get_span(ratios)
	position: relative
	left: (translate)%
unshift()
	position: static
	left: 0

// Edit Mode
edit()
	*
		background: #eee
		background: rgba(#000, 5%)

// Horizontal Centering Block Elements
center(max_width = 1410px, pad = 0)
	@extend $cf
	width: auto
	max-width: max_width
	float: none
	display: block
	margin-right: auto
	margin-left: auto
	padding-left: pad
	padding-right: pad

// Stacking/Unstacking Elements
stack(pad = 0, align = false)
	side = -get_layout_direction()
	display: block
	clear: both
	float: none
	width: 100%
	margin-left: auto
	margin-right: auto
	&:first-child
		margin-{side}: auto
	&:last-child
		margin-{opposite-position(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()
	side = -get_layout_direction()
	display: inline
	clear: none
	width: auto
	margin-left: 0
	margin-right: 0
	&:first-child
		margin-{side}: 0
	&:last-child
		margin-{opposite-position(side)}: 0
	if (jeet-layout-direction == RTL)
		text-align: right
	else
		text-align: left

// Horizontal/Vertical/Both Alignment - Parent container needs position relative. IE9+
align(direction = both)
	position: absolute
	if (direction == horizontal) or (direction == h)
		left: 50%
		transform: translateX(-50%)
	else if (direction == vertical) or (direction == v)
		top: 50%
		transform: translateY(-50%)
	else
		top: 50%
		left: 50%
		transform: translate(-50%, -50%)

// Clearfix
cf()
	*zoom: 1
	&:before, &:after
		content: ''
		display: table
	&:after
		clear: both
$cf
	cf()

/* Rupture */
mobile-cutoff			?= 400px
desktop-cutoff			?= 1050px
enable-em-breakpoints	?= false
base-font-size			?= 16px
scale					?= 0 mobile-cutoff 600px 800px desktop-cutoff

-convert-to-ems(target, context = base-font-size)
	return unit((target / context), 'em')

-on-scale(n)
	return unit(n) is ''

-larger-than-scale(n)
	return (n > (length(scale) - 1)) and -on-scale(n)

-is-zero(n)
	return n is 0

// +between(min, max)
// usage (scale can be mixed with custom values):
//   - +between(1, 3) scale:scale
//   - +between(0, 3) 0 width:scale
//   - +between(200px, 500px) custom:custom
//   - +between(0, 300px) 0 width:custom
//   - +between(1, 300px) scale:custom
//   - +between(200px, 4) custom:scale

between(min, max)
	if (-on-scale(min)) and (-on-scale(max))
		-min = -is-zero(min) ? 0 : scale[min - 1]
		-max = scale[max]
	else if (-on-scale(min)) and (not -on-scale(max))
		-min = -is-zero(min) ? 0 : scale[min - 1]
		-max = max
	else if (not -on-scale(min)) and (-on-scale(max))
		-min = min
		-max = scale[max]
	else
		-min = min
		-max = max
	if -min is not 0
		-min = -convert-to-ems(-min) if enable-em-breakpoints
		condition = 'only screen and (min-width: %s)' % (-min)
	else
		condition = 'only screen'
	unless -larger-than-scale(max)
		-max = -convert-to-ems(-max) if enable-em-breakpoints
		condition = condition + ' and (max-width: %s)' % (-max)
	@media condition
		{block} // `{block}` variant to ensure CSS selector is present

at(scale-point)
	+between(scale-point, scale-point)
		block // `block` variant to ensure `display: block` is compatible

from(scale-point)
	+between(scale-point, length(scale))
		block // `block` variant to ensure `display: block` is compatible

above = from

to(scale-point)
	+between(1, scale-point)
		block // `block` variant to ensure `display: block` is compatible

below = to

mobile()
	+below(mobile-cutoff)
		block // `block` variant to ensure `display: block` is compatible

tablet()
	+between(mobile-cutoff, desktop-cutoff)
		block // `block` variant to ensure `display: block` is compatible

desktop()
	+above(desktop-cutoff)
		block // `block` variant to ensure `display: block` is compatible

retina()
	@media (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (min-resolution: 144dpi)
		{block} // `{block}` variant to ensure CSS selector is present