groma84 / elm-tachyons / Tachyons

Tachyons is the best CSS framework ever. It's an implementation of what people call "Functional CSS" which makes working with CSS a little bit easier.

In functional CSS you have a ton of little CSS classes that do one thing, and do it well #unixphilosophy.

Essentially what this means is that can create almost any interface without writing custom css, you only need to compose different CSS selectors together. Here is an example:

div [classes [pa1, red, f1]] []

This will:

There's even responsive versions. Like p1_ns that will only add padding to anything that is "not small" (larger than mobile). This style allows you to easily create responsive mobile interfaces.

Working example

To use the library, just put tachyons.css somewhere in your elm-html code to add the stylesheet to your document, and then you can do whatever you want! Here is a small example:

module Main exposing (..)

import Tachyons exposing (classes, tachyons)
import Tachyons.Classes exposing (f1, purple)
import Html exposing (..)


main =
    div [ classes [ f1, purple ] ]
        [ tachyons.css
        , text "I'm Purple and big!"
        ]

Helper Classes

classes : List String -> Html.Attribute msg

This is a helper function that will allow you to combine multiple Tachyons classes (which are strings) are return a Html.Attributes

div [classes [pa3, red, f1]] []

tachyons : { css : Html msg }

Tachyons

This basically includes an <style> tag containing the inline CSS code for the tachyons version this library supports. Namely 4.12.0.

To use it just place it inside of a HTML tag like so:

div [] [ tachyons.css ]

If you want to use it from a CDN link rather than a <style> tag I would encourage you to include the CDN link in your HTML like so:

<!-- NOTE: this is outside of Elm, inside of Elm it will cause a css flash -->
<link rel="stylesheet" href="https://unpkg.com/tachyons@4.11.1/css/tachyons.min.css"/>

then use the Tachyons.Classes as you normally would.

tachyonsStylesheet : String

This is a helper function that exports the tachyons stylesheet as a string, allowing you to define your own