# mdgriffith/elm-ui

> CSS and HTML are actually quite difficult to use when you're trying to do the layout and styling of a web page.
>
> This library is a complete alternative to HTML and CSS. Basically you can just write your app using this library and (mostly) never have to think about HTML and CSS again.
>
> The high level goal of this library is to be a **design toolkit** that draws inspiration from the domains of design, layout, and typography, as opposed to drawing from the ideas as implemented in CSS and HTML.
>
> (Readme.md from the [package](https://package.elm-lang.org/packages/mdgriffith/elm-ui/1.1.0/))

```
main : Html msg
main = 
    Element.layout [] <|
        row [ width fill, centerY, spacing 30 ]
            [ myElement
            , myElement
            , el [ alignRight ] <|
                el
                    [ Background.color (rgb255 240 0 245)
                    , Font.color (rgb255 255 255 255)
                    , Border.rounded 3
                    , padding 30
                    ] <|
                text "stylish!"
            ]      
```

This is a summary of the talk [Building a Toolkit for Design](https://www.youtube.com/watch?v=NYb2GDWMIm0) by Matthew Griffith.

## Basics

| Function                                                                                                                                                | Description                                 |
| ------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------- |
| [`layout`](https://package.elm-lang.org/packages/mdgriffith/elm-ui/latest/Element#layout) `: List (Attribute msg) -> Element msg -> Html msg`           | Converts Elm-UI into Html.                  |
| [`text`](https://package.elm-lang.org/packages/mdgriffith/elm-ui/latest/Element#text) `: String -> Element msg`                                         | Some text.                                  |
| [`el`](https://package.elm-lang.org/packages/mdgriffith/elm-ui/latest/Element#el) `: List (Attribute msg) -> Element msg -> Element msg`                | A basic element similar to `div` from HTML. |
| [`row`](https://package.elm-lang.org/packages/mdgriffith/elm-ui/latest/Element#row) `: List (Attribute msg) -> List (Element msg) -> Element msg`       | A row of elements.                          |
| [`column`](https://package.elm-lang.org/packages/mdgriffith/elm-ui/latest/Element#column) `: List (Attribute msg) -> List (Element msg) -> Element msg` | A column of elements.                       |

## Alignment

{% hint style="info" %}
This subject is explained at [3:26 in the Video](https://youtu.be/Ie-gqwSHQr0?t=206).
{% endhint %}

| Function                                                                                                              | Description                                          |
| --------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------- |
| [`centerX`](https://package.elm-lang.org/packages/mdgriffith/elm-ui/latest/Element#centerX) `: Attribute msg`         | Horizontally centers anything.                       |
| [`centerY`](https://package.elm-lang.org/packages/mdgriffith/elm-ui/latest/Element#centerY) `: Attribute msg`         | Vertically centers anything.                         |
| [`alignLeft`](https://package.elm-lang.org/packages/mdgriffith/elm-ui/latest/Element#alignLeft) `: Attribute msg`     | Alignes anything with the left edge of the screen.   |
| [`alignRight`](https://package.elm-lang.org/packages/mdgriffith/elm-ui/latest/Element#alignRight) `: Attribute msg`   | Alignes anything with the right edge of the screen.  |
| [`alignTop`](https://package.elm-lang.org/packages/mdgriffith/elm-ui/latest/Element#alignTop) `: Attribute msg`       | Alignes anything with the top edge of the screen.    |
| [`alignBottom`](https://package.elm-lang.org/packages/mdgriffith/elm-ui/latest/Element#alignBottom) `: Attribute msg` | Algines anything with the bottom edge of the screen. |

## Padding and Spacing

{% hint style="info" %}
This subject is explained at [7:32 in the Video](https://youtu.be/Ie-gqwSHQr0?t=452).
{% endhint %}

| Function                                                                                                             | Description                        |
| -------------------------------------------------------------------------------------------------------------------- | ---------------------------------- |
| [`padding`](https://package.elm-lang.org/packages/mdgriffith/elm-ui/latest/Element#padding) `: Int -> Attribute msg` | Creates space around the parent    |
| [`spacing`](https://package.elm-lang.org/packages/mdgriffith/elm-ui/latest/Element#spacing) `: Int -> Attribute msg` | Creates space between the children |

## Size

{% hint style="info" %}
This subject is explained at [9:15 in the Video](https://youtu.be/Ie-gqwSHQr0?t=555).
{% endhint %}

| Function                                                                                                              | Description                        |
| --------------------------------------------------------------------------------------------------------------------- | ---------------------------------- |
| [`width`](https://package.elm-lang.org/packages/mdgriffith/elm-ui/latest/Element#width) `: Length -> Attribute msg`   | Specifies the width of an Element  |
| [`height`](https://package.elm-lang.org/packages/mdgriffith/elm-ui/latest/Element#height) `: Length -> Attribute msg` | Specifies the height of an Element |
| [`fill`](https://package.elm-lang.org/packages/mdgriffith/elm-ui/latest/Element#fill) `: Length`                      | Fills the entire space             |

## Text Layout

{% hint style="info" %}
This subject is explained at [12:47 in the Video](https://youtu.be/Ie-gqwSHQr0?t=767).
{% endhint %}

| Function                                                                                                                                                      | Description                                                                                                |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------- |
| [`paragraph`](https://package.elm-lang.org/packages/mdgriffith/elm-ui/latest/Element#paragraph) `: List (Attribute msg) -> List (Element msg) -> Element msg` | Defines a Paragraph. Attributes like alignment, padding and spacing will effect the lines of the paragraph |

## Further Reading

* 📖**Book:** [An Introduction to Style Elements for Elm](https://mdgriffith.gitbooks.io/style-elements/) by Matthew Griffith
* 📄**Article:** [Elm-ui: Forget CSS and enjoy creating UIs in pure Elm](https://korban.net/posts/elm/2018-11-17-elm-ui-introduction/) by Alex Korban
* 🎥**Video:** [Building a Toolkit for Design](https://www.youtube.com/watch?v=NYb2GDWMIm0) by Matthew Griffith


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://orasund.gitbook.io/elm-cookbook/frameworks-1/elm-ui-1.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.