Bindable is a themeable design system built in Aurelia JS that allows for faster and easier web development. It comes with over 40 components, 10 layouts, a modular scale, various value converters, and more. It has helped me build interfaces quickly and efficiently. We make frequent updates to Bindable, and it is a blast to work on.
- 1 UX/UI Engineer (Me)
- Aurelia Plugin (v1)
- Stencil Web Components (v2)
- CSS Modules
Color tokens that come with Bindable
Purpose and Goal
While working on the Uplynk project we noticed that engineers would often re-build something that was already in a different part of the application. A small example of this might be spacing between two buttons. Some new CSS would be added, yet classes were already in place for this. Design systems can help fix problems like this. We set out to build one that would work for our use cases and allow everyone on the team to help build UIs without duplicating unnecessary code.
Some Bindable logo sketches
Problems and Thought Process
- One of the problems we needed to tackle was how Bindable would be structured. Bindable needed to define patterns and options but not be overly strict that it became hard to use or customize. Some components might only allow you to choose from a set list of options while others might allow you to set any value you want. We needed to figure out how to do this in an elegant way.
- After testing out a few options we landed on leveraging the power of CSS custom properties (aka variables). Within a component, if you set one of its predefined options we just apply the appropriate CSS class. If you pass in a custom value, we set the value of a CSS custom property on that instance of the component so it gets the custom value. This allows us not to have to make dozens of CSS classes for each possible value. We end up with strict pre-defined options, yet total flexibility where needed.
Example of the gap property of the l-grid layout
Callbacks and color property of the c-button component