PackagesReroutesAboutlamdera.com

mdgriffith/style-elements/2.0.1

NOTE: this package is not compatible with Elm 0.19.1

READMEAboutVersionsSourceModules

Style

This module is focused around composing a style.

type alias Model class =
Model class

A style model which keeps of a list of style properties and the class for a given style.

The class type variable is the type you use to write your css classes.

type alias Property =
Property

This type represents any style property. The Model has a list of these.

Rendering

We use render to create a style sheet and embed to embed it in our view.

render : List (Model class) -> StyleSheet class msg

Render styles into a stylesheet

renderWith : List Option -> List (Model class) -> StyleSheet class msg

Render a stylesheet with options

type alias StyleSheet class msg =
{ class : class -> Attribute msg
, classList : List ( class, Bool ) -> Attribute msg
, css : String
}

The stylesheet contains the rendered css as a string, and two functions to lookup

embed : StyleSheet class msg -> Html msg

Embed a style sheet into your html.

Rendering Options

type Option

A style rendering option to be used with renderWith

importCSS : String -> Option
importUrl : String -> Option
debug : Option

Log a warning if a style is missing from a style sheet.

Also shows a visual warning if a style uses float or inline in a table layout orflow/flex layout.

base : List Property -> Option

Set a base style. All classes in this stylesheet will start with these properties.

foundation : List Property

Sets the following defaults:

box-sizing: border-box
display: block
position: relative
top: 0
left: 0

An attempt will be made to import all non-standard webfonts that are in your styles.

If a font is not in the following list, then it will try to import it from google fonts.

[ "arial"
, "sans-serif"
, "serif"
, "courier"
, "times"
, "times new roman"
, "verdana"
, "tahoma"
, "georgia"
, "helvetica"
]

Creating Styles

class : class -> List Property -> Model class

Set the class for a given style. You should use a union type!

selector : String -> List Property -> Model class

You can set a raw css selector instead of a class.

It's highly recommended not to do this unless absolutely necessary.

Positioning

The coordinates for position always have the same coordinate system, right and down are the positive directions, same as the standard coordinate system for svg.

These coordinates are always rendered in pixels.

The name of the position property refers on which corner of the css box to start at.

topLeft : Float -> Float -> Property
topRight : Float -> Float -> Property
bottomLeft : Float -> Float -> Property
bottomRight : Float -> Float -> Property
positionBy : PositionParent -> Property
type alias PositionParent =
PositionParent
parent : PositionParent
currentPosition : PositionParent
screen : PositionParent

Width/Height

height : Length -> Property
minHeight : Length -> Property
maxHeight : Length -> Property
width : Length -> Property
minWidth : Length -> Property
maxWidth : Length -> Property

Units

Most values in this library have one set of units to the library that are required to be used.

This is to encourage relative units to be expressed in terms of your elm code instead of relying on DOM hierarchy.

However, width and height values can be pixels, percent, or auto.

percent : Float -> Length
px : Float -> Length
auto : Length

A Note on Padding and Margins

With padding and margin you have two ways of specifying the spacing of the child element within the parent. Either the margin on the child or the padding on the parent.

In the effort of having only one good way to accomplish something, we only allow the padding property to be set.

We introduce the spacing attribute, which sets the spacing between all child elements (using the margin property).

Some exceptions

inline elements are not affected by spacing.

Floating elements will only respect certain spacing values.

padding : ( Float, Float, Float, Float ) -> Property
spacing : ( Float, Float, Float, Float ) -> Property
zIndex : Int -> Property

Padding, Spacing, and Borders

Padding, spacing, and border widths are all specified by a tuple of four floats that represent (top, right, bottom, left). These are all rendered as px values.

The following are convenience functions for setting these values.

all : Float -> ( Float, Float, Float, Float )
top : Float -> ( Float, Float, Float, Float )
bottom : Float -> ( Float, Float, Float, Float )
left : Float -> ( Float, Float, Float, Float )
topBottom : Float -> ( Float, Float, Float, Float )
leftRight : Float -> ( Float, Float, Float, Float )
leftRightAndTopBottom : Float -> Float -> ( Float, Float, Float, Float )
leftRightTopBottom : Float -> Float -> Float -> Float -> ( Float, Float, Float, Float )
allButTop : Float -> ( Float, Float, Float, Float )
allButLeft : Float -> ( Float, Float, Float, Float )
allButRight : Float -> ( Float, Float, Float, Float )
allButBottom : Float -> ( Float, Float, Float, Float )

Borderstyles

type alias Border =
{ width : ( Float, Float, Float, Float )
, style : BorderStyle
, color : Color
}
border : Border -> Property
borderStyle : BorderStyle -> Property
type alias BorderStyle =
BorderStyle
borderWidth : ( Float, Float, Float, Float ) -> Property
solid : BorderStyle
dotted : BorderStyle
dashed : BorderStyle
borderRadius : ( Float, Float, Float, Float ) -> Property

