altayaydemir / style-elements / 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 =
Internal.Batchable.Batchable (Internal.Model.Style class variation)

variation : variation -> List (Property class Basics.Never) -> Property class variation

Properties


type alias Property class variation =
Internal.Model.Property class variation

prop : String -> String -> Property class variation

opacity : Basics.Float -> Property class variation

cursor : String -> Property class variation


type alias Font =
Internal.Model.Font


type alias Color =
Internal.Model.Color

rgb : Basics.Float -> Basics.Float -> Basics.Float -> Color

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

rgba : Basics.Float -> Basics.Float -> Basics.Float -> Basics.Float -> Color

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

Transformations


type alias Transform =
Internal.Model.Transformation

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

Set the transform origin.

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

Units are always as pixels

rotate : Basics.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 : ( Basics.Float, Basics.Float, Basics.Float ) -> Basics.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 : Basics.Float -> Basics.Float -> Basics.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 =
Internal.Model.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