Web UI Frameworks

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.

milligram/milligram (2020)

default in Phoenix, but has been inactive for almost a year. Also doesn't seem to support CSS3 & customization well

Very old, but has many derivatives. Uses own Box system.

Skelet. a contemporary CSS framework (2022)

dark mode support, active community

Meshki UI (2021)

Fully Dark by default, but a little heavier with javascript n stuff

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

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.

Using Bootstrap and Sass in Phoenix

Installing Bootstrap on Phoenix isn't hard

Bulma: Free, open source, and modern CSS framework based on Flexbox

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

Foundation for Sites | Foundation for Sites

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

Materialize

Modern & full-featured

segmentio/evergreen

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

Most commonly used, but heavy, relies on jQuery

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

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

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)

https://stitches.dev/

How to build a responsive grid system | Zell Liew

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

• 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
• Grid vs Flexbox: Grid in general more concise, but Flexbox good for flow

for a minimal good-looking style

Skelet with a simple JS snippet

for our small 2020 project

probably Meshki or Bulma

for bigger projects

Tailwind, Foundation