Default utils

[jongacnik]

I wanted to open a thread about what utils might make sense to add to core. One that I am always recreating is letter-spacing:

{
  prop: 'letter-spacing',
  vals: {
    1: '-0.15',
    2: 0
  },
  unit: 'em'
}

I'm also always creating borders, backgrounds, font colors, etc (see my default style.js), but I still think keeping design oriented classes out of core fits better with the intention of this module, since those are the places where I often get specific and granular. Open to a convo on this though.

[jongacnik]

Going to drop in @s3ththompson's idea from #22:

one utility i think could be added to the default gr8 is a better way to give height to flexbox children when you want to make blocks that maintain aspect ratio when they scale.

I've been using:

{
  prop: { hc: 'height' },
  vals: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
  transform: v => Math.round((v / 12 * 100) * 100000) / 100000,
  unit: 'vw'
}

which gives .hc1{height: 8.33333vw;}, or in other words: height equal to the width of 1 column. Not sure if there's a better pattern or not, though.

[jongacnik]

More cursor states https://developer.mozilla.org/en-US/docs/Web/CSS/cursor

[gdenisov]

Ability to defined min and max width as function of the grid sizes:

.wmn-c2
.wmx-s4

[sonn-gamm]

+1 for borders, all the rest imo too project-specific.