Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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-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:](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/elm

Now check out [localhost:8000](http://localhost:8000/)

**Verify the mini-examples in the comments:**

```shell
npm install -g elm-verify-examples

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

**Review the code:**

```shell
npm install -g elm-review

elm-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 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](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

🐌🐌🐌