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 offering a developer experience comparable to that of authoring CSS directly.
body ? Rule.do
width := pct 100
height := pct 100
padding := px 16 ~ px 32
media screen { minWidth: px 768 } ?
body ?
padding := pct 5 ~ pct 10body {
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 tectonIf your project's package set doesn't include tecton, then add it in your
packages.dhall file first. For example:
let upstream = https://raw.githubusercontent.com/purescript/package-sets/psc-0.15.4-20221010/src/packages.dhall
in upstream
with tecton =
{ dependencies =
[ "colors"
, "either"
, "foldable-traversable"
, "integers"
, "lists"
, "numbers"
, "prelude"
, "record"
, "strings"
, "transformers"
, "tuples"
]
, repo =
"https://github.com/nsaunders/purescript-tecton.git"
, version =
"master"
}