Flexbox keywords about elm-css HOT 11 CLOSED

Working on these currently, so nobody else picks them up :).

from elm-css.

See #58

from elm-css.

Thanks, that's my PR when I just asking Richard some questions :P Just though I'd post here now that I've done a few more in case nobody checked the PRs

from elm-css.

Haha, right. Somehow I missed that it was you. Looking forward to this.

from elm-css.

Having an issue with flex-flow, and likely flex.

With flex-flow, it can accept either flex-direction, flex-row, or both, in any order since the keywords are unique.

My problem is, with most multi-parameter CSS properties, they have a defined order. For example, with text-shadow, you must do "color" followed by "values" or vice versa. Also, you must have both to specify color (you can't do text-shadow: red) for example.

With flex-flow though, you can do any combination including omitting either, i.e

   ~ flexFlow wrap  
   ~ flexFlow row  
   ~ flexFlow wrap row  
   ~ flexFlow row wrap 

Should all be valid in your CSS file! I'm having trouble figuring this out since in Elm the order of inputs is defined and type specific. And, even if I force the order, I still have to account for leaving one out, which I can't seem to figure out using Maybe/Nothing with an extensible record:

flexFlow : Maybe ( FlexDirection compatible) -> Mixin namespace
flexFlow direction =
    withDefault { direction | value = "row", flexDirection = Compatible } direction  

Or something of the like doesn't seem to play nice, and would still require the user to do flexFlow Nothing row or whatever which at the point it makes as much sense to just force them to define both parameters. Although this is not a huge deal, I'd like to support entering values the same way they are supported in CSS, ie in "the order of appearance in the formal grammar of the values".

Any comments or suggestions welcome!

Thanks,

Nick

from elm-css.

@NicholasGW I'm pretty new to Elm, but at least for now, what about simply not implementing shorthands? flex-flow is just a shorthand for flex-direction and flex-wrap, which both take a single value.

Have you made any progress so far? I'd like to help to make this happen.

from elm-css.

@jgillich Thanks for the input, but I actually got flexbox done in PR #58!

#58

from elm-css.

Cool, totally missed that! I guess this can be closed then? @rtfeldman

from elm-css.

How do you set display: flex? Looks like that isn't implemented, or I'm missing something again.

from elm-css.

@jgillich right you are! I think it might work by virtue of using a string but there definitely should be a defined function for it like there is for inline or inline-block etc. Care to take a stab?

from elm-css.

I've decided to close all the missing keywords issues in favor of letting people make PRs based on what specific things they wish existed.

from elm-css.