What if you never had to write CSS again?
Go to file
Matthew Griffith acae8857a0
Merge pull request #314 from escherlies/patch-2
Added a note for missing <!DOCTYPE html> issues
2021-05-16 12:26:46 -04:00
.github add label has-ellie for issues containing https://ellie-app.com/ 2020-04-29 18:22:44 +02:00
benchmarks update benchmark to 0.19.1 2020-03-13 20:59:43 -04:00
examples upgrade examples to 0.19.1 2020-05-22 21:32:57 -04:00
experiments remove console logs from cssom.js 2019-07-13 11:09:47 -04:00
notes adjust note about color alpha 2020-05-03 10:52:58 -04:00
src Add note about line-height of Input.multiline 2020-10-26 14:56:13 -04:00
tests move rendering tests yet again because elm-test is rightfully wary of elm dirs within elm dirs. 2020-03-11 23:23:17 -04:00
tests-rendering add some more examples to test suite 2020-07-25 19:16:41 -04:00
.gitignore ignore bench results for now 2019-07-07 10:50:09 -04:00
CONTRIBUTING.md Remove helpful projects 2020-02-12 12:41:58 +01:00
CSS-LOOKUP.md Update CSS-LOOKUP.md 2020-04-14 12:01:20 +02:00
elm.json 1.1.8 - Checkbox accessibility fix. Checkbox positioning issue fix. Column children sizing fix. Button responds to spacebar. 2020-08-02 10:17:59 -04:00
LICENSE update copyright 2020-03-12 21:09:20 -04:00
package-lock.json fix automatic test runner 2020-05-23 08:46:10 -04:00
package.json fix automatic test runner 2020-05-23 08:46:10 -04:00
README.md Added a note for missing <!DOCTYPE html> issues 2021-05-16 16:45:46 +02:00
yarn.lock get test suite running again 2020-03-11 23:09:32 -04:00

Check out the talk that goes with the library, Building a Better Design Toolkit

A New Language for Layout and Interface

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.

This means:

  • Writing and designing your layout and view should be as simple and as fun as possible.
  • Many layout errors (like you'd run into using CSS) are just not possible to write in the first place!
  • Everything should just run fast.
  • 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.

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!")

Join the Elm UI Slack!

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.

History

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.

Community Cookbook

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.

Notes

Make sure to have <!DOCTYPE html> on top of your application; otherwise, things might get messed up in some browsers.

Contributing

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.