Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/upsiflu/less-ui
Write your views across several screen regions, and hide all Ui state in the Url.
https://github.com/upsiflu/less-ui
elm snails ui
Last synced: 3 months ago
JSON representation
Write your views across several screen regions, and hide all Ui state in the Url.
- Host: GitHub
- URL: https://github.com/upsiflu/less-ui
- Owner: upsiflu
- License: bsd-3-clause
- Created: 2022-11-24T21:22:01.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-06-13T13:52:50.000Z (5 months ago)
- Last Synced: 2024-06-21T12:27:08.947Z (5 months ago)
- Topics: elm, snails, ui
- Language: Elm
- Homepage: https://package.elm-lang.org/packages/upsiflu/less-ui/latest
- Size: 2.79 MB
- Stars: 6
- Watchers: 1
- Forks: 1
- Open Issues: 31
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome-starred - upsiflu/less-ui - Write your views across several screen regions, and hide all Ui state in the Url. (others)
README
# 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](https://less-ui.web.app/)**
[Start the demo on your computer](#examples)
_I'm curious what you think! Write me on `[email protected]` or add an [issue on github](https://github.com/upsiflu/less-ui/issues)_
### π 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.
```elm
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
```shell
npm install -g elm-doc-previewedp
```> 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:](https://elm-tooling.github.io/elm-tooling-cli/faq/#can-i-install-the-tools-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/elmNow check out [localhost:8000](http://localhost:8000/)
**Verify the mini-examples in the comments:**
```shell
npm install -g elm-verify-exampleselm-verify-examples && elm-test && rm -r ./tests/VerifyExamples
```**Review the code:**
```shell
npm install -g elm-reviewelm-review
```## Examples
Includes [Simon Lydell's amazing elm-watch](https://github.com/lydell/elm-watch) for live coding; derived from [this example](https://github.com/lydell/elm-watch/tree/main/example).
**Start the live server:**
```shell
cd examplesnpm 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](http://localhost:8001/) and open one of the examples.
Read [the library README.md (this doc)](http://features.localhost:8099/packages/upsiflu/less-ui/latest).
1. Edit the files in src/ while watching a browser tab pointing at [localhost:8001](localhost:8001).
_A note to vscodium users: To activate the language server in your editor, choose "Open Folder..." and select `examples`._
1. In that browser tab, you can activate the **Elm debugger** by clicking the `elm-watch` menu in the bottom left corner.
1. 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]](../src/Features.elm)Live server: [features.localhost:8001](http://features.localhost:8001)
latest demo online:
## 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](https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files#excluding-local-files-without-creating-a-gitignore-file) 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πππ