https://github.com/orasund/elm-ui-framework

A CSS framework to go hand in hand with elm-ui
https://github.com/orasund/elm-ui-framework

Last synced: about 1 month ago
JSON representation

A CSS framework to go hand in hand with elm-ui

• Host: GitHub
• URL: https://github.com/orasund/elm-ui-framework
• Owner: Orasund
• License: bsd-3-clause
• Created: 2019-11-08T17:47:56.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2020-02-20T05:35:52.000Z (almost 5 years ago)
• Last Synced: 2023-12-13T08:40:43.657Z (about 1 year ago)
• Language: Elm
• Size: 146 KB
• Stars: 24
• Watchers: 9
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# elm-ui-framework

Elm-ui Framework is a reinterpretation of [lucamug/style-framework](https://package.elm-lang.org/packages/lucamug/style-framework/latest/).

The basic idea is that we use [mdgriffith/elm-ui](https://package.elm-lang.org/packages/mdgriffith/elm-ui/latest/) for layouts and only add styling in form of `List (Attributes msg)` lists.

```

Element.el Card.simple <|

  Element.text "This is a basic card"

```

[Here is an example of the framework in action](https://orasund.github.io/elm-ui-framework/)

## When to use this package

* **As an addition to elm-ui**  

    If are using Elm-ui, you can always install this package along side it.

* **As a basic framework**  

    If you are creating a small project and don't want to think about styling.

* **As a starting point for your own theme**  

    If you want to create your own theme, you can start by using this package and then slowly replaces various functions.

For a more professional use, it might be that [lucamug/style-framework](https://package.elm-lang.org/packages/lucamug/style-framework/latest/) suits you better.

## Getting started

The most basic code would be the following

```

view : Html msg

view =

    Framework.responsiveLayout [] <|

        Element.el Framework.container <|

            Element.text "the first element should be a container."

```

from here you can start building you project using elm-ui. This package contains

basic stylings:

* `Grid.simple` for Columns, Rows and WrappedRows,

* `Button.simple` for buttons,

* `Input.simple` for inputs and `Label.simple` for the label.