Updates for flex & grid layout:

- Move box alignment classes out of `flex.mjs` and into `box-align.mjs`
- Move order classes out of `flex.mjs` and into `order.mjs`
- Move gap classes out of `grid.mjs` and into `gap.mjs`
- Rename `align.mjs` to `text-align.mjs`

Author: colepeters

box-align.mjs

@@ -0,0 +1,96 @@
+export default function flex(query='') {
+  return /*css*/`
+/*** Box alignment ***/
+.align-items-stretch${query}{align-items:stretch;}
+.align-items-center${query}{align-items:center;}
+.align-items-start${query}{align-items:start;}
+.align-items-end${query}{align-items:end;}
+.align-items-self-start${query}{align-items:self-start;}
+.align-items-self-end${query}{align-items:self-end;}
+.align-items-flex-start${query}{align-items:flex-start;}
+.align-items-flex-end${query}{align-items:flex-end;}
+.align-items-baseline${query}{align-items:baseline;}
+
+.align-content-stretch${query}{align-content:stretch;}
+.align-content-center${query}{align-content:center;}
+.align-content-start${query}{align-content:start;}
+.align-content-end${query}{align-content:end;}
+.align-content-flex-start${query}{align-content:flex-start;}
+.align-content-flex-end${query}{align-content:flex-end;}
+.align-content-baseline${query}{align-content:baseline;}
+.align-content-between${query}{align-content:space-between;}
+.align-content-around${query}{align-content:space-around;}
+.align-content-evenly${query}{align-content:space-evenly;}
+
+.align-self-stretch${query}{align-self:stretch;}
+.align-self-auto${query}{align-self:auto;}
+.align-self-center${query}{align-self:center;}
+.align-self-start${query}{align-self:start;}
+.align-self-end${query}{align-self:end;}
+.align-self-self-start${query}{align-self:self-start;}
+.align-self-self-end${query}{align-self:self-end;}
+.align-self-flex-start${query}{align-self:flex-start;}
+.align-self-flex-end${query}{align-self:flex-end;}
+.align-self-baseline${query}{align-self:baseline;}
+
+.justify-content-stretch${query}{justify-content:stretch;}
+.justify-content-center${query}{justify-content:center;}
+.justify-content-start${query}{justify-content:start;}
+.justify-content-end${query}{justify-content:end;}
+.justify-content-flex-start${query}{justify-content:flex-start;}
+.justify-content-flex-end${query}{justify-content:flex-end;}
+.justify-content-between${query}{justify-content:space-between;}
+.justify-content-around${query}{justify-content:space-around;}
+.justify-content-evenly${query}{justify-content:space-evenly;}
+
+.justify-items-stretch${query}{justify-items:stretch;}
+.justify-items-center${query}{justify-items:center;}
+.justify-items-start${query}{justify-items:start;}
+.justify-items-end${query}{justify-items:end;}
+.justify-items-flex-start${query}{justify-items:flex-start;}
+.justify-items-flex-end${query}{justify-items:flex-end;}
+.justify-items-self-start${query}{justify-items:self-start;}
+.justify-items-self-end${query}{justify-items:self-end;}
+.justify-items-baseline${query}{justify-items:baseline;}
+
+.justify-self-stretch${query}{justify-self:stretch;}
+.justify-self-center${query}{justify-self:center;}
+.justify-self-start${query}{justify-self:start;}
+.justify-self-end${query}{justify-self:end;}
+.justify-self-flex-start${query}{justify-self:flex-start;}
+.justify-self-flex-end${query}{justify-self:flex-end;}
+.justify-self-self-start${query}{justify-self:self-start;}
+.justify-self-self-end${query}{justify-self:self-end;}
+.justify-self-baseline${query}{justify-self:baseline;}
+
+.place-content-stretch${query}{place-content:stretch;}
+.place-content-center${query}{place-content:center;}
+.place-content-start${query}{place-content:start;}
+.place-content-end${query}{place-content:end;}
+.place-content-flex-start${query}{place-content:flex-start;}
+.place-content-flex-end${query}{place-content:flex-end;}
+.place-content-between${query}{place-content:space-between;}
+.place-content-around${query}{place-content:space-around;}
+.place-content-evenly${query}{place-content:space-evenly;}
+
+.place-items-stretch${query}{place-items:stretch;}
+.place-items-center${query}{place-items:center;}
+.place-items-start${query}{place-items:start;}
+.place-items-end${query}{place-items:end;}
+.place-items-self-start${query}{place-items:self-start;}
+.place-items-self-end${query}{place-items:self-end;}
+.place-items-flex-start${query}{place-items:flex-start;}
+.place-items-flex-end${query}{place-items:flex-end;}
+.place-items-baseline${query}{place-items:baseline;}
+
+.place-self-stretch${query}{place-self:stretch;}
+.place-self-center${query}{place-self:center;}
+.place-self-start${query}{place-self:start;}
+.place-self-end${query}{place-self:end;}
+.place-self-flex-start${query}{place-self:flex-start;}
+.place-self-flex-end${query}{place-self:flex-end;}
+.place-self-self-start${query}{place-self:self-start;}
+.place-self-self-end${query}{place-self:self-end;}
+.place-self-baseline${query}{place-self:baseline;}
+`
+}

