https://github.com/orasund/elm-layout

Layout HTML using flexbox. Inspirated by https://csslayout.io/
https://github.com/orasund/elm-layout

Last synced: about 1 month ago
JSON representation

Layout HTML using flexbox. Inspirated by https://csslayout.io/

• Host: GitHub
• URL: https://github.com/orasund/elm-layout
• Owner: Orasund
• License: bsd-3-clause
• Created: 2022-07-02T04:41:28.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2024-02-17T18:11:30.000Z (10 months ago)
• Last Synced: 2024-02-17T19:25:49.460Z (10 months ago)
• Language: Elm
• Size: 36.1 KB
• Stars: 0
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# elm-layout

> **Warning**

> This package is currently being developed. The existing API will change in future updates.

Layout HTML using [flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/). You can think of it as elm-ui light.

## Install

Either enter

```

elm install Orasund/elm-layout

```

into your command line, or you can just copy the [single elm file](https://github.com/Orasund/elm-layout/blob/main/src/Layout.elm) and paste it into your project.

## Why would I want this?

Elm-Ui is great to use for smaller projects. However, its implementation if very opaque, and complicated styling can be challenging.

* Elm-Ui is opinionated. Buttons, Input fields and Labels comes with a predefined style - that is not documented.

* Elm-Ui is too abstract. Debugging weird behavior is challenging, especially if the resulting css does not clearly relate to the code.

* Elm-Ui is big. Most of Elm-Ui is just using Flexbox, everything else is performance optimization and nice-to-haves.

You can actually write [very readable and clear css nowadays](https://csslayout.io/). This package showcases this and tries to be as transparent as possible. It is be possible to modify everything and to also understand the resulting css.