Skip to content

cedricss/elm-css-systems

Repository files navigation

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
            ]
        ]
        []

Browse all colors ➝ Color system

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)
            ]
        ]

Browse spacing ➝ Spacing systems

Font size

  view =
      span
          [ css [ textLG ] ]
          [ text "hello" ]

Browse font size system ➝

Max height and max width

Browse all ➝

Other systems and utilities

  • Padding and margin utilities
  • Flex items
  • Align items

Browse all ➝

Links

About

Design systems based on elm-css, inspired by Tailwind

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Contributors 2

Languages