flex.mjs

@@ -9,40 +9,12 @@ export default function flex(query='') {
 .flex-row-reverse${query}{flex-direction:row-reverse;}
 .flex-col${query}{flex-direction:column;}
 .flex-col-reverse${query}{flex-direction:column-reverse;}
-.items-stretch${query}{align-items:stretch;}
-.items-start${query}{align-items:flex-start;}
-.items-end${query}{align-items:flex-end;}
-.items-center${query}{align-items:center;}
-.content-start${query}{align-content:start;}
-.content-center${query}{align-content:center;}
-.content-end${query}{align-content:end;}
-.content-between${query}{align-content:space-between;}
-.content-around${query}{align-content:space-around;}
-.self-auto${query}{align-self:auto;}
-.self-start${query}{align-self:flex-start;}
-.self-end${query}{align-self:flex-end;}
-.self-center${query}{align-self:center;}
-.self-stretch${query}{align-self:stretch;}
-.justify-start${query}{justify-content:flex-start;}
-.justify-end${query}{justify-content: flex-end;}
-.justify-around${query}{justify-content:space-around;}
-.justify-between${query}{justify-content:space-between;}
-.justify-center${query}{justify-content:center;}
 .flex-grow${query}{flex-grow:1;}
 .flex-grow-0${query}{flex-grow:0;}
 .flex-shrink${query}{flex-shrink:1;}
 .flex-shrink-0${query}{flex-shrink:0;}
 .flex-wrap${query}{flex-wrap:wrap;}
 .flex-wrap-reverse${query}{flex-wrap:wrap-reverse;}
 .flex-no-wrap${query}{flex-wrap:nowrap;}
-.order-first${query}{order:-9999;}
-.order-last${query}{order:9999;}
-.order-none${query}{order:0;}
-.order-1${query}{order:1;}
-.order-2${query}{order:2;}
-.order-3${query}{order:3;}
-.order-4${query}{order:4;}
-.order-5${query}{order:5;}
-.order-6${query}{order:6;}
 `
 }

gap.mjs

@@ -0,0 +1,18 @@
+import Scale from './scale.mjs'
+import rems from './rems.mjs'
+
+export default function grid(state={}) {
+  const config = state.config || {}
+  const query = state.label || ''
+  const scale = Scale(config)
+  const l = scale.length
+  const half = Math.floor(l * 0.5)
+  let step = half
+  let output = ''
+  for (let i=0; i<scale.length; i++) {
+    let s = step--
+    let value = scale[i]
+    output += `.gap${s}${query}{gap:${rems({config, value})};}\n`
+  }
+  return output
+}

grid.mjs

@@ -36,15 +36,5 @@ export default function grid(state={}) {
     output += `.row-auto-${value}${query}{grid-auto-rows:minmax(${rems({config, value})}, auto);}\n`
   }
 
-  const scale = Scale(config)
-  const l = scale.length
-  const half = Math.floor(l * 0.5)
-  let step = half
-  for (let i=0; i<scale.length; i++) {
-    let s = step--
-    let value = scale[i]
-    output += `.gap${step}${query}{gap:${rems({config, value})};}\n`
-  }
-
   return output
 }

layout.mjs

@@ -4,6 +4,9 @@ import display from './display.mjs'
 import size from './size.mjs'
 import flex from './flex.mjs'
 import grid from './grid.mjs'
+import boxAlign from './box-align.mjs'
+import gap from './gap.mjs'
+import order from './order.mjs'
 import zIndex from './z-index.mjs'
 
 export default function layout(state={}) {
@@ -17,6 +20,9 @@ ${display(query)}
 ${size(query)}
 ${flex(query)}
 ${grid(state)}
+${boxAlign(query)}
+${gap(state)}
+${order(query)}
 ${zIndex(query)}
 `
 }

order.mjs

@@ -0,0 +1,13 @@
+export default function order(query='') {
+  return /*css*/`
+.order-first${query}{order:-9999;}
+.order-last${query}{order:9999;}
+.order-none${query}{order:0;}
+.order-1${query}{order:1;}
+.order-2${query}{order:2;}
+.order-3${query}{order:3;}
+.order-4${query}{order:4;}
+.order-5${query}{order:5;}
+.order-6${query}{order:6;}
+`
+}

align.mjs text-align.mjs

@@ -1,6 +1,6 @@
 export default function align(query='') {
   return /*css*/`
-/*** Align ****/
+/*** Text alignment ****/
 .text-inherit${query}{text-align:inherit;}
 .text-center${query}{text-align:center;}
 .text-start${query}{text-align:start;}

typography.mjs

@@ -2,7 +2,7 @@ import sizes from './sizes.mjs'
 import style from './style.mjs'
 import lineHeight from './line-height.mjs'
 import weights from './weights.mjs'
-import align from './align.mjs'
+import textAlign from './text-align.mjs'
 import decoration from './decoration.mjs'
 import tracking from './tracking.mjs'
 import list from './list.mjs'
@@ -19,7 +19,7 @@ ${lineHeight(query)}
 ${tracking(query)}
 ${weights(query)}
 ${transform(query)}
-${align(query)}
+${textAlign(query)}
 ${decoration(query)}
 ${list(query)}
 ${whitespace(query)}