decioferreira/elm-zen-css - version: 1.0.0

for more information visit the package's GitHub page

Package contains the following modules:

Elm Zen CSS

elm-zen-css allows you to define CSS in elm.

It achieves this by exporting both a .css file, as well as an .elm file that contains a trimmed down version of the CSS definitions, where only the class names are kept.

Here is a simple example of the result of running (find a more complete example on the example directory):

elm-zen-css stylesheet/Main.elm --watch --css app.css --elm src/Classes.elm

When the content of the stylesheet/Main.elm is the following:

module Main exposing ( strong )

import CSS exposing (Class)
import CSS.Properties as Properties


strong : Class
strong =
    CSS.class "strong"
        [ Properties.custom "font-weight" "bold"
        ]

The result will be the following two files, app.css:

.strong {font-weight: bold}

And src/Classes.elm:

module Classes exposing (strong)

import CSS


strong : CSS.ClassName
strong  =
    CSS.className "strong"

This last file (ie. Classes module), can then the used in the following way:

module Main exposing (main)

import CSS.Attributes
import Classes
import Html


main =
  Html.div [ CSS.Attributes.class Classes.strong ] 
    [ Html.text "Hello!"
    ]

In addition to this, you can install elm-review-zen-css to add elm-review rules that will support the use of elm-zen-css.

It is also encouraged that the .css and .elm generated files are added to .gitignore.

Installation

npm install elm-zen-css

Usage

% elm-zen-css --help
Usage: cli [options] <stylesheet-elm-file>

Elm Zen CSS

Arguments:
  stylesheet-elm-file       watch file changes

Options:
  -c, --css <css-file>      output CSS file
  -e, --elm <elm-file>      output production version file
  -w, --watch               watch file changes
  -j, --elmjson <elm-json>  use a custom elm-json file
  -h, --help                display help for command

Example

Find more details on the example directory.

Development

Start by installing the project dependencies:

yarn