Copyright	(C) 2016-2026 David M. Johnson
License	BSD3-style (see the file LICENSE)
Maintainer	David M. Johnson <code@dmj.io>
Stability	experimental
Portability	non-portable
Safe Haskell	None
Language	Haskell2010

Miso.CSS

Contents

Types
Smart Constructor
Render
Combinators
Transform functions
Colors
Units
Misc
Animation
Media Queries
Media query combinators

Description

Overview

Miso.CSS is a typed DSL for constructing CSS properties, stylesheets, animations, and media queries in miso applications. Two styling modes are available:

Structured styles (style_): CSS properties are stored in a Map and diffed by the virtual DOM, so only changed properties are written to the DOM node on each render. Prefer this for dynamic styles.
Inline string styles (styleInline_): a raw CSS string is set on the style attribute verbatim and is not diffed. Useful for static one-liners or values that the structured combinators do not yet cover.

Quick start

import qualified Miso.CSS       as CSS
import           Miso.CSS.Color (red, rgba)

myView :: View Model Action
myView =
  div_
    [ CSS.style_
        [ CSS.display        "flex"
        , CSS.flexDirection  "column"
        , CSS.gap            (CSS.px 8)
        , CSS.padding        (CSS.px 16)
        , CSS.backgroundColor red
        , CSS.borderRadius   (CSS.px 4)
        ]
    ] [ text "Hello, miso!" ]

Global Stylesheets

Construct a StyleSheet with sheet_ and selector_, then render it to a MisoString with renderStyleSheet for injection into a <style> tag:

mySheet :: StyleSheet
mySheet = sheet_
  [ selector_ "body"
      [ CSS.margin     (CSS.px 0)
      , CSS.fontFamily "sans-serif"
      ]
  , selector_ ".card"
      [ CSS.backgroundColor (rgba 255 255 255 0.9)
      , CSS.borderRadius    (CSS.px 4)
      ]
  ]

Animations and Media Queries

myAnimation :: Styles
myAnimation = keyframes_ "slide-in"
  [ from_ [ CSS.transform "translateX(-100%)" ]
  , to_   [ CSS.transform "translateX(0)" ]
  ]

myMedia :: Styles
myMedia = media_ (screen_ `and_` minWidth_ (CSS.px 480))
  [ rule_ "header" [ CSS.height "auto" ]
  , rule_ "nav"    [ CSS.display "flex" ]
  ]

CSS Units

Use the unit helpers to build length and time values: px, pt, em, rem, vh, vw, pct, ms, s, deg, rad, turn.

CSS.style_
  [ CSS.width      (CSS.pct 100)
  , CSS.fontSize   (CSS.rem 1.5)
  , CSS.transition ("opacity " <> CSS.ms 300 <> " ease")
  ]

Colors

The Color type and named colors are re-exported from Miso.CSS.Color:

CSS.backgroundColor (CSS.rgb 30 144 255)
CSS.color           CSS.white
CSS.borderColor     (CSS.rgba 0 0 0 0.2)

Note: color in this module and color share the same name but have different types. Always qualify import qualified Miso.CSS as CSS when also importing Miso.Canvas.

Synopsis

