SHARE
TWEET

Untitled

a guest Oct 22nd, 2019 77 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. // -------
  2. // Globals
  3. // -------
  4.  
  5. pagewidth = 50rem
  6. hgap = 1rem
  7. vgap = 1rem
  8.  
  9. // ----------------
  10. // Utlity Functions
  11. // ----------------
  12.  
  13. neg(x)
  14.     (-(x))
  15.  
  16. join(delim, args)
  17.     buf = ""
  18.     for arg, index in args
  19.         if index
  20.             buf += delim + arg
  21.         else
  22.             buf += arg
  23.  
  24. prefix-each(names, prefix)
  25.     result = ()
  26.     for name in names
  27.         push(result, prefix + name)
  28.     result
  29.  
  30. // ----------------
  31. // Default Behavior
  32. // ----------------
  33.  
  34. html, body
  35.  
  36.     box-sizing border-box
  37.     position relative
  38.  
  39.     width 100%
  40.     height 100%
  41.     margin 0
  42.     padding 0
  43.  
  44. * > *,
  45. * > *:before,
  46. * > *:after
  47.  
  48.     box-sizing inherit
  49.     position inherit
  50.  
  51. // ----------
  52. // Typography
  53. // ----------
  54.  
  55. h1, h2, h3, h4, h5, h6,
  56. p
  57.     margin 0
  58.  
  59. // --------------
  60. // Layout Helpers
  61. // --------------
  62.  
  63. .seamless
  64.     padding 0
  65.     margin 0
  66.  
  67. .centerblock
  68.     margin 0 auto
  69.  
  70. spacings(prefix)
  71.  
  72.     directions = "top", "bottom", "left", "right"
  73.     dirs = "t", "b", "l", "r"
  74.     attributes = "margin", "padding"
  75.     attribs = "m", "p"
  76.  
  77.     for a in 0..1
  78.         for d in 0..3
  79.             classname = "." + prefix + attribs[a] + dirs[d]
  80.             propname = attributes[a] + "-" + directions[d]
  81.             {classname}
  82.                 {propname} vgap
  83.             for s in 2..4
  84.                 {classname}{s}
  85.                     {propname} (vgap*s)
  86.  
  87. spacings("")
  88. @media (min-width: 500px)
  89.     spacings("bp1-")
  90. @media (min-width: 1000px)
  91.     spacings("bp2-")
  92.  
  93. // -----------
  94. // Flex Layout
  95. // -----------
  96.  
  97. flex-columns(colname, offsetname)
  98.  
  99.     count = 12
  100.  
  101.     list = colname
  102.     for i in 1..count
  103.         push(list, colname + i)
  104.     list = join(",", prefix-each(list, "."))
  105.  
  106.     {list}
  107.         display flex
  108.         flex 0 1 auto
  109.         flex-direction column
  110.         flex-wrap wrap
  111.     {colname}
  112.         flex-grow 1
  113.         flex-basis 0
  114.         max-width 100%
  115.     for i in 1..count
  116.         {colname}{i}
  117.             flex-basis percentage(i/12)
  118.             max-width percentage(i/12)
  119.     for i in 1..(count - 1)
  120.         {offsetname}{i}
  121.             margin-left percentage(i/12)
  122.  
  123. flex-modifiers(basename)
  124.  
  125.     {"."}{basename}end
  126.         justify-content flex-end
  127.         text-align end
  128.  
  129.     {"."}{basename}top
  130.         align-items flex-start
  131.  
  132.     {"."}{basename}middle
  133.         align-items center
  134.  
  135.     {"."}{basename}bottom
  136.         align-items flex-end
  137.  
  138.     {"."}{basename}around
  139.         justify-content space-around
  140.  
  141.     {"."}{basename}between
  142.         justify-content space-between
  143.  
  144.     {"."}{basename}first
  145.         order -1
  146.  
  147.     {"."}{basename}last
  148.         order 1
  149.  
  150. .layout
  151.     height 100%
  152.     width 100%
  153.     max-width pagewidth
  154.  
  155. .row
  156.     display flex
  157.     flex 0 1 auto
  158.     flex-direction row
  159.  
  160.     ~ .row
  161.         margin-top vgap
  162.         :not(:last-child)
  163.             margin-right hgap
  164.  
  165. flex-columns("col", "nudge")
  166. flex-modifiers("flex-")
  167. @media (min-width: 500px)
  168.     flex-columns("bp1-col", "bp1-nudge")
  169.     flex-modifiers("bp1-flex-")
  170. @media (min-width: 1000px)
  171.     flex-columns("bp2-col", "bp2-nudge")
  172.     flex-modifiers("bp2-flex-")
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!
 
Top