css-simple: eDSL for CSS

[ gpl, library, web ] [ Propose Tags ]

See the Css module description


[Skip to Readme]

Downloads

Maintainer's Corner

Package maintainers

For package maintainers and hackage trustees

Candidates

  • No Candidates
Versions [RSS] 0.1.0.0, 0.1.0.1 (info)
Change log ChangeLog.md
Dependencies base (>=4.7 && <5), mtl (>=2.2.2 && <2.3), text (>=1.2.5.0 && <1.3), text-builder (>=0.6.6.5 && <0.7) [details]
License GPL-3.0-only
Copyright 2022 Alexey Seledkov
Author Alexey Seledkov
Maintainer qyutou@gmail.com
Category Web
Home page https://github.com/Qyutou/css-simple#readme
Bug tracker https://github.com/Qyutou/css-simple/issues
Source repo head: git clone https://github.com/Qyutou/css-simple
Uploaded by Qyutou at 2022-07-26T09:48:37Z
Distributions
Downloads 151 total (5 in the last 30 days)
Rating 2.0 (votes: 1) [estimated by Bayesian average]
Your Rating
  • λ
  • λ
  • λ
Status Docs uploaded by user
Build status unknown [no reports yet]

Readme for css-simple-0.1.0.1

[back to package description]

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.

>>> :set -XOverloadedStrings
>>> rule ".wrapper" (maxWidth "72rem")
>>> ".wrapper" ? (maxWidth "72rem")
>>> ".wrapper" (maxWidth "72rem") :: Css ()
.wrapper {
  max-width: 72rem
}

Css monad has the Semigroup and Monoid instances, so the elements are juxtaposed via semigroups's append:

>>> "body" (background "#000000") <> ".wrapper" (width "90vw" <> maxWidth "72rem") :: 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:

>>> "@media only screen and (min-width: 48rem)" (".wrapper" (maxWidth "72rem")) :: 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:

>>> declaration "property" "value"
>>> "property" |> "value"
>>> "property" "value" :: Css ()
property: value

An example of the CSS in the function:


{-# 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:

>>> putCss sampleStyle
body {
  background: #000000
}
.wrapper {
  width: 90vw;
  max-width: 72rem
}

Compact configuration:

>>> putCssWith sampleStyle compact
body{background:#000000}.wrapper{width:90vw;max-width:72rem}