Copyright	(C) 2016-2025 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
Colors
Units
Misc
Animation
Media Queries

Description

Module for constructing CSS styles and stylesheets in miso

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
color :: Color -> Style
columnGap :: MisoString -> Style
cssVariable :: MisoString -> Style
cursor :: MisoString -> Style
direction :: MisoString -> Style
display :: MisoString -> Style
fill :: MisoString -> Style
filter :: MisoString -> Style
flexBasis :: MisoString -> Style
flexDirection :: MisoString -> Style
flexFlow :: MisoString -> Style
flexGrow :: MisoString -> Style
flex :: MisoString -> Style
flexShrink :: MisoString -> Style
flexWrap :: MisoString -> Style
fontFamily :: MisoString -> Style
fontSize :: MisoString -> Style
fontStyle :: MisoString -> Style
fontWeight :: MisoString -> Style
gap :: MisoString -> Style
gridAutoColumns :: MisoString -> Style
gridAutoFlow :: MisoString -> Style
gridAutoRows :: MisoString -> Style
gridColumnEnd :: MisoString -> Style
gridColumnSpan :: MisoString -> Style
gridColumnStart :: 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
opacity :: MisoString -> Style
order :: MisoString -> Style
overflow :: MisoString -> Style
overflowX :: MisoString -> Style
overflowY :: 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
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
right :: MisoString -> Style
rowGap :: MisoString -> Style
stroke :: MisoString -> 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
top :: MisoString -> Style
transform :: MisoString -> Style
transformOrigin :: MisoString -> Style
transitionDelay :: MisoString -> Style
transitionDuration :: MisoString -> Style
transition :: MisoString -> Style
transitionProperty :: MisoString -> Style
transitionTimingFunction :: MisoString -> Style
verticalAlign :: MisoString -> Style
visibility :: MisoString -> Style
whiteSpace :: MisoString -> Style
width :: MisoString -> Style
wordBreak :: MisoString -> Style
xAutoFontSize :: MisoString -> Style
xAutoFontSizePresetSizes :: MisoString -> Style
xHandleColor :: Color -> Style
xHandleSize :: MisoString -> Style
zIndex :: MisoString -> 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 -> [(MisoString, [Style])] -> Styles
media_ :: MisoString -> [(MisoString, [Style])] -> Styles

Types

module Miso.CSS.Types

Smart Constructor

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

style_ is an attribute that will set the style attribute of the associated DOM node to attrs.

style attributes not contained in attrs will be deleted.

import qualified Data.Map as M
div_ [ style_ [ backgroundColor "red" ] [ ]

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

styleInline_ :: MisoString -> Attribute action Source #

Set "style" property

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

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

sheet_ :: [Styles] -> StyleSheet Source #

Smart constructor for StyleSheet

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

Used when constructing a StyleSheet

sheet_
  [ selector_ ".name"
    [ backgroundColor red
    , alignContent "top"
    ]
  ]

Font sizing in terms of *px*

>>> px 10
"10px"

ppx :: Double -> MisoString Source #

ppx unit of measure

pct :: Double -> MisoString Source #

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 #

CSS function for specifying a URL

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

matrix :: Double -> Double -> Double -> Double -> Double -> Double -> MisoString Source #

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

Animation

keyframes_ :: MisoString -> [(MisoString, [Style])] -> Styles Source #

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

testKeyFrame :: Styles
testKeyFrame = keyframes "slide-in"
  [ "from" =:
      [ transform "translateX(0%)"
      ]
  , "to" =:
      [ transform "translateX(100%)"
      , backgroundColor red
      , backgroundSize "10px"
      , backgroundRepeat "true"
      ]
  , pct 10 =:
    [ "foo" =: "bar"
    ]
 ]

Media Queries

media_ :: MisoString -> [(MisoString, [Style])] -> Styles Source #

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

media_ "screen and (min-width: 480px)"
  [ "header" =:
      [ height "auto"
      ]
  , "ul" =:
      [ display "block"
      ]
  ]

Types

Smart Constructor

Render

Combinators

Colors

Units

Misc

Animation

Media Queries