rtfeldman/elm-css 8.1.0

CSS Preprocessor for Elm

Platform: Elm

Language: Elm

License: BSD-3-Clause

Repository: https://github.com/rtfeldman/elm-css

View on registry: http://package.elm-lang.org/packages/rtfeldman/elm-css/8.1.0

Direct download link: https://github.com/rtfeldman/elm-css/archive/8.1.0.zip

Install: elm-package install rtfeldman/elm-css 8.1.0


elm-css Version Travis build Status AppVeyor build status

elm-css lets you define CSS in Elm, like so:

module MyCss exposing (..)

import Css exposing (..)
import Css.Elements exposing (body, li)
import Css.Namespace exposing (namespace)


type CssClasses
    = NavBar


type CssIds
    = Page


css =
    (stylesheet << namespace "dreamwriter")
    [ body
        [ overflowX auto
        , minWidth (px 1280)
        ]
    , id Page
        [ backgroundColor (rgb 200 128 64)
        , color (hex "CCFFFF")
        , width (pct 100)
        , height (pct 100)
        , boxSizing borderBox
        , padding (px 8)
        , margin zero
        ]
    , class NavBar
        [ margin zero
        , padding zero
        , children
            [ li
                [ (display inlineBlock) |> important
                , color primaryAccentColor
                ]
            ]
        ]
    ]


primaryAccentColor =
    hex "ccffaa"

Here's what you can do with this code:

  • You can generate a .css file from it.
  • You can use it to generate type-checked inline styles.
  • You can share NavBar and Page with your Elm view code, so your classes and IDs can never get out of sync due to a typo or refactor.
  • You can move this code into your view file and have your styles live side-by-side with your view functions themselves.

elm-css works hard to prevent invalid styles from being generated; for example, if you write color "blah" or margin (rgb 1 2 3), you'll get a type mismatch. If you write (rgb 3000 0 -3) you'll get a build-time validation error (RGB values must be between 0 and 255) if you try to compile it to a stylesheet.

elm-css draws inspiration from the excellent Sass, Stylus, and CSS Modules. It includes popular features like:

There are two popular approaches to use it.

Approach 1: Inline Styles

One way to use elm-css is for inline styles, using the asPairs function:

styles =
    Css.asPairs >> Html.Attributes.style

button [ styles [ position absolute, left (px 5) ] ]
    [ text "Whee!" ]

Approach 2: Generating CSS files

You can also use elm-css as a CSS preprocessor which generates separate .css files.

To do this, you will need to install both the node module and the Elm library:

npm install -g elm-css
elm package install rtfeldman/elm-css

Then you'll need a special module with a port for elm-css to access:

port module Stylesheets exposing (..)

import Css.File exposing (CssFileStructure, CssCompilerProgram)
import MyCss


port files : CssFileStructure -> Cmd msg


fileStructure : CssFileStructure
fileStructure =
  Css.File.toFileStructure
    [ ( "index.css", Css.File.compile [ MyCss.css ] ) ]


main : CssCompilerProgram
main =
  Css.File.compiler files fileStructure

Run elm-css on the file containing this Stylesheets module. Then include that css file in your web page.

The above elm-css stylesheet compiles to the following .css file:

body {
    overflow-x: auto;
    min-width: 1280px;
}

#dreamwriterPage {
    background-color: rgb(200, 128, 64);
    color: #CCFFFF;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 8px;
    margin: 0;
}

.dreamwriterNavBar {
    margin: 0;
    padding: 0;
}

.dreamwriterNavBar > li {
    display: inline-block !important;
    color: #ccffaa;
}

Try it out! (make sure you already have elm installed, e.g. with npm install -g elm)

$ npm install -g elm-css
$ git clone https://github.com/rtfeldman/elm-css.git
$ cd elm-css/examples
$ elm-css src/Stylesheets.elm
$ less homepage.css

Examples

There are a few examples to check out!

  • json-to-elm which can see be seen live here
  • the examples folder, which contains a working project with a README
  • the example above

Using elm-css with Elm view code

Here's how to use elm-css in your projects:

In your Elm code, use the same union types to represent classes and ids. Then they can't get out of sync with your CSS. To do this, you'll need special versions the of id, class, and classList functions from elm-html.

Install the handy package that combines elm-html and elm-css:

 elm package install rtfeldman/elm-css-helpers

The Elm.CssHelpers.withNamespace returns a record full of handy functions. Use that, and then construct Html using classes and ids defined in your union types. For example:

module MyView exposing (..)


import Html.CssHelpers
import MyCss


{ id, class, classList } =
    Html.CssHelpers.withNamespace "dreamwriter"


view =
    Html.div []
        [ Html.div [ class [ MyCss.NavBar ] ] [ Html.text "this has the NavBar class" ]
        , Html.div [ id MyCss.Page ] [ Html.text "this has the Page id" ]
        ]

Missing CSS properties

elm-css is still in development. Not all CSS properties have been added yet. If you run into this problem, elm-css includes the property function. It takes two Strings; the property key, and its value.

e.g.

We want z-index, but suppose elm-css did not implement it. We would define it ourselves:

import Css exposing (..)

zIndex : Int -> Mixin
zIndex i =
    property "z-index" <| toString i

Now zIndex 9999 is available to use inside our Stylesheet.

Releases

Version Notes
8.0.0 Switch from (#) and (.) to class and id
7.0.0 Upgrade to Elm 0.18
6.1.0 Add box styles and table display options.
6.0.0 float is now num. Length units expose type aliases, e.g. Px. Many new keywords!
5.0.0 Have compile accept multiple files, add more keywords.
4.0.2 Fix for #140
4.0.1 Fix for #136
4.0.0 Fix multiple pseudo-selectors, add cursor properties.
3.1.2 Fix extraneous space in pseudo-element output
3.1.1 Fix missing pseudo-element implementation
3.1.0 Fix bug where namespace was getting applied to ID selectors, add letterSpacing, h5, h6
3.0.0 Upgrade for Elm 0.17
2.2.0 Expose more types
1.1.0 Add Helpers
1.0.0 Initial Release

Related Projects

Releases

  • 8.1.0 - February 09, 2017 01:01
  • 8.0.0 - January 30, 2017 01:01
  • 7.0.0 - November 14, 2016 16:01
  • 6.1.0 - October 11, 2016 18:51
  • 6.0.0 - October 04, 2016 08:17
  • 5.0.0 - September 03, 2016 09:22
  • 4.0.2 - July 25, 2016 18:52
  • 4.0.1 - July 22, 2016 16:52
  • 4.0.0 - July 22, 2016 16:52
  • 3.1.2 - July 05, 2016 15:52
See all 19 releases

Project Statistics

SourceRank 17
Dependencies 3
Dependent projects 10
Dependent repositories 38
Total releases 19
Latest release
First release
Stars 497
Forks 78
Watchers 29
Contributors 33
Repo Size: 4.44 MB

Top Contributors See all

Richard Feldman Tolga Paksoy Noah Willem Joubert Luke Westby Ville Penttinen Ignacio Gutierrez colvardrm Kris Jenkins Rodrigo Moreira de Morais Roman Gonzalez Scott Corgan Irio Musskopf Jasper Woudenberg Leonardo Taglialegne Roman Salnikov SandiDusic Nick Jessica Kerr Martin DeMello

Something wrong with this page? Make a suggestion

Export .ABOUT file for this library

Last synced: 2017-02-27 01:03:19 UTC