This is an alternative site for discovering Elm packages. You may be looking for the official Elm package site instead.
1.0.0
We were not able to find the expected elm-package.json file at this tag.
Tag 2.0.0
Committed At 2018-08-31 09:59:42 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"
        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" ] ] [ 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 {}