elm-athlete/athlete/6.0.0

NOTE: the latest version is 7.0.0

Elegant.Display

Display contains everything about an element rendering. It is the basis of every style, for every element. Each element can be block, inline, flow or flex.

Types

= None
| ContentsWrapper Contents

Represents a box and contains all the style inside. If the display is none, no style is included. Otherwise, the display type requires the corresponding styles. I.e. if using a flex container, then only styles applying to flex container can be used. If using a block container, only styles applying to block can be used, and so on.

You don't use it directly, but rather generating one with the corresponding functions, then giving it to a function which needs one. If you want to bypass it, you can use Display.displayBoxToCouples, which generates the equivalent CSS.

type alias Contents =
{ outsideDisplay : OutsideDisplay
, insideDisplay : InsideDisplay
, maybeBox : Maybe Box
}
= Inline
| Block (Maybe BlockDetails)
| FlexItem (Maybe FlexItemDetails) (Maybe BlockDetails)
| GridItem (Maybe GridItemDetails) (Maybe BlockDetails)

Represents the style from outside the display. Can be inline, block, or flex-item.

= Flow
| FlexContainer (Maybe FlexContainerDetails)
| GridContainer (Maybe GridContainerDetails)

Represents the style from inside a display. Can be flow, or flex (and containing flex details).

type alias BlockDetails =
{ listStyleType : Maybe ListStyleType
, alignment : Maybe Alignment
, overflow : Maybe FullOverflow
, textOverflow : Maybe TextOverflow
, dimensions : Maybe Dimensions
}

Contains all styles which can be applied to a block. It is automatically instanciated by Display.block.

Represents the type of the list style. Can be none, disc, circle, square, decimal or georgian.

Represents the alignment inside a block. Can be center, right, left or justify.

Represents the text-overflow. Can be ellipsis.

defaultBlockDetails : BlockDetails

Modifiers

List

listStyleNone : Modifier BlockDetails

Set the list style to none.

listStyleDisc : Modifier BlockDetails

Set the list style to disc.

listStyleCircle : Modifier BlockDetails

Set the list style to circle.

listStyleSquare : Modifier BlockDetails

Set the list style to square.

listStyleDecimal : Modifier BlockDetails

Set the list style to decimal.

listStyleGeorgian : Modifier BlockDetails

Set the list style to georgian.

Alignment

alignment : Alignment -> Modifier BlockDetails

Accepts the alignment and modifies the block accordingly.

Defines the alignment as center.

Defines the alignment as left.

Defines the alignment as justify.

Overflow

overflow : Modifiers FullOverflow -> Modifier BlockDetails

Accepts a list of Overflow modifiers and modifies the block accordingly.

textOverflowEllipsis : Modifier BlockDetails

Modifies the block to give an text-overflow ellipsis.

## Dimensions

dimensions : Modifiers Dimensions -> Modifier BlockDetails

Accepts dimensions modifiers and modifies the block accordingly.

fullWidth : Modifier BlockDetails

Compilation

displayBoxToCouples : DisplayBox -> List ( String, String )

Compiles a DisplayBox to the corresponding CSS list of tuples. Handles only defined styles, ignoring Nothing fields.