https://github.com/benthepoet/elm-purecss

A set of Pure CSS helpers for Elm.
https://github.com/benthepoet/elm-purecss

css elm-architecture elm-lang purecss

Last synced: 2 months ago
JSON representation

A set of Pure CSS helpers for Elm.

• Host: GitHub
• URL: https://github.com/benthepoet/elm-purecss
• Owner: benthepoet
• License: bsd-3-clause
• Created: 2016-08-01T16:31:36.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2018-08-21T19:12:45.000Z (over 6 years ago)
• Last Synced: 2024-10-21T18:22:23.704Z (2 months ago)
• Topics: css, elm-architecture, elm-lang, purecss
• Language: Elm
• Homepage:
• Size: 8.79 KB
• Stars: 6
• Watchers: 4
• Forks: 5
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# elm-purecss

A set of [Pure CSS](https://purecss.io) helpers for Elm.

## Examples

Functions are provided for all the standard classes. These are intended to be 

used in tandem with `Html.Attributes.class` or `Html.Attributes.classList`. 

### Basic Form

``` elm

import Html

import Html.Attributes

import Pure

view model = 

    Html.form [Html.Attributes.class Pure.form]

        [ Html.label [] [Html.text "Username"]

        , Html.input [] []

        , Html.button [Html.Attributes.class Pure.button] []

        ]

```

### Data Table

``` elm

import Html

import Html.Attributes

import Pure

view model = 

    Html.table 

        [ Html.Attributes.classList

            [ (Pure.table, True) 

            , (Pure.tableStriped, True)

            ]

        ]

        [ Html.tr []

            [ Html.th [] [Html.text "Storage Type"]

            , Html.th [] [Html.text "Capacity"]

            ]

        , Html.tr [] 

            [ Html.td [] [Html.text "Floppy Disk"]

            , Html.td [] [Html.text "1440000 bytes"]

            ]

        ]

```