Clay

Rendering stylesheets to CSS.

render :: Css -> Text

Render a stylesheet with the default configuration. The pretty printer is used by default.

renderWith :: Config -> [App] -> Css -> Text

Render a stylesheet with a custom configuration and an optional outer scope.

putCss :: Css -> IO ()

Render to CSS using the default configuration (pretty) and directly print to the standard output.

pretty :: Config

Configuration to print to a pretty human readable CSS output.

compact :: Config

Configuration to print to a compacted unreadable CSS output.

renderSelector :: Selector -> Text

Render a single CSS Selector.

The Css monad for collecting style rules.

type Css = StyleM ()

The Css context is used to collect style rules which are mappings from selectors to style properties. The Css type is a computation in the StyleM monad that just collects and doesn't return anything.

(?) :: Selector -> Css -> Css infixr 5

Assign a stylesheet to a selector. When the selector is nested inside an outer scope it will be composed with deep.

(<?) :: Selector -> Css -> Css infixr 5

Assign a stylesheet to a selector. When the selector is nested inside an outer scope it will be composed with |>.

(&) :: Refinement -> Css -> Css infixr 5

Assign a stylesheet to a filter selector. When the selector is nested inside an outer scope it will be composed with the with selector.

root :: Selector -> Css -> Css

Root is used to add style rules to the top scope.

pop :: Int -> Css -> Css

Pop is used to add style rules to selectors defined in an outer scope. The counter specifies how far up the scope stack we want to add the rules.

(-:) :: Key Text -> Text -> Css infix 4

The colon operator can be used to add style rules to the current context for which there is no embedded version available. Both the key and the value are plain text values and rendered as is to the output CSS.

Comments

It is occasionally useful to output comments in the generated css. commenting appends comments (surrounded by ' /* ' and ' */') to the values of the supplied Css as

key: value /* comment */;

Placing the comments before the semicolon ensures they are obviously grouped with the preceding value when rendered compactly.

Note that every generated line in the generated content will feature the comment.

An empty comment generates '* *'.

commenting :: CommentText -> Css -> Css infixl 3

Annotate the supplied Css with the supplied comment. Comments work with OverloadedStrings. This will annotate every non-nested value.

The selector language.

type Selector = Fix SelectorF

data Refinement

Instances

IsString Refinement

Defined in Clay.Selector

Methods

fromString :: String -> Refinement

Monoid Refinement

Defined in Clay.Selector

Methods

mempty :: Refinement

mappend :: Refinement -> Refinement -> Refinement

mconcat :: [Refinement] -> Refinement

Semigroup Refinement

Defined in Clay.Selector

Methods

(<>) :: Refinement -> Refinement -> Refinement

sconcat :: NonEmpty Refinement -> Refinement

stimes :: Integral b => b -> Refinement -> Refinement

Show Refinement

Defined in Clay.Selector

Methods

showsPrec :: Int -> Refinement -> ShowS

show :: Refinement -> String

showList :: [Refinement] -> ShowS

Elements selectors.

star :: Selector

The star selector applies to all elements. Maps to * in CSS.

element :: Text -> Selector

Select elements by name. The preferred syntax is to enable OverloadedStrings and actually just use "element-name" or use one of the predefined elements from Clay.Elements.

(**) :: Selector -> Selector -> Selector

The deep selector composer. Maps to sel1 sel2 in CSS.

(|>) :: Selector -> Selector -> Selector

The child selector composer. Maps to sel1 > sel2 in CSS.

