elm-athlete / athlete / Elegant.Background

Background contains everything about background rendering: using photos or gradient, and positionning them on the page.

Types


type alias Background =
{ color : Maybe Color
, images : List BackgroundImage 
}

The Background record contains everything about background rendering, including character rendering. You probably won't use it as is, but instead using Box.background which automatically generate an empty Background record. You can then use modifiers. I.E.

Box.background
    [ Elegant.color Color.white
    , Background.images
        [ Background.image "/example.photo" ]
    ]


type Image

Represents an image in CSS. It can be an image, represented by a source url, or a gradiant. They are instanciated by image (which instanciate an Image inside a BackgroundImage) or by linear or radial, instanciating a gradiant.


type alias BackgroundImage =
{ image : Maybe Image
, position : Maybe (Elegant.Helpers.Vector.Vector Elegant.Helpers.Shared.SizeUnit) 
}

Represents a Background Image, i.e. an image in Background. Contrary to Image, a BackgroundImage contains an image and a position. This position set the position of the image on the background.


type Gradient

Defines a gradient, which can be either linear or radial. They are instanciated by the corresponding functions.


type Angle

Represents an angle. Can be either radiant or degree.


type alias Degree =
Basics.Float

Represents a degree.


type alias Radiant =
Basics.Float

Represents a radiant.


type alias ColorStop =
{ position : Maybe Elegant.Helpers.Shared.SizeUnit
, color : Color 
}

Represents a CSS Color Stop, which contains a Color, and possibly a position. This is automatically generated by colorStop.

Background creation

default : Background

Generates an empty Background.

images : List BackgroundImage -> Modifiers.Modifier Background

Modify the background rendering to add photos and gradients. It modifies the images list in Background.

Background.images
    [ Background.image "/example.photo" ]

image : String -> BackgroundImage

Accepts an Url, and returns a BackgroundImage. This image can be modified to add a position to it.

gradient : Gradient -> BackgroundImage

Accepts a gradient, and creates a BackgroundImage.

linear : Angle -> ColorStop -> ColorStop -> Gradient

Creates a linear gradient. The angle, and two colors (one for starting color, the second for the ending color) are required, and more colors can be added in the gradient using intermediateColors.

radial : ColorStop -> ColorStop -> Gradient

Creates a radial gradient. Two colors (one for starting color, the second for the ending color) are required, and more colors can be added in the gradient using intermediateColors.

Background modifiers

intermediateColors : List ColorStop -> Gradient -> Gradient

Sets multiples intermediate colors in a gradient. By default, a gradient is created with two colors. This can be used to add more colors.

colorStop : Color -> ColorStop

Generates a CSS Color Stop from Color to use in gradients.

at : a -> { b | position : Maybe a } -> { b | position : Maybe a }

Sets a position on both a gradient and a BackgroundImage.

degree : Basics.Float -> Angle

Generates an angle in degree from Float.

rad : Basics.Float -> Angle

Generates an angle in radiant from Float.

Compilation

backgroundToCouples : Background -> List ( String, String )

Compiles a Background record to the corresponding CSS list of tuples. Compiles only styles which are defined, ignoring Nothing fields.