* DONE Web UI Frameworks :blog:web:dev:
CLOSED: [2020-04-04]
:PROPERTIES:
:CREATED:  [2020-04-04]
:ID:       ui-frameworks
:END:
:LOGBOOK:
- State "DONE"       from "NEXT"       [2020-04-04]
:END:
# https://www.notion.so/xerus/Web-UI-Frameworks-2afb4845f43f4bc5aa3320b9704adae2#b52b7470e47542b0be5b16d93b0614f6
** Exploration
Below follows a list compiled mostly in April 2020 of various UI Frameworks for the web, including the date of their last update (added 2022).

Afterwards there are a few links I also found useful in my research.
*** Minimalist
- [[https://github.com/milligram/milligram][milligram/milligram]] (2020) :: default in Phoenix, but inactive - also does not seem to support CSS3 & customization well

**** [[https://github.com/dhg/Skeleton][dhg/Skeleton]] (2014)
Very old, but has many derivatives. Uses own Box system.

- [[https://selekkt.dk/skelet/v3/][Skelet. a contemporary CSS framework]] (2022) :: dark mode support, active community
- [[https://borderliner.github.io/Meshki/][Meshki UI]] (2024) :: Fully Dark by default, but a little heavier with javascript n stuff
- [[https://github.com/skeleton-framework/skeleton-framework][skeleton-framework/skeleton-framework]] (2018, checked 2022) :: inactive, but apparently because it works well for the authors - uses old grid system and lacks extensive documentation, but has basic animations & stuff
- [[https://github.com/acahir/Barebones][acahir/Barebones]] (2019) :: some modernizations to Skeleton, has adaptive dark/light theme
  > While there are several other active forks of Skeleton, Barebones differs by requiring no external tools or dependencies such as CSS pre-processors. Simply download and go.

*** Frameworks
[[https://experimentingwithcode.com/using-bootstrap-and-sass-in-phoenix/][Using Bootstrap and Sass in Phoenix]]

Installing Bootstrap on Phoenix isn't hard

[[https://bulma.io/alternative-to-bootstrap/][Bulma: Free, open source, and modern CSS framework based on Flexbox]]

CSS only, but still full-features, uses variables for easy dark mode

[[https://get.foundation/sites.html][Foundation for Sites | Foundation for Sites]]

Medium-sized with quite some JS, but overall nice impression with animation support & other cool features

[[https://materializecss.com/][Materialize]]

Modern & full-featured

[[https://github.com/segmentio/evergreen][segmentio/evergreen]]

Suggestion by a classmate - bootstrappish but more versatile and cleaner imo, gzip: ~300kb

*** [[https://getbootstrap.com/][Bootstrap]]
Most commonly used, but heavy, relies on jQuery

→ Clean Dark Theme: [[https://bootswatch.com/darkly/]]

**** Criticism
https://medium.com/madhash/killing-me-softly-the-slow-death-of-bootstrap-c73161a6d6ed

https://medium.com/ordergroove-engineering/breaking-free-from-bootstrap-bloat-c177736bd628

https://dev.to/sandrinjoy/here-is-why-i-switched-from-bootstrap-to-tailwind-1a86#bootstrap

-> Tailwind needs a bit more work as it does not have inbuilt components, but more flexible and performant

[[https://www.reddit.com/r/css/comments/6qda7j/what_is_the_best_lightweight_alternative_to/][What is the best light-weight alternative to Bootstrap?]]

Bulma frequently recommended, also has many articles about the topic, have to look into it again

https://riazxrazor.herokuapp.com/bootstrap-to-tailwind (to be tested)

*** CSS-in-JS
https://stitches.dev/
*** Resources
[[https://zellwk.com/blog/responsive-grid-system/][How to build a responsive grid system | Zell Liew]]

[[https://tailwindcss.com/][Tailwind CSS - A utility-first CSS framework for rapidly building custom designs]]

Cool foundation, but would probably need too much work, probably too customizable for me

** Notes
- Bootstrap is too heavy
- Foundation sounds good for going big & fancy
- Bulma seems to be a good balance
- Meshki is nice and small with a stylistic dark default
- Skelet is very minimal, but doesn't seem to be active enough

- [[https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme]] - adaptive color scheme
- [[https://css-irl.info/to-grid-or-to-flex/][Grid vs Flexbox]]:
  Grid in general more concise,
  but Flexbox good for flow

** Verdict
- for a minimal good-looking style :: Skelet with [[https://github.com/Selekkt/skelet/issues/28][a simple JS snippet]]
- for our small 2020 project :: probably Meshki or Bulma
- for bigger projects :: Tailwind, Foundation