Design systems for Elm
Based on elm-css, inspired by Tailwind.
elm install rtfeldman/elm-css
elm install cedricss/elm-css-systems
import Css exposing (..)
import Css.Systems.Colors exposing (..)
import Css.Systems.Spacing exposing (..)
import Css.Systems.Utilities exposing (..)
import Html.Styled exposing (div)
import Html.Styled.Attributes as Attributes exposing (css)Color System
Built from the Tailwind palette.
view =
div
[ css
[ backgroundColor indigo300
, hover [ backgroundColor indigo400 ]
, color indigo900
]
]
[]
Spacing and sizing systems
element =
div
[ css
[ marginTop space8
, padding space2
, width space32
]
]view =
div
[ css
[ displayFlex
, flexWrap wrap
, maxHeight size3XL
, width (fluid 2 3)
]
]
Font size
view =
span
[ css [ textLG ] ]
[ text "hello" ]Max height and max width
Other systems and utilities
- Padding and margin utilities
- Flex items
- Align items
