Flexbox keywords

[rtfeldman]

These are keywords necessary to cover Flexbox

• alignItems
• alignSelf
• flex
• flexBasis
• flexDirection
• flexFlow
• flexGrow
• flexShrink
• flexWrap

[NicholasGWK]

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

[joshmh]

See #58

[NicholasGWK]

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

[joshmh]

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

[NicholasGWK]

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

[jgillich]

@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.

[NicholasGWK]

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

#58

[jgillich]

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

[jgillich]

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

[NicholasGWK]

@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?

[rtfeldman]

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.