This is an alternative site for discovering Elm packages. You may be looking for the official Elm package site instead.
1.0.0 2.0.0
We were not able to find the expected elm-package.json file at this tag.
Tag 3.0.0
Committed At 2019-02-18 09:52:50 UTC

Modules

    README

    Class Namespaces

    Build Status

    Abstraction for easier work with conventional namespaced class names in Elm + TEA. Currently only our in-house WeakCss style is supported. We're considering adding classic BEM style support in future though.

    This package is highly experimental and might change a lot over time.

    Feedback and contributions to both code and documentation are very welcome.

    Installation

    Usual elm package install:

    $ elm package install GlobalWebIndex/class-namespaces
    

    Usage

    Just simply use WeakCss module's API instead of using Html.Attributes.class directly.

    module Main exposing (..)
    
    import Html exposing (Attribute, Html)
    import WeakCss exposing (ClassName)
    
    
    moduleClass : ClassName
    moduleClass =
        WeakCss.namespace "menu"
    
    
    main : Html msg
    main =
        let
            navClass =
                moduleClass
                    |> WeakCss.add "nav"
    
            itemClass =
                navClass
                    |> WeakCss.add "item"
    
            isActive =
                -- presumably some actual logic here
                True
        in
        Html.aside
            [ moduleClass |> WeakCss.toClass ]
            [ Html.nav
                [ navClass |> WeakCss.toClass ]
                [ Html.ul
                    [ navClass |> WeakCss.nest "list" ]
                    [ Html.li [ itemClass |> WeakCss.withStates [] ] [ Html.text "first item" ]
                    , Html.li [ itemClass |> WeakCss.withStates [ ( "active", isActive ) ] ] [ Html.text "second active item" ]
                    ]
                ]
            ]
    

    This is structure of corresponding CSS file written in SCSS:

    .menu {
        &__nav {
            &--list {
            }
    
            &--item {
                &.active {
                }
            }
        }
    }
    

    And this is how selectors in compiled CSS file will look like:

    .menu {}
    .menu__nav {}
    .menu__nav--list {}
    .menu__nav--item {}
    .menu__nav--item.active {}