module Miso.CSS.Types
style_ :: [Style] -> Attribute action
styleInline_ :: MisoString -> Attribute action
sheet_ :: [Styles] -> StyleSheet
selector_ :: MisoString -> [Style] -> Styles
renderStyleSheet :: StyleSheet -> MisoString
alignContent :: MisoString -> Style
alignItems :: MisoString -> Style
alignSelf :: MisoString -> Style
animationDelay :: MisoString -> Style
animationDirection :: MisoString -> Style
animationDuration :: MisoString -> Style
animationFillMode :: MisoString -> Style
animationIterationCount :: MisoString -> Style
animation :: MisoString -> Style
animationName :: MisoString -> Style
animationPlayState :: MisoString -> Style
animationTimingFunction :: MisoString -> Style
aspectRatio :: MisoString -> Style
backgroundClip :: MisoString -> Style
backgroundColor :: Color -> Style
backgroundImage :: MisoString -> Style
background :: MisoString -> Style
backgroundOrigin :: MisoString -> Style
backgroundPosition :: MisoString -> Style
backgroundRepeat :: MisoString -> Style
backgroundSize :: MisoString -> Style
borderBottomColor :: Color -> Style
borderBottomLeftRadius :: MisoString -> Style
borderBottom :: MisoString -> Style
borderBottomRightRadius :: MisoString -> Style
borderBottomStyle :: MisoString -> Style
borderBottomWidth :: MisoString -> Style
borderCollapse :: MisoString -> Style
borderColor :: Color -> Style
borderEndEndRadius :: MisoString -> Style
borderEndStartRadius :: MisoString -> Style
borderInlineEndColor :: Color -> Style
borderInlineEndStyle :: MisoString -> Style
borderInlineEndWidth :: MisoString -> Style
borderInlineStartColor :: Color -> Style
borderInlineStartStyle :: MisoString -> Style
borderInlineStartWidth :: MisoString -> Style
borderLeftColor :: Color -> Style
borderLeft :: MisoString -> Style
borderLeftStyle :: MisoString -> Style
borderLeftWidth :: MisoString -> Style
border :: MisoString -> Style
borderRadius :: MisoString -> Style
borderRightColor :: Color -> Style
borderRight :: MisoString -> Style
borderRightStyle :: MisoString -> Style
borderRightWidth :: MisoString -> Style
borderStartEndRadius :: MisoString -> Style
borderStartStartRadius :: MisoString -> Style
borderStyle :: MisoString -> Style
borderTopColor :: Color -> Style
borderTopLeftRadius :: MisoString -> Style
borderTop :: MisoString -> Style
borderTopRightRadius :: MisoString -> Style
borderTopStyle :: MisoString -> Style
borderTopWidth :: MisoString -> Style
borderWidth :: MisoString -> Style
bottom :: MisoString -> Style
boxShadow :: MisoString -> Style
boxSizing :: MisoString -> Style
clipPath :: MisoString -> Style
accentColor :: Color -> Style
appearance :: MisoString -> Style
backdropFilter :: MisoString -> Style
caretColor :: Color -> Style
color :: Color -> Style
columnGap :: MisoString -> Style
cursor :: MisoString -> Style
direction :: MisoString -> Style
display :: MisoString -> Style
fill :: Color -> Style
filter :: MisoString -> Style
flexBasis :: MisoString -> Style
flexDirection :: MisoString -> Style
flexFlow :: MisoString -> Style
flexGrow :: Double -> Style
flex :: MisoString -> Style
flexShrink :: Double -> Style
flexWrap :: MisoString -> Style
fontFamily :: MisoString -> Style
fontSize :: MisoString -> Style
fontStretch :: MisoString -> Style
fontStyle :: MisoString -> Style
fontVariant :: MisoString -> Style
fontWeight :: MisoString -> Style
gap :: MisoString -> Style
gridAutoColumns :: MisoString -> Style
gridAutoFlow :: MisoString -> Style
gridAutoRows :: MisoString -> Style
gridColumn :: MisoString -> Style
gridColumnEnd :: MisoString -> Style
gridColumnSpan :: MisoString -> Style
gridColumnStart :: MisoString -> Style
gridRow :: MisoString -> Style
gridRowEnd :: MisoString -> Style
gridRowSpan :: MisoString -> Style
gridRowStart :: MisoString -> Style
gridTemplateColumns :: MisoString -> Style
gridTemplateRows :: MisoString -> Style
height :: MisoString -> Style
imageRendering :: MisoString -> Style
insetInlineEnd :: MisoString -> Style
insetInlineStart :: MisoString -> Style
justifyContent :: MisoString -> Style
justifyItems :: MisoString -> Style
justifySelf :: MisoString -> Style
left :: MisoString -> Style
letterSpacing :: MisoString -> Style
linearCrossGravity :: MisoString -> Style
linearDirection :: MisoString -> Style
linearGravity :: MisoString -> Style
linearLayoutGravity :: MisoString -> Style
linearWeight :: MisoString -> Style
linearWeightSum :: MisoString -> Style
lineHeight :: MisoString -> Style
marginBottom :: MisoString -> Style
marginInlineEnd :: MisoString -> Style
marginInlineStart :: MisoString -> Style
marginLeft :: MisoString -> Style
margin :: MisoString -> Style
marginRight :: MisoString -> Style
marginTop :: MisoString -> Style
maskImage :: MisoString -> Style
mask :: MisoString -> Style
maxHeight :: MisoString -> Style
maxWidth :: MisoString -> Style
minHeight :: MisoString -> Style
minWidth :: MisoString -> Style
mixBlendMode :: MisoString -> Style
objectFit :: MisoString -> Style
objectPosition :: MisoString -> Style
opacity :: Double -> Style
order :: Int -> Style
outline :: MisoString -> Style
outlineColor :: Color -> Style
outlineOffset :: MisoString -> Style
outlineStyle :: MisoString -> Style
outlineWidth :: MisoString -> Style
overflow :: MisoString -> Style
overflowX :: MisoString -> Style
overflowY :: MisoString -> Style
overscrollBehavior :: MisoString -> Style
paddingBottom :: MisoString -> Style
paddingInlineEnd :: MisoString -> Style
paddingInlineStart :: MisoString -> Style
paddingLeft :: MisoString -> Style
padding :: MisoString -> Style
paddingRight :: MisoString -> Style
paddingTop :: MisoString -> Style
perspective :: MisoString -> Style
pointerEvents :: MisoString -> Style
position :: MisoString -> Style
relativeAlignBottom :: MisoString -> Style
relativeAlignInlineEnd :: MisoString -> Style
relativeAlignInlineStart :: MisoString -> Style
relativeAlignLeft :: MisoString -> Style
relativeAlignRight :: MisoString -> Style
relativeAlignTop :: MisoString -> Style
relativeBottomOf :: MisoString -> Style
relativeCenter :: MisoString -> Style
relativeId :: MisoString -> Style
relativeInlineEndOf :: MisoString -> Style
relativeInlineStartOf :: MisoString -> Style
relativeLayoutOnce :: MisoString -> Style
relativeLeftOf :: MisoString -> Style
relativeRightOf :: MisoString -> Style
relativeTopOf :: MisoString -> Style
resize :: MisoString -> Style
right :: MisoString -> Style
rowGap :: MisoString -> Style
scrollBehavior :: MisoString -> Style
stroke :: Color -> Style
strokeWidth :: MisoString -> Style
textAlign :: MisoString -> Style
textDecoration :: MisoString -> Style
textIndent :: MisoString -> Style
textOverflow :: MisoString -> Style
textShadow :: MisoString -> Style
textStrokeColor :: Color -> Style
textStroke :: MisoString -> Style
textStrokeWidth :: MisoString -> Style
textTransform :: MisoString -> Style
top :: MisoString -> Style
transform :: MisoString -> Style
transforms :: [TransformFn] -> Style
transformOrigin :: MisoString -> Style
translate :: MisoString -> MisoString -> TransformFn
translateX :: MisoString -> TransformFn
translateY :: MisoString -> TransformFn
translateZ :: MisoString -> TransformFn
translate3d :: MisoString -> MisoString -> MisoString -> TransformFn
rotate :: MisoString -> TransformFn
rotateX :: MisoString -> TransformFn
rotateY :: MisoString -> TransformFn
rotateZ :: MisoString -> TransformFn
rotate3d :: Double -> Double -> Double -> MisoString -> TransformFn
scale :: Double -> TransformFn
scaleXY :: Double -> Double -> TransformFn
scale3d :: Double -> Double -> Double -> TransformFn
scaleX :: Double -> TransformFn
scaleY :: Double -> TransformFn
scaleZ :: Double -> TransformFn
perspectiveFn :: MisoString -> TransformFn
matrix3d :: (Double, Double, Double, Double) -> (Double, Double, Double, Double) -> (Double, Double, Double, Double) -> (Double, Double, Double, Double) -> TransformFn
skew :: MisoString -> MisoString -> TransformFn
skewX :: MisoString -> TransformFn
skewY :: MisoString -> TransformFn
transitionDelay :: MisoString -> Style
transitionDuration :: MisoString -> Style
transition :: MisoString -> Style
transitionProperty :: MisoString -> Style
transitionTimingFunction :: MisoString -> Style
userSelect :: MisoString -> Style
verticalAlign :: MisoString -> Style
visibility :: MisoString -> Style
whiteSpace :: MisoString -> Style
width :: MisoString -> Style
willChange :: MisoString -> Style
wordBreak :: MisoString -> Style
xAutoFontSize :: MisoString -> Style
xAutoFontSizePresetSizes :: MisoString -> Style
xHandleColor :: Color -> Style
xHandleSize :: MisoString -> Style
zIndex :: Int -> Style
module Miso.CSS.Color
px :: Int -> MisoString
ppx :: Double -> MisoString
pct :: Double -> MisoString
pt :: Int -> MisoString
vw :: Double -> MisoString
vh :: Double -> MisoString
deg :: Double -> MisoString
turn :: Double -> MisoString
rad :: Double -> MisoString
rpx :: Double -> MisoString
rem :: Double -> MisoString
em :: Double -> MisoString
s :: Double -> MisoString
ms :: Double -> MisoString
url :: MisoString -> MisoString
matrix :: Double -> Double -> Double -> Double -> Double -> Double -> MisoString
keyframes_ :: MisoString -> [KeyframeStop] -> Styles
from_ :: [Style] -> KeyframeStop
to_ :: [Style] -> KeyframeStop
at :: MisoString -> [Style] -> KeyframeStop
media_ :: MediaQuery -> [MediaRule] -> Styles
rule_ :: MisoString -> [Style] -> MediaRule
screen_ :: MediaQuery
print_ :: MediaQuery
all_ :: MediaQuery
and_ :: MediaQuery -> MediaQuery -> MediaQuery
or_ :: MediaQuery -> MediaQuery -> MediaQuery
not_ :: MediaQuery -> MediaQuery
minWidth_ :: MisoString -> MediaQuery
maxWidth_ :: MisoString -> MediaQuery
minHeight_ :: MisoString -> MediaQuery
maxHeight_ :: MisoString -> MediaQuery
orientation_ :: MisoString -> MediaQuery
prefersColorScheme_ :: MisoString -> MediaQuery
prefersReducedMotion_ :: MisoString -> MediaQuery
hover_ :: MisoString -> MediaQuery

