search

gkubisa / elm-app-boilerplate

Base project for Elm applications
http://gkubisa.github.io/elm-app-boilerplate/
MIT License
120 stars 16 forks source link

Configure css class connector #19

Closed meherhowji closed 7 years ago

meherhowji commented 7 years ago

I am unable to locate configuration where I can disable the css class name connector(hyphen, -). I have integrated bootstrap to the theme and multiple class names are needed in many use cases.

Update: I was able to dig through and found out the code block applied the above effect. Could you explain on this bit? Also how can I combine custom class(bootstrap classes) and elm-css?

class : a -> Html.Attribute msg
class =
    List.singleton >> .class Style.namespace
gkubisa commented 7 years ago

class : a -> Html.Attribute msg is just a helper based on elm-css-helpers, which in turn uses elm-css-util, which defines the rules for class name creation. Those rules are not currently customizable.

I don't think the hard-coded rules are a problem because the goal of elm-css is to provide safety for custom css selectors and rules. As elm-css generates the class names and ids, it doesn't matter exactly what they are, as long as they are consistent between the generated CSS and JS code.

If you want to safely use bootstrap, or any other CSS framework, I think you could just define a custom type with constants for each class name of the framework plus a helper function for converting that type to an HTML class attribute. You might actually consider publishing the result as a package, if there isn't one already.