Comments (11)
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!
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.
Related Issues (20)
- `Css.important` on `Css.batch` output only applies to last Css.Style
- Empty style node emitted if no styles HOT 1
- Cannot use elm-css with lamdera HOT 1
- Runtime type error when using CSS in an SVG element's attributes HOT 6
- Hash Collisions: FNV vs Murmur3 HOT 1
- `<span> > <style>` wrapping in elm-css 17 has unexpected side effect inside grid container HOT 3
- Different behavior for multiple`css` attributes between root of tree and children HOT 1
- Extra gap when using (display: flex) and (justify-content: space-between) HOT 3
- Css classes not rendering correctly
- 17.0.4 generated class name is not added when there's also a set class name HOT 15
- Elm HTML's non-optimized XSS warning bypassed by elm-css
- CSP nonce support (to be able to protect against XSS attacks) HOT 5
- Safari animations HOT 2
- Duplicate inline styles?
- Error in documentation? HOT 1
- Alternative Stylesheets
- Support for flex box gap HOT 1
- Class names are not escaped
- Rename `generalSiblings`
- Add animation timing function
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from elm-css.