Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/styled-components/elm-styled
Styling your Html Elements with typed Css 💅
https://github.com/styled-components/elm-styled
css css-in-elm elm styled-components
Last synced: about 2 months ago
JSON representation
Styling your Html Elements with typed Css 💅
- Host: GitHub
- URL: https://github.com/styled-components/elm-styled
- Owner: styled-components
- License: mit
- Archived: true
- Created: 2017-03-11T19:58:29.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-07-18T19:19:08.000Z (over 6 years ago)
- Last Synced: 2024-09-24T22:05:05.678Z (about 2 months ago)
- Topics: css, css-in-elm, elm, styled-components
- Language: Elm
- Homepage:
- Size: 154 KB
- Stars: 180
- Watchers: 9
- Forks: 8
- Open Issues: 14
-
Metadata Files:
- Readme: Readme.md
- License: License
Awesome Lists containing this project
README
> **Unreleased!** At the moment I can't release this package to the elm package manager because it is [using Native code](https://github.com/styled-components/elm-styled/issues/14). If you still want to expirement with it you can install it directly from GitHub. ❤️
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.
```elm
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.
```elm
main =
wrapper []
[ title []
[ text "Hello World, this is my first styled function 💅" ]
]
```
## 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.
```elm
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" ]
]
```
## Dynamic Styles
If you want to have dynamic styles you can create a function which will return a styled function.
```elm
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
```
## 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.
```elm
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 "[ 💅 ]" ]
```
