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 variations.
type Variations
    = Disabled




stylesheet =
    Style.styleSheet
        [ style Button
            [ Color.background blue
            , Color.text white
            , variation Disabled
                [ Color.background grey
                ]
            ]
        ]


-- 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

type alias Font =

Font

type alias Color =

Color

rgb : Float -> Float -> Float -> Color

Takes values from 0 to 1 to make a nontransparent color in the rgb space.

rgba : Float -> Float -> Float -> Float -> Color

Takes values from 0 to 1 to make a transparent color in the rgb space.

Transformations

type alias Transform =

Transformation

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

importUrl : String -> Style class variation

importCss : String -> Style class variation

altayaydemir/style-elements/1.0.0