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
 layout : List (Attribute msg) -> Element msg -> Html msg
Converts Elm-UI into Html.
 text : String -> Element msg
Some text.
 el : List (Attribute msg) -> Element msg -> Element msg
A basic element similar to div from HTML.
 row : List (Attribute msg) -> List (Element msg) -> Element msg
A row of elements.
 column : List (Attribute msg) -> List (Element msg) -> Element msg
A column of elements.
Alignment
This subject is explained at 3:26 in the Video.
Function
Description
 centerX : Attribute msg
Horizontally centers anything.
 centerY : Attribute msg
Vertically centers anything.
 alignLeft : Attribute msg
Alignes anything with the left edge of the screen.
 alignRight : Attribute msg
Alignes anything with the right edge of the screen.
 alignTop : Attribute msg
Alignes anything with the top edge of the screen.
 alignBottom : Attribute msg
Algines anything with the bottom edge of the screen.
Padding and Spacing
This subject is explained at 7:32 in the Video.
Function
Description
  padding : Int -> Attribute msg
Creates space around the parent
  spacing : Int -> Attribute msg
Creates space between the children
Size
This subject is explained at 9:15 in the Video.
Function
Description
  width : Length -> Attribute msg
Specifies the width of an Element
  height : Length -> Attribute msg
Specifies the height of an Element
  fill : Length
Fills the entire space
Text Layout
This subject is explained at 12:47 in the Video.
Function
Description
  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 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
​

Frameworks and packages - Previous

elm/parser

Next - Frameworks and packages

Future topics

Last modified 2yr ago

Copy link

On this page

Basics

Alignment

Padding and Spacing

Size

Text Layout