🌳
Walking though the Elm woods
  • Introduction
  • Structure of the book
  • Frequently asked questions
    • How can different types share data?
    • How to break Dependency Cycles?
    • How to structure an Elm project?
    • How to turn a Msg into a Cmd Msg?
    • How to update nested Records?
    • What are comparable types?
    • Why are Booleans bad?
    • 🔜Future topics
  • Recipes
    • Writing a Single Page Application
      • Share state across pages
      • Debounced Validation
      • Reusable views
    • Making impossible states Impossible
      • Non empty lists using Zippers
      • Restrict records using Opaque Types
      • Write safer functions using Phantom Types
    • Designing Elm package APIs
      • Create upwards compatible APIs
    • 🔜Future topics
  • Frameworks and packages
    • elm/parser
    • mdgriffith/elm-ui
    • 🔜Future topics
Powered by GitBook
On this page
  • Basics
  • Alignment
  • Padding and Spacing
  • Size
  • Text Layout
  • Further Reading

Was this helpful?

  1. Frameworks and packages

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)

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 by Matthew Griffith.

Basics

Function

Description

Converts Elm-UI into Html.

Some text.

A basic element similar to div from HTML.

A row of elements.

A column of elements.

Alignment

This subject is explained at 3:26 in the Video.

Function

Description

Horizontally centers anything.

Vertically centers anything.

Alignes anything with the left edge of the screen.

Alignes anything with the right edge of the screen.

Alignes anything with the top edge of the screen.

Algines anything with the bottom edge of the screen.

Padding and Spacing

This subject is explained at 7:32 in the Video.

Function

Description

Creates space around the parent

Creates space between the children

Size

This subject is explained at 9:15 in the Video.

Function

Description

Specifies the width of an Element

Specifies the height of an Element

Fills the entire space

Text Layout

This subject is explained at 12:47 in the Video.

Function

Description

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 by Matthew Griffith

  • 📄Article: Elm-ui: Forget CSS and enjoy creating UIs in pure Elm by Alex Korban

  • 🎥Video: Building a Toolkit for Design by Matthew Griffith

Previouselm/parserNextFuture topics

Last updated 5 years ago

Was this helpful?

: List (Attribute msg) -> Element msg -> Html msg

: String -> Element msg

: List (Attribute msg) -> Element msg -> Element msg

: List (Attribute msg) -> List (Element msg) -> Element msg

: List (Attribute msg) -> List (Element msg) -> Element msg

: Attribute msg

: Attribute msg

: Attribute msg

: Attribute msg

: Attribute msg

: Attribute msg

: Int -> Attribute msg

: Int -> Attribute msg

: Length -> Attribute msg

: Length -> Attribute msg

: Length

: List (Attribute msg) -> List (Element msg) -> Element msg

layout
text
el
row
column
centerX
centerY
alignLeft
alignRight
alignTop
alignBottom
padding
spacing
width
height
fill
paragraph