elm-athlete/athlete/3.0.0

NOTE: the latest version is 7.0.0

Elegant.Flex

Flex handles everything related to the flex element.

{ direction : Maybe FlexDirection
, wrap : Maybe FlexWrap
, align : Maybe Align
, justifyContent : Maybe JustifyContent
}

Contains all style which can be applied on a flex container. This contains flex-direction, flex-wrap, align-items and justify-content.

type alias FlexItemDetails =
{ grow : Maybe Int
, shrink : Maybe Int
, basis : Maybe (Either SizeUnit Auto)
, alignSelf : Maybe Align
}

Contains all style which can be used on a flex item. This contains flex-grow, flex-shrink, flex-basis and align-self.

Represents a flex direction. Can be column or row.

Represents a flex wrap. Can be wrap or no-wrap.

type Align

Represents the alignment in flex. Can be baseline, center, flex-start, flex-end, inherit, initial or stretch.

Represents the value of justify-content. Can be space-between, space-around or center.

FlexDirection

direction : FlexDirection -> Modifier FlexContainerDetails

Accepts a flex-direction and modifies the flex container accordingly.

Defines the flex direction column.

Defines the flex direction row.

FlexWrap

wrap : Modifier FlexContainerDetails

Modifies the flex-wrap to wrap.

noWrap : Modifier FlexContainerDetails

Modifies the flex-wrap to no-wrap.

AlignItems / AlignSelf

align : Align -> Modifier FlexContainerDetails

Accepts an Align, and modifies the flex container accordingly.

-> FlexContainerDetails
-> FlexContainerDetails

Generates a baseline alignment.

Generates a center alignment.

Generates a flex-start alignment.

Generates a flex-end alignment.

Generates a inherit alignment.

Generates a initial alignment.

Generates a stretch alignment.

JustifyContent

justifyContent : JustifyContent -> Modifier FlexContainerDetails

Accepts a justify-content and modifies the flex container accordingly.

Defines the justify-content space-between.

Defines the justify-content space-around.

Defines the justify-content center.

Defines the justify-content flex-start.

Defines the justify-content flex-end.

Positionning

topLeft : FlexContainerDetails -> FlexContainerDetails
topCenter : FlexContainerDetails -> FlexContainerDetails
topRight : FlexContainerDetails -> FlexContainerDetails
centerLeft : FlexContainerDetails -> FlexContainerDetails
center : FlexContainerDetails -> FlexContainerDetails
centerRight : FlexContainerDetails -> FlexContainerDetails
bottomLeft : FlexContainerDetails -> FlexContainerDetails
bottomCenter : FlexContainerDetails -> FlexContainerDetails
bottomRight : FlexContainerDetails -> FlexContainerDetails

Flex

grow : Int -> Modifier FlexItemDetails

Accepts an int and sets the flex-grow accordingly.

shrink : Int -> Modifier FlexItemDetails

Accepts an int and sets the flex-shrink accordingly.

basisAuto : Modifier FlexItemDetails

Sets the flex-basis as auto.

basis : SizeUnit -> Modifier FlexItemDetails

Accepts a size and sets the flex-basis accordingly.

alignSelf : Align -> Modifier FlexItemDetails

Accepts an align and modifies the flex item accordingly.

defaultFlexContainerDetails : FlexContainerDetails
defaultFlexItemDetails : FlexItemDetails
flexContainerDetailsToCouples : FlexContainerDetails -> List ( String, String )
flexItemDetailsToCouples : FlexItemDetails -> List ( String, String )