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.

The selector language.

type Selector = Fix SelectorF

data Refinement

Instances

Show Refinement

IsString 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.

importUrl :: Text -> Css

Import a CSS file from a URL

Pseudo elements and classes.

module Clay.Pseudo

HTML5 attribute and element names.

module Clay.Attributes

module Clay.Elements

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

module Clay.Display

module Clay.Dynamic

module Clay.Font

module Clay.FontFace

module Clay.Geometry

module Clay.Gradient

module Clay.List

module Clay.Text

module Clay.Transform

module Clay.Transition

module Clay.Animation

module Clay.Mask

module Clay.Filter

Writing your own properties.

module Clay.Property