# css-simple
Simple eDSL for writing CSS
## Usage
For normal work the library requires the OverloadedStrings language extension.
There are three main ways to create the CSS Rules: `rule`, infix `?` or
without any function using the OverloadedStrings if the type is specified.
```haskell
>>> :set -XOverloadedStrings
>>> rule ".wrapper" (maxWidth "72rem")
>>> ".wrapper" ? (maxWidth "72rem")
>>> ".wrapper" (maxWidth "72rem") :: Css ()
```
```css
.wrapper {
max-width: 72rem
}
```
Css monad has the Semigroup and Monoid instances, so the elements are
juxtaposed via semigroups's append:
```haskell
>>> "body" (background "#000000") <> ".wrapper" (width "90vw" <> maxWidth "72rem") :: Css ()
```
```css
body {
background: #000000
}
.wrapper {
width: 90vw;
max-width: 72rem
}
```
Rules may be nested in other rules, this is also used for creating the media
queries:
```haskell
>>> "@media only screen and (min-width: 48rem)" (".wrapper" (maxWidth "72rem")) :: Css ()
```
```css
@media only screen and (min-width: 48rem) {
.wrapper {
max-width: 72rem
}
}
```
If any property is not provided by default, the new one can be created with
any of the following methods:
```haskell
>>> declaration "property" "value"
>>> "property" |> "value"
>>> "property" "value" :: Css ()
```
```css
property: value
```
An example of the CSS in the function:
```haskell
{-# LANGUAGE BlockArguments #-}
{-# LANGUAGE OverloadedStrings #-}
import Css
sampleStyle :: Css ()
sampleStyle = do
"body" do
background "#000000"
".wrapper" do
width "90vw"
maxWidth "72rem"
```
## Rendering
Rendering configuration define how the CSS Document shall be rendered. It must
be the Config data type. Currently there are two configurations:
- `pretty` - Pretty, human-readable configuration, used everywhere by default,
but works slightly slower than the `compact`
- `compact` - As compact rendering as possible, render as a one-line with the
least possible amount of the spacing
The rendering of the CSS documents can be done with the functions:
- `renderCss` - Used to render the Css as a Data.Text with default rendering
configuration
- `renderCssWith` - Used to render the Css as a Data.Text with certain
rendering configuration
- `putCss` - Used to render the CSS as a Data.Text and print it to stdout with
default rendering configuration
- `putCssWith` Used to render the CSS as a Data.Text with certain rendering
configuration and print it to the stdout
- `renderCssToFile` - Used to render the Css as a Data.Text and save it to
FilePath with default rendering configuration
- `renderCssToFileWith` - Used to render the Css as a Data.Text and save it to
FilePath with certain rendering configuration
Here are example of different rendering of the example in the previous
section.
Pretty (default) configuration:
```haskell
>>> putCss sampleStyle
```
```css
body {
background: #000000
}
.wrapper {
width: 90vw;
max-width: 72rem
}
```
Compact configuration:
```haskell
>>> putCssWith sampleStyle compact
```
```css
body{background:#000000}.wrapper{width:90vw;max-width:72rem}
```