Nri.Ui.Styles.V1

Simplifies using elm-css in modules that expose views

Creating namespaces stylesheets

type alias Styles id class msg =

StylesWithAssets id class msg ()

css: The resulting stylesheets to add to Nri.Ui.Css.Site
id, class, classList: The Html.Attribute helper functions

type alias StylesWithAssets id class msg assets =

{ css : assets -> List Stylesheet

, id : id -> Attribute msg

, class : List class -> Attribute msg

, classList : List ( class, Bool ) -> Attribute msg

, div : class -> List (Html msg) -> Html msg

, span : class -> List (Html msg) -> Html msg

}

Styles that depend on assets, for instance because they use a background image somewhere.

styles : String -> List Snippet -> Styles id class msg

Use this instead of Html.CssHelpers. This will help you make sure you don't mismatch the namespace you're using.

{ css, class } =
    Nri.Ui.Styles.styles "Nri-Ui-MyWidget-"
        [ Css.Foreign.class Container
            [ backgroundColor Nri.Colors.ochre ]
        ]

stylesWithExtraStylesheets : String -> List Stylesheet -> List Snippet -> Styles id class msg

Use this instead of styles if you need to include Stylesheets from external packages, or if you need to add styles without a namespace. Remember, all stylesheets given here will be included on all pages of the site.

stylesWithAssets :

String

-> (assets -> List Snippet)

-> StylesWithAssets id class msg assets

Use this if your styles depend on asset files

Helpers for CSS

Keyframe animations

type Keyframe

A CSS keyframe animation that will have vendor prefixes automatically added.

keyframes : String -> List ( String, String ) -> Keyframe

Create a CSS keyframe animation with appropriate vendor prefixes

toString : Keyframe -> String

Turn a Keyframe into a string that can be included in a CSS stylesheet.

NoRedInk/noredink-ui/3.1.0

Nri.Ui.Styles.V1

Creating namespaces stylesheets

Helpers for CSS

Keyframe animations

Modules