The content value for the
flex-basis property.
Define CSS styles in Elm.
import Css exposing (..)
import Html
import Html.Styled exposing (..)
import Html.Styled.Attributes exposing (css, href, src)
import Html.Styled.Events exposing (onClick)
{-| A logo image, with inline styles that change on hover.
-}
logo : Html msg
logo =
img
[ src "logo.png"
, css
[ display inlineBlock
, padding (px 20)
, border3 (px 5) solid (rgb 120 120 120)
, hover
[ borderColor theme.primary
, borderRadius (px 10)
]
]
]
[]
{-| A plain old record holding a couple of theme colors.
-}
theme : { secondary : Color, primary : Color }
theme =
{ primary = hex "55af6a"
, secondary = rgb 250 240 230
}
{-| A reusable button which has some styles pre-applied to it.
-}
btn : List (Attribute msg) -> List (Html msg) -> Html msg
btn =
styled button
[ margin (px 12)
, color (rgb 250 250 250)
, hover
[ backgroundColor theme.primary
, textDecoration underline
]
]
{-| A reusable style. Css.batch combines multiple styles into one, much
like mixins in CSS preprocessors.
-}
paragraphFont : Style
paragraphFont =
Css.batch
[ fontFamilies [ "Palatino Linotype", "Georgia", "serif" ]
, fontSize (px 16)
, fontWeight normal
]
{-| Css.property lets you define custom properties, using strings as their values.
-}
legacyBorderRadius : String -> Style
legacyBorderRadius amount =
Css.batch
[ property "-moz-border-radius" amount
, property "-webkit-border-top-left-radius" amount
, property "-webkit-border-top-right-radius" amount
, property "-webkit-border-bottom-right-radius" amount
, property "-webkit-border-bottom-left-radius" amount
, property "border-radius" amount
]
view : Model -> Html Msg
view model =
nav []
[ img [ src "assets/backdrop.jpg", css [ width (pct 100) ] ] []
, btn [ onClick DoSomething ] [ text "Click me!" ]
]
main : Program Never Model Msg
main =
Html.beginnerProgram
{ view = view >> toUnstyled
, update = update
, model = initialModel
}See examples/readme/ to play around with this example.
The css
function accepts a list of Style
values which roughly correspond to CSS properties.
css
[ display inlineBlock
, padding (px 20)
, border3 (px 5) solid (rgb 120 120 120)
, hover
[ borderColor theme.primary
, borderRadius (px 10)
]
]Let's take a look at some of these declarations.
display inlineBlockThis compiles to the CSS declaration display: inline-block; -
Kebab-case CSS names become camelCase names in elm-css.
The Css.display function only accepts values that are compatible
with the CSS display property, such as inlineBlock, flex, none, inherit, etc.
If you try to pass display an invalid value such as pointer, it will not compile!
padding (px 20)This compiles to the CSS declaration padding: 20px;
Values with units such as px, em, and rem are implemented as functions.
The num function compiles to unitless numbers; for example, flexGrow (num 1) compiles to flex-grow: 1;.
zero is compatible with declarations that either do or do not expect units, so you can write
padding zero instead of something like padding (px 0). (padding zero compiles to padding: 0;.)
border3 (px 5) solid (rgb 120 120 120)The border3 function shows a convention in elm-css: when a CSS property supports a variable number of arguments, as is the case with border, elm-css commonly provides multiple functions to support those alternatives. For example, border, border2, and border3.
hover
[ borderColor theme.primary
, borderRadius (px 10)
]CSS pseudo-classes like :hover are implemented as functions that take a list of declarations.
The above compiles to something like this:
._c7f8ba:hover {
border-color: #55af6a;
border-raidus: 10px;
}Where does that funky classname of _c7f8ba come from?
elm-css automatically generates this classname based on the declarations used, and
uses it to generate a <style> element which applies your styles to the page.
When you write this:
button [ css [ borderRadius (px 10), hover [ textDecoration underline ] ] ]
[ text "Reset" ]The button is not a normal Html value from the elm-lang/html package, but
a Html.Styled value which wraps a normal Html value and adds
styling information. Later, when you call toUnstyled
to convert this value to a normal Html value, it adds two elements to the DOM:
<button class="_df8ab1">Reset<button>
<style>
._df8ab1 {
border-radius: 10px;
}
._df8ab1:hover {
text-decoration: underline;
}
</style>To sum up what's happening here:
css attribute, elm-css generates a classname and some style information.Html.Styled value which wraps that element.toUnstyled converts this Html.Styled value to a normal Html value which represents both the requested element as well as a <style> elementThis is how the css attribute is able to support things like hover and media
queries.
If you give an element multiple css attributes, they will not stack. For
example, in this code, only the second css attiibute will be used. The first
one will be ignored.
button
[ css [ backgroundColor (hex "FF0000") ]
, css [ borderRadius (px 10), hover [ textDecoration underline ] ]
]
[ text "Reset" ]This code compiles to the following DOM structure:
<button class="_df8ab1">Reset<button>
<style>
._df8ab1 {
border-radius: 10px;
}
._df8ab1:hover {
text-decoration: underline;
}
</style>With the exception of Lazy,
you can expect toUnstyled to create one <style> element total, not one
per element that uses css.
toUnstyled avoids generating excess <style> elements and CSS
declarations by building up a dictionary of styles you've passed to css.
It will use that dictionary to add a single <style> to the DOM with all the
appropriate classname declarations.
To reuse styles (like mixins
in other CSS systems) use Style
values.
greenBorder : Style
greenBorder =
borderColor green
bigBold : Style
bigBold =
Css.batch [ fontWeight bold, fontSize (px 48) ]
view : Model -> Html Msg
view model =
button [ css [ bigBold, greenBorder ] ] [ text "Ok" ]Because only one css attribute per element has any effect, you cannot reuse
styles after compiling them to attributes. Trying to reuse styles by using
multiple attributes will not not work:
greenBorder : Attribute msg
greenBorder =
css [ borderColor green ]
bigBold : Attribute msg
bigBold =
css [ fontWeight bold, fontSize (px 48) ]
view : Model -> Html Msg
view model =
-- Doesn't work!
button [ bigBold, greenBorder ] [ text "Ok" ]In this case, the bigBold attribute will be completely ignored in favor of
the greenBorder attribute, because it came last in the attribute list. If you
want to mix and match styles, use Style values!
The CSS spec is, ahem, not small. elm-css covers a lot of it, but not all of
it. Some things are considered too experimental to support, usually because they
do not have enough browser support. Others haven't been added yet because, well,
we haven't gotten around to adding them!
If you need something that elm-css does not support right now, the
Css.property
and Css.Global.selector
functions let you define custom properties and selectors, respectively.
Create a style from multiple other styles.
underlineOnHover =
batch
[ textDecoration none
, hover
[ textDecoration underline ]
]
css
[ color (rgb 128 64 32)
, underlineOnHover
]...has the same result as:
css
[ color (rgb 128 64 32)
, textDecoration none
, hover
[ textDecoration underline ]
]Define a custom property.
css [ property "-webkit-font-smoothing" "none" ]...outputs
-webkit-font-smoothing: none;Sets flex property.
flex (none | content | auto | (int 1) | (px 10)) flex2 (int 1) ((int 1) | (px 10 )) flex3 (int 1) (int 1) ((int 1) | (px 10))
Sets flex property.
flex (none | content | auto | (int 1) | (px 10)) flex2 (int 1) ((int 1) | (px 10 )) flex3 (int 1) (int 1) ((int 1) | (px 10))
Sets flex property.
flex (none | content | auto | (int 1) | (px 10)) flex2 (int 1) ((int 1) | (px 10 )) flex3 (int 1) (int 1) ((int 1) | (px 10))
Sets align-self.
Note: auto is not currently supported here. If you need to set this property to auto,
use this workaround:
property "align-self" "auto"
If this is annoying, please file an issue, so adding support for "auto" can be prioritized!
Sets align-items.
Note: auto is not currently supported here. If you need to set this property to auto,
use this workaround:
property "align-items" "auto"
If this is annoying, please file an issue, so adding support for "auto" can be prioritized!
Sets justify-content.
Sets flex-direction property.
Sets flex-flow property.
flexFlow1 (wrap | wrapReverse | noWrap) flexFlow2 (wrap | wrapReverse | noWrap) (row | column | rowReverse | columnReverse)
Or vice versa, order is not important for flex-flow
Sets flex-flow property.
flexFlow1 (wrap | wrapReverse | noWrap) flexFlow2 (wrap | wrapReverse | noWrap) (row | column | rowReverse | columnReverse)
Or vice versa, order is not important for flex-flow
Sets flex-basis property.
flex (none | content | auto | (int 1) | (px 10)) flex2 (int 1) ((int 1) | (px 10 )) flex3 (int 1) (int 1) ((int 1) | (px 10))
Sets flex-shrink property.
The transform-style property.
The transform-box property.
Sets transform
with a single explicit transform value. If you need to set the transform
property to none, use the transforms function with an empty list. See
transforms for more details.
transform (scaleX 1.4)Sets transform
with a series of transform-functions. If an empty list is provided, the CSS
output will be none, as if to state directly that the set of transforms
applied to the current selector is empty:
transforms [] -- transform: none;In the case that only one transform is needed, the transform function may be
used instead for convenience. transform expects exactly one transform-function
and cannot be passed none:
transform (matrix 1 2 3 4 5 6) -- transform: matrix(1, 2, 3, 4, 5, 6);If a collection of transforms is needed, use the transforms function with a
populated list:
transforms [ perspective 1, scale2 1 1.4 ]The currentColor
value.
A line-through
text decoration line.
Sets text-orientation.
text - orientation mixedSets text-decoration
textDecoration underline
textDecoration2 underline wavy
textDecoration3 underline wavy (rgb 128 64 32)You can specify multiple line decorations with textDecorations.
textDecorations [ underline, overline ]
textDecorations2 [ underline, overline ] wavy
textDecorations3 [ underline, overline ] wavy (rgb 128 64 32)Sets text-decoration
textDecoration underline
textDecoration2 underline wavy
textDecoration3 underline wavy (rgb 128 64 32)You can specify multiple line decorations with textDecorations.
textDecorations [ underline, overline ]
textDecorations2 [ underline, overline ] wavy
textDecorations3 [ underline, overline ] wavy (rgb 128 64 32)Sets text-decoration
textDecoration underline
textDecoration2 underline wavy
textDecoration3 underline wavy (rgb 128 64 32)You can specify multiple line decorations with textDecorations.
textDecorations [ underline, overline ]
textDecorations2 [ underline, overline ] wavy
textDecorations3 [ underline, overline ] wavy (rgb 128 64 32)Sets text-decoration
textDecorations [ underline, overline ]
textDecorations2 [ underline, overline ] wavy
textDecorations3 [ underline, overline ] wavy (rgb 128 64 32)Sets text-decoration
textDecorations [ underline, overline ]
textDecorations2 [ underline, overline ] wavy
textDecorations3 [ underline, overline ] wavy (rgb 128 64 32)Sets text-decoration
textDecorations [ underline, overline ]
textDecorations2 [ underline, overline ] wavy
textDecorations3 [ underline, overline ] wavy (rgb 128 64 32)Sets text-decoration-line
textDecorationLine underlineYou can specify multiple line decorations with textDecorationLines.
textDecorationLines [ underline, overline ]Sets text-decoration-line
textDecorationLines [ underline, overline ]textDecorationStyle dotted textEmphasisColor (rgb 100 100 100)capitalize text-transform value
uppercase text-transform value
lowercase text-transform value
full-width text-transform value
each-line text-indent value
Sets text-indent.
textIndent (px 40)
textIndent2 (px 40) hanging
textIndent3 (px 40) hanging eachLineSets text-indent.
textIndent (px 40)
textIndent2 (px 40) hanging
textIndent3 (px 40) hanging eachLineSets text-indent.
textIndent (px 40)
textIndent2 (px 40) hanging
textIndent3 (px 40) hanging eachLineclip text-overflow value
ellipsis text-overflow value
Sets text-overflow.
textOverflow ellipsisoptimizeSpeed text-rendering value
optimizeLegibility text-rendering value
geometricPrecision text-rendering value
Sets text-rendering.
Sets text-transform.
Sets text-align.
Sets text-align-last.
Note: auto is not currently supported here. If you need to set this property to auto,
use this workaround:
property "text-align-last" "auto"
If this is annoying, please file an issue, so adding support for "auto"
can be prioritized!The left property.
position absolute
left (px 5)This can also be used as a left text alignment value:
textAlign leftIt can also be used as a left float value :
float leftcenter alignment.
Can also be used with flex-box's align-items and justify-content properties to apply the value of center
justify-all alignment.
match-parent alignment.
Sets vertical-align.
For display: flex, use displayFlex.
The min-content value for
min-width,
max-width,
min-height, and
max-height
The max-content value for
min-width,
max-width,
min-height, and
max-height
The fit-content value for
min-width,
max-width,
min-height, and
max-height
The fill-available value for
min-width,
max-width,
min-height, and
max-height
Sets min-height
minHeight (px 100)Sets max-height
maxHeight (px 1024)Sets padding
padding (px 10)
padding2 (px 10) (px 10)
padding3 (px 10) (px 10) (px 10)
padding4 (px 10) (px 10) (px 10) (px 10)Sets padding
padding (px 10)
padding2 (px 10) (px 10)
padding3 (px 10) (px 10) (px 10)
padding4 (px 10) (px 10) (px 10) (px 10)Sets padding
padding (px 10)
padding2 (px 10) (px 10)
padding3 (px 10) (px 10) (px 10)
padding4 (px 10) (px 10) (px 10) (px 10)Sets padding
padding (px 10)
padding2 (px 10) (px 10)
padding3 (px 10) (px 10) (px 10)
padding4 (px 10) (px 10) (px 10) (px 10)Sets padding-top
paddingTop (px 10)Sets padding-bottom
paddingBottom (px 10)Sets padding-right
paddingRight (px 10)Sets padding-left
paddingLeft (px 10)The pointer-events
property specifies under what circumstances (if any) a particular graphic
element can become the target of mouse events.
Sets margin
margin (px 10)
margin2 (px 10) (px 10)
margin3 (px 10) (px 10) (px 10)
margin4 (px 10) (px 10) (px 10) (px 10)Sets margin
margin (px 10)
margin2 (px 10) (px 10)
margin3 (px 10) (px 10) (px 10)
margin4 (px 10) (px 10) (px 10) (px 10)Sets margin
margin (px 10)
margin2 (px 10) (px 10)
margin3 (px 10) (px 10) (px 10)
margin4 (px 10) (px 10) (px 10) (px 10)Sets margin
margin (px 10)
margin2 (px 10) (px 10)
margin3 (px 10) (px 10) (px 10)
margin4 (px 10) (px 10) (px 10) (px 10)Sets margin-top
marginTop (px 10)Sets margin-bottom
marginBottom (px 10)Sets margin-right
marginRight (px 10)Sets margin-left
marginLeft (px 10)Sets margin-block-start
marginBlockStart (px 10)Sets margin-block-end
marginBlockEnd (px 10)Sets margin-inline-start
marginInlineStart (px 10)Sets margin-inline-end
marginInlineEnd (px 10)Sets box-sizing
boxSizing borderBoxSets text-shadow.
textShadow none
textShadow2 (px 1) (px 2)
textShadow3 (px 1) (px 2) (rgb 211 121 112)
textShadow4 (px 1) (px 2) (px 3) (rgb 211 121 112)Sets text-shadow.
textShadow none
textShadow2 (px 1) (px 2)
textShadow3 (px 1) (px 2) (rgb 211 121 112)
textShadow4 (px 1) (px 2) (px 3) (rgb 211 121 112)Sets text-shadow.
textShadow none
textShadow2 (px 1) (px 2)
textShadow3 (px 1) (px 2) (rgb 211 121 112)
textShadow4 (px 1) (px 2) (px 3) (rgb 211 121 112)Sets text-shadow.
textShadow none
textShadow2 (px 1) (px 2)
textShadow3 (px 1) (px 2) (rgb 211 121 112)
textShadow4 (px 1) (px 2) (px 3) (rgb 211 121 112)Sets box-shadow.
boxShadow none
boxShadow2 (px 1) (px 2)
boxShadow3 (px 1) (px 2) (rgb 211 121 112)
boxShadow3 (px 1) (px 2) (px 3)
boxShadow3 inset (px 2) (px 3)
boxShadow4 (px 1) (px 2) (px 3) (rgb 211 121 112)
boxShadow4 inset (px 2) (px 3) (rgb 211 121 112)
boxShadow4 (px 1) (px 2) (px 3) (px 4)
boxShadow4 inset (px 2) (px 3) (px 4)
boxShadow5 (px 1) (px 2) (px 3) (px 4) (rgb 211 121 112)
boxShadow5 inset (px 2) (px 3) (px 4) (rgb 211 121 112)
boxShadow6 inset (px 1) (px 2) (px 3) (px 4) (rgb 211 121 112)Sets box-shadow.
boxShadow none
boxShadow2 (px 1) (px 2)
boxShadow3 (px 1) (px 2) (rgb 211 121 112)
boxShadow3 (px 1) (px 2) (px 3)
boxShadow3 inset (px 2) (px 3)
boxShadow4 (px 1) (px 2) (px 3) (rgb 211 121 112)
boxShadow4 inset (px 2) (px 3) (rgb 211 121 112)
boxShadow4 (px 1) (px 2) (px 3) (px 4)
boxShadow4 inset (px 2) (px 3) (px 4)
boxShadow5 (px 1) (px 2) (px 3) (px 4) (rgb 211 121 112)
boxShadow5 inset (px 2) (px 3) (px 4) (rgb 211 121 112)
boxShadow6 inset (px 1) (px 2) (px 3) (px 4) (rgb 211 121 112)Sets box-shadow.
boxShadow none
boxShadow2 (px 1) (px 2)
boxShadow3 (px 1) (px 2) (rgb 211 121 112)
boxShadow3 (px 1) (px 2) (px 3)
boxShadow3 inset (px 2) (px 3)
boxShadow4 (px 1) (px 2) (px 3) (rgb 211 121 112)
boxShadow4 inset (px 2) (px 3) (rgb 211 121 112)
boxShadow4 (px 1) (px 2) (px 3) (px 4)
boxShadow4 inset (px 2) (px 3) (px 4)
boxShadow5 (px 1) (px 2) (px 3) (px 4) (rgb 211 121 112)
boxShadow5 inset (px 2) (px 3) (px 4) (rgb 211 121 112)
boxShadow6 inset (px 1) (px 2) (px 3) (px 4) (rgb 211 121 112)Sets box-shadow.
boxShadow none
boxShadow2 (px 1) (px 2)
boxShadow3 (px 1) (px 2) (rgb 211 121 112)
boxShadow3 (px 1) (px 2) (px 3)
boxShadow3 inset (px 2) (px 3)
boxShadow4 (px 1) (px 2) (px 3) (rgb 211 121 112)
boxShadow4 inset (px 2) (px 3) (rgb 211 121 112)
boxShadow4 (px 1) (px 2) (px 3) (px 4)
boxShadow4 inset (px 2) (px 3) (px 4)
boxShadow5 (px 1) (px 2) (px 3) (px 4) (rgb 211 121 112)
boxShadow5 inset (px 2) (px 3) (px 4) (rgb 211 121 112)
boxShadow6 inset (px 1) (px 2) (px 3) (px 4) (rgb 211 121 112)Sets box-shadow.
boxShadow none
boxShadow2 (px 1) (px 2)
boxShadow3 (px 1) (px 2) (rgb 211 121 112)
boxShadow3 (px 1) (px 2) (px 3)
boxShadow3 inset (px 2) (px 3)
boxShadow4 (px 1) (px 2) (px 3) (rgb 211 121 112)
boxShadow4 inset (px 2) (px 3) (rgb 211 121 112)
boxShadow4 (px 1) (px 2) (px 3) (px 4)
boxShadow4 inset (px 2) (px 3) (px 4)
boxShadow5 (px 1) (px 2) (px 3) (px 4) (rgb 211 121 112)
boxShadow5 inset (px 2) (px 3) (px 4) (rgb 211 121 112)
boxShadow6 inset (px 1) (px 2) (px 3) (px 4) (rgb 211 121 112)Sets box-shadow.
boxShadow none
boxShadow2 (px 1) (px 2)
boxShadow3 (px 1) (px 2) (rgb 211 121 112)
boxShadow3 (px 1) (px 2) (px 3)
boxShadow3 inset (px 2) (px 3)
boxShadow4 (px 1) (px 2) (px 3) (rgb 211 121 112)
boxShadow4 inset (px 2) (px 3) (rgb 211 121 112)
boxShadow4 (px 1) (px 2) (px 3) (px 4)
boxShadow4 inset (px 2) (px 3) (px 4)
boxShadow5 (px 1) (px 2) (px 3) (px 4) (rgb 211 121 112)
boxShadow5 inset (px 2) (px 3) (px 4) (rgb 211 121 112)
boxShadow6 inset (px 1) (px 2) (px 3) (px 4) (rgb 211 121 112)Sets line-height
lineHeight (px 10)Sets letter-spacing
letterSpacing (px 10)Sets font-style
fontStyle italicSets font-weight
fontWeight bold
fontWeight (int 300)Sets font-variant
fontVariant smallCaps
fontVariant2 commonLigatures smallCaps
fontVariant3 commonLigatures smallCaps slashedZero
fontVariants [ oldstyleNums tabularNums stackedFractions ordinal slashedZero ]For multiple font families:
fontFamilies [ "Verdana", "Arial" ]
fontFamilies [ qt "Gill Sans Extrabold", "Helvetica", .value sansSerif ]fontFeatureSettings (featureTag "hist")
fontFeatureSettings (featureTag2 "smcp" on)
fontFeatureSettings (featureTag2 "swsh" 2)fontFeatureSettingsList [ featureTag "c2sc", featureTag "smcp" ]A cursor
specifies the mouse cursor displayed when mouse pointer is over an element.
Sets outline
outline zero
outline initial
outline3 (px 10) dashed (rgb 11 14 17)Sets outline
outline zero
outline initial
outline3 (px 10) dashed (rgb 11 14 17)Sets outline-color
outlineColor (rgb 11 14 17)
outlineColor (hex "#ffffff")
outlineColor (hsla 120 0.5 0.5 0.5)Sets outline-width
outlineWidth (px 10)
outlineWidth (em 1.4)
outlineWidth noneSets outline-style
outlineStyle dashed
outlineStyle solid
outlineStyle outsetSets outline-offset
outlineOffset (px 10)
outlineOffset (em 1.4)
outlineOffset (pct 50)Sets z-index
zIndex (int 2)See http://package.elm-lang.org/packages/rtfeldman/count/latest for a useful library to manage z-index values.
Thespace-around value for the
justify-content property.
Thespace-between value for the
justify-content property.
Sets touch-action property.
touchAction (auto | none | panX | panLeft | panRight | panY | panUp | panDown | pinchZoom | manipulation | inherit | initial | unset)
Sets border-spacing
borderSpacing (em 4)
borderSpacing2 (em 4) (px 2)Sets border-spacing
borderSpacing (em 4)
borderSpacing2 (em 4) (px 2)Transforms the given property by adding !important to the end of its declaration.
A solid border style.
A transparent color.
[RGB color value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#rgb()) in functional notation.
[RGBA color value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#rgba()).
[HSL color value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#hsl())
s and l values are expressed as a number between 0 and 1 and are converted
to the appropriate percentage at compile-time
[HSLA color value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#hsla())
s and l values are expressed as a number between 0 and 1 and are converted
to the appropriate percentage at compile-time
[RGB color value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#rgb())
in hexadecimal notation. You can optionally include # as the first character,
for benefits like syntax highlighting in editors, ease of copy/pasting from
tools which express these as e.g. #abcdef0, etc.
Creates a feature-tag-value
with the default value of 1
fontFeatureSettings (featureTag "hist")Creates a feature-tag-value
with a particular integer value
fontFeatureSettings (featureTag2 "smcp" on)
fontFeatureSettings (featureTag2 "swsh" 2)Alias for on value of font-feature-settings
Alias for off value of font-feature-settings
Sets border-collapse
borderCollapse collapseSets border-color
borderColor (rgb 12 11 10)
borderColor2 (rgb 12 11 10) (hex "FFBBCC")
borderColor3 (rgb 12 11 10) (hex "FFBBCC") inherit
borderColor4 (rgb 12 11 10) (hex "FFBBCC") inherit (rgb 1 2 3)Sets border-color
borderColor (rgb 12 11 10)
borderColor2 (rgb 12 11 10) (hex "FFBBCC")
borderColor3 (rgb 12 11 10) (hex "FFBBCC") inherit
borderColor4 (rgb 12 11 10) (hex "FFBBCC") inherit (rgb 1 2 3)Sets border-color
borderColor (rgb 12 11 10)
borderColor2 (rgb 12 11 10) (hex "FFBBCC")
borderColor3 (rgb 12 11 10) (hex "FFBBCC") inherit
borderColor4 (rgb 12 11 10) (hex "FFBBCC") inherit (rgb 1 2 3)Sets border-color
borderColor (rgb 12 11 10)
borderColor2 (rgb 12 11 10) (hex "FFBBCC")
borderColor3 (rgb 12 11 10) (hex "FFBBCC") inherit
borderColor4 (rgb 12 11 10) (hex "FFBBCC") inherit (rgb 1 2 3)Sets border-bottom-left-radius
borderBottomLeftRadius (em 4)
borderBottomLeftRadius2 (em 4) (px 2)Sets border-bottom-left-radius
borderBottomLeftRadius (em 4)
borderBottomLeftRadius2 (em 4) (px 2)Sets border-bottom-right-radius
borderBottomRightRadius (em 4)
borderBottomRightRadius2 (em 4) (px 2)Sets border-bottom-right-radius
borderBottomRightRadius (em 4)
borderBottomRightRadius2 (em 4) (px 2)borderTopLeftRadius (em 4)
borderTopLeftRadius2 (em 4) (px 2)borderTopLeftRadius (em 4)
borderTopLeftRadius2 (em 4) (px 2)borderTopRightRadius (em 4)
borderTopRightRadius2 (em 4) (px 2)borderTopRightRadius (em 4)
borderTopRightRadius2 (em 4) (px 2)Sets border-radius
borderRadius (em 4)
borderRadius2 (em 4) (px 2)
borderRadius3 (em 4) (px 2) (pct 5)
borderRadius4 (em 4) (px 2) (pct 5) (px 3)Sets border-radius
borderRadius (em 4)
borderRadius2 (em 4) (px 2)
borderRadius3 (em 4) (px 2) (pct 5)
borderRadius4 (em 4) (px 2) (pct 5) (px 3)Sets border-radius
borderRadius (em 4)
borderRadius2 (em 4) (px 2)
borderRadius3 (em 4) (px 2) (pct 5)
borderRadius4 (em 4) (px 2) (pct 5) (px 3)Sets border-radius
borderRadius (em 4)
borderRadius2 (em 4) (px 2)
borderRadius3 (em 4) (px 2) (pct 5)
borderRadius4 (em 4) (px 2) (pct 5) (px 3)Sets border-width
borderWidth (em 4)
borderWidth2 (em 4) (px 2)
borderWidth3 (em 4) (px 2) (pct 5)
borderWidth4 (em 4) (px 2) (pct 5) (px 3)Sets border-width
borderWidth (em 4)
borderWidth2 (em 4) (px 2)
borderWidth3 (em 4) (px 2) (pct 5)
borderWidth4 (em 4) (px 2) (pct 5) (px 3)Sets border-width
borderWidth (em 4)
borderWidth2 (em 4) (px 2)
borderWidth3 (em 4) (px 2) (pct 5)
borderWidth4 (em 4) (px 2) (pct 5) (px 3)Sets border-width
borderWidth (em 4)
borderWidth2 (em 4) (px 2)
borderWidth3 (em 4) (px 2) (pct 5)
borderWidth4 (em 4) (px 2) (pct 5) (px 3)Sets border-bottom-width
borderBottomWidth (em 4)Sets border-left-width
borderLeftWidth (em 4)Sets border-right-width
borderRightWidth (em 4)Sets border-top-width
borderTopWidth (em 4)
borderTopWidth2 (em 4) (px 2)Sets border-bottom-style
borderBottomStyle dashedSets border-left-style
borderLeftStyle dashedSets border-right-style
borderRightStyle dashedSets border-top-style
borderTopStyle dashedSets border-style
borderStyle dashedSets border-bottom-color
borderBottomColor (rgb 101 202 0)Sets border-left-color
borderLeftColor (rgb 101 202 0)Sets border-right-color
borderRightColor (rgb 101 202 0)Sets border-top-color
borderTopColor (rgb 101 202 0)The border-box value for the box-sizing property.
Can also be used as border-box value for the background-clip property.
The content-box value for the box-sizing property.
Can also be used as content-box value for the background-clip property.
Sets border
border (px 10)
border2 (px 10) dashed
border3 (px 10) dashed (rgb 11 14 17)Sets border
border (px 10)
border2 (px 10) dashed
border3 (px 10) dashed (rgb 11 14 17)Sets border
border (px 10)
border2 (px 10) dashed
border3 (px 10) dashed (rgb 11 14 17)Sets border-top
borderTop (px 5)
borderTop2 (px 5) dashed
borderTop3 (px 5) dashed (rgb 11 14 17)Sets border-top
borderTop (px 5)
borderTop2 (px 5) dashed
borderTop3 (px 5) dashed (rgb 11 14 17)Sets border-top
borderTop (px 5)
borderTop2 (px 5) dashed
borderTop3 (px 5) dashed (rgb 11 14 17)Sets border-bottom
borderBottom (px 5)
borderBottom2 (px 5) dashed
borderBottom3 (px 5) dashed (rgb 11 14 17)Sets border-bottom
borderBottom (px 5)
borderBottom2 (px 5) dashed
borderBottom3 (px 5) dashed (rgb 11 14 17)Sets border-bottom
borderBottom (px 5)
borderBottom2 (px 5) dashed
borderBottom3 (px 5) dashed (rgb 11 14 17)Sets border-left
borderLeft (px 5)
borderLeft2 (px 5) dashed
borderLeft3 (px 5) dashed (rgb 11 14 17)Sets border-left
borderLeft (px 5)
borderLeft2 (px 5) dashed
borderLeft3 (px 5) dashed (rgb 11 14 17)Sets border-left
borderLeft (px 5)
borderLeft2 (px 5) dashed
borderLeft3 (px 5) dashed (rgb 11 14 17)Sets border-right
borderRight (px 5)
borderRight2 (px 5) dashed
borderRight3 (px 5) dashed (rgb 11 14 17)Sets border-right
borderRight (px 5)
borderRight2 (px 5) dashed
borderRight3 (px 5) dashed (rgb 11 14 17)Sets border-right
borderRight (px 5)
borderRight2 (px 5) dashed
borderRight3 (px 5) dashed (rgb 11 14 17)Sets border-image-outset
borderImageOutset (int 2)
borderImageOutset2 (int 2) (px 15)
borderImageOutset3 (int 2) (px 15) (int 1.5)
borderImageOutset4 (int 2) (px 15) (int 14) (em 3)Sets border-image-outset
borderImageOutset (int 2)
borderImageOutset2 (int 2) (px 15)
borderImageOutset3 (int 2) (px 15) (int 1.5)
borderImageOutset4 (int 2) (px 15) (int 14) (em 3)Sets border-image-outset
borderImageOutset (int 2)
borderImageOutset2 (int 2) (px 15)
borderImageOutset3 (int 2) (px 15) (int 1.5)
borderImageOutset4 (int 2) (px 15) (int 14) (em 3)Sets border-image-outset
borderImageOutset (int 2)
borderImageOutset2 (int 2) (px 15)
borderImageOutset3 (int 2) (px 15) (int 1.5)
borderImageOutset4 (int 2) (px 15) (int 14) (em 3)Sets border-image-width
borderImageWidth (int 3)
borderImageWidth2 (int 3) (px 15)
borderImageWidth3 (int 3) (px 15) auto
borderImageWidth4 (int 3) (px 15) auto (int 2)Sets border-image-width
borderImageWidth (int 3)
borderImageWidth2 (int 3) (px 15)
borderImageWidth3 (int 3) (px 15) auto
borderImageWidth4 (int 3) (px 15) auto (int 2)Sets border-image-width
borderImageWidth (int 3)
borderImageWidth2 (int 3) (px 15)
borderImageWidth3 (int 3) (px 15) auto
borderImageWidth4 (int 3) (px 15) auto (int 2)Sets border-image-width
borderImageWidth (int 3)
borderImageWidth2 (int 3) (px 15)
borderImageWidth3 (int 3) (px 15) auto
borderImageWidth4 (int 3) (px 15) auto (int 2)The scroll overflow value.
This can also represent a scroll background-attachment value.
It can also be used in the overflow-block and oveflow-line media features.
This can represent:
a visible visibility,
a visible overflow, or
a visible pointer-events value.
Sets the display style to inline-flex
The top property.
position absolute
top (px 5)This can also be used as a top vertical-align value:
verticalAlign topA fixed position value.
This can also represent a fixed background-attachment value.
position fixedThis can also be the fixed value for table-layout.
Sets 'float' float : Float compatible -> Style
float rightThe bottom property.
position absolute
bottom (px 5)This can also be used as a bottom vertical-align value:
verticalAlign bottomThe middle vertical-align value.
verticalAlign middleThe baseline vertical-align value.
verticalAlign baselineThe sub vertical-align value.
verticalAlign subThe super vertical-align value.
verticalAlign superThe text-top vertical-align value.
verticalAlign textTopThe text-bottom vertical-align value.
verticalAlign textBottomA wavy text decoration style.
A dotted border style.
A dashed border style.
A double border style.
A groove border style.
A ridge border style.
An inset border style.
An outset border style.
The [matrix()](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function#matrix()) transform-function.
transform (matrix 0.5 1 1.5 2 2.5 3)The [matrix3d()](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function#matrix3d()) transform-function.
transform (matrix3d 0.5 1 1.5 2 2.5 3 0.5 1 1.5 2 2.5 3 0.5 1 1.5 2 2.5 3 0.5 1 1.5 2 2.5 3)The [perspective()](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function#perspective()) transform-function.
transform (perspective 0.5)The [rotate3d](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function#rotate3d()) transform-function.
transform (rotate3d 1 1 1 (deg 90))The [rotateX](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function#rotateX()) transform-function.
transform (rotateX (deg 90))The [rotateY](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function#rotateY()) transform-function.
transform (rotateY (deg 90))The [rotateZ](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function#rotateZ()) transform-function.
transform (rotateZ (deg 90))The [scale](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function#scale()) transform-function.
transform (scale 0.5)
transform (scale2 0.5 0.7)The [scale](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function#scale()) transform-function.
transform (scale 0.5)
transform (scale2 0.5 0.7)The [scale3d](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function#scale3d()) transform-function.
transform (scale3d 0.5 0.5 1)The [scaleX](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function#scaleX()) transform-function.
transform (scaleX 0.5)The [scaleY](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function#scaleY()) transform-function.
transform (scaleY 0.5)The [skew](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function#skew()) transform-function.
transform (skew (deg 90))
transform (skew2 (deg 90) (deg 45))The [skew](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function#skew()) transform-function.
transform (skew (deg 90))
transform (skew2 (deg 90) (deg 45))The [skewX](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function#skewX()) transform-function.
transform (skewX (deg 90))The [skewY](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function#skewY()) transform-function.
transform (skewY (deg 90))The [translate](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function#translate()) transform-function.
transform (translate (px 100))
transform (translate2 (px 100) (pct -45))The [translate](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function#translate()) transform-function.
transform (translate (px 100))
transform (translate2 (px 100) (pct -45))The [translateX](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function#translateX()) transform-function.
transform (translate3d (px 100) (px 100) (px 100))The [translateX](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function#translateX()) transform-function.
transform (translateX (px 100))The [translateY](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function#translateY()) transform-function.
transform (translateY (px 100))The [translateZ](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function#translateZ()) transform-function.
transform (translateZ (px 100))The [rotate](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function#rotate()) transform-function.
transform (rotate (deg 90))The fill-box value for the transform-box property.
The view-box value for the transform-box property.
The flat value for the transform-style property.
The preserve-3d value for the transform-style property.
The content value for the
flex-basis property.
Thewrap-reverse value for the
flex-wrap property.
Theflex-start value for the
align-items property.
Can also be used with flex-box's justify-content property to apply the value of flex-start.
Theflex-end value for the
align-items property.
Can also be used with flex-box's justify-content property to apply the value of flex-end.
The[row](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction #Values) value for the
flex-direction property.
The[row-reverse](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction #Values) value for the
flex-direction property.
The[column](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction #Values) value for the
flex-direction property.
The[column-reverse](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction #Values) value for the
flex-direction property.
A visiblePainted pointer-events value.
pointer-events: visiblePaintedA visibleFill pointer-events value.
pointer-events: visibleFillA visibleStroke pointer-events value.
pointer-events: visibleStrokeA painted pointer-events value.
pointer-events: paintedA stroke pointer-events value.
pointer-events: strokein units.
(This is inches instead of in because in is a reserved keyword in Elm.)
A unitless integer. Useful with properties like borderImageOutset
which accept either length units or unitless numbers for some properties.
A unitless number. Useful with properties like flexGrow
which accept unitless numbers.
Convenience length value that compiles to 0 with no units.
css [ padding zero ]...compiles to:
padding: 0;The css calc function.
almostPct100 =
calc (pct 100) minus (px 2)
-- calc(100vh - (2px + 2rem))
screenMinusBorderAndFooter =
calc (vh 100) minus (calc (px 2) plus (rem 2))
myWidth =
width almostPct100
myHeight =
height screenMinusBorderAndFooterUsing * and / with calc isn't supported. Use arithmetics from elm instead.
Use with calc to add lengths together
>>> calc (pct 100) plus (px 2)
calc (100% + 2px)Use with calc to subtract lengths from eachother
>>> calc (pct 100) minus (px 2)
calc (100% - 2px)Define a custom pseudo-class.
This can be useful for deprecated pseudo-classes such as -moz-any-link, which
has been deprecated and removed
in modern browsers.
button
[ css [ pseudoClass "-moz-any-link" [ color (hex "f00") ] ] ]
[ text "Whee!" ]...outputs
<button class="f9fcb2">Whee!</button>
<style>
.f9fcb2:-moz-any-link {
color: #f00;
}
</style>An :active
pseudo-class.
An :any
pseudo-class.
An :empty
pseudo-class.
An :enabled
pseudo-class.
An :hover
pseudo-class.
An :visited
pseudo-class.
An :invalid
pseudo-class.
An :nth
pseudo-class.
Define a custom pseudo-element.
textarea
[ css [ pseudoElement "-webkit-scrollbar" [ display none ] ] ]
[]...outputs
<textarea class="d84ff7"></textarea>
<style>
.d84ff7::-webkit-scrollbar {
display: none;
}
</style>For use with font-family
fontFamily serif
fontFamilies [ qt "Gill Sans Extrabold", "Helvetica", .value sansSerif ]The list-style-type property.
The list-style-position property.
The list-style shorthand property.
The list-style shorthand property.
The list-style shorthand property.
Sets linear-gradient
linearGradient (stop2 red <| pct 75) (stop <| hex "222") []
linearGradient (stop red) (stop <| hex "222") [ stop green, stop blue ]Sets linear-gradient
linearGradient2 toBottomLeft (stop2 red <| pct 75) (stop <| hex "222") []
linearGradient2 toTop (stop red) (stop <| hex "222") [ stop green, stop blue ]Sets the direction to bottom left
Sets the direction to bottom right
Sets the direction to top right
Because color is both a common propertie and common value
in CSS (e.g. color: red with and background-blend-mode: color),
we implement it as a property (for the color: red case) and allow it to
be used as a value as well. When being used as a value, we call it, expect
that it will return the desired String as its key, and use that as our value.
(See getOverloadedProperty. Note that VerticalAlign.)
A font family
A ColorValue that does not have red, green, or blue
values.
Because top and bottom are both common properties and common values
in CSS (e.g. top: 5px with position: absolute and vertical-align: top),
we implement it as a property (for the top: 5px case) and allow it to
be used as a value as well. When being used as a value, we call it, expect
that it will return the desired String as its key, and use that as our value.
(See getOverloadedProperty. Note that TextAlign follows a similar pattern.)
The pre white-space value.
whiteSpace preThe pre-line white-space value.
whiteSpace preLineThe pre-wrap white-space value.
whiteSpace preWrapThe url background-image value.
Sets the display style to table-row-group
Sets table-layout property.
tableLayout (auto | fixed | inherit | initial | unset)
Sets the display style to table-header-group
Sets the display style to table-column-group
Sets the display style to table-cell
Sets the display style to table-column
Sets the display style to table-caption
The space background-repeat value.
The soft-light blend-mode.
A separate border-collapse.
The screen blend-mode.
The saturation blend-mode.
The round background-repeat value.
The repeat-y background-repeat value.
The repeat-x background-repeat value.
The repeat background-repeat value.
property-events: fill. This works around the fact that
fill is already taken.
property-events: all. This works around the fact that
all is already taken.
backgroundAttachment fixedbackgroundBlendMode darkenSets 'background-clip'
backgroundClip borderBoxSets 'background-image'
backgroundImage (url "http://www.example.com/chicken.jpg")Sets 'background-origin'
backgroundOrigin borderBoxbackgroundPosition topOnly supports keywords values like "top" or "center". If you want to pass a single length, use backgroundPosition2:
backgroundPosition2 (px 10) zerobackgroundPosition2 (px 10) zeroSets 'background-repeat'
backgroundRepeat repeatXSets 'background-repeat'
backgroundRepeat2 repeat noRepeatSets 'background-size'
backgroundSize coverSets 'background-size'
backgroundSize2 50 % autoThe break-word value for the overflow-wrap property.
A collapse border-collapse.
This can also represent a collapse visibility.
The color-burn blend-mode.
The color-dodge blend-mode.
The contain background-size value.
The cover background-size value.
The darken blend-mode.
The difference blend-mode.
display: flex. This works around the fact that
flex is already taken.
The exclusion blend-mode.
The hard-light blend-mode.
The horizontal value for the resize property.
The hue blend-mode.
Sets the display style to inline-table
The lighten blend-mode.
The local background-attachment value.
The luminosity blend-mode.
The manipulation value for the touch-action property.
The multiply blend-mode.
The no-repeat background-repeat value.
The overlay blend-mode.
The padding-box background-clip value.
The pan-down value for the touch-action property.
The pan-left value for the touch-action property.
The pan-right value for the touch-action property.
The pan-up value for the touch-action property.
The pan-x value for the touch-action property.
The pan-y value for the touch-action property.
The pinch-zoom value for the touch-action property.
See keyframes in the Css.Animations module.
A font size
These are features you might expect to be in elm-css (because they are in the CSS specification) but which have been omitted because their use is either deprecated or discouraged.
The
border width values
of thin, medium, and thick have unspecified behavior according to the
CSS specification, and as such are intentionally unsupported.
Using them is a bad idea, but if the fate of the world depends on it, you can fall back on something like this:
css [ property "border-left" "thin" ]The
border width values
of thin, medium, and thick have unspecified behavior according to the
CSS specification, and as such are intentionally unsupported.
Using them is a bad idea, but if the fate of the world depends on it, you can fall back on something like this:
css [ property "border-left" "thick" ]