Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- // -------
- // 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-")
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement