Skip to content

Instantly share code, notes, and snippets.

@SpineyPete
Last active October 6, 2019 14:32
Show Gist options
  • Save SpineyPete/1172cf65c2bfe0bb61a62280f9048f24 to your computer and use it in GitHub Desktop.
Save SpineyPete/1172cf65c2bfe0bb61a62280f9048f24 to your computer and use it in GitHub Desktop.
Stylus Flexbox Grid System
// -------
// 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-")
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment