Flexbox helpers 💪

[ashley-hebler]

What's this PR do?

Adds some super basic flexbox classes

Classes added (if any)

• .l-flex - display:flex Uses flexbox.
• .l-flex-row - flex-direction: row Horizontal flexbox.
• .l-flex-column - flex-direction: column Vertical flexbox.
• .l-ai-center - align-items: center Center items vertically (for row).
• .l-jc-center - justify-content: center Center items horizontally (for row).
• .l-jc-space - justify-content: space-between Evenly space items horizontally (for row).

Why are we doing this? How does it help us?

In theory, it will shave some lines from our current CSS

• display: flex - found about 24 times
• flex-direction: row - found about 6 times
• flex-direction: column - found about 7 times
• align-items: center - found about 15 times
• justify-content: center - found about 10 times

This may result in minimal bytes saved in the end, but hopefully helps us for future elements!

Why aren't there more?

I refrained from adding every utility one might need for flexbox and went with the ones I saw the most and that'd be most consistent. For instance a gap: helper would vary in what size value you want and other alignments like align-items: flex-start seem less frequent

This also shoots us in the foot a little in terms of naming if we got more display grid happy in the future.

How should this be manually tested?

npm run dev

See: /sections/layout/l-flex/

Does this introduce a breaking change where queso-ui is used in the wild? If so, is there a relevant branch/PR to accompany this release?

I'll tackle the texastribune PR (which is just a find and replace in HTML/CSS) when this is released. The new queso release won't hurt/change anything on its own.

[djpeacher]

This looks great! I will definitely make use of these!

I completely agree with not adding everything, though FWIW, I think one of my most used attributes is justify-content (start, end, center, space-X) 🚀

[ashley-hebler]

@djpeacher, yeah good point! Since flex-start is default and flex-end isn't referenced too, too often, I'll add one more for justify-content: space-between

[ashley-hebler]

@djpeacher, no rush on this, but what do you think about this new naming convention:
ai- = align-items
jc- = justify-content

Based on your note, I'm thinking this will be easier to add ai-end jc-start etc. if those end up being needed. (Annoying that AI is such a term right now.) I also figure might as well decouple them from display: flex since those properties work for display grid too

Before	After
l-flex-center-items	l-ai-center
l-flex-center-content	l-jc-center
	l-jc-space

P.S. one big smell of these is that we don't have responsive utilities so you can't alter layouts differently on mobile vs. desktop. I think we can use repo-specific CSS for that and in the way future we'd need to have some sort of pruning system for css in place for all the permutations there. While we're at it, maybe even one day migrate to tailwind 😄

[djpeacher]

@ashley-hebler haha yup, "AI" being a think now is a little unfortunate, but I think it's fine given the context! LGMT! 🚀 and yeah, having all the responsive utilities would be great one day!