https://github.com/cedricss/elm-css-systems
Design systems based on elm-css, inspired by Tailwind
https://github.com/cedricss/elm-css-systems
Last synced: 6 months ago
JSON representation
Design systems based on elm-css, inspired by Tailwind
- Host: GitHub
- URL: https://github.com/cedricss/elm-css-systems
- Owner: cedricss
- License: mit
- Created: 2019-10-28T13:05:30.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2023-02-11T10:45:12.000Z (almost 3 years ago)
- Last Synced: 2023-08-08T20:38:56.838Z (over 2 years ago)
- Language: Elm
- Homepage: https://package.elm-lang.org/packages/cedricss/elm-css-systems/latest
- Size: 1.12 MB
- Stars: 3
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Design systems for Elm
Based on elm-css, inspired by Tailwind.
```
elm install rtfeldman/elm-css
elm install cedricss/elm-css-systems
```
```elm
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.
```elm
view =
div
[ css
[ backgroundColor indigo300
, hover [ backgroundColor indigo400 ]
, color indigo900
]
]
[]
```
[Browse all colors ➝](https://cedricsoulas.com/elm/css/systems#colors)
## Spacing and sizing systems
```elm
element =
div
[ css
[ marginTop space8
, padding space2
, width space32
]
]
```
```elm
view =
div
[ css
[ displayFlex
, flexWrap wrap
, maxHeight size3XL
, width (fluid 2 3)
]
]
```
[Browse spacing ➝](https://cedricsoulas.com/elm/css/systems#spacing)
- [Learn more about `fluid`](https://package.elm-lang.org/packages/cedricss/elm-css-systems/latest/Css-Systems-Spacing#fluid)
## Font size
```elm
view =
span
[ css [ textLG ] ]
[ text "hello" ]
```
[Browse font size system ➝](https://cedricsoulas.com/elm/css/systems#text)
### Max height and max width
[Browse all ➝](https://package.elm-lang.org/packages/cedricss/elm-css-systems/latest/Css-Systems-Spacing)
## Other systems and utilities
- Padding and margin utilities
- Flex items
- Align items
[Browse all ➝](https://package.elm-lang.org/packages/cedricss/elm-css-systems/latest/Css-Systems-Utilities)
## Links
- [package.elm-lang.org/packages/cedricsoulas/elm-css-systems/latest](https://package.elm-lang.org/packages/cedricss/elm-css-systems/latest)
- [cedricsoulas.com/elm/css/systems](https://cedricsoulas.com/elm/css/systems)