(#) :: Selector -> Refinement -> Selector

The filter selector composer, adds a filter to a selector. Maps to something like sel#filter or sel.filter in CSS, depending on the filter.

(|+) :: Selector -> Selector -> Selector

The adjacent selector composer. Maps to sel1 + sel2 in CSS.

(|~) :: Selector -> Selector -> Selector

The general sibling selector composer. Maps to sel1 ~ sel2 in CSS.

Refining selectors.

byId :: Text -> Refinement

Filter elements by id. The preferred syntax is to enable OverloadedStrings and use "#id-name".

byClass :: Text -> Refinement

Filter elements by class. The preferred syntax is to enable OverloadedStrings and use ".class-name".

pseudo :: Text -> Refinement

Filter elements by pseudo selector or pseudo class. The preferred syntax is to enable OverloadedStrings and use ":pseudo-selector" or use one of the predefined ones from Clay.Pseudo.

func :: Text -> [Text] -> Refinement

Filter elements by pseudo selector functions. The preferred way is to use one of the predefined functions from Clay.Pseudo.

Attribute based refining.

attr :: Text -> Refinement

Filter elements based on the presence of a certain attribute. The preferred syntax is to enable OverloadedStrings and use "@attr" or use one of the predefined ones from Clay.Attributes.

(@=) :: Text -> Text -> Refinement

Filter elements based on the presence of a certain attribute with the specified value.

(^=) :: Text -> Text -> Refinement

Filter elements based on the presence of a certain attribute that begins with the selected value.

($=) :: Text -> Text -> Refinement

Filter elements based on the presence of a certain attribute that ends with the specified value.

(*=) :: Text -> Text -> Refinement

Filter elements based on the presence of a certain attribute that contains the specified value as a substring.

(~=) :: Text -> Text -> Refinement

Filter elements based on the presence of a certain attribute that have the specified value contained in a space separated list.

(|=) :: Text -> Text -> Refinement

Filter elements based on the presence of a certain attribute that have the specified value contained in a hyphen separated list.

Apply media queries.

Because a large part of the names export by Clay.Media clash with names export by other modules we don't re-export it here and recommend you to import the module qualified.

query :: MediaType -> [Feature] -> Css -> Css

Apply a set of style rules when the media type and feature queries apply.

queryNot :: MediaType -> [Feature] -> Css -> Css

Apply a set of style rules when the media type and feature queries do not apply.

queryOnly :: MediaType -> [Feature] -> Css -> Css

Apply a set of style rules only when the media type and feature queries apply.

Apply key-frame animation.

keyframes :: Text -> [(Number, Css)] -> Css

keyframesFromTo :: Text -> Css -> Css -> Css

Define font-faces.

fontFace :: Css -> Css

Define a new font-face.

!important

important :: Css -> Css

Indicate the supplied css should override css declarations that would otherwise take precedence.

Use sparingly.

Import other CSS files

importUrl :: Text -> Css

Import a CSS file from a URL

Pseudo elements and classes.

inRange :: Refinement

not :: Selector -> Refinement

empty :: Refinement

optional :: Refinement

link :: Refinement

valid :: Refinement

target :: Refinement

checked :: Refinement

disabled :: Refinement

after :: Refinement

before :: Refinement

firstLetter :: Refinement

firstLine :: Refinement

selection :: Refinement

backdrop :: Refinement

visited :: Refinement

active :: Refinement

hover :: Refinement

focus :: Refinement

firstChild :: Refinement

lastChild :: Refinement

enabled :: Refinement

firstOfType :: Refinement

indeterminate :: Refinement

invalid :: Refinement

lastOfType :: Refinement

onlyChild :: Refinement

onlyOfType :: Refinement

outOfRange :: Refinement

nthChild :: Text -> Refinement

nthLastChild :: Text -> Refinement

nthLastOfType :: Text -> Refinement

nthOfType :: Text -> Refinement

HTML5 attribute and element names.

id :: Refinement

for :: Refinement

loop :: Refinement

max :: Refinement

min :: Refinement

step :: Refinement

list :: Refinement

pattern :: Refinement

default_ :: Refinement

required :: Refinement

lang :: Refinement

wrap :: Refinement

icon :: Refinement

accept :: Refinement

acceptCharset :: Refinement

accesskey :: Refinement

action :: Refinement

alt :: Refinement

async :: Refinement

autocomplete :: Refinement

autofocus :: Refinement

autoplay :: Refinement

challenge :: Refinement

charset :: Refinement

cols :: Refinement

colspan :: Refinement

contenteditable :: Refinement

contextmenu :: Refinement

controls :: Refinement

coords :: Refinement

crossorigin :: Refinement

datetime :: Refinement

defer :: Refinement

dir :: Refinement

dirname :: Refinement

download :: Refinement

draggable :: Refinement

dropzone :: Refinement

enctype :: Refinement

formaction :: Refinement

formenctype :: Refinement

formmethod :: Refinement

formnovalidate :: Refinement

formtarget :: Refinement

headers :: Refinement

high :: Refinement

href :: Refinement

hreflang :: Refinement

httpEquiv :: Refinement

inert :: Refinement

inputmode :: Refinement

ismap :: Refinement

itemid :: Refinement

itemprop :: Refinement

itemref :: Refinement

itemscope :: Refinement

itemtype :: Refinement

keytype :: Refinement

kind :: Refinement

low :: Refinement

manifest :: Refinement

maxlength :: Refinement

media :: Refinement

mediagroup :: Refinement

method :: Refinement

multiple :: Refinement

muted :: Refinement

name :: Refinement

novalidate :: Refinement

open :: Refinement

optimum :: Refinement

ping :: Refinement

placeholder :: Refinement

poster :: Refinement

preload :: Refinement

radiogroup :: Refinement

readonly :: Refinement

rel :: Refinement

reversed :: Refinement

rows :: Refinement

rowspan :: Refinement

sandbox :: Refinement

scope :: Refinement

scoped :: Refinement

seamless :: Refinement

selected :: Refinement

shape :: Refinement

sizes :: Refinement

spellcheck :: Refinement

src :: Refinement

srcdoc :: Refinement

srclang :: Refinement

srcset :: Refinement

tabindex :: Refinement

type_ :: Refinement

typemustmatch :: Refinement

usemap :: Refinement

base :: Selector

time :: Selector

head :: Selector

map :: Selector

span :: IsString a => a

Special cases, these items occur both as an HTML tag and an HTML attribute. We keep them polymorph.

div :: Selector

option :: Selector

label :: IsString a => a

Special cases, these items occur both as an HTML tag and an HTML attribute. We keep them polymorph.

select :: Selector

style :: IsString a => a

Special cases, these items occur both as an HTML tag and an HTML attribute. We keep them polymorph.

table :: Selector

menu :: Selector

caption :: Selector

small :: Selector

pre :: Selector

a :: Selector

abbr :: IsString a => a

Special cases, these items occur both as an HTML tag and an HTML attribute. We keep them polymorph.

cite :: IsString a => a

Special cases, these items occur both as an HTML tag and an HTML attribute. We keep them polymorph.

command :: IsString a => a

Special cases, these items occur both as an HTML tag and an HTML attribute. We keep them polymorph.

data_ :: IsString a => a

Special cases, these items occur both as an HTML tag and an HTML attribute. We keep them polymorph.

form :: IsString a => a

Special cases, these items occur both as an HTML tag and an HTML attribute. We keep them polymorph.

title :: IsString a => a

Special cases, these items occur both as an HTML tag and an HTML attribute. We keep them polymorph.

s :: Selector

p :: Selector

b :: Selector

u :: Selector

i :: Selector

q :: Selector

code :: Selector

h1 :: Selector

address :: Selector

area :: Selector

article :: Selector

aside :: Selector

audio :: Selector

bdi :: Selector

bdo :: Selector

blockquote :: Selector

body :: Selector

br :: Selector

button :: Selector

canvas :: Selector

col :: Selector

colgroup :: Selector

datalist :: Selector

dd :: Selector

del :: Selector

details :: Selector

dfn :: Selector

dialog :: Selector

dl :: Selector

dt :: Selector

embed :: Selector

fieldset :: Selector

figcaption :: Selector

figure :: Selector

footer :: Selector

h2 :: Selector

h3 :: Selector

h4 :: Selector

h5 :: Selector

h6 :: Selector

header :: Selector

hgroup :: Selector

hr :: Selector

html :: Selector

iframe :: Selector

img :: Selector

input :: Selector

ins :: Selector

kbd :: Selector

keygen :: Selector

legend :: Selector

li :: Selector

main_ :: Selector

mark :: Selector

math :: Selector

meta :: Selector

meter :: Selector

nav :: Selector

noscript :: Selector

object :: Selector

ol :: Selector

optgroup :: Selector

output :: Selector

param :: Selector

progress :: Selector

rp :: Selector

rt :: Selector

ruby :: Selector

samp :: Selector

script :: Selector

section :: Selector

source :: Selector

strong :: Selector

sub :: Selector

summary :: Selector

sup :: Selector

svg :: Selector

tbody :: Selector

td :: Selector

template :: Selector

textarea :: Selector

tfoot :: Selector

th :: Selector

thead :: Selector

tr :: Selector

track :: Selector

ul :: Selector

var :: Selector

video :: Selector

wbr :: Selector

Commonly used value types.

module Clay.Size

module Clay.Color

module Clay.Time

Values shared between multiple properties.

module Clay.Common

Embedded style properties.

module Clay.Background

module Clay.Border

module Clay.Box

data Overflow

Instances

Auto Overflow

Defined in Clay.Display

Methods

auto :: Overflow

Hidden Overflow

Defined in Clay.Display

Methods

hidden :: Overflow

Inherit Overflow

Defined in Clay.Display

Methods

inherit :: Overflow

Other Overflow

Defined in Clay.Display

Methods

other :: Value -> Overflow

Visible Overflow

Defined in Clay.Display

Methods

visible :: Overflow

Val Overflow

Defined in Clay.Display

Methods

value :: Overflow -> Value

data Display

Instances

Inherit Display

Defined in Clay.Display

Methods

inherit :: Display

None Display

Defined in Clay.Display

Methods

none :: Display

Other Display

Defined in Clay.Display

Methods

other :: Value -> Display

Val Display

Defined in Clay.Display

Methods

value :: Display -> Value

data FloatStyle

Instances

Inherit FloatStyle

Defined in Clay.Display

Methods

inherit :: FloatStyle

None FloatStyle

Defined in Clay.Display

Methods

none :: FloatStyle

Val FloatStyle

Defined in Clay.Display

Methods

value :: FloatStyle -> Value

data Clear

Instances

Inherit Clear

Defined in Clay.Display

Methods

inherit :: Clear

None Clear

Defined in Clay.Display

Methods

none :: Clear

Other Clear

Defined in Clay.Display

Methods

other :: Value -> Clear

Val Clear

Defined in Clay.Display

Methods

value :: Clear -> Value

data Position

Instances

Inherit Position

Defined in Clay.Display

Methods

inherit :: Position

Other Position

Defined in Clay.Display

Methods

other :: Value -> Position

Val Position

Defined in Clay.Display

Methods

value :: Position -> Value

data Visibility

Instances

Hidden Visibility

Defined in Clay.Display

Methods

hidden :: Visibility

Inherit Visibility

Defined in Clay.Display

Methods

inherit :: Visibility

Other Visibility

Defined in Clay.Display

Methods

other :: Value -> Visibility

Unset Visibility

Defined in Clay.Display

Methods

unset :: Visibility

Visible Visibility

Defined in Clay.Display

Methods

visible :: Visibility

Val Visibility

Defined in Clay.Display

Methods

value :: Visibility -> Value

data Clip

Instances

Auto Clip

Defined in Clay.Display

Methods

auto :: Clip

Inherit Clip

Defined in Clay.Display

Methods

inherit :: Clip

Other Clip

Defined in Clay.Display

Methods

other :: Value -> Clip

Val Clip

Defined in Clay.Display

Methods

value :: Clip -> Value

data PointerEvents

Instances

Auto PointerEvents

Defined in Clay.Display

Methods

auto :: PointerEvents

Inherit PointerEvents

Defined in Clay.Display

Methods

inherit :: PointerEvents

None PointerEvents

Defined in Clay.Display

Methods

none :: PointerEvents

Other PointerEvents

Defined in Clay.Display

Methods

other :: Value -> PointerEvents

Visible PointerEvents

Defined in Clay.Display

Methods

visible :: PointerEvents

Val PointerEvents

Defined in Clay.Display

Methods

value :: PointerEvents -> Value

class Val a => VerticalAlign a where

Minimal complete definition

Nothing

Methods

verticalAlign :: a -> Css

Instances

VerticalAlign (Size a)

Defined in Clay.Display

Methods

verticalAlign :: Size a -> Css

class Val a => Cursor a where

Minimal complete definition

Nothing

Methods

cursor :: a -> Css

inline :: Display

clear :: Clear -> Css

float :: FloatStyle -> Css

static :: Position

flex :: Display

opacity :: Number -> Css

floatLeft :: FloatStyle

floatRight :: FloatStyle

both :: Clear

clearLeft :: Clear

clearRight :: Clear

position :: Position -> Css

absolute :: Position

fixed :: Position

relative :: Position

sticky :: Position

display :: Display -> Css

block :: Display

listItem :: Display

runIn :: Display

inlineBlock :: Display

displayTable :: Display

inlineTable :: Display

tableRowGroup :: Display

tableHeaderGroup :: Display

tableFooterGroup :: Display

tableRow :: Display

tableColumnGroup :: Display

tableColumn :: Display

tableCell :: Display

tableCaption :: Display

displayNone :: Display

displayInherit :: Display

inlineFlex :: Display

grid :: Display

inlineGrid :: Display

scroll :: Overflow

overflow :: Overflow -> Css

overflowX :: Overflow -> Css

overflowY :: Overflow -> Css

collapse :: Visibility

separate :: Visibility

visibility :: Visibility -> Css

clip :: Clip -> Css

rect :: Size a -> Size a -> Size a -> Size a -> Clip

zIndex :: Integer -> Css

pointerEvents :: PointerEvents -> Css

visiblePainted :: PointerEvents

visibleFill :: PointerEvents

visibleStroke :: PointerEvents

painted :: PointerEvents

fillEvents :: PointerEvents

strokeEvents :: PointerEvents

allEvents :: PointerEvents

middle :: VerticalAlignValue

vAlignSub :: VerticalAlignValue

vAlignSuper :: VerticalAlignValue

textTop :: VerticalAlignValue

textBottom :: VerticalAlignValue

vAlignTop :: VerticalAlignValue

vAlignBottom :: VerticalAlignValue

vAlignBaseline :: VerticalAlignValue

cursorUrl :: Text -> CursorValue Value

cursorDefault :: CursorValue Value

contextMenu :: CursorValue Value

help :: CursorValue Value

pointer :: CursorValue Value

cursorProgress :: CursorValue Value

wait :: CursorValue Value

cell :: CursorValue Value

crosshair :: CursorValue Value

cursorText :: CursorValue Value

vText :: CursorValue Value

alias :: CursorValue Value

cursorCopy :: CursorValue Value

move :: CursorValue Value

noDrop :: CursorValue Value

notAllowed :: CursorValue Value

grab :: CursorValue Value

grabbing :: CursorValue Value

allScroll :: CursorValue Value

colResize :: CursorValue Value

rowResize :: CursorValue Value

nResize :: CursorValue Value

eResize :: CursorValue Value

sResize :: CursorValue Value

wResize :: CursorValue Value

neResize :: CursorValue Value

nwResize :: CursorValue Value

seResize :: CursorValue Value

swResize :: CursorValue Value

ewResize :: CursorValue Value

nsResize :: CursorValue Value

neswResize :: CursorValue Value

nwseResize :: CursorValue Value

zoomIn :: CursorValue Value

zoomOut :: CursorValue Value

module Clay.Dynamic

class FlexEnd a where

CSS Flexible Box Layout http://dev.w3.org/csswg/css-flexbox-1

Methods

flexEnd :: a

Instances

FlexEnd AlignContentValue

Defined in Clay.Flexbox

Methods

flexEnd :: AlignContentValue

FlexEnd AlignItemsValue

Defined in Clay.Flexbox

Methods

flexEnd :: AlignItemsValue

FlexEnd AlignSelfValue

Defined in Clay.Flexbox

Methods

flexEnd :: AlignSelfValue

FlexEnd JustifyContentValue

Defined in Clay.Flexbox

Methods

flexEnd :: JustifyContentValue

FlexEnd Value

Defined in Clay.Flexbox

Methods

flexEnd :: Value

class FlexStart a where

Methods

flexStart :: a

Instances

FlexStart AlignContentValue

Defined in Clay.Flexbox

Methods

flexStart :: AlignContentValue

FlexStart AlignItemsValue

Defined in Clay.Flexbox

Methods

flexStart :: AlignItemsValue

FlexStart AlignSelfValue

Defined in Clay.Flexbox

Methods

flexStart :: AlignSelfValue

FlexStart JustifyContentValue

Defined in Clay.Flexbox

Methods

flexStart :: JustifyContentValue

FlexStart Value

Defined in Clay.Flexbox

Methods

flexStart :: Value

class SpaceAround a where

Methods

spaceAround :: a

Instances

SpaceAround AlignContentValue

Defined in Clay.Flexbox

Methods

spaceAround :: AlignContentValue

SpaceAround JustifyContentValue

Defined in Clay.Flexbox

Methods

spaceAround :: JustifyContentValue

SpaceAround Value

Defined in Clay.Flexbox

Methods

spaceAround :: Value

class SpaceBetween a where

Methods

spaceBetween :: a

Instances

SpaceBetween AlignContentValue

Defined in Clay.Flexbox

Methods

spaceBetween :: AlignContentValue

SpaceBetween JustifyContentValue

Defined in Clay.Flexbox

Methods

spaceBetween :: JustifyContentValue

SpaceBetween Value

Defined in Clay.Flexbox

Methods

spaceBetween :: Value

class SpaceEvenly a where

Methods

spaceEvenly :: a

Instances

SpaceEvenly AlignContentValue

Defined in Clay.Flexbox

Methods

spaceEvenly :: AlignContentValue

SpaceEvenly JustifyContentValue

Defined in Clay.Flexbox

Methods

spaceEvenly :: JustifyContentValue

SpaceEvenly Value

Defined in Clay.Flexbox

Methods

spaceEvenly :: Value

class Stretch a where

Methods

stretch :: a

Instances

Stretch AlignContentValue

Defined in Clay.Flexbox

Methods

stretch :: AlignContentValue

Stretch AlignItemsValue

Defined in Clay.Flexbox

Methods

stretch :: AlignItemsValue

Stretch AlignSelfValue

Defined in Clay.Flexbox

Methods

stretch :: AlignSelfValue

Stretch Value

Defined in Clay.Flexbox

Methods

stretch :: Value

newtype AlignContentValue

Constructors

AlignContentValue Value

Instances

Center AlignContentValue

Defined in Clay.Flexbox

Methods

center :: AlignContentValue

Inherit AlignContentValue

Defined in Clay.Flexbox

Methods

inherit :: AlignContentValue

Other AlignContentValue

Defined in Clay.Flexbox

Methods

other :: Value -> AlignContentValue

FlexEnd AlignContentValue

Defined in Clay.Flexbox

Methods

flexEnd :: AlignContentValue

FlexStart AlignContentValue

Defined in Clay.Flexbox

Methods

flexStart :: AlignContentValue

SpaceAround AlignContentValue

Defined in Clay.Flexbox

Methods

spaceAround :: AlignContentValue

SpaceBetween AlignContentValue

Defined in Clay.Flexbox

Methods

spaceBetween :: AlignContentValue

SpaceEvenly AlignContentValue

Defined in Clay.Flexbox

Methods

spaceEvenly :: AlignContentValue

Stretch AlignContentValue

Defined in Clay.Flexbox

Methods

stretch :: AlignContentValue

Val AlignContentValue

Defined in Clay.Flexbox

Methods

value :: AlignContentValue -> Value

newtype AlignItemsValue

Constructors

AlignItemValue Value

Instances

Baseline AlignItemsValue

Defined in Clay.Flexbox

Methods

baseline :: AlignItemsValue

Center AlignItemsValue

Defined in Clay.Flexbox

Methods

center :: AlignItemsValue

Inherit AlignItemsValue

Defined in Clay.Flexbox

Methods

inherit :: AlignItemsValue

Other AlignItemsValue

Defined in Clay.Flexbox

Methods

other :: Value -> AlignItemsValue

FlexEnd AlignItemsValue

Defined in Clay.Flexbox

Methods

flexEnd :: AlignItemsValue

FlexStart AlignItemsValue

Defined in Clay.Flexbox

Methods

flexStart :: AlignItemsValue

Stretch AlignItemsValue

Defined in Clay.Flexbox

Methods

stretch :: AlignItemsValue

Val AlignItemsValue

Defined in Clay.Flexbox

Methods

value :: AlignItemsValue -> Value

newtype AlignSelfValue

Constructors

AlignSelfValue Value

Instances

Auto AlignSelfValue

Defined in Clay.Flexbox

Methods

auto :: AlignSelfValue

Baseline AlignSelfValue

Defined in Clay.Flexbox

Methods

baseline :: AlignSelfValue

Center AlignSelfValue

Defined in Clay.Flexbox

Methods

center :: AlignSelfValue

Inherit AlignSelfValue

Defined in Clay.Flexbox

Methods

inherit :: AlignSelfValue

Other AlignSelfValue

Defined in Clay.Flexbox

Methods

other :: Value -> AlignSelfValue

FlexEnd AlignSelfValue

Defined in Clay.Flexbox

Methods

flexEnd :: AlignSelfValue

FlexStart AlignSelfValue

Defined in Clay.Flexbox

Methods

flexStart :: AlignSelfValue

Stretch AlignSelfValue

Defined in Clay.Flexbox

Methods

stretch :: AlignSelfValue

Val AlignSelfValue

Defined in Clay.Flexbox

Methods

value :: AlignSelfValue -> Value

newtype FlexDirection

Constructors

FlexDirection Value

Instances

Other FlexDirection

Defined in Clay.Flexbox

Methods

other :: Value -> FlexDirection

Val FlexDirection

Defined in Clay.Flexbox

Methods

value :: FlexDirection -> Value

newtype FlexWrap

Constructors

FlexWrap Value

Instances

Other FlexWrap

Defined in Clay.Flexbox

Methods

other :: Value -> FlexWrap

Val FlexWrap

Defined in Clay.Flexbox

Methods

value :: FlexWrap -> Value

newtype JustifyContentValue

Constructors

JustifyContentValue Value

Instances

Center JustifyContentValue

Defined in Clay.Flexbox

Methods

center :: JustifyContentValue

Inherit JustifyContentValue

Defined in Clay.Flexbox

Methods

inherit :: JustifyContentValue

Other JustifyContentValue

Defined in Clay.Flexbox

Methods

other :: Value -> JustifyContentValue

FlexEnd JustifyContentValue

Defined in Clay.Flexbox

Methods

flexEnd :: JustifyContentValue

FlexStart JustifyContentValue

Defined in Clay.Flexbox

Methods

flexStart :: JustifyContentValue

SpaceAround JustifyContentValue

Defined in Clay.Flexbox

Methods

spaceAround :: JustifyContentValue

SpaceBetween JustifyContentValue

Defined in Clay.Flexbox

Methods

spaceBetween :: JustifyContentValue

SpaceEvenly JustifyContentValue

Defined in Clay.Flexbox

Methods

spaceEvenly :: JustifyContentValue

Val JustifyContentValue

Defined in Clay.Flexbox

Methods

value :: JustifyContentValue -> Value

alignContent :: AlignContentValue -> Css

alignItems :: AlignItemsValue -> Css

alignSelf :: AlignSelfValue -> Css

flexBasis :: Size a -> Css

row :: FlexDirection

rowReverse :: FlexDirection

column :: FlexDirection

columnReverse :: FlexDirection

flexDirection :: FlexDirection -> Css

flexFlow :: FlexDirection -> FlexWrap -> Css

flexGrow :: Int -> Css

flexShrink :: Int -> Css

wrapReverse :: FlexWrap

flexWrap :: FlexWrap -> Css

justifyContent :: JustifyContentValue -> Css

order :: Int -> Css

class Val a => Font a where

We implement the generic font property as a type class that accepts multiple value types. This allows us to combine different font aspects into a shorthand syntax. Fonts require a mandatory part and have a optional a part.

http://www.w3.org/TR/css3-fonts/#font-prop

Minimal complete definition

Nothing

Methods

font :: a -> Css

Instances

Font (Required a)

Defined in Clay.Font

Methods

font :: Required a -> Css

Font (Optional, Required a)

Defined in Clay.Font

Methods

font :: (Optional, Required a) -> Css

data Optional

Constructors

Optional (Maybe FontWeight) (Maybe FontVariant) (Maybe FontStyle)

Instances

Val Optional

Defined in Clay.Font

Methods

value :: Optional -> Value

Font (Optional, Required a)

Defined in Clay.Font

Methods

font :: (Optional, Required a) -> Css

data Required a

Constructors

Required (Size a) (Maybe (Size a)) [Text] [GenericFontFamily]

Instances

Font (Required a)

Defined in Clay.Font

Methods

font :: Required a -> Css

Val (Required a)

Defined in Clay.Font

Methods

value :: Required a -> Value

Font (Optional, Required a)

Defined in Clay.Font

Methods

font :: (Optional, Required a) -> Css

data FontSize

Instances

Auto FontSize

Defined in Clay.Font

Methods

auto :: FontSize

Inherit FontSize

Defined in Clay.Font

Methods

inherit :: FontSize

Other FontSize

Defined in Clay.Font

Methods

other :: Value -> FontSize

Val FontSize

Defined in Clay.Font

Methods

value :: FontSize -> Value

data FontStyle

Instances

Inherit FontStyle

Defined in Clay.Font

Methods

inherit :: FontStyle

Normal FontStyle

Defined in Clay.Font

Methods

normal :: FontStyle

Other FontStyle

Defined in Clay.Font

Methods

other :: Value -> FontStyle

Val FontStyle

Defined in Clay.Font

Methods

value :: FontStyle -> Value

data FontVariant

Instances

Inherit FontVariant

Defined in Clay.Font

Methods

inherit :: FontVariant

Normal FontVariant

Defined in Clay.Font

Methods

normal :: FontVariant

Other FontVariant

Defined in Clay.Font

Methods

other :: Value -> FontVariant

Val FontVariant

Defined in Clay.Font

Methods

value :: FontVariant -> Value

data FontWeight

Instances

Inherit FontWeight

Defined in Clay.Font

Methods

inherit :: FontWeight

Normal FontWeight

Defined in Clay.Font

Methods

normal :: FontWeight

Other FontWeight

Defined in Clay.Font

Methods

other :: Value -> FontWeight

Val FontWeight

Defined in Clay.Font

Methods

value :: FontWeight -> Value

data NamedFont

Instances

Other NamedFont

Defined in Clay.Font

Methods

other :: Value -> NamedFont

Val NamedFont

Defined in Clay.Font

Methods

value :: NamedFont -> Value

smaller :: FontSize

larger :: FontSize

fontColor :: Color -> Css

An alias for color.

color :: Color -> Css

fontFamily :: [Text] -> [GenericFontFamily] -> Css

The fontFamily style rules takes to lists of font families: zero or more custom font-families and preferably one or more generic font families.

sansSerif :: GenericFontFamily

serif :: GenericFontFamily

monospace :: GenericFontFamily

cursive :: GenericFontFamily

fantasy :: GenericFontFamily

fontSize :: Size a -> Css

fontSizeCustom :: FontSize -> Css

xxSmall :: FontSize

xSmall :: FontSize

medium :: FontSize

large :: FontSize

xLarge :: FontSize

xxLarge :: FontSize

fontStyle :: FontStyle -> Css

italic :: FontStyle

oblique :: FontStyle

fontVariant :: FontVariant -> Css

smallCaps :: FontVariant

fontWeight :: FontWeight -> Css

bold :: FontWeight

bolder :: FontWeight

lighter :: FontWeight

weight :: Integer -> FontWeight

messageBox :: NamedFont

smallCaption :: NamedFont

statusBar :: NamedFont

lineHeight :: Size a -> Css

module Clay.FontFace

module Clay.Geometry

module Clay.Gradient

module Clay.Grid

module Clay.List

data TextRendering

Instances

Auto TextRendering

Defined in Clay.Text

Methods

auto :: TextRendering

Inherit TextRendering

Defined in Clay.Text

Methods

inherit :: TextRendering

Other TextRendering

Defined in Clay.Text

Methods

other :: Value -> TextRendering

Val TextRendering

Defined in Clay.Text

Methods

value :: TextRendering -> Value

data TextIndent

Instances

Inherit TextIndent

Defined in Clay.Text

Methods

inherit :: TextIndent

Initial TextIndent

Defined in Clay.Text

Methods

initial :: TextIndent

Other TextIndent

Defined in Clay.Text

Methods

other :: Value -> TextIndent

Unset TextIndent

Defined in Clay.Text

Methods

unset :: TextIndent

Val TextIndent

Defined in Clay.Text

Methods

value :: TextIndent -> Value

data TextDirection

Instances

Inherit TextDirection

Defined in Clay.Text

Methods

inherit :: TextDirection

Normal TextDirection

Defined in Clay.Text

Methods

normal :: TextDirection

Other TextDirection

Defined in Clay.Text

Methods

other :: Value -> TextDirection

Val TextDirection

Defined in Clay.Text

Methods

value :: TextDirection -> Value

data TextAlign

Instances

Center TextAlign

Defined in Clay.Text

Methods

center :: TextAlign

Inherit TextAlign

Defined in Clay.Text

Methods

inherit :: TextAlign

Normal TextAlign

Defined in Clay.Text

Methods

normal :: TextAlign

Other TextAlign

Defined in Clay.Text

Methods

other :: Value -> TextAlign

Val TextAlign

Defined in Clay.Text

Methods

value :: TextAlign -> Value

data WhiteSpace

Instances

Inherit WhiteSpace

Defined in Clay.Text

Methods

inherit :: WhiteSpace

Normal WhiteSpace

Defined in Clay.Text

Methods

normal :: WhiteSpace

Other WhiteSpace

Defined in Clay.Text

Methods

other :: Value -> WhiteSpace

Val WhiteSpace

Defined in Clay.Text

Methods

value :: WhiteSpace -> Value

data TextDecoration

Instances

Inherit TextDecoration

Defined in Clay.Text

Methods

inherit :: TextDecoration

None TextDecoration

Defined in Clay.Text

Methods

none :: TextDecoration

Other TextDecoration

Defined in Clay.Text

Methods

other :: Value -> TextDecoration

Val TextDecoration

Defined in Clay.Text

Methods

value :: TextDecoration -> Value

data TextTransform

Instances

Inherit TextTransform

Defined in Clay.Text

Methods

inherit :: TextTransform

None TextTransform

Defined in Clay.Text

Methods

none :: TextTransform

Val TextTransform

Defined in Clay.Text

Methods

value :: TextTransform -> Value

data TextOverflow

Instances

Inherit TextOverflow

Defined in Clay.Text

Methods

inherit :: TextOverflow

Initial TextOverflow

Defined in Clay.Text

Methods

initial :: TextOverflow

None TextOverflow

Defined in Clay.Text

Methods

none :: TextOverflow

Val TextOverflow

Defined in Clay.Text

Methods

value :: TextOverflow -> Value

data WordBreak

Instances

Inherit WordBreak

Defined in Clay.Text

Methods

inherit :: WordBreak

Initial WordBreak

Defined in Clay.Text

Methods

initial :: WordBreak

Normal WordBreak

Defined in Clay.Text

Methods

normal :: WordBreak

Unset WordBreak

Defined in Clay.Text

Methods

unset :: WordBreak

Val WordBreak

Defined in Clay.Text

Methods

value :: WordBreak -> Value

data OverflowWrap

Instances

Inherit OverflowWrap

Defined in Clay.Text

Methods

inherit :: OverflowWrap

Initial OverflowWrap

Defined in Clay.Text

Methods

initial :: OverflowWrap

Normal OverflowWrap

Defined in Clay.Text

Methods

normal :: OverflowWrap

Unset OverflowWrap

Defined in Clay.Text

Methods

unset :: OverflowWrap

Val OverflowWrap

Defined in Clay.Text

Methods

value :: OverflowWrap -> Value

data Hyphens

Type for values which can be provided to hyphens.

Instances

Auto Hyphens

Defined in Clay.Text

Methods

auto :: Hyphens

Inherit Hyphens

Defined in Clay.Text

Methods

inherit :: Hyphens

Initial Hyphens

Defined in Clay.Text

Methods

initial :: Hyphens

None Hyphens

Defined in Clay.Text

Methods

none :: Hyphens

Other Hyphens

Defined in Clay.Text

Methods

other :: Value -> Hyphens

Unset Hyphens

Defined in Clay.Text

Methods

unset :: Hyphens

Val Hyphens

Defined in Clay.Text

Methods

value :: Hyphens -> Value

data HyphenateCharacter

Type for values which can be provided to hyphenateCharacter.

Instances

IsString HyphenateCharacter

Defined in Clay.Text

Methods

fromString :: String -> HyphenateCharacter

Auto HyphenateCharacter

Defined in Clay.Text

Methods

auto :: HyphenateCharacter

Inherit HyphenateCharacter

Defined in Clay.Text

Methods

inherit :: HyphenateCharacter

Initial HyphenateCharacter

Defined in Clay.Text

Methods

initial :: HyphenateCharacter

Other HyphenateCharacter

Defined in Clay.Text

Methods

other :: Value -> HyphenateCharacter

Unset HyphenateCharacter

Defined in Clay.Text

Methods

unset :: HyphenateCharacter

Val HyphenateCharacter

Defined in Clay.Text

Methods

value :: HyphenateCharacter -> Value

data HyphenateLimit

Type for values which can be provded to hyphenateLimitChars.

Instances

Num HyphenateLimit

Defined in Clay.Text

Methods

(+) :: HyphenateLimit -> HyphenateLimit -> HyphenateLimit

(-) :: HyphenateLimit -> HyphenateLimit -> HyphenateLimit

(*) :: HyphenateLimit -> HyphenateLimit -> HyphenateLimit

negate :: HyphenateLimit -> HyphenateLimit

abs :: HyphenateLimit -> HyphenateLimit

signum :: HyphenateLimit -> HyphenateLimit

fromInteger :: Integer -> HyphenateLimit

Auto HyphenateLimit

Defined in Clay.Text

Methods

auto :: HyphenateLimit

Inherit HyphenateLimit

Defined in Clay.Text

Methods

inherit :: HyphenateLimit

Initial HyphenateLimit

Defined in Clay.Text

Methods

initial :: HyphenateLimit

Other HyphenateLimit

Defined in Clay.Text

Methods

other :: Value -> HyphenateLimit

Unset HyphenateLimit

Defined in Clay.Text

Methods

unset :: HyphenateLimit

Val HyphenateLimit

Defined in Clay.Text

Methods

value :: HyphenateLimit -> Value

data Content

Instances

Inherit Content

Defined in Clay.Text

Methods

inherit :: Content

Initial Content

Defined in Clay.Text

Methods

initial :: Content

None Content

Defined in Clay.Text

Methods

none :: Content

Normal Content

Defined in Clay.Text

Methods

normal :: Content

Val Content

Defined in Clay.Text

Methods

value :: Content -> Value

indent :: Size a -> TextIndent

content :: Content -> Css

start :: TextAlign

nowrap :: WhiteSpace

letterSpacing :: Size a -> Css

wordSpacing :: Size a -> Css

textRendering :: TextRendering -> Css

optimizeSpeed :: TextRendering

optimizeLegibility :: TextRendering

geometricPrecision :: TextRendering

textShadow :: Size a -> Size a -> Size a -> Color -> Css

textIndent :: TextIndent -> Css

eachLine :: TextIndent -> TextIndent

Annotate the supplied TextIndent with each-line or hanging or both.

eachLine . hanging . indent $ px 3 :: TextIndent

hanging :: TextIndent -> TextIndent

Annotate the supplied TextIndent with each-line or hanging or both.

eachLine . hanging . indent $ px 3 :: TextIndent

direction :: TextDirection -> Css

ltr :: TextDirection

rtl :: TextDirection

textAlign :: TextAlign -> Css

textAlignLast :: TextAlign -> Css

justify :: TextAlign

matchParent :: TextAlign

end :: TextAlign

alignSide :: Side -> TextAlign

alignString :: Char -> TextAlign

whiteSpace :: WhiteSpace -> Css

preWrap :: WhiteSpace

preLine :: WhiteSpace

textDecoration :: TextDecoration -> Css

textDecorationStyle :: Stroke -> Css

textDecorationLine :: TextDecoration -> Css

textDecorationColor :: Color -> Css

underline :: TextDecoration

overline :: TextDecoration

lineThrough :: TextDecoration

blink :: TextDecoration

textTransform :: TextTransform -> Css

capitalize :: TextTransform

uppercase :: TextTransform

lowercase :: TextTransform

fullWidth :: TextTransform

textOverflow :: TextOverflow -> Css

overflowClip :: TextOverflow

overflowEllipsis :: TextOverflow

wordBreak :: WordBreak -> Css

breakAll :: WordBreak

keepAll :: WordBreak

overflowWrap :: OverflowWrap -> Css

wordWrap :: OverflowWrap -> Css

breakWord :: OverflowWrap

hyphens :: Hyphens -> Css

Specifies how words should be hyphenated.

Possible values are:

none

No hyphenation. Words will not be hyphenated even if it is explicitly suggested for a word.

manual

Manual hyphenation. Specific characters such as ­ in a word will suggest break points. This is the default.

auto

Automatic hyphenation. The browser is free to hyphenate words as it sees fit. However, explicitly suggested break points will take precedence.

For example,

>>> hyphens auto

The hyphenation rules depend on the language, which must be specified by the lang attribute.

For reference, see hyphens.

hyphenateCharacter :: HyphenateCharacter -> Css

Customizes the character used for hyphenation.

For example,

>>> hyphenateCharacter "~"

For reference, see hyphenate-character.

hyphenateLimitChars

Arguments

:: HyphenateLimit

Minimum length of a word which can be hyphenated.

-> HyphenateLimit

Minimum number of characters allowed before a break point.

-> HyphenateLimit

Minimum number of characters allowed after a break point.

-> Css

Adjusts the minumum number of characters involved in hyphenation.

I.e., specifies the minumum number of characters allowed in a breakable word, before a break point, and after a break point when hyphenating a word.

For example,

>>> hyphenateLimitChars 14 auto auto

For reference, see hyphenate-limit-chars.

manual :: Hyphens

Value for hyphens specifying that hyphenation be manual.

contents :: [Content] -> Css

attrContent :: Text -> Content

stringContent :: Text -> Content

uriContent :: Text -> Content

urlContent :: Text -> Content

openQuote :: Content

closeQuote :: Content

noOpenQuote :: Content

noCloseQuote :: Content

module Clay.Transform

module Clay.Transition

module Clay.Animation

class Val a => Mask a where

We implement the generic mask property as a type class that accepts multiple value types. This allows us to combine different mask aspects into a shorthand syntax.

Minimal complete definition

Nothing

Methods

mask :: a -> Css

Instances

Mask BackgroundAttachment

Defined in Clay.Mask

Methods

mask :: BackgroundAttachment -> Css

Mask BackgroundClip

Defined in Clay.Mask

Methods

mask :: BackgroundClip -> Css

Mask BackgroundImage

Defined in Clay.Mask

Methods

mask :: BackgroundImage -> Css

Mask BackgroundOrigin

Defined in Clay.Mask

Methods

mask :: BackgroundOrigin -> Css

Mask BackgroundPosition

Defined in Clay.Mask

Methods

mask :: BackgroundPosition -> Css

Mask BackgroundRepeat

Defined in Clay.Mask

Methods

mask :: BackgroundRepeat -> Css

Mask BackgroundSize

Defined in Clay.Mask

Methods

mask :: BackgroundSize -> Css

Mask MaskComposite

Defined in Clay.Mask

Methods

mask :: MaskComposite -> Css

Mask a => Mask [a]

Defined in Clay.Mask

Methods

mask :: [a] -> Css

(Mask a, Mask b) => Mask (a, b)

Defined in Clay.Mask

Methods

mask :: (a, b) -> Css

data MaskComposite

Instances

Inherit MaskComposite

Defined in Clay.Mask

Methods

inherit :: MaskComposite

None MaskComposite

Defined in Clay.Mask

Methods

none :: MaskComposite

Other MaskComposite

Defined in Clay.Mask

Methods

other :: Value -> MaskComposite

Mask MaskComposite

Defined in Clay.Mask

Methods

mask :: MaskComposite -> Css

Val MaskComposite

Defined in Clay.Mask

Methods

value :: MaskComposite -> Value

xor :: MaskComposite

copy :: MaskComposite

sourceOver :: MaskComposite

sourceIn :: MaskComposite

sourceOut :: MaskComposite

sourceAtop :: MaskComposite

destinationOver :: MaskComposite

destinationIn :: MaskComposite

destinationOut :: MaskComposite

destinationAtop :: MaskComposite

maskComposite :: MaskComposite -> Css

maskComposites :: [MaskComposite] -> Css

maskPosition :: BackgroundPosition -> Css

maskPositions :: [BackgroundPosition] -> Css

maskSize :: BackgroundSize -> Css

maskSizes :: [BackgroundSize] -> Css

maskRepeat :: BackgroundRepeat -> Css

maskRepeats :: [BackgroundRepeat] -> Css

maskOrigin :: BackgroundOrigin -> Css

maskOrigins :: [BackgroundOrigin] -> Css

maskClip :: BackgroundClip -> Css

maskClips :: [BackgroundClip] -> Css

maskAttachment :: BackgroundAttachment -> Css

maskAttachments :: [BackgroundAttachment] -> Css

maskImage :: BackgroundImage -> Css

maskImages :: [BackgroundImage] -> Css

data Filter

Instances

Inherit Filter

Defined in Clay.Filter

Methods

inherit :: Filter

None Filter

Defined in Clay.Filter

Methods

none :: Filter

Val Filter

Defined in Clay.Filter

Methods

value :: Filter -> Value

filter :: Filter -> Css

filters :: [Filter] -> Css

blur :: Size LengthUnit -> Filter

brightness :: Number -> Filter

contrast :: Size Percentage -> Filter

dropShadow :: Size LengthUnit -> Size LengthUnit -> Size LengthUnit -> Color -> Filter

grayscale :: Size Percentage -> Filter

hueRotate :: Angle a -> Filter

invert :: Size Percentage -> Filter

saturate :: Size Percentage -> Filter

sepia :: Size Percentage -> Filter

Writing your own properties.

module Clay.Property