Syntax

Declarations

The main building block of style sheets and inline styles alike is a declaration. A declaration consists of two parts: a property and a value. The property describes the aspect of the element you want to style, such as its font or color, and the value specifies what you want the property to be. Tecton uses the := operator to set the property on the left-hand side to the value on the right. For example, here is how to set the color of the text content within an HTML element to black:

module Example.InlineStyle where

import Color (black)
import Tecton

inlineStyle :: Declarations _
inlineStyle = color := black

Declaration blocks

A simple rule can consist of a single declaration. However, in many cases you will need to use qualified-do syntax to combine multiple declarations into a declaration block, as in the following:

module Example.InlineStyle where

import Color (black, white)
import Tecton
import Tecton.Rule as Rule

inlineStyle :: Declarations _
inlineStyle = Rule.do
  color := black
  backgroundColor := white

Rules

A rule consists of a prelude and either nested rules or a declaration block, joined together using the ? operator.

Note The ? operator is equivalent to the pair of curly braces surrounding a rule or declaration block in CSS.

The most common type of rule is a style rule, consisting of a selector to the left of the ? operator and a declaration block to the right, e.g.

module Example.StyleSheet where

import Color (black, white)
import Tecton
import Tecton.Rule as Rule

styleSheet :: CSS
styleSheet = do
  universal ? Rule.do
    backgroundColor := black
    color := white

Another type of rule is a media query, whose prelude specifies the conditions under which the nested rules apply. In the following example, the style rule applies to a printed page:

module Example.StyleSheet where

import Tecton
import Tecton.Rule as Rule

styleSheet :: CSS
styleSheet = do
  media print {} ? do
    body ? Rule.do
      margin := inch 1

Lists

Lists can be found throughout CSS, notably in selectors and many properties such as transitionProperty (which accepts a list of properties to animate). Tecton's list syntax uses the /\ operator (nested tuples). Here is how the syntax looks:

module Example.StyleSheet where

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

styleSheet :: CSS
styleSheet = do

  -- A selector list matching multiple HTML element types
  a /\ button /\ summary ? Rule.do

    -- A list of multiple properties to transition
    transitionProperty := color /\ backgroundColor

    -- A list of transition durations corresponding to each property
    transitionDuration := ms 150 /\ ms 75

Note The /\ operator is generally equivalent to , in CSS.

Note If you're just getting started with Tecton, you may wonder why nested tuples are used to represent lists, rather than the more "obvious" structures like Array or even List. The reason for this relates to Tecton's highly polymorphic API, which is designed to mimic the "flexible" nature of CSS itself, whose design takes full advantage of dynamic typing. Array and List are homogenous structures, while list items in Tecton frequently have various data types.