Smart Constructor

style_ :: [Style] -> Attribute action Source #

Constructs a structured style attribute from a list of CSS properties.

Each Style is a (property, value) pair produced by the combinators in this module. Miso tracks the properties as a Map, diffs them on each render, and applies only the changed properties to the DOM. Properties absent from the list are removed from the node.

div_
  [ style_
      [ display       "flex"
      , flexDirection "column"
      , gap           (px 8)
      , backgroundColor red
      ]
  ] []

See also styleInline_ for setting raw CSS strings.

https://developer.mozilla.org/en-US/docs/Web/CSS

styleInline_ :: MisoString -> Attribute action Source #

Sets the style attribute to a raw CSS string.

Unlike style_, the string is applied verbatim and is not tracked or diffed by the virtual DOM. Suitable for static styles or CSS values that the structured combinators do not yet cover.

div_ [ styleInline_ "background-color:red; color:blue;" ] [ "foo" ]

https://developer.mozilla.org/en-US/docs/Web/CSS

sheet_ :: [Styles] -> StyleSheet Source #

Constructs a StyleSheet from a list of Styles entries.

Combine with selector_, keyframes_, and media_ to build a full stylesheet, then render it to a MisoString with renderStyleSheet.

mySheet :: StyleSheet
mySheet = sheet_
  [ selector_ "body"   [ margin (px 0), fontFamily "sans-serif" ]
  , selector_ "button" [ cursor "pointer", borderRadius (px 4) ]
  ]

