Tecton is a domain-specific language for authoring CSS, embedded in PureScript. The unique capabilities of PureScript allow Tecton's strongly-typed interface to guard against a wide range of errors while remaining highly flexible like vanilla CSS.

body ? Rule.do
  width := pct 100
  height := pct 100
  padding := px 16 ~ px 32

media screen { minWidth: px 768 } ?
  body ?
    padding := pct 5 ~ pct 10

body {
  width: 100%;
  height: 100%;
  padding: 16px 32px;
}
@media screen and (min-width: 768px) {
  body {
    padding: 5% 10%;
  }
}

Many more examples are located in the examples and test subdirectories.

The preferred installation method is Spago.

spago install tecton

• purescript-tecton-halogen
• purescript-tecton-halogen-starter