Tecton: CSS in PureScript

Tecton is a domain-specific language for authoring CSS using PureScript. At a basic level, it could be compared to CSS preprocessors such as Sass and LESS. However, where these preprocessors aim to add expressivity to CSS, Tecton offers the full expressive power of its host language along with a high degree of type safety. It also unlocks a number of secondary benefits, such as reuse of existing PureScript knowledge and seamless colocation with related markup. If you're ready to write masterful CSS with Tecton, let's get started.

Installation

Local installation

The preferred installation method is Spago:

spago install tecton

Try PureScript

Alternatively, to evaluate Tecton without installing anything locally, you can use Try PureScript. Throughout the documentation, look for buttons like this one to launch the corresponding code example in the Try PureScript app:

You can give this a try now with the following example.

"Hello world" example

This example serves as a good starting point for experimenting with Tecton. Simply update the styleSheet function with your own rules to see Tecton's CSS output.

module Example.StyleSheet where

import Color (rgb)
import Data.Tuple.Nested ((/\))
import Tecton
import Tecton.Rule as Rule

styleSheet :: CSS
styleSheet = do
  universal &. ClassName "hello-world" ? Rule.do
    width := px 400
    height := px 200
    backgroundColor := rgb 0 5 56
    color := rgb 232 199 148
    display := flex
    alignItems := center
    justifyContent := center
    fontFamily := "Lexend" /\ sansSerif
    fontSize := px 32
    fontWeight := 700

API documentation

API documentation is available on Pursuit.

Troubleshooting

If you encounter an error that is difficult to understand, please try the following resources:

The test suite may offer an example of what you are trying to achieve.
The W3C publishes the CSS specifications that guide the design of this library.

Support

If you get stuck, help is available in the PureScript Discord chat or on the PureScript Discourse forum.

Contributing

Contributions are welcome. Please see the Contributing guide for more information.

Tecton Guide