Layouts

Layouts affect how child elements are arranged.

type alias Layout =
Layout
textLayout : Property

This is the only layout that allows for child elements to use float or inline.

If you try to assign a float or make an element inline that is not the child of a textLayout, the float or inline will be ignored.

If you use Style.debug instead of Style.render, the element will be highlighted in red with a large warning.

Besides this, all immediate children are arranged as if they were display: block.

tableLayout : Property

This is the same as setting an element to display:table.

type alias Flow =
{ wrap : Bool
, horizontal : Alignment
, vertical : VerticalAlignment
}
flowUp : Flow -> Property

This is a flexbox foundationd layout

flowDown : Flow -> Property
flowRight : Flow -> Property
flowLeft : Flow -> Property
inline : Property

Render an element as 'inline-block'.

This element will no longer be affected by 'spacing'

type alias Floating =
Floating

Only rendered if the parent is a textLayout.

floatLeft : Property

Float something to the left. Only valid in textLayouts.

Will ignore any left spacing that it's parent has set for it.

floatRight : Property
floatTopLeft : Property

Same as floatLeft, except it will ignore any top spacing that it's parent has set for it.

This is useful for floating things at the beginning of text.

floatTopRight : Property

Alignment

type alias Alignment =
Alignment
alignLeft : Alignment
alignRight : Alignment
justify : Alignment
justifyAll : Alignment
alignCenter : Alignment
type alias VerticalAlignment =
VerticalAlignment
verticalCenter : VerticalAlignment
verticalStretch : VerticalAlignment
alignTop : VerticalAlignment
alignBottom : VerticalAlignment

Colors

textColor : Color -> Property
backgroundColor : Color -> Property
borderColor : Color -> Property

Visibility

visibility : Visibility -> Property
type alias Visibility =
Visibility
hidden : Visibility

Same as "display:none"

opacity : Float -> Visibility

A value between 0 and 1

transparency : Float -> Visibility

A value between 0 and 1

visible : Visibility

Text/Font

font : String -> Property

Set font-family

fontsize : Float -> Property

Set font-size. Only px allowed.

lineHeight : Float -> Property

Given as unitless lineheight.

textAlign : Alignment -> Property
letterOffset : Float -> Property
whitespace : Whitespace -> Property
type alias Whitespace =
Whitespace
normal : Whitespace
pre : Whitespace
preLine : Whitespace
preWrap : Whitespace
noWrap : Whitespace
italicize : Property
bold : Property
light : Property
strike : Property
underline : Property
cursor : String -> Property

Background Images

backgroundImage : BackgroundImage -> Property
type alias BackgroundImage =
{ src : String
, position : ( Float, Float )
, repeat : Repeat
}
type alias Repeat =
Repeat
repeat : Repeat
repeatX : Repeat
repeatY : Repeat
noRepeat : Repeat
round : Repeat
space : Repeat
property : String -> String -> Property

Add a property. Not to be exported, properties is to be used instead.

mix : List Property -> Property

Shadows

shadows : List Shadow -> Property
type alias Shadow =
Shadow
{ offset : ( Float, Float )
, size : Float
, blur : Float
, color : Color
}
-> Shadow
{ offset : ( Float, Float )
, size : Float
, blur : Float
, color : Color
}
-> Shadow
{ offset : ( Float, Float )
, blur : Float
, color : Color
}
-> Shadow
{ offset : ( Float, Float )
, blur : Float
, color : Color
}
-> Shadow

Transforms

transforms : List Transform -> Property
type alias Transform =
Transform
translate : Float -> Float -> Float -> Transform

Units are always as pixels

rotate : Float -> Float -> Float -> Transform

Units always rendered as radians.

Use x * deg or x * turn from the standard library if you want to use a different set of units.

scale : Float -> Float -> Float -> Transform

Filters

filters : List Filter -> Property
type alias Filter =
Filter
filterUrl : String -> Filter
blur : Float -> Filter
brightness : Float -> Filter
contrast : Float -> Filter
grayscale : Float -> Filter
hueRotate : Float -> Filter
invert : Float -> Filter
opacityFilter : Float -> Filter
saturate : Float -> Filter
sepia : Float -> Filter

Animations and Transitions

type alias Animation =
{ duration : Time
, easing : String
, repeat : Float
, steps : List ( Float, List Property )
}
animate : Animation -> Property

Create an animation

type alias Transition =
Transition
transition : Transition -> Property

Pseudo elements and classes

selection : List Property -> Property
after : String -> List Property -> Property

Requires a string which will be rendered as the 'content' property

before : String -> List Property -> Property

Requires a string which will be rendered as the 'content' property

hover : List Property -> Property
focus : List Property -> Property
checked : List Property -> Property

Modules

About this package serverReroutesreroutes.json
Pages and docs rendering from package.elm-lang.org, © 2012-2020 Evan Czaplicki. © 2026 Lamdera