ahstro / elm-bulma-classes Goto Github PK

Hello!

I thought I'd continue the conversation from the other issue.

Let's take a look at the library as Strings:

stringExample = div [ class box ] []

If we want to add another class, we have a few obvious options:

stringsExample1 = div [ class box, class hasTextCentered ] []
stringsExample2 = div [ class <| box ++ " " ++ hasTextCentered ] []
stringsExample3 = div [ classList [ box, hasTextCentered ] ] []

And if we want to vary the alignment, we're looking at something like this:

empty = ""

stringsExample4 alignment
  = div [ class box
        , case alignment of
            Left   -> class empty
            Center -> class hasTextCentered
            Right  -> class hasTextRight
        ]
  [
  ]

By moving to Html.Attribute, we get something like this:

attrExample = div [ box ] []

Already much cleaner!

If we want to add another class, we have one straightforward path:

attrsExample = div [ box, hasTextCentered ] []

And to vary the alignment, we get something like this:

empty = class ""

stringsExample4 alignment
  = div [ box
        , case alignment of
            Left   -> empty
            Center -> hasTextCentered
            Right  -> hasTextRight
        ]
  [
  ]

For more on multiple class attributes, check out this issue.

So here's the tradeoff: moving to Html.Attribute will make most code much cleaner, but may make compound classes more difficult. Consider the following:

centeredBox = Html.Attribute
centeredBox = classList [ box, hasTextCentered ]

stringExample = div [ style [], centeredBox ] []

There's no way to transform multiple Html.Attributes into a single one, so we're stuck with the following:

centeredBox = List Html.Attribute
centeredBox = [ box, hasTextCentered ]

attrExample = div ( style [] :: centeredBox ) []

For me, this tradeoff is totally worth it -- which is why I've opened this issue!

Are there any problems that I'm overlooking?

Can you upgrade the Bulma version?

I don't know how to run the generate.js script. I suppose that will upgrade Bulma version automatically, right?

Just wanted to bring to your attention a missing class that is in Bulma v0.7.5, namely, the "dropdown-trigger" class.

Hi @ahstro,
I'm trying to implement your package because I'm a huge fan of Bulma but I'm running into some trouble.
That's my elm.json file:

{
    "type": "application",
    "source-directories": [
        "src"
    ],
    "elm-version": "0.19.0",
    "dependencies": {
        "direct": {
            "ahstro/elm-bulma-classes": "3.1.0",
            "elm/browser": "1.0.1",
            "elm/core": "1.0.2",
            "elm/html": "1.0.0"
        },
        "indirect": {
            "elm/json": "1.1.3",
            "elm/time": "1.0.0",
            "elm/url": "1.0.0",
            "elm/virtual-dom": "1.0.2"
        }
    },
    "test-dependencies": {
        "direct": {},
        "indirect": {}
    }
}

When I launch the elm reactor command and try to visit the localhost, I can see the HTML structure but without all the styles from Bulma.
I can't understand if I miss something so I hope you can help me.

Thank you.