selector_ :: MisoString -> [Style] -> Styles Source #

Constructs a Styles entry pairing a CSS selector with a list of properties. Combine multiple entries with sheet_.

sheet_
  [ selector_ ".card"  [ backgroundColor white, borderRadius (px 4) ]
  , selector_ ".title" [ fontSize (rem 1.5), fontWeight "bold" ]
  ]

Render

renderStyleSheet :: StyleSheet -> MisoString Source #

Renders a StyleSheet to a MisoString suitable for injection into a <style> tag.

view_ :: View model action
view_ = style [] [ text (renderStyleSheet mySheet) ]

Combinators

alignContent :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/align-content

alignItems :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/align-items

alignSelf :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/align-self

animationDelay :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/animation-delay

animationDirection :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/animation-direction

animationDuration :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/animation-duration

animationFillMode :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode

animationIterationCount :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/animation-iteration-count

animation :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/animation

animationName :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/animation-name

animationPlayState :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/animation-play-state

animationTimingFunction :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timing-function

aspectRatio :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio

backgroundClip :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip

backgroundColor :: Color -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/background-color

backgroundImage :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/background-image

background :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/background

backgroundOrigin :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/background-origin

backgroundPosition :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/background-position

backgroundRepeat :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat

backgroundSize :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

borderBottomColor :: Color -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-color

