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:
font-size
as big as an h1 tag.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.
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!"
]
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 }
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