Safe Haskell | None |
---|
- Rendering stylesheets to CSS.
- The
Css
monad for collecting style rules. - The selector language.
- Apply media queries.
- Apply key-frame animation.
- Define font-faces.
- Pseudo elements and classes.
- HTML5 attribute and element names.
- Commonly used value types.
- Values shared between multiple properties.
- Embedded style properties.
- Writing your own properties.
- render :: Css -> Text
- renderWith :: Config -> [App] -> Css -> Text
- putCss :: Css -> IO ()
- pretty :: Config
- compact :: Config
- type Css = StyleM ()
- (?) :: Selector -> Css -> Css
- (<?) :: Selector -> Css -> Css
- (&) :: Refinement -> Css -> Css
- root :: Selector -> Css -> Css
- pop :: Int -> Css -> Css
- (-:) :: Key Text -> Text -> Css
- type Selector = Fix SelectorF
- data Refinement
- star :: Selector
- element :: Text -> Selector
- (**) :: Selector -> Selector -> Selector
- (|>) :: Selector -> Selector -> Selector
- (#) :: Selector -> Refinement -> Selector
- (|+) :: Selector -> Selector -> Selector
- byId :: Text -> Refinement
- byClass :: Text -> Refinement
- pseudo :: Text -> Refinement
- func :: Text -> [Text] -> Refinement
- attr :: Text -> Refinement
- (@=) :: Text -> Text -> Refinement
- (^=) :: Text -> Text -> Refinement
- ($=) :: Text -> Text -> Refinement
- (*=) :: Text -> Text -> Refinement
- (~=) :: Text -> Text -> Refinement
- (|=) :: Text -> Text -> Refinement
- query :: MediaType -> [Feature] -> Css -> Css
- queryNot :: MediaType -> [Feature] -> Css -> Css
- queryOnly :: MediaType -> [Feature] -> Css -> Css
- keyframes :: Text -> [(Double, Css)] -> Css
- keyframesFromTo :: Text -> Css -> Css -> Css
- fontFace :: Css -> Css
- module Clay.Pseudo
- module Clay.Attributes
- module Clay.Elements
- module Clay.Size
- module Clay.Color
- module Clay.Time
- module Clay.Common
- 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
- module Clay.Property
Rendering stylesheets to CSS.
Render a stylesheet with the default configuration. The pretty printer is used by default.
renderWith :: Config -> [App] -> Css -> TextSource
Render a stylesheet with a custom configuration and an optional outer scope.
Render to CSS using the default configuration (pretty
) and directly
print to the standard output.
The Css
monad for collecting style rules.
(?) :: Selector -> Css -> CssSource
Assign a stylesheet to a selector. When the selector is nested inside an
outer scope it will be composed with deep
.
(<?) :: Selector -> Css -> CssSource
Assign a stylesheet to a selector. When the selector is nested inside an
outer scope it will be composed with |>
.
(&) :: Refinement -> Css -> CssSource
Assign a stylesheet to a filter selector. When the selector is nested
inside an outer scope it will be composed with the with
selector.
pop :: Int -> Css -> CssSource
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 -> CssSource
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.
Elements selectors.
element :: Text -> SelectorSource
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 -> SelectorSource
The child selector composer. Maps to sel1 > sel2
in CSS.
(#) :: Selector -> Refinement -> SelectorSource
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 -> SelectorSource
The adjacent selector composer. Maps to sel1 + sel2
in CSS.
Refining selectors.
byId :: Text -> RefinementSource
Filter elements by id. The preferred syntax is to enable
OverloadedStrings
and use "#id-name"
.
byClass :: Text -> RefinementSource
Filter elements by class. The preferred syntax is to enable
OverloadedStrings
and use ".class-name"
.
pseudo :: Text -> RefinementSource
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] -> RefinementSource
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 -> RefinementSource
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 -> RefinementSource
Filter elements based on the presence of a certain attribute with the specified value.
(^=) :: Text -> Text -> RefinementSource
Filter elements based on the presence of a certain attribute that begins with the selected value.
($=) :: Text -> Text -> RefinementSource
Filter elements based on the presence of a certain attribute that ends with the specified value.
(*=) :: Text -> Text -> RefinementSource
Filter elements based on the presence of a certain attribute that contains the specified value as a substring.
(~=) :: Text -> Text -> RefinementSource
Filter elements based on the presence of a certain attribute that have the specified value contained in a space separated list.
(|=) :: Text -> Text -> RefinementSource
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 -> CssSource
Apply a set of style rules when the media type and feature queries apply.
queryNot :: MediaType -> [Feature] -> Css -> CssSource
Apply a set of style rules when the media type and feature queries do not apply.
queryOnly :: MediaType -> [Feature] -> Css -> CssSource
Apply a set of style rules only when the media type and feature queries apply.
Apply key-frame animation.
Define font-faces.
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