Stylus Flexbox Grid System

grid.styl

// -------
// Globals
// -------

pagewidth = 50rem
hgap = 1rem
vgap = 1rem

// ----------------
// Utlity Functions
// ----------------

neg(x)
	(-(x))

join(delim, args)
	buf = ""
	for arg, index in args
		if index
			buf += delim + arg
		else
			buf += arg

prefix-each(names, prefix)
	result = ()
	for name in names
		push(result, prefix + name)
	result

// ----------------
// Default Behavior
// ----------------

html, body

	box-sizing border-box
	position relative

	width 100%
	height 100%
	margin 0
	padding 0

* > *,
* > *:before,
* > *:after

	box-sizing inherit
	position inherit

// ----------
// Typography
// ----------

h1, h2, h3, h4, h5, h6,
p
	margin 0

// --------------
// Layout Helpers
// --------------

.seamless
	padding 0
	margin 0

.centerblock
	margin 0 auto

spacings(prefix)

	directions = "top", "bottom", "left", "right"
	dirs = "t", "b", "l", "r"
	attributes = "margin", "padding"
	attribs = "m", "p"

	for a in 0..1
		for d in 0..3
			classname = "." + prefix + attribs[a] + dirs[d]
			propname = attributes[a] + "-" + directions[d]
			{classname}
				{propname} vgap
			for s in 2..4
				{classname}{s}
					{propname} (vgap*s)

spacings("")
@media (min-width: 500px)
	spacings("bp1-")
@media (min-width: 1000px)
	spacings("bp2-")

// -----------
// Flex Layout
// -----------

flex-columns(colname, offsetname)

	count = 12

	list = colname
	for i in 1..count
		push(list, colname + i)
	list = join(",", prefix-each(list, "."))

	{list}
		display flex
		flex 0 1 auto
		flex-direction column
		flex-wrap wrap
	{colname}
		flex-grow 1
		flex-basis 0
		max-width 100%
	for i in 1..count
		{colname}{i}
			flex-basis percentage(i/12)
			max-width percentage(i/12)
	for i in 1..(count - 1)
		{offsetname}{i}
			margin-left percentage(i/12)

flex-modifiers(basename)

	{"."}{basename}end
		justify-content flex-end
		text-align end

	{"."}{basename}top
		align-items flex-start

	{"."}{basename}middle
		align-items center

	{"."}{basename}bottom
		align-items flex-end

	{"."}{basename}around
		justify-content space-around

	{"."}{basename}between
		justify-content space-between

	{"."}{basename}first
		order -1

	{"."}{basename}last
		order 1

.layout
	height 100%
	width 100%
	max-width pagewidth

.row
	display flex
	flex 0 1 auto
	flex-direction row

	~ .row
		margin-top vgap
		:not(:last-child)
			margin-right hgap

flex-columns("col", "nudge")
flex-modifiers("flex-")
@media (min-width: 500px)
	flex-columns("bp1-col", "bp1-nudge")
	flex-modifiers("bp1-flex-")
@media (min-width: 1000px)
	flex-columns("bp2-col", "bp2-nudge")
	flex-modifiers("bp2-flex-")