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.
The preferred installation method is Spago:
spago install tecton
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.
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 is available on Pursuit.
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.
Contributions are welcome. Please see the Contributing guide for more information.