borderBottomLeftRadius :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-left-radius

borderBottom :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom

borderBottomRightRadius :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-right-radius

borderBottomStyle :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-style

borderBottomWidth :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-width

borderCollapse :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/border-collapse

borderColor :: Color -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/border-color

borderEndEndRadius :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/border-end-radius

borderEndStartRadius :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/border-end-start-radius

borderInlineEndColor :: Color -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-end-color

borderInlineEndStyle :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-end-style

borderInlineEndWidth :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-end-width

borderInlineStartColor :: Color -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-start-color

borderInlineStartStyle :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-start-style

borderInlineStartWidth :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-start-width

borderLeftColor :: Color -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-color

borderLeft :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/border-left

borderLeftStyle :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-style

borderLeftWidth :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-width

border :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/border

borderRadius :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius

borderRightColor :: Color -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-color

borderRight :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/border-right

borderRightStyle :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-style

borderRightWidth :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-width

borderStartEndRadius :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/border-start-end-radius

borderStartStartRadius :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/border-start-start-radius

borderStyle :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/border-style

borderTopColor :: Color -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-color

borderTopLeftRadius :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-left-radius

borderTop :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/border-top

borderTopRightRadius :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-right-radius

borderTopStyle :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-style

borderTopWidth :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-width

borderWidth :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/border-width

bottom :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/bottom

boxShadow :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow

boxSizing :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

clipPath :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path

accentColor :: Color -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/accent-color

appearance :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/appearance

backdropFilter :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter

caretColor :: Color -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/caret-color

color :: Color -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/color

columnGap :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap

cursor :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/cursor

direction :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/direction

display :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/display

fill :: Color -> Style Source #

SVG fill color.

fill red

filter :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/filter

flexBasis :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis

flexDirection :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction

flexFlow :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/flex-flow

flexGrow :: Double -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow

flex :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/flex

flexShrink :: Double -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink

flexWrap :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap

fontFamily :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/font-family

fontSize :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/font-size

fontStretch :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/font-stretch

fontStyle :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/font-style

fontVariant :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant

fontWeight :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight

gap :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/gap

gridAutoColumns :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-columns

gridAutoFlow :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow

gridAutoRows :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-rows

gridColumn :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column

gridColumnEnd :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end

gridColumnSpan :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-span

gridColumnStart :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start

gridRow :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row

gridRowEnd :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end

gridRowSpan :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-span

gridRowStart :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start

gridTemplateColumns :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns

gridTemplateRows :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows

height :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/height

imageRendering :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering

insetInlineEnd :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline-end

insetInlineStart :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline-start

justifyContent :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content

justifyItems :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items

justifySelf :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self

left :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/left

letterSpacing :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing

linearCrossGravity :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/linear-cross-gravity

linearDirection :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/linear-direction

linearGravity :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gravity

linearLayoutGravity :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/linear-layout-gravity

linearWeight :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/linear-weight

linearWeightSum :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/linear-weight-sum

lineHeight :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/line-height

marginBottom :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom

marginInlineEnd :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/margin-inline-end

marginInlineStart :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/margin-inline-start

marginLeft :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left

margin :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/margin

marginRight :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right

marginTop :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top

maskImage :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/mask-image

mask :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/mask

maxHeight :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/max-height

maxWidth :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/max-width

minHeight :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/min-height

minWidth :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/min-width

mixBlendMode :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode

objectFit :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

objectPosition :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/object-position

opacity :: Double -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/opacity

order :: Int -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/order

outline :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/outline

outlineColor :: Color -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/outline-color

outlineOffset :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/outline-offset

outlineStyle :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/outline-style

outlineWidth :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/outline-width

overflow :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/overflow

overflowX :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-x

overflowY :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-y

overscrollBehavior :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior

paddingBottom :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom

paddingInlineEnd :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/padding-inline-end

