Simple setup for Elm and Tachyons
Simple setup for Elm and Tachyons
Elm and Tachyons are great for building UIs
Tachyons - “Create fast loading, highly readable, and 100% responsive interfaces with as little css as possible.”
Elm - “A delightful language for reliable webapps.”
Both also have low setup requirements to start developing with
for elm:
> elm reactor
and go visit localhost:8080
and for tachyons:
add this to your html file
<link rel="stylesheet" href="https://unpkg.com/tachyons@4.6.1/css/tachyons.min.css"/>
These setups are great for playing around with ideas, but once you need more control you’re left with a few caveats
This boilerplate is a relatively minimal setup, designed to get you off to a quick start using both of them together but with finer control over customising each
elm liveA flexible dev server for Elm, Live reload included
elm live compiles elm code, watches for changes and serves the app from the public folder on localhost:8000
postCSSPostCSS - “A tool for transforming CSS with JavaScript”
Tachyons has some fantastic default styles, but sometimes you want to customise those defaults.
The boilerplate uses postCSS to bundle all the individual tachyons modules together in src/css/index.css and apply custom variables from the other files in src/css/. The boilerplate uses a fork of Tachyons called Tachyons Custom to give easy access to all the css variables (like colors, widths etc).
Run css and elm in watch mode:
$ npm run dev
Build css and elm bundles once:
$ npm run build
In dev mode the browser will open if there are no compile errors, and show localhost:8000 with your app running
An elm test setup has been added to the tests directory, to run make sure you have elm-test cli installed
$ npm install -g elm-test
and run
$ elm test
Contributions / suggestions are welcome, please leave an issue