A few UIKit 3 helpers - add extra uk-width fractions, uk-push and uk-pull, CSS Grid support

[gornycreative]

One of the things that has had UIKit 3 folks jump ship to tailwinds or another system is the lack of CSS Grid support.

Having looked into it a lot I started working on something to addon but discovered it has already been done by the Beaver Builder people and their addons pals.

Beaver Builder is a page construction kit for WP. https://www.wpbeaverbuilder.com/ Kindof nice, actually. @Macrura it's another WP builder that seems to use blocks in a similar manner to Yootheme Pro and is UIkit friendly.

But within the ecosystem of this setup and its open source friends are two interesting repos for general use.

https://github.com/master3-blank-template/UIkit-Ex this repo refactors the uk-width component to allow up to 30 divisions of granularity. AND it adds uk-push and uk-pull back in!

https://github.com/badabingbreda/uikit-css-grid this repo adds a whole new set of classes for cssgrid support! It is in SCSS but I will likely port it over to LESS if possible. You just need to remove any uk-padding from divs in the columns as they use gap instead.

The CSS grid template/areas section takes a little bit of playing with to understand, but it allows for some breakpoint driven grid layouts that are simply not possible with vanilla UIkit 3. Especially if you opt for a 12 column CSS Grid layout.

I've only started playing around with them this evening but so far, so good.

[gornycreative]

Ah I think I may have to spring for this course - Chris Coyier reposted a link to this guy's css grid and flexbox overviews and they are just so good.

https://www.joshwcomeau.com/css/interactive-guide-to-grid/

https://www.joshwcomeau.com/css/interactive-guide-to-flexbox/

all part of

https://css-for-js.dev/

Even though I've used them for awhile I can't say I've had as good an understanding as these overviews present.