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

Show Refinement

Defined in Clay.Selector

Methods

showsPrec :: Int -> Refinement -> ShowS

show :: Refinement -> String

showList :: [Refinement] -> ShowS

IsString Refinement

Defined in Clay.Selector

Methods

fromString :: String -> Refinement

Semigroup Refinement

Defined in Clay.Selector

Methods

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

sconcat :: NonEmpty Refinement -> Refinement

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

Monoid Refinement

Defined in Clay.Selector

Methods

mempty :: Refinement

mappend :: Refinement -> Refinement -> Refinement

mconcat :: [Refinement] -> Refinement

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.

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 -> [(Double, 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.

after :: Refinement

before :: Refinement

firstLetter :: Refinement

firstLine :: Refinement

selection :: Refinement

backdrop :: Refinement

link :: Refinement

visited :: Refinement

active :: Refinement

hover :: Refinement

focus :: Refinement

firstChild :: Refinement

lastChild :: Refinement

checked :: Refinement

disabled :: Refinement

empty :: Refinement

enabled :: Refinement

firstOfType :: Refinement

indeterminate :: Refinement

inRange :: Refinement

invalid :: Refinement

lastOfType :: Refinement

onlyChild :: Refinement

onlyOfType :: Refinement

optional :: Refinement

outOfRange :: Refinement

target :: Refinement

valid :: Refinement

nthChild :: Text -> Refinement

nthLastChild :: Text -> Refinement

nthLastOfType :: Text -> Refinement

nthOfType :: Text -> Refinement

not :: Selector -> Refinement

HTML5 attribute and element names.

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

default_ :: Refinement

defer :: Refinement

dir :: Refinement

dirname :: Refinement

download :: Refinement

draggable :: Refinement

dropzone :: Refinement

enctype :: Refinement

for :: Refinement

formaction :: Refinement

formenctype :: Refinement

formmethod :: Refinement

formnovalidate :: Refinement

formtarget :: Refinement

headers :: Refinement

high :: Refinement

href :: Refinement

hreflang :: Refinement

httpEquiv :: Refinement

icon :: Refinement

id :: Refinement

inert :: Refinement

inputmode :: Refinement

ismap :: Refinement

itemid :: Refinement

itemprop :: Refinement

itemref :: Refinement

itemscope :: Refinement

itemtype :: Refinement

keytype :: Refinement

kind :: Refinement

lang :: Refinement

list :: Refinement

loop :: Refinement

low :: Refinement

manifest :: Refinement

max :: Refinement

maxlength :: Refinement

media :: Refinement

mediagroup :: Refinement

method :: Refinement

min :: Refinement

multiple :: Refinement

muted :: Refinement

name :: Refinement

novalidate :: Refinement

open :: Refinement

optimum :: Refinement

pattern :: Refinement

ping :: Refinement

placeholder :: Refinement

poster :: Refinement

preload :: Refinement

radiogroup :: Refinement

readonly :: Refinement

rel :: Refinement

required :: 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

step :: Refinement

tabindex :: Refinement

type_ :: Refinement

typemustmatch :: Refinement

usemap :: Refinement

wrap :: Refinement

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.

label :: IsString a => a

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

span :: IsString a => a

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

style :: 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.

a :: Selector

address :: Selector

area :: Selector

article :: Selector

aside :: Selector

audio :: Selector

b :: Selector

base :: Selector

bdi :: Selector

bdo :: Selector

blockquote :: Selector

body :: Selector

br :: Selector

button :: Selector

canvas :: Selector

caption :: Selector

code :: Selector

col :: Selector

colgroup :: Selector

datalist :: Selector

dd :: Selector

del :: Selector

details :: Selector

dfn :: Selector

dialog :: Selector

div :: Selector

dl :: Selector

dt :: Selector

embed :: Selector

fieldset :: Selector

figcaption :: Selector

figure :: Selector

footer :: Selector

h1 :: Selector

h2 :: Selector

h3 :: Selector

h4 :: Selector

h5 :: Selector

h6 :: Selector

head :: Selector

header :: Selector

hgroup :: Selector

hr :: Selector

html :: Selector

i :: Selector

iframe :: Selector

img :: Selector

input :: Selector

ins :: Selector

kbd :: Selector

keygen :: Selector

legend :: Selector

li :: Selector

main_ :: Selector

map :: Selector

mark :: Selector

menu :: Selector

meta :: Selector

meter :: Selector

math :: Selector

nav :: Selector

noscript :: Selector

object :: Selector

ol :: Selector

optgroup :: Selector

option :: Selector

output :: Selector

p :: Selector

param :: Selector

pre :: Selector

progress :: Selector

q :: Selector

rp :: Selector

rt :: Selector

ruby :: Selector

s :: Selector

samp :: Selector

script :: Selector

section :: Selector

select :: Selector

small :: Selector

source :: Selector

strong :: Selector

sub :: Selector

summary :: Selector

sup :: Selector

svg :: Selector

table :: Selector

tbody :: Selector

td :: Selector

template :: Selector

textarea :: Selector

tfoot :: Selector

th :: Selector

thead :: Selector

time :: Selector

tr :: Selector

track :: Selector

u :: 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

class Val a => Cursor a where

Minimal complete definition

Nothing

Methods

cursor :: a -> Css

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

data PointerEvents

Instances

Val PointerEvents

Defined in Clay.Display

Methods

value :: PointerEvents -> Value

Other PointerEvents

Defined in Clay.Display

Methods

other :: Value -> PointerEvents

Visible PointerEvents

Defined in Clay.Display

Methods

visible :: PointerEvents

None PointerEvents

Defined in Clay.Display

Methods

none :: PointerEvents

Inherit PointerEvents

Defined in Clay.Display

Methods

inherit :: PointerEvents

Auto PointerEvents

Defined in Clay.Display

Methods

auto :: PointerEvents

data Clip

Instances

Val Clip

Defined in Clay.Display

Methods

value :: Clip -> Value

Other Clip

Defined in Clay.Display

Methods

other :: Value -> Clip

Inherit Clip

Defined in Clay.Display

Methods

inherit :: Clip

Auto Clip

Defined in Clay.Display

Methods

auto :: Clip

data Visibility

Instances

Val Visibility

Defined in Clay.Display

Methods

value :: Visibility -> Value

Other Visibility

Defined in Clay.Display

Methods

other :: Value -> Visibility

Hidden Visibility

Defined in Clay.Display

Methods

hidden :: Visibility

Visible Visibility

Defined in Clay.Display

Methods

visible :: Visibility

Inherit Visibility

Defined in Clay.Display

Methods

inherit :: Visibility

Auto Visibility

Defined in Clay.Display

Methods

auto :: Visibility

data Overflow

Instances

Val Overflow

Defined in Clay.Display

Methods

value :: Overflow -> Value

Other Overflow

Defined in Clay.Display

Methods

other :: Value -> Overflow

Hidden Overflow

Defined in Clay.Display

Methods

hidden :: Overflow

Visible Overflow

Defined in Clay.Display

Methods

visible :: Overflow

Inherit Overflow

Defined in Clay.Display

Methods

inherit :: Overflow

Auto Overflow

Defined in Clay.Display

Methods

auto :: Overflow

data Display

Instances

Val Display

Defined in Clay.Display

Methods

value :: Display -> Value

Other Display

Defined in Clay.Display

Methods

other :: Value -> Display

None Display

Defined in Clay.Display

Methods

none :: Display

Inherit Display

Defined in Clay.Display

Methods

inherit :: Display

data Position

Instances

Val Position

Defined in Clay.Display

Methods

value :: Position -> Value

Other Position

Defined in Clay.Display

Methods

other :: Value -> Position

Inherit Position

Defined in Clay.Display

Methods

inherit :: Position

data Clear

Instances

Val Clear

Defined in Clay.Display

Methods

value :: Clear -> Value

Other Clear

Defined in Clay.Display

Methods

other :: Value -> Clear

None Clear

Defined in Clay.Display

Methods

none :: Clear

Inherit Clear

Defined in Clay.Display

Methods

inherit :: Clear

data FloatStyle

Instances

Val FloatStyle

Defined in Clay.Display

Methods

value :: FloatStyle -> Value

None FloatStyle

Defined in Clay.Display

Methods

none :: FloatStyle

Inherit FloatStyle

Defined in Clay.Display

Methods

inherit :: FloatStyle

float :: FloatStyle -> Css

floatLeft :: FloatStyle

floatRight :: FloatStyle

both :: Clear

clearLeft :: Clear

clearRight :: Clear

clear :: Clear -> Css

static :: Position

absolute :: Position

fixed :: Position

relative :: Position

sticky :: Position

position :: Position -> Css

inline :: Display

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

flex :: Display

inlineFlex :: Display

grid :: Display

inlineGrid :: Display

display :: Display -> Css

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

opacity :: Double -> Css

zIndex :: Integer -> Css

visiblePainted :: PointerEvents

visibleFill :: PointerEvents

visibleStroke :: PointerEvents

painted :: PointerEvents

fillEvents :: PointerEvents

strokeEvents :: PointerEvents

allEvents :: PointerEvents

pointerEvents :: PointerEvents -> Css

middle :: VerticalAlignValue

vAlignSub :: VerticalAlignValue

vAlignBaseline :: VerticalAlignValue

vAlignSuper :: VerticalAlignValue

textTop :: VerticalAlignValue

textBottom :: VerticalAlignValue

vAlignTop :: VerticalAlignValue

vAlignBottom :: VerticalAlignValue

crosshair :: CursorValue Value

cursorDefault :: CursorValue Value

pointer :: CursorValue Value

move :: CursorValue Value

eResize :: CursorValue Value

neResize :: CursorValue Value

nwResize :: CursorValue Value

nResize :: CursorValue Value

seResize :: CursorValue Value

swResize :: CursorValue Value

sResize :: CursorValue Value

wResize :: CursorValue Value

cursorText :: CursorValue Value

wait :: CursorValue Value

cursorProgress :: CursorValue Value

help :: CursorValue Value

cursorUrl :: Text -> CursorValue Value

module Clay.Dynamic

newtype JustifyContentValue

Constructors

JustifyContentValue Value

Instances

Val JustifyContentValue

Defined in Clay.Flexbox

Methods

value :: JustifyContentValue -> Value

Other JustifyContentValue

Defined in Clay.Flexbox

Methods

other :: Value -> JustifyContentValue

Inherit JustifyContentValue

Defined in Clay.Flexbox

Methods

inherit :: JustifyContentValue

Center JustifyContentValue

Defined in Clay.Flexbox

Methods

center :: JustifyContentValue

SpaceBetween JustifyContentValue

Defined in Clay.Flexbox

Methods

spaceBetween :: JustifyContentValue

SpaceAround JustifyContentValue

Defined in Clay.Flexbox

Methods

spaceAround :: JustifyContentValue

FlexStart JustifyContentValue

Defined in Clay.Flexbox

Methods

flexStart :: JustifyContentValue

FlexEnd JustifyContentValue

Defined in Clay.Flexbox

Methods

flexEnd :: JustifyContentValue

newtype FlexWrap

Constructors

FlexWrap Value

Instances

Val FlexWrap

Defined in Clay.Flexbox

Methods

value :: FlexWrap -> Value

Other FlexWrap

Defined in Clay.Flexbox

Methods

other :: Value -> FlexWrap

newtype FlexDirection

Constructors

FlexDirection Value

Instances

Val FlexDirection

Defined in Clay.Flexbox

Methods

value :: FlexDirection -> Value

Other FlexDirection

Defined in Clay.Flexbox

Methods

other :: Value -> FlexDirection

newtype AlignSelfValue

Constructors

AlignSelfValue Value

Instances

Val AlignSelfValue

Defined in Clay.Flexbox

Methods

value :: AlignSelfValue -> Value

Other AlignSelfValue

Defined in Clay.Flexbox

Methods

other :: Value -> AlignSelfValue

Inherit AlignSelfValue

Defined in Clay.Flexbox

Methods

inherit :: AlignSelfValue

Center AlignSelfValue

Defined in Clay.Flexbox

Methods

center :: AlignSelfValue

Baseline AlignSelfValue

Defined in Clay.Flexbox

Methods

baseline :: AlignSelfValue

Auto AlignSelfValue

Defined in Clay.Flexbox

Methods

auto :: AlignSelfValue

Stretch AlignSelfValue

Defined in Clay.Flexbox

Methods

stretch :: AlignSelfValue

FlexStart AlignSelfValue

Defined in Clay.Flexbox

Methods

flexStart :: AlignSelfValue

FlexEnd AlignSelfValue

Defined in Clay.Flexbox

Methods

flexEnd :: AlignSelfValue

newtype AlignItemsValue

Constructors

AlignItemValue Value

Instances

Val AlignItemsValue

Defined in Clay.Flexbox

Methods

value :: AlignItemsValue -> Value

Other AlignItemsValue

Defined in Clay.Flexbox

Methods

other :: Value -> AlignItemsValue

Inherit AlignItemsValue

Defined in Clay.Flexbox

Methods

inherit :: AlignItemsValue

Center AlignItemsValue

Defined in Clay.Flexbox

Methods

center :: AlignItemsValue

Baseline AlignItemsValue

Defined in Clay.Flexbox

Methods

baseline :: AlignItemsValue

Stretch AlignItemsValue

Defined in Clay.Flexbox

Methods

stretch :: AlignItemsValue

FlexStart AlignItemsValue

Defined in Clay.Flexbox

Methods

flexStart :: AlignItemsValue

FlexEnd AlignItemsValue

Defined in Clay.Flexbox

Methods

flexEnd :: AlignItemsValue

newtype AlignContentValue

Constructors

AlignContentValue Value

Instances

Val AlignContentValue

Defined in Clay.Flexbox

Methods

value :: AlignContentValue -> Value

Other AlignContentValue

Defined in Clay.Flexbox

Methods

other :: Value -> AlignContentValue

Inherit AlignContentValue

Defined in Clay.Flexbox

Methods

inherit :: AlignContentValue

Center AlignContentValue

Defined in Clay.Flexbox

Methods

center :: AlignContentValue

Stretch AlignContentValue

Defined in Clay.Flexbox

Methods

stretch :: AlignContentValue

SpaceBetween AlignContentValue

Defined in Clay.Flexbox

Methods

spaceBetween :: AlignContentValue

SpaceAround AlignContentValue

Defined in Clay.Flexbox

Methods

spaceAround :: AlignContentValue

FlexStart AlignContentValue

Defined in Clay.Flexbox

Methods

flexStart :: AlignContentValue

FlexEnd AlignContentValue

Defined in Clay.Flexbox

Methods

flexEnd :: AlignContentValue

class Stretch a where

Methods

stretch :: a

Instances

Stretch Value

Defined in Clay.Flexbox

Methods

stretch :: Value

Stretch AlignSelfValue

Defined in Clay.Flexbox

Methods

stretch :: AlignSelfValue

Stretch AlignItemsValue

Defined in Clay.Flexbox

Methods

stretch :: AlignItemsValue

Stretch AlignContentValue

Defined in Clay.Flexbox

Methods

stretch :: AlignContentValue

class SpaceBetween a where

Methods

spaceBetween :: a

Instances

SpaceBetween Value

Defined in Clay.Flexbox

Methods

spaceBetween :: Value

SpaceBetween JustifyContentValue

Defined in Clay.Flexbox

Methods

spaceBetween :: JustifyContentValue

SpaceBetween AlignContentValue

Defined in Clay.Flexbox

Methods

spaceBetween :: AlignContentValue

class SpaceAround a where

Methods

spaceAround :: a

Instances

SpaceAround Value

Defined in Clay.Flexbox

Methods

spaceAround :: Value

SpaceAround JustifyContentValue

Defined in Clay.Flexbox

Methods

spaceAround :: JustifyContentValue

SpaceAround AlignContentValue

Defined in Clay.Flexbox

Methods

spaceAround :: AlignContentValue

class FlexStart a where

Methods

flexStart :: a

Instances

FlexStart Value

Defined in Clay.Flexbox

Methods

flexStart :: Value

FlexStart JustifyContentValue

Defined in Clay.Flexbox

Methods

flexStart :: JustifyContentValue

FlexStart AlignSelfValue

Defined in Clay.Flexbox

Methods

flexStart :: AlignSelfValue

FlexStart AlignItemsValue

Defined in Clay.Flexbox

Methods

flexStart :: AlignItemsValue

FlexStart AlignContentValue

Defined in Clay.Flexbox

Methods

flexStart :: AlignContentValue

class FlexEnd a where

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

Methods

flexEnd :: a

Instances

FlexEnd Value

Defined in Clay.Flexbox

Methods

flexEnd :: Value

FlexEnd JustifyContentValue

Defined in Clay.Flexbox

Methods

flexEnd :: JustifyContentValue

FlexEnd AlignSelfValue

Defined in Clay.Flexbox

Methods

flexEnd :: AlignSelfValue

FlexEnd AlignItemsValue

Defined in Clay.Flexbox

Methods

flexEnd :: AlignItemsValue

FlexEnd AlignContentValue

Defined in Clay.Flexbox

Methods

flexEnd :: AlignContentValue

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

data NamedFont

Instances

Val NamedFont

Defined in Clay.Font

Methods

value :: NamedFont -> Value

Other NamedFont

Defined in Clay.Font

Methods

other :: Value -> NamedFont

data FontWeight

Instances

Val FontWeight

Defined in Clay.Font

Methods

value :: FontWeight -> Value

Other FontWeight

Defined in Clay.Font

Methods

other :: Value -> FontWeight

Normal FontWeight

Defined in Clay.Font

Methods

normal :: FontWeight

Inherit FontWeight

Defined in Clay.Font

Methods

inherit :: FontWeight

data FontVariant

Instances

Val FontVariant

Defined in Clay.Font

Methods

value :: FontVariant -> Value

Other FontVariant

Defined in Clay.Font

Methods

other :: Value -> FontVariant

Normal FontVariant

Defined in Clay.Font

Methods

normal :: FontVariant

Inherit FontVariant

Defined in Clay.Font

Methods

inherit :: FontVariant

data FontStyle

Instances

Val FontStyle

Defined in Clay.Font

Methods

value :: FontStyle -> Value

Other FontStyle

Defined in Clay.Font

Methods

other :: Value -> FontStyle

Normal FontStyle

Defined in Clay.Font

Methods

normal :: FontStyle

Inherit FontStyle

Defined in Clay.Font

Methods

inherit :: FontStyle

data FontSize

Instances

Val FontSize

Defined in Clay.Font

Methods

value :: FontSize -> Value

Other FontSize

Defined in Clay.Font

Methods

other :: Value -> FontSize

Inherit FontSize

Defined in Clay.Font

Methods

inherit :: FontSize

Auto FontSize

Defined in Clay.Font

Methods

auto :: FontSize

data Required a

Constructors

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

Instances

Val (Required a)

Defined in Clay.Font

Methods

value :: Required a -> Value

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

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

fontColor :: Color -> Css

An alias for color.

color :: Color -> Css

sansSerif :: GenericFontFamily

serif :: GenericFontFamily

monospace :: GenericFontFamily

cursive :: GenericFontFamily

fantasy :: GenericFontFamily

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.

xxSmall :: FontSize

xSmall :: FontSize

medium :: FontSize

large :: FontSize

xLarge :: FontSize

xxLarge :: FontSize

smaller :: FontSize

larger :: FontSize

fontSize :: Size a -> Css

fontSizeCustom :: FontSize -> Css

italic :: FontStyle

oblique :: FontStyle

fontStyle :: FontStyle -> Css

smallCaps :: FontVariant

fontVariant :: FontVariant -> Css

bold :: FontWeight

bolder :: FontWeight

lighter :: FontWeight

weight :: Integer -> FontWeight

fontWeight :: FontWeight -> Css

messageBox :: NamedFont

smallCaption :: NamedFont

statusBar :: NamedFont

lineHeight :: Size a -> Css

module Clay.FontFace

module Clay.Geometry

module Clay.Gradient

module Clay.List

data Content

Instances

Val Content

Defined in Clay.Text

Methods

value :: Content -> Value

Initial Content

Defined in Clay.Text

Methods

initial :: Content

Normal Content

Defined in Clay.Text

Methods

normal :: Content

None Content

Defined in Clay.Text

Methods

none :: Content

Inherit Content

Defined in Clay.Text

Methods

inherit :: Content

data TextOverflow

Instances

Val TextOverflow

Defined in Clay.Text

Methods

value :: TextOverflow -> Value

Initial TextOverflow

Defined in Clay.Text

Methods

initial :: TextOverflow

None TextOverflow

Defined in Clay.Text

Methods

none :: TextOverflow

Inherit TextOverflow

Defined in Clay.Text

Methods

inherit :: TextOverflow

data OverflowWrap

Instances

Val OverflowWrap

Defined in Clay.Text

Methods

value :: OverflowWrap -> Value

Unset OverflowWrap

Defined in Clay.Text

Methods

unset :: OverflowWrap

Initial OverflowWrap

Defined in Clay.Text

Methods

initial :: OverflowWrap

Normal OverflowWrap

Defined in Clay.Text

Methods

normal :: OverflowWrap

Inherit OverflowWrap

Defined in Clay.Text

Methods

inherit :: OverflowWrap

data WordBreak

Instances

Val WordBreak

Defined in Clay.Text

Methods

value :: WordBreak -> Value

Unset WordBreak

Defined in Clay.Text

Methods

unset :: WordBreak

Initial WordBreak

Defined in Clay.Text

Methods

initial :: WordBreak

Normal WordBreak

Defined in Clay.Text

Methods

normal :: WordBreak

Inherit WordBreak

Defined in Clay.Text

Methods

inherit :: WordBreak

data TextTransform

Instances

Val TextTransform

Defined in Clay.Text

Methods

value :: TextTransform -> Value

None TextTransform

Defined in Clay.Text

Methods

none :: TextTransform

Inherit TextTransform

Defined in Clay.Text

Methods

inherit :: TextTransform

data TextDecoration

Instances

Val TextDecoration

Defined in Clay.Text

Methods

value :: TextDecoration -> Value

Other TextDecoration

Defined in Clay.Text

Methods

other :: Value -> TextDecoration

None TextDecoration

Defined in Clay.Text

Methods

none :: TextDecoration

Inherit TextDecoration

Defined in Clay.Text

Methods

inherit :: TextDecoration

data WhiteSpace

Instances

Val WhiteSpace

Defined in Clay.Text

Methods

value :: WhiteSpace -> Value

Other WhiteSpace

Defined in Clay.Text

Methods

other :: Value -> WhiteSpace

Normal WhiteSpace

Defined in Clay.Text

Methods

normal :: WhiteSpace

Inherit WhiteSpace

Defined in Clay.Text

Methods

inherit :: WhiteSpace

data TextAlign

Instances

Val TextAlign

Defined in Clay.Text

Methods

value :: TextAlign -> Value

Other TextAlign

Defined in Clay.Text

Methods

other :: Value -> TextAlign

Normal TextAlign

Defined in Clay.Text

Methods

normal :: TextAlign

Inherit TextAlign

Defined in Clay.Text

Methods

inherit :: TextAlign

Center TextAlign

Defined in Clay.Text

Methods

center :: TextAlign

data TextDirection

Instances

Val TextDirection

Defined in Clay.Text

Methods

value :: TextDirection -> Value

Other TextDirection

Defined in Clay.Text

Methods

other :: Value -> TextDirection

Normal TextDirection

Defined in Clay.Text

Methods

normal :: TextDirection

Inherit TextDirection

Defined in Clay.Text

Methods

inherit :: TextDirection

data TextIndent

Instances

Val TextIndent

Defined in Clay.Text

Methods

value :: TextIndent -> Value

Other TextIndent

Defined in Clay.Text

Methods

other :: Value -> TextIndent

Unset TextIndent

Defined in Clay.Text

Methods

unset :: TextIndent

Initial TextIndent

Defined in Clay.Text

Methods

initial :: TextIndent

Inherit TextIndent

Defined in Clay.Text

Methods

inherit :: TextIndent

data TextRendering

Instances

Val TextRendering

Defined in Clay.Text

Methods

value :: TextRendering -> Value

Other TextRendering

Defined in Clay.Text

Methods

other :: Value -> TextRendering

Inherit TextRendering

Defined in Clay.Text

Methods

inherit :: TextRendering

Auto TextRendering

Defined in Clay.Text

Methods

auto :: TextRendering

letterSpacing :: Size a -> Css

wordSpacing :: Size a -> Css

optimizeSpeed :: TextRendering

optimizeLegibility :: TextRendering

geometricPrecision :: TextRendering

textRendering :: TextRendering -> Css

textShadow :: Size a -> Size a -> Size a -> Color -> 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

indent :: Size a -> TextIndent

textIndent :: TextIndent -> Css

ltr :: TextDirection

rtl :: TextDirection

direction :: TextDirection -> Css

justify :: TextAlign

matchParent :: TextAlign

start :: TextAlign

end :: TextAlign

alignSide :: Side -> TextAlign

alignString :: Char -> TextAlign

textAlign :: TextAlign -> Css

whiteSpace :: WhiteSpace -> Css

nowrap :: WhiteSpace

preWrap :: WhiteSpace

preLine :: WhiteSpace

underline :: TextDecoration

overline :: TextDecoration

lineThrough :: TextDecoration

blink :: TextDecoration

textDecorationLine :: TextDecoration -> Css

textDecorationColor :: Color -> Css

textDecoration :: TextDecoration -> Css

textDecorationStyle :: Stroke -> Css

capitalize :: TextTransform

uppercase :: TextTransform

lowercase :: TextTransform

fullWidth :: TextTransform

textTransform :: TextTransform -> Css

breakAll :: WordBreak

keepAll :: WordBreak

wordBreak :: WordBreak -> Css

breakWord :: OverflowWrap

wordWrap :: OverflowWrap -> Css

overflowWrap :: OverflowWrap -> Css

overflowClip :: TextOverflow

overflowEllipsis :: TextOverflow

textOverflow :: TextOverflow -> Css

attrContent :: Text -> Content

stringContent :: Text -> Content

uriContent :: Text -> Content

urlContent :: Text -> Content

openQuote :: Content

closeQuote :: Content

noOpenQuote :: Content

noCloseQuote :: Content

content :: Content -> Css

contents :: [Content] -> Css

module Clay.Transform

module Clay.Transition

module Clay.Animation

data MaskComposite

Instances

Val MaskComposite

Defined in Clay.Mask

Methods

value :: MaskComposite -> Value

Other MaskComposite

Defined in Clay.Mask

Methods

other :: Value -> MaskComposite

None MaskComposite

Defined in Clay.Mask

Methods

none :: MaskComposite

Inherit MaskComposite

Defined in Clay.Mask

Methods

inherit :: MaskComposite

Mask MaskComposite

Defined in Clay.Mask

Methods

mask :: MaskComposite -> Css

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 BackgroundOrigin

Defined in Clay.Mask

Methods

mask :: BackgroundOrigin -> Css

Mask BackgroundImage

Defined in Clay.Mask

Methods

mask :: BackgroundImage -> Css

Mask BackgroundRepeat

Defined in Clay.Mask

Methods

mask :: BackgroundRepeat -> Css

Mask BackgroundSize

Defined in Clay.Mask

Methods

mask :: BackgroundSize -> Css

Mask BackgroundPosition

Defined in Clay.Mask

Methods

mask :: BackgroundPosition -> 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

copy :: MaskComposite

sourceOver :: MaskComposite

sourceIn :: MaskComposite

sourceOut :: MaskComposite

sourceAtop :: MaskComposite

destinationOver :: MaskComposite

destinationIn :: MaskComposite

destinationOut :: MaskComposite

destinationAtop :: MaskComposite

xor :: 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

maskImage :: BackgroundImage -> Css

maskImages :: [BackgroundImage] -> Css

maskOrigin :: BackgroundOrigin -> Css

maskOrigins :: [BackgroundOrigin] -> Css

maskClip :: BackgroundClip -> Css

maskClips :: [BackgroundClip] -> Css

maskAttachment :: BackgroundAttachment -> Css

maskAttachments :: [BackgroundAttachment] -> Css

data Filter

Instances

Val Filter

Defined in Clay.Filter

Methods

value :: Filter -> Value

None Filter

Defined in Clay.Filter

Methods

none :: Filter

Inherit Filter

Defined in Clay.Filter

Methods

inherit :: Filter

filter :: Filter -> Css

filters :: [Filter] -> Css

blur :: Size LengthUnit -> Filter

brightness :: Double -> 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