Styling your Html Elements with typed Css πŸ’…
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
assets Update Logo Mar 21, 2017
demo Update Logo Mar 21, 2017
src Fix transition time and delay in comment Jul 18, 2018
test/Native Test Insertion of Rules Mar 21, 2017
.eslintrc.json Add linting for better code quality Mar 20, 2017
.gitignore Ignore documentation.json which is created by Elm Mar 19, 2017
.lintstagedrc
License Styling the 🌎 with πŸ’… Mar 11, 2017
Readme.md Add Unreleased Notice to Readme Mar 24, 2017
elm-package.json Add Shortcuts for Styled Html Functions Mar 16, 2017
package.json Test Insertion of Rules Mar 21, 2017
yarn.lock Add linting for better code quality Mar 20, 2017

Readme.md

Unreleased! At the moment I can't release this package to the elm package manager because it is using Native code. If you still want to expirement with it you can install it directly from GitHub. ❀️

elm-styled logo

Use typed CSS inside your Elm files to style your Html elements.

elm-package install styled-components/elm-styled

Usage

Basic

This creates two Elm functions, title and wrapper.

import Html exposing (..)
import Styled exposing (..)
import Styled.Colors exposing (pink, lightYellow)


title =
    styled h1
        [ fontSize (Styled.em 1.5)
        , textAlign center
        , color pink
        , fontFamily monospace
        ]


wrapper =
    styled div
        [ padding (Styled.em 4)
        , backgroundColor lightYellow
        ]

You render them like every other Elm node.

main =
    wrapper []
        [ title []
            [ text "Hello World, this is my first styled function πŸ’…" ]
        ]
Screenshot of the above code ran in a browser πŸ’…

Overriding Styles

We can create a simple button function and using this function to create a new styled function. The new styled function will have all of the styles from both styled functions.

import Html exposing (div, text)
import Styled exposing (..)
import Styled.Colors exposing (white, pink)


button =
    styled Html.button
        [ backgroundColor white
        , color pink
        , fontSize (Styled.em 1)
        , margin (Styled.em 1)
        , padding2 (Styled.em 0.25) (Styled.em 1)
        , border (px 2) solid pink
        , borderRadius (px 3)
        ]


primaryButton =
    styled button
        [ backgroundColor pink
        , color white
        ]


main =
    div
        []
        [ button [] [ text "Normal" ]
        , primaryButton [] [ text "Primary" ]
        ]
Screenshot of the above code ran in a browser πŸ’…

Dynamic Styles

If you want to have dynamic styles you can create a function which will return a styled function.

import Html exposing (..)
import Styled exposing (..)
import Styled.Colors exposing (red, yellow, green)


light paint =
    styled div
        [ backgroundColor paint
        , borderRadius (percent 50)
        , display inlineBlock
        , height (px 60)
        , width (px 60)
        , margin (px 20)
        ]


trafficLight =
    div []
        [ light red [] []
        , light yellow [] []
        , light green [] []
        ]


main =
    trafficLight
Screenshot of the above code ran in a browser πŸ’…

Animations

CSS animations with @keyframes aren't scoped to a single function but you still don't want them to be global. This is why we export a keyframes helper which will generate a unique name for your keyframes. You can then use that unique name throughout your app.

import Html exposing (..)
import Styled exposing (..)
import Styled.Keyframes exposing (keyframes)
import Styled.Transforms exposing (rotate)
import Styled.Timings exposing (linear)


spin =
    keyframes
        [ ( 0
          , [ transform (rotate (deg 0))
            ]
          )
        , ( 100
          , [ transform (rotate (deg 360))
            ]
          )
        ]


loader =
    styled div
        [ display inlineBlock
        , animationName spin
        , animationDuration (Styled.s 2)
        , animationTimingFunction linear
        , animationIterationCount infinite
        ]


main =
    loader [] [ text "[ πŸ’… ]" ]
Screenshot of the above code ran in a browser πŸ’…