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.
Getting Started
The best way to get started with this library is to familiarize yourself with the syntax for style declarations used by CssBasics, then check out this simple, self-contained example.
Supported Features
In addition to constructing basic rule sets with element, id, class, and
attribute selectors, the current version of elm-stylesheet
provides support
for:
- 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
elm-css
How to Export to a .css File using Exporting to a .css file using elm-css
requires a specially formatted port module. Copy this
template
to the directory that contains your stylesheet module. Replace BasicUse
with
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
want.
To install 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.
Dependencies:
Credits:
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.