Design System Options for Rails
businessclasskit.com
Design System Options for Rails
1–10 of 40 posts
Re: Design System Options for Rails
#2It’s too bad most UI libraries ate tied to a particular framework like React, Tailwind, etc. instead of self-contained web component elements.
Re: Design System Options for Rails
#3It’s too bad most UI libraries ate tied to a particular framework like React, Tailwind, etc. instead of self-contained web component elements.
It's not just that many design systems are tied to a particular framework, it's that they don't play well with HTML, and therefore classically server-rendering frameworks like Rails, Django, PHP, etc.
With custom elements you can just drop `` in your server template and that's where the dropdown widget will be.
Something like Shoelace[1] would be very nice to use with Rails.
Re: Design System Options for Rails
#4It’s too bad most UI libraries ate tied to a particular framework like React, Tailwind, etc. instead of self-contained web component elements.
It's not just that many design systems are tied to a particular framework, it's that they don't play well with HTML, and therefore classically server-rendering frameworks like Rails, Django, PHP, etc. With custom elements you can just drop ` ` in your server template and that's where the dropdown widget will be. Something like Shoelace[1] would be very nice to use with Rails. [1]: https://shoelace.style/
Sadly Shoelace doesn't play well with Rails' FormBuilder...
Re: Design System Options for Rails
#5It’s too bad most UI libraries ate tied to a particular framework like React, Tailwind, etc. instead of self-contained web component elements.
It's not just that many design systems are tied to a particular framework, it's that they don't play well with HTML, and therefore classically server-rendering frameworks like Rails, Django, PHP, etc. With custom elements you can just drop ` ` in your server template and that's where the dropdown widget will be. Something like Shoelace[1] would be very nice to use with Rails. [1]: https://shoelace.style/
Custom Elements don't play well with HTML either. And "just dropping " is not much different from "just dropping and running some framework code on it"
All the reasons are here: https://dev.to/stuffbreaker/web-components-and-ssr-2024-edit...
Re: Design System Options for Rails
#6Obviously niche, but the GOV.UK Design System is very well supported in Rails.
There's a form builder and library of components (built and maintained by me) which, between them, provide full coverage. Most new Rails services use them.
It's a good match because accessibility is one of the Design Systems' primary concerns so JavaScript is used very sparingly and only to enhance.
They're not official, only Nunjucks is supported by the Design System team.
https://design-system.service.gov.uk/
Re: Design System Options for Rails
#7Obviously niche, but the GOV.UK Design System is very well supported in Rails. There's a form builder and library of components (built and maintained by me) which, between them, provide full coverage. Most new Rails services use them. It's a good match because accessibility is one of the Design Systems' primary concerns so JavaScript is used very sparingly and only to enhance. They're not official, only Nunjucks is s…
Hey I've seen you work before I didn't realize it was an outside effort, also second the remark about accesssibility I wish my government could foster a project like that one.
Re: Design System Options for Rails
#8Not to nitpick terminology, but I don't think it's helpful to equate "design system" with component library. A design system is the design tokens used to describe an organization's application(s), and largely independent of the exact technologies.
I worked with our UX team at a mixed tech company (Rails, React, mobile) who defined the patterns and tokens, and then my team implemented so that we could use across our stack.
Largely this was accomplished via ensuring the design system could be used via CSS and we settled on Bootstrap with custom theme. This made it easy enough to use across Rails views/view components and React components.
Bootstrap is not sexy to devs now but you could do same with Tailwind and Daisy UI with custom theme.
With that said, component libraries are really helpful, but I prefer to align them with the design system and not the other way around.
Re: Design System Options for Rails
#9I came across CSS Zero recently:
https://csszero.lazaronixon.com/lookbook/pages/overview
which bills itself as an "opinionated front-end starter kit" specifically for Rails and includes Stimulus.js code for JavaScript functionality.
It seems the benefits are that it is no build (pure CSS with CSS variables) and easy to modify and extend.
Re: Design System Options for Rails
#10Is RailsUI superior to all of these?