Less power, less control? Less go for it

A proof-of-concept package for people who don't want to hand-wrangle user interface logic.

Live demo

Start the demo on your computer

I'm curious what you think! Write me on upsiflu@gmail.com or add an issue on github

🐌 Goals

1. Cohesion over flexibility:

The view in each module of a SPA should be as self-contained as possible. This benefits small, quick projects the most.

2. Write less code:

Provide presets for the most common layout and state-related Ux patterns.

3. Mix-and-match with other Ui libraries (still work in progress):

The Api follows established conventions and offers clear boundaries for simple integration within frameworks such as elm-pages and elm-land, with helper libraries such as elm-widgets, and with type-centric libraries such as elm-ui and elm-multitool. elm-any-type-forms is a great fit as it has a similar goal: while less-ui maps interaction and layout patterns into Url state and links, elm-any-type-forms maps your application model into views with state and delta.

🐌 Non-Features

• No direct control over every pixel. Use elm-ui if you are a designer.
• No default Ui widgets. Use elm-widgets or the like.
• No intercepting the Url (except for Filter, a pattern that gives you the current query flags). Use Browser.application and friends to roll your own Url decoder.
• No constraints on your Html. Use elm-w3 if you want compile-time invariants for correctness and accessibility. Note that as of v2.0, less-ui is not yet compatible with elm-w3.
• This library has been used in about three small SPA projects. It's not stable yet.

🐌 Features

— Let the Url store all the Ui state — No more Ui messages in your application.

• Use straightforward patterns such as search, goto or toggle to build interactivity.
• You can reproduce the current Ui state by copying the Url.
• Style state transitions with css for extra smoothness.

— Target several screen regions in a single view — so you don't need to push around Html snippets across your modules.

Ui.inRegion Scene (text "Scene") ++ Ui.inRegion Info (text "Info") ...

    ┏━━━━━━━━━━━┓
    ┃  Header   ┃ 👈 Tabs, toolbars, menus...
    ┠───────────┨
    ┃  Scene    ┃ 👈 The composition your user reads or edits
    ┃      ╭────┨
    ┃      │Info┃ 👈 Toasts, popups...
    ┠──────┴────┨
    ┃  Control  ┃ 👈 Editing tools and progressive disclosure
    ┗━━━━━━━━━━━┛

— Compose everything:

• Create Ui snippets from anything that you can map to Html (elm-html, elm-markdown, elm-ui, elm-widgets, String...) or use the default Less.Ui.Html module.
• Each snippet is a List so you can compose two with ++.
• You can also use widgets that compose nested Html snippets such as elm-any-type-form.

Docs

npm install -g elm-doc-preview

edp

Note that you need elm installed to compile the docs locally.

• If you use elm-tooling, you can make some version of elm available globally: ln -s ~/.elm/elm-tooling/elm/0.19.1/elm ~/.local/bin/elm (Depending on your distribution, you may need to create the directory ~/.local/bin and add it to your $PATH)
• You can do the same with elm-json and elm-format.
• Otherwise, you can follow the instructions on https://guide.elm-lang.org/install/elm

Now check out localhost:8000

Verify the mini-examples in the comments:

npm install -g elm-verify-examples

elm-verify-examples && elm-test && rm -r ./tests/VerifyExamples

Review the code:

npm install -g elm-review

elm-review

Examples

Includes Simon Lydell's amazing elm-watch for live coding; derived from this example.

Start the live server:

cd examples

npm install -g elm-doc-preview
npm ci
npm start

Note: Running the live server may require python, make and gcc c++ installed on your system. If you encounter an error, feel free to open an issue and/or contact me.

Go to localhost:8001 and open one of the examples.

Read the library README.md (this doc).

1. Edit the files in src/ while watching a browser tab pointing at localhost:8001. A note to vscodium users: To activate the language server in your editor, choose "Open Folder..." and select examples.
2. In that browser tab, you can activate the Elm debugger by clicking the elm-watch menu in the bottom left corner.
3. Click on the elm-watch hot buttons in your terminal output to check for errors.

Demo

A list of features, with code and examples. [Features.elm]

Live server: features.localhost:8001

latest demo online: https://less-ui.web.app

Contribute

I'm always happy to see issues and code contributions from you. Make sure you have a global gitignore or a per-repo exclusion to keep editor and OS specific configs out of the loop. For example, if you use vscode, echo ".vscode" >> .git/info/exclude will make sure your local config will not be synchronized with the repo. All dev prerequisites are listed in examples/package.json and can be installed with cd examples && npm ci. Node v11 is required for run-pty.

Have a lot of fun <3

🐌🐌🐌