←back to thread

Design System Options for Rails

(businessclasskit.com)
101 points strzibny | 5 comments | | HN request time: 0s | source
1. gedy ◴[] No.43641737[source]
Not 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.

replies(2): >>43642399 #>>43645367 #
2. strzibny ◴[] No.43642399[source]
You are absolutely right. The perspective is simply a practical question of, can we grab a component library that feature a design system (that we can hopefully update with our preferences).
replies(1): >>43642555 #
3. gedy ◴[] No.43642555[source]
Yes this basically why we used Bootstrap. The components and patterns UX wanted to use were a close match for Bootstrap's components, aside from colors, fonts, etc which we then adjusted.
4. danielvaughn ◴[] No.43645367[source]
Interesting - did you set up your own pipeline from the DS to each platform? How did you manage parity and consistency over time?
replies(1): >>43647630 #
5. gedy ◴[] No.43647630[source]
We didn't have an automated pipeline since the UX team wasn't really tech savvy enough to dive into detailed styles, so we relied on recurring syncs every 2 weeks. The DS changes tended to be slow and incremental from the UX side as well which helped.

Bootstrap (like Tailwind and others) has a configuration for generating the full component class and styles from a few variables, so updates to fonts, colors, spacing, etc were easy to manage and roll out to wide usage incrementally.