Skip to content
This repository has been archived by the owner on Sep 6, 2019. It is now read-only.

Styling your Html Elements with typed Css πŸ’…

License

Notifications You must be signed in to change notification settings

styled-components/elm-styled

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

26 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

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 πŸ’…

Releases

No releases published

Packages

No packages published