paddingInlineStart :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/padding-inline-start

paddingLeft :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/padding-left

padding :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/padding

paddingRight :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/padding-right

paddingTop :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top

perspective :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/perspective

pointerEvents :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events

position :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/position

relativeAlignBottom :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/relative-align-bottom

relativeAlignInlineEnd :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/relative-align-inline-end

relativeAlignInlineStart :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/relative-align-inline-start

relativeAlignLeft :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/relative-align-left

relativeAlignRight :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/relative-align-right

relativeAlignTop :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/relative-align-top

relativeBottomOf :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/relative-bottom-of

relativeCenter :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/relative-center

relativeId :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/relative-id

relativeInlineEndOf :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/relative-inline-end-of

relativeInlineStartOf :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/relative-inline-start-of

relativeLayoutOnce :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/relative-layout-once

relativeLeftOf :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/relative-left-of

relativeRightOf :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/relative-right-of

relativeTopOf :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/relative-top-of

resize :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/resize

right :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/right

rowGap :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap

scrollBehavior :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior

stroke :: Color -> Style Source #

SVG stroke color.

stroke black

strokeWidth :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/stroke-width

textAlign :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/text-align

textDecoration :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration

textIndent :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/text-indent

textOverflow :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow

textShadow :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow

textStrokeColor :: Color -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/text-stroke-color

textStroke :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/text-stroke

textStrokeWidth :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/text-stroke-width

textTransform :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform

top :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/top

transform :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/transform

transforms :: [TransformFn] -> Style Source #

Apply a list of TransformFn values as a transform style.

transforms [ translate (px 10) (pct 50), rotate (deg 45), scaleX 1.5 ]

transformOrigin :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin

Transform functions

translate :: MisoString -> MisoString -> TransformFn Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translate

>>> renderTransformFn (translate (px 10) (pct 50))
"translate(10px,50.0%)"

translateX :: MisoString -> TransformFn Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translateX

translateY :: MisoString -> TransformFn Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translateY

translateZ :: MisoString -> TransformFn Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translateZ

translate3d :: MisoString -> MisoString -> MisoString -> TransformFn Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translate3d

rotate :: MisoString -> TransformFn Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotate

>>> renderTransformFn (rotate (deg 45))
"rotate(45.0deg)"

rotateX :: MisoString -> TransformFn Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotateX

rotateY :: MisoString -> TransformFn Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotateY

rotateZ :: MisoString -> TransformFn Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotateZ

rotate3d :: Double -> Double -> Double -> MisoString -> TransformFn Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotate3d x, y, z are unitless direction vector components; angle uses a unit constructor like deg.

scale :: Double -> TransformFn Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale Uniform scale on both axes.

>>> renderTransformFn (scale 1.5)
"scale(1.5)"

scaleXY :: Double -> Double -> TransformFn Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale Non-uniform scale: separate X and Y factors.

scale3d :: Double -> Double -> Double -> TransformFn Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale3d

scaleX :: Double -> TransformFn Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scaleX

scaleY :: Double -> TransformFn Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scaleY

scaleZ :: Double -> TransformFn Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scaleZ

perspectiveFn :: MisoString -> TransformFn Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/perspective The perspective() transform function, distinct from the perspective CSS property.

>>> renderTransformFn (perspectiveFn (px 500))
"perspective(500px)"

matrix3d :: (Double, Double, Double, Double) -> (Double, Double, Double, Double) -> (Double, Double, Double, Double) -> (Double, Double, Double, Double) -> TransformFn Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/matrix3d 4x4 homogeneous matrix in column-major order; each tuple is one column.

matrix3d (1,0,0,0) (0,1,0,0) (0,0,1,0) (10,20,0,1)

skew :: MisoString -> MisoString -> TransformFn Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/skew

skewX :: MisoString -> TransformFn Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/skewX

skewY :: MisoString -> TransformFn Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/skewY

transitionDelay :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/transition-delay

transitionDuration :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/transition-duration

transition :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/transition

transitionProperty :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/transition-property

transitionTimingFunction :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function

userSelect :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/user-select

verticalAlign :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align

visibility :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/visibility

whiteSpace :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

width :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/width

willChange :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/will-change

wordBreak :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/word-break

xAutoFontSize :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/xAutoFontSize

xAutoFontSizePresetSizes :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/xAutoFontSizePresetSizes

