FsTachyons 1.0.0

.NET Standard 2.0
NuGet\Install-Package FsTachyons -Version 1.0.0
This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package.
dotnet add package FsTachyons --version 1.0.0
<PackageReference Include="FsTachyons" Version="1.0.0" />
For projects that support PackageReference, copy this XML node into the project file to reference the package.
paket add FsTachyons --version 1.0.0
#r "nuget: FsTachyons, 1.0.0"
#r directive can be used in F# Interactive, C# scripting and .NET Interactive. Copy this into the interactive tool or source code of the script to reference the package.
// Install FsTachyons as a Cake Addin
#addin nuget:?package=FsTachyons&version=1.0.0

// Install FsTachyons as a Cake Tool
#tool nuget:?package=FsTachyons&version=1.0.0

FsTachyons

NuGet Version build

open FsTachyons
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: FsTachyons is included for demonstration purposes only.

FsTachyons is an F# API for the functional 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 FsTachyons

FsTachyons 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.

Product Versions
.NET net5.0 net5.0-windows net6.0 net6.0-android net6.0-ios net6.0-maccatalyst net6.0-macos net6.0-tvos net6.0-windows
.NET Core netcoreapp2.0 netcoreapp2.1 netcoreapp2.2 netcoreapp3.0 netcoreapp3.1
.NET Standard netstandard2.0 netstandard2.1
.NET Framework net461 net462 net463 net47 net471 net472 net48
MonoAndroid monoandroid
MonoMac monomac
MonoTouch monotouch
Tizen tizen40 tizen60
Xamarin.iOS xamarinios
Xamarin.Mac xamarinmac
Xamarin.TVOS xamarintvos
Xamarin.WatchOS xamarinwatchos
Compatible target framework(s)
Additional computed target framework(s)
Learn more about Target Frameworks and .NET Standard.

NuGet packages

This package is not used by any NuGet packages.

GitHub repositories

This package is not used by any popular GitHub repositories.

Version Downloads Last updated
1.0.0 47 9/16/2022