Jeet: a grid system for humans 24-07-2014

jeet.styl

// settings.styl

// Grid Settings
jeet = {
	gutter: 2,
	parent-first: false,
	layout-direction: LTR
}

g = jeet.gutter

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

-get_column(ratios = 1, g = jeet.gutter)
	ratios = -reverse(ratios) unless jeet.parent-first is true
	w = 100
	for ratio in ratios
		g = g / 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]
	cf()
	float: side
	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
		&:nth-child({uncycle}n + 1)
			clear: none
	if cycle != 0
		&:nth-child({cycle}n)
			margin-{opposite-position(side)}: (margin_last)%
			float: opposite-position(side)
		&:nth-child({cycle}n + 1)
			clear: both
	else
		&:last-child
			margin-{opposite-position(side)}: (margin_last)%

col = column

// Columns without Gutters
span(ratio = 1, offset = 0, cycle = 0, uncycle = 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)
	cf()
	float: side
	clear: none
	padding-left: 0
	padding-right: 0
	text-align: inherit
	width: (span_width)%
	margin-{side}: (margin_l)%
	margin-{opposite-position(side)}: (margin_r)%
	if uncycle != 0
		&:nth-child({uncycle}n)
			float: side
		&:nth-child({uncycle}n + 1)
			clear: none
	if cycle != 0
		&:nth-child({cycle}n)
			float: opposite-position(side)
		&:nth-child({cycle}n + 1)
			clear: both

// 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: rgba(#000, 5%)

// Horizontal Centering Block Elements
center(max_width = 1410px, pad = 0)
	cf()
	width: auto
	max-width: max_width
	float: none
	display: unquote('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: unquote('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
	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
		top: 50%
		left: 50%
		transform: translate(-50%, -50%)

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