xHandleColor :: Color -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/xHandleColor

xHandleSize :: MisoString -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/xHandleSize

zIndex :: Int -> Style Source #

https://developer.mozilla.org/en-US/docs/Web/CSS/z-index

Colors

module Miso.CSS.Color

Units

px :: Int -> MisoString Source #

Font sizing in terms of *px*

>>> px 10
"10px"

ppx :: Double -> MisoString Source #

Physical pixel unit (ppx), used in some native/mobile rendering contexts.

>>> ppx 2.0
"2.0ppx"

pct :: Double -> MisoString Source #

Percentage unit.

>>> pct 50.0
"50.0%"

https://developer.mozilla.org/en-US/docs/Web/CSS/percentage

pt :: Int -> MisoString Source #

Font sizing in terms of *pt*

>>> pt 10
"10pt"

vw :: Double -> MisoString Source #

Viewport width

>>> vw 10.0
"10.0vw"

vh :: Double -> MisoString Source #

Viewport height

>>> vh 10.0
"10.0vh"

deg :: Double -> MisoString Source #

Degree specification

>>> deg 10
"10deg"

turn :: Double -> MisoString Source #

Turn constructor, useful for specifying rotations

>>> turn 10.0
"10.0turn"

rad :: Double -> MisoString Source #

Radial constructor

>>> rad 10.0
"10.0rad"

rpx :: Double -> MisoString Source #

Responsive pixel sizing, *rpx*

>>> rpx 10.0
"10.0rpx"

rem :: Double -> MisoString Source #

Relative *em* sizing

>>> rem 10.0
"10.0rem"

em :: Double -> MisoString Source #

em* sizing

>>> em 10.0
"10.0em"

s :: Double -> MisoString Source #

Duration in seconds

>>> s 10.0
"10.0s"

ms :: Double -> MisoString Source #

Duration in milliseconds

>>> ms 10.0
"10.0ms"

Misc

url :: MisoString -> MisoString Source #

Wraps a value in the CSS url() function, used for background images and similar.

>>> url "dog.png"
"url(dog.png)"

backgroundImage (url "banner.png")

https://developer.mozilla.org/en-US/docs/Web/CSS/url

matrix Source #

Arguments

:: Double	a — scale x
-> Double	b — skew y
-> Double	c — skew x
-> Double	d — scale y
-> Double	tx — translate x
-> Double	ty — translate y
-> MisoString

Constructs a 2D CSS transformation matrix string: matrix(a, b, c, d, tx, ty).

The six parameters define a 2D affine transformation: a and d scale, b and c skew, and tx/ty translate.

transform (matrix 1 0 0 1 50 100)  -- translate by (50, 100)

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/matrix

Animation

keyframes_ :: MisoString -> [KeyframeStop] -> Styles Source #

Constructs a CSS @keyframes animation rule.

The first argument is the animation name; the second is a list of (keyframe-selector, [Style]) pairs. Keyframe selectors are either "from"/"to" or a percentage string produced by pct.

slideIn :: Styles
slideIn = keyframes_ "slide-in"
  [ from_ [ transform "translateX(-100%)" ]
  , at (pct 50) [ opacity 0.5 ]
  , to_   [ transform "translateX(0)" ]
  ]

https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes

from_ :: [Style] -> KeyframeStop Source #

The from stop in a 'keyframes' rule (equivalent to 0%@).

to_ :: [Style] -> KeyframeStop Source #

The to stop in a 'keyframes' rule (equivalent to 100%@).

at :: MisoString -> [Style] -> KeyframeStop Source #

A keyframe stop at a given position, typically built with pct.

at (pct 50) [ opacity 0.5 ]

Media Queries

media_ :: MediaQuery -> [MediaRule] -> Styles Source #

Constructs a CSS @media query rule.

The first argument is the media condition string; the second is a list of (selector, [Style]) pairs scoped to that query.

responsive :: Styles
responsive = media_ (screen_ `and_` minWidth_ (px 480))
  [ rule_ "header" [ height "auto" ]
  , rule_ "ul"     [ display "block" ]
  ]

https://developer.mozilla.org/en-US/docs/Web/CSS/@media

rule_ :: MisoString -> [Style] -> MediaRule Source #

A selector rule inside a media_ block.