search

suitcss / utils-size

CSS sizing utilities
http://suitcss.github.io/utils-size/test/
MIT License
38 stars 22 forks source link

u-sizeFitLeft and u-sizeFitRight? #22

Closed oleersoy closed 8 years ago

oleersoy commented 9 years ago

With u-sizeFit and u-sizeFitAlt the "Alt" changes the function of the of the css. However with u-sizeFillAlt the function / purpose stays the same, and the intention seems to be to just make the utility an alternate form.

Seems like Alt should just mean "Alternative" in this case. Same semantics, different implementation.

Also u-sizeFit is more semantic as -sizeFitLeft. u-sizeFitAlt >> u-sizeFitRight.

necolas commented 8 years ago

Yeah good point. I can see how that would be surprising and some better names would help. You suggestion seems sensible. Want to put a PR together if you're still interested?

oleersoy commented 8 years ago

Thanks - and sorry for the late response. Been buried.

As I disclaimed in one of the other issues, I'm not a CSS guru and I'm still getting moving through the various repositories, so If I say something that raises eyebrows, feel free to throw a shoe at me :).

Thinking out loud on this. The first thing I love about about SUITCSS is that it gives us the 'lego-block' base board through normalize.css and base.css, so that we can start stacking away with sub-assemblies (Components) made out of basic blocks (utilities). So if we understand the utility, understanding composites made from them is straightforward.

SIDE NODE: In this sense I think it's very important that the tests show the context(s) that the utility is used in and also shows various edge conditions / possible permutations. BTW - The test framework is another SUITCSS gem that I think is one of the reasons developers should consider SUITCSS. CSS is hard and being able to review visual tests that show how the various tricks work is just awesome.

Back to writing the book. We could separate the utilities into two categories:

I would throw u-cf in advanced and u-floatLeft in basic. What they have in common is that they cannot be broken off into smaller pieces. So it seems utilities should be as small and focused as possible.

When I look at u-sizeFitLeft and u-sizeFitRight it seems like they could be replaced with a smaller utlity like:

If I'm reading markup and I see <div class="u-shrinkWrap u-floatLeft"> that would be easier for me to understand that <div class="u-sizeFitLeft">. What do we mean by sizeFit? It also seems like the u-shrinkWrap part might be the default or should be defined in normalize.css / base.css. So maybe u-shrinkWrap only needs to be applied when the baseline is altered?

I have outlined some similar thinking around u-sizeFill / u-sizeFillAlt in: https://github.com/suitcss/utils-size/issues/25

Thoughts?

oleersoy commented 8 years ago

Just another note. If the u-shrinkWrap concept seems workable, should it set font size to zero? This article Flexbox sets font-size to zero to:

suck all the air out

oleersoy commented 8 years ago

Another question is could shrink wrapping work with display types other than block - for example inline-block? It seems from the test that it would primarily be used with div elements, with are display: block by default. It might be better / more lightweight to document the assumption that the shrink wrapping css assumes certain tested display types and leaving the display setting out of the css. The primary reason I like this is better is that it teaches the user CSS behavior by being direct and explicit about what does what.

So in this case we would say...this utility assumes display is set to block or inline-block...if you are doing something wacky...like adding u-fitSize / u-shrinkWrap to a span element, then you need to explicity set the display by using u-block or u-inlineBlock...etc

simonsmith commented 8 years ago

Removed in #29 as per https://github.com/suitcss/utils-size/issues/25#issuecomment-142450531

No need for float-based utilities with the move towards flexbox