FsTachyons

open Falco.Markup
open FsTachyons
open FsTachyons.Tac

Elem.h1 [ Attr.class' (tac [ f3; f1_m; f_headline_l ])]
        [ Text.raw "Hello World!" ]
// Produces: <h1 class="f3 f1-m f-headline-l">Title</h1>

Note: Falco.Markup is included for demonstration purposes only.

FsTachyons is an F# API for the CSS library Tachyons, functional CSS for humans.

Key Features

• Automatically helps build complex class strings, via tac [].
• Facilitates the discoverability of Tachyons classes.
• Use native F# to produce class strings.
• Easily extended by creating custom classes.

Design Goals

• Provide discoverable functions for all Tachyons classes.
• Can be integrated into any F# markup DSL.
• Easily learned by someone with knowledge of Tachyons.

Overview

FsTachyons maps all of the Tachyons CSS classes to functions in the Tac module. These types can be combined together to form class strings using the tac [] helper function, or composed using the + operator.

To escape the characters which are valid in the CSS spec, but not F#, the following augmentations to the Tachyons class are made:

• Leading . is removed (i.e., .red becomes red).
• - are replaced by _ (i.e., .b--red becomes b__red).

Usage with Falco.Markup

Falco.Markup has modules for elements & attributes, this allows us to import the FsTachyons.Tac which make class string definitions more terse.

open FsTachyons
open FsTachyons
open FsTachyons.Tac

// <p class="measure lh-copy">Lorem ipsum</p>
Elem.p [ Attr.class' (tac [ measure; lh_copy ])]
       [ Text.raw "Lorem ipsum" ]

// <h1 class="f3 f1-m f-headline-l">Title</h1>
Elem.h1 [ Attr.class' (tac [ f3; f1_m; f_headline_l ])]
        [ Text.raw "Hello World!" ]

// <a class="f6 link dim br1 ph3 pv2 mb2 dib white bg-black" href="#0">Button Text</a>
Elem.a [ Attr.class' (tac [ f6; link; dim; br1; ph3; pv2; dib; white; bg_black ]) ]
       [ Text.raw "Button Text" ]

Usage with Feliz

open Feliz
open FsTachyons
open FsTachyons.Tac

// <p class="measure lh-copy">Lorem ipsum</p>
Elem.p [ prop.className [ tac [ measure; lh_copy ] ]
         prop.text "Lorem ipsum" ]

// <h1 class="f3 f1-m f-headline-l">Title</h1>
Elem.h1 [ prop.className [ tac [ f3; f1_m; f_headline_l ] ]
          prop.text "Hello World!" ]

// <a class="f6 link dim br1 ph3 pv2 mb2 dib white bg-black" href="#0">Button Text</a>
Elem.a [ prop.className [ tac [ f6; link; dim; br1; ph3; pv2; dib; white; bg_black ] ]
         prop.text "Button Text" ]

Usage with Giraffe.ViewEngine

With Giraffe's approach to HTML generation, we must reference the class functions via the Tac module.

open FsTachyons
open Giraffe.ViewEngine

// <p class="measure lh-copy">Lorem ipsum</p>
p [ _class (tac [Tac.measure; Tac.lh_copy ])]
  [ rawText "Lorem ipsum" ]

// <h1 class="f3 f1-m f-headline-l">Title</h1>
h1 [ _class (tac [ Tac.f3; Tac.f1_m; Tac.f_headline_l ])]
   [ rawText "Hello World!" ]

// <a class="f6 link dim br1 ph3 pv2 mb2 dib white bg-black" href="#0">Button Text</a>
a [ _class (tac [ Tac.f6; Tac.link; Tac.dim; Tac.br1; Tac.ph3; Tac.pv2; Tac.dib; Tac.white; Tac.bg_black ]) ]
  [ rawText "Button Text" ]

Find a bug?

There's an issue for that.

License

Built with ♥ by NHLPA Engineering in Toronto, ON. Licensed under MIT.