A proof-of-concept package for people who don't want to hand-wrangle user interface logic.
Start the demo on your computer
I'm curious what you think! Write me on upsiflu@gmail.com
or add an issue on github
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.
Filter
, a pattern that gives you the current query flags). Use Browser.application and friends to roll your own Url decoder.β Let the Url store all the Ui state β No more Ui messages in your application.
search
, goto
or toggle
to build interactivity.β 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:
Html
(elm-html, elm-markdown, elm-ui, elm-widgets, String...) or use the default Less.Ui.Html
module.++
.elm-any-type-form
.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
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).
examples
.elm-watch
menu in the bottom left corner.elm-watch hot
buttons in your terminal output to check for errors.A list of features, with code and examples. [Features.elm]
Live server: features.localhost:8001
latest demo online: https://less-ui.web.app
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
πππ