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)
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 |
| 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
Last updated