Style

The Style part of the Style Elements Library!

Here is where you an create your style sheet.

One of the first concepts of style-elements is that layout, position, and width/height all live in your view through the Element module.

Your style sheet handles everything else!

Check out the other Style modules for other properties.

Check out Basic.elm in the examples folder to see an example of a full style sheet.

The Basics

style-elements does away with CSS selectors entirely. Every style gets one identifier, which is ultimately rendered as a class.

type alias Style class variation =

Batchable (Style class variation)

style : class -> List (Property class variation) -> Style class variation

Here's a basic example of a style that sets a few colors.

import Style exposing (..)
import Style.Color as Color
import Color exposing (..)


type Styles
    = Button


stylesheet =
    Style.styleSheet
        [ style Button
            [ Color.background blue
            , Color.text white
            ]
        ]
-- Which can be used in your view as:
el Button [ ] (text "A button!")

variation :

variation

-> List (Property class Never)

-> Property class variation

Styles can have variations. Here's what it looks like to have a button style with a variation for Disabled

import Style exposing (..)
import Style.Color as Color
import Color exposing (..)


type Styles = Button


-- You need to create a new type to capture vartiations.
type Variations
        = Large




stylesheet =
    Style.styleSheet
        [ style Button
            [ Font.size 16
            , variation Large
                [ Font.size 20
                ]
            ]
        ]


-- which can be rendered in your view as


el Button [ vary Disabled True ] (text "A Disabled button!")

Before you reach for a variation, consider just creating a subtype. So, something like:

import Style exposing (..)
import Style.Color as Color
import Color exposing (..)


type Styles
    = Button ButtonStyles


type ButtonStyles
    = Active
    | Disabled




stylesheet =
    Style.stylesheet
        [ style (Button Active)
            [ Color.background blue
            ]
        , style (Button Disabled)
            [ Color.background grey
            ]
        ]


-- which can be rendered in your view as


el (Button Active) [] (text "An Active button!")

The main difference between these two is that variations can combine with other variations, while subtypes are mutually exclusive.

Properties

type alias Property class variation =

Property class variation

prop : String -> String -> Property class variation

opacity : Float -> Property class variation

cursor : String -> Property class variation

paddingHint : Float -> Property class variation

You can give a hint about what the padding should be for this element, but the layout can override it.

paddingLeftHint : Float -> Property class variation

paddingRightHint : Float -> Property class variation

paddingTopHint : Float -> Property class variation

paddingBottomHint : Float -> Property class variation

Shadows

Check out the Style.Shadow module for more about shadows.

type alias Shadow =

ShadowModel

shadows : List Shadow -> Property class variation

Filters

Check out the Style.Filter module for more about filters.

type alias Filter =

Filter

filters : List Filter -> Property class variation

Apply a stack of filters. The actual filters are in Style.Filter.

import Style.Filter as Filter
import Style exposing (..)


style MyFitleredStyle
    [ filters
        [ Filter.blur 0.5
        , Filter.invert 0.5
        ]


    ]

Transformations

origin : Float -> Float -> Float -> Property class variation

Set the transform origin.

translate : Float -> Float -> Float -> Property class variation

Units are always as pixels

rotate : Float -> Property class variation

Units always rendered as radians.

Use degrees or turns from the standard library if you want to use a different set of units.

rotateAround : ( Float, Float, Float ) -> Float -> Property class variation

Rotate around a vector.

Angle units always rendered as radians.

Use degrees or turns from the standard library if you want to use a different set of units.

scale : Float -> Float -> Float -> Property class variation

Pseudo Classes

Psuedo classes can be nested.

hover : List (Property class variation) -> Property class variation

Example:

style Button
    [ Color.background blue
    , hover
        [ Color.background red
        ]
    ]

checked : List (Property class variation) -> Property class variation

focus : List (Property class variation) -> Property class variation

pseudo :

String

-> List (Property class variation)

-> Property class variation

Render into a Style Sheet

type alias StyleSheet style variation =

StyleSheet style variation

styleSheet : List (Style elem variation) -> StyleSheet elem variation

styleSheetWith :

List Option

-> List (Style elem variation)

-> StyleSheet elem variation

type Option

Stylesheet options

unguarded : Option

Remove style hash guards from style classes.

importUrl : String -> Style class variation

importCss : String -> Style class variation

Deprecated

stylesheet : List (Style elem variation) -> StyleSheet elem variation

DEPRECATED, use styleSheet. This will be removed in the next major version

stylesheetWith :