git.iko.soy/gigawork-coworking/gigawork-coworking.github.io
on master help sign in
gigawork-coworking/gigawork-coworking.github.io/deps/elm-ui/README.md
77 lines 3.3 kB history raw
1![](https://github.com/mdgriffith/elm-ui/workflows/Test%20Suite/badge.svg)
4Check out the talk that goes with the library, [Building a Better Design Toolkit](https://www.youtube.com/watch?v=Ie-gqwSHQr0&t=2s)
6# A New Language for Layout and Interface
8CSS and HTML are actually quite difficult to use when you're trying to do the layout and styling of a web page.
10This 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.
12The 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.
14This means:
16* Writing and designing your layout and `view` should be as **simple and as fun** as possible.
17* Many layout errors (like you'd run into using CSS) **are just not possible to write** in the first place!
18* Everything should just **run fast.**
19* **Layout and style are explicit and easy to modify.** CSS and HTML as tools for a layout language are hard to modify because there's no central place that represents your layout. You're generally forced to bounce back and forth between multiple definitions in multiple files in order to adjust layout, even though it's probably the most common thing you'll do.
22[Try this live example on Ellie!](https://ellie-app.com/7Cw4VCyr3RGa1)
24```elm
25module Main exposing (..)
27import Element exposing (Element, el, text, row, alignRight, fill, width, rgb255, spacing, centerY, padding)
28import Element.Background as Background
29import Element.Border as Border
30import Element.Font as Font
33main =
34 Element.layout []
35 myRowOfStuff
37myRowOfStuff : Element msg
38myRowOfStuff =
39 row [ width fill, centerY, spacing 30 ]
40 [ myElement
41 , myElement
42 , el [ alignRight ] myElement
43 ]
46myElement : Element msg
47myElement =
48 el
49 [ Background.color (rgb255 240 0 245)
50 , Font.color (rgb255 255 255 255)
51 , Border.rounded 3
52 , padding 30
53 ]
54 (text "stylish!")
55```
57# Join the Elm UI Slack!
59First, if you have a question about how to do something with the library, join `#elm-ui` on the [Elm Slack](https://elmlang.herokuapp.com/)! There are usually a number of people who are willing to help out, myself included.
61## History
63The work is based off of a rewrite of the [Style Elements](https://github.com/mdgriffith/style-elements) library. A lot of that work was originally released under the [Stylish Elephants](https://github.com/mdgriffith/stylish-elephants) project.
65## Community Cookbook
67The community around `elm-ui` is maintaining a collection of examples called the [elm-ui-cookbook](https://github.com/rofrol/elm-ui-cookbook). If you are just starting out with `elm-ui`, or get stuck on specific things, this can be a great resource.
69## Notes
71Make sure to have `<!DOCTYPE html>` on top of your application; otherwise, things might get messed up in some browsers.
73## Contributing
75Want to help out fixing bugs or reporting issues?
77Please add issues you find, and if you want to verify code you want to contribute, please read how to run the tests [here](https://github.com/mdgriffith/elm-ui/blob/master/notes/RUNNING_TESTS.md).