This library is experimental

Simplifying css for elm

The aim of style-elements library is to give you the tools to write styles that are intuitive and robust, while still being productive and expressive. To make styles that don't break.

And while we're at it, it wouldn't hurt to have built in support for animations, transitions, and media queries too.

Compared to elm-css

The goal of elm-css library is to provide access all of CSS in a typesafe way. This is awesome and incredibly impressive.

The style-elements focuses on simplifying css.

It does this by

* removing parts of css that cause the most trouble * limiting available properties without limiting functionality (i.e. trying to make the CSS language smaller) * setting defaults * providing clean interfaces to the good parts like media queries, flex-box and animations.

It's meant to be a css preprocessor with css best practices built in.

Create a stylesheet

import Style exposing (..)


type Class 
    = Title
    | Nav
    | Container

stylesheet : StyleSheet Class msg
stylesheet =
    Style.render
        [ class Title
            [ width (px 300)
            , height auto
            ]
        , class Nav
            [ width (percent 100)
            , height (px 70)
            ]
        ]

This looks a lot like elm-css. That's because using union types and lists to represent style is generally a really good idea.

Easy layout

    class Container 
        [ flowLeft
            { wrap = True
            , horizontal = alignCenter
            , vertical = alignTop
            }
        ]

Animation

    class RotatingBox
        [ width (px 50)
        , height (px 50)
        , animate
            { duration = (5 * second)
            , easing = "linear"
            , repeat = forever
            , steps =
                [ ( 0, transforms [ rotate 0 0 0 ] )
                , ( 100, transforms [ rotate 0 0 (2 * pi) ] )
                ]
            }
        ]

Media Queries

import Style.Media
import Color

-- (..)
    class MediaQueryExample
        [ width (px 180)
        , height (px 180)
        , padding (all 20)
        , backgroundColor Color.blue
        , textColor Color.white
        , flowRight
            { wrap = True
            , horizontal = alignCenter
            , vertical = verticalCenter
            }
        , Style.Media.phoneOnly
            [ backgroundColor Color.red
            ]
        , Style.Media.tabletPortraitOnly
            [ borderWidth (all 5)
            , borderRadius (all 15)
            ]
        ]

Getting Started

* Documentation * Realworld example that uses animations, media queries, and palettes: code - demo

Building a stylesheet

import Style exposing (..)

type Class 
    = Title
    | Nav

stylesheet : Stylesheet Class msg
stylesheet =
    Style.render
        [ class Title
            [ width (px 300)
            , height auto
            ]
        , class Nav
            [ width (percent 100)
            , height (px 70)
            ]

        ]

Embed that stylesheet in your view and use it to render a style class

view : Model -> Html msg
view model =
    div []
        [ Style.embed stylesheet
        , div [ stylesheet.class Title ] [ text "Hello!"]
        , div [ stylesheet.class Title ] [ text "Hello!"]
        ]