Check out the talk that goes with the library, Building a Better Design Toolkit
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.
viewshould be as simple and as fun as possible.
Try this live example on Ellie!
module Main exposing (..) import Element exposing (Element, el, text, row, alignRight, fill, width, rgb255, spacing, centerY, padding) import Element.Background as Background import Element.Border as Border import Element.Font as Font main = Element.layout  myRowOfStuff myRowOfStuff : Element msg myRowOfStuff = row [ width fill, centerY, spacing 30 ] [ myElement , myElement , el [ alignRight ] myElement ] myElement : Element msg myElement = el [ Background.color (rgb255 240 0 245) , Font.color (rgb255 255 255 255) , Border.rounded 3 , padding 30 ] (text "stylish!")
First, if you have a question about how to do something with the library, join
#elm-ui on the Elm Slack! There are usually a number of people who are willing to help out, myself included.
The work is based off of a rewrite of the Style Elements library. A lot of that work was originally released under the Stylish Elephants project.
The community around
elm-ui is maintaining a collection of examples called the elm-ui-cookbook. If you are just starting out with
elm-ui, or get stuck on specific things, this can be a great resource.
Make sure to have
<!DOCTYPE html> on top of your application; otherwise, things might get messed up in some browsers.
Want to help out fixing bugs or reporting issues?
Please add issues you find, and if you want to verify code you want to contribute, please read how to run the tests here.