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.Utitilies 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
          , color indigo900
          ]
      ]
      []

Browse all colors ➝

Spacing and sizing systems

Spacing

view =
  div
      [ css
          [ height (fluid 2 3)
          , width (fluid 1 2)
          , marginY space4
          ]
      ]
      []

Browse spacing ➝

• Learn more about fluid

Max height and max width

Browse all ➝

Other systems and utilities

• Padding and margin utilities
• Flex items
• Align items

Browse all

Links

• package.elm-lang.org/packages/cedricsoulas/elm-css-systems/latest
• cedricsoulas.com/elm/css/systems