A flexible API for generating a complete CSS stylesheet in Elm
This library builds off of my CssBasics package to allow the user to generate a complete CSS stylesheet in Elm. I created it to provide a more flexible alternative to other CSS-in-Elm packages that would let me write CSS in a way that conforms to my stylistic preferences for Elm code. The tradeoff for this flexibility is that it was not designed to safeguard the user from generating invalid CSS.
In addition to constructing basic rule sets with element, id, class, and
attribute selectors, the current version of
elm-stylesheet provides support
- combinator selectors (including pseudo-classes and pseudo-elements)
- media queries
- import statements (with helpers for Google Font imports)
- prepending strings of CSS code to your stylesheet
- embedding a stylesheet in your Elm program's view
- exporting a stylesheet to a .css file using rtfeldman's elm-css Node module
How to Export to a .css File using
Exporting to a .css file using elm-css
requires a specially formatted port module. Copy this
to the directory that contains your stylesheet module. Replace
the name of your module and
BasicUse.myStylesheet with the name of the
function that returns the stylesheet you want to export. You can specify the
name of the file to be created by changing
"myCssFile.css" to whatever you
elm-css, run the following in your terminal:
$ npm install -g elm-css
Then run installed module, giving it the path to your
Stylesheets.elm file, for example:
$ elm-css src/Stylesheets.elm
If the compiler returns an error, check your file paths and exposed modules.
The approach to generating CSS used in this library is based on the elm-css package by Jeffrey Massung, version 1.1, licensed under BSD-3. I retained Massung's basic approach to "compiling" a stylesheet that will be applied when rendering a view, but I changed a lot of the implementation details, renamed some things, and added a number of features.
The elm-css Node module, which may be used with this package to generate an external .css file, was created by Richard Feldman and is licensed under BSD-3.