Bindable: Open Source Themeable Design System Built in Aurelia JS for Faster and Easier Web Development
<p><a href="https://www.linkedin.com/in/joeipson/">Joe Ipson</a>, Software Dev Engineer, Verizon Media </p><p><a href="https://www.linkedin.com/in/lukelarsen/">Luke Larsen</a>, Sr Software Dev Engineer, Verizon Media</p><figure data-orig-width="1298" data-orig-height="526" class="tmblr-full"><img src="https://64.media.tumblr.com/05cd26a906188c5c3f3e5cd7fdf631f6/992873a199d2bca0-c5/s540x810/334213ccf2716a8fa65360dc8b3389a25720cf97.jpg" alt="image" data-orig-width="1298" data-orig-height="526"/></figure><p><b></b></p><p>As part of the Media Platform Video Team we build and maintain a set of web applications that allow customers to manage their video content. We needed a way to be consistent with how we build these applications. Creating consistent layouts and interfaces can be a challenge. There are many areas that can cause bloat or duplication of code. Some examples of this are, coding multiple ways to build the same layout in the app, slight variations of the same red color scattered all over, multiple functions being used to capitalize data returned from the database. To avoid cases like this we built <a href="https://bindable-ui.com">Bindable</a>. Bindable is an open source design system that makes it possible to achieve consistency in colors, fonts, spacing, sizing, user actions, user permissions, and content conversion. We’ve found it helps us be consistent in how we build layouts, components, and share code across applications. By making Bindable open source we hope it will do the same for others.</p><figure class="tmblr-full" data-orig-height="1212" data-orig-width="893"><img src="https://64.media.tumblr.com/875bf6c1396e1f5fd3e743de6688bcb8/992873a199d2bca0-6f/s540x810/ca4a29f5305890336f9524f24f871e60d628e4ca.png" data-orig-height="1212" data-orig-width="893"/></figure><p><b>Theming</b><br/></p><p><b></b></p><p>One problem with using a design system or library is that you are often forced to use the visual style that comes with it. With <a href="https://bindable-ui.com">Bindable</a> you can customize how it looks to fit your visual style. This is accomplished through CSS custom properties. You can create your own custom theme by setting these variables and you will end up with your own visual style.</p><figure data-orig-width="600" data-orig-height="400" class="tmblr-full"><img src="https://64.media.tumblr.com/8ee1b502585a9748c1517834d938fcac/992873a199d2bca0-1e/s540x810/27ff8410c4ebbcf627e03719a82e2688e77c0f70.gif" alt="image" data-orig-width="600" data-orig-height="400"/></figure><p><b>Modular Scale</b><br/></p><p>Harmony in an application can be achieved by setting all the sizing and spacing to a value on a scale. <a href="https://bindable-ui.com">Bindable</a> has a modular scale built in. You can set the scale to whatever you wish and it will adjust. This means your application will have visual harmony. When you need, you can break out of the modular scale for custom sizing and spacing.<b> </b><br/></p><figure data-orig-width="867" data-orig-height="658" class="tmblr-full"><img src="https://64.media.tumblr.com/d33f40a5cd336b6186bf53f0129903b2/992873a199d2bca0-41/s540x810/3ed3fe507bae9df959c36abbdb928830bbf43830.png" alt="image" data-orig-width="867" data-orig-height="658"/></figure><p><b><br/></b></p><p><b>Aurelia</b></p><p><a href="https://aurelia.io/">Aurelia</a> is a simple, powerful, and unobtrusive javascript framework. Using Aurelia allows us to take advantage of its high performance and extensibility when creating components. Many parts of Bindable have added features thanks to Aurelia.</p><p><b>Tokens</b></p><p>Tokens are small building blocks that all other parts of Bindable use. They are CSS custom properties and set things like colors, fonts, and transitions.</p><p><b></b></p><p><b>Layouts</b></p><p>The issue of creating the same layout using multiple methods is solved by Layouts in Bindable. Some of the Layouts in Bindable make it easy to set a grid, sidebar, or cluster of items in a row. Layouts also handle all the spacing between components. This keeps all your spacing orderly and consistent. </p><figure data-orig-width="867" data-orig-height="347" class="tmblr-full"><img src="https://64.media.tumblr.com/1d3ccc6947a76a8f4dcae7577805601b/992873a199d2bca0-5c/s540x810/f75d1eb571da46e8a94d0a16875fc8d02101bff3.png" alt="image" data-orig-width="867" data-orig-height="347"/></figure><p><b>Components</b><br/></p><p>Sharing these components was one of the principal reasons the library exists. There are over 40 components available, and they are highly customizable depending on your needs.<br/></p><figure data-orig-width="867" data-orig-height="332" class="tmblr-full"><img src="https://64.media.tumblr.com/141c3b3de763ed26e69f7fd1e433a56f/992873a199d2bca0-9b/s540x810/de0e3403ccc011d9a5bb2eb3438277abaeed6133.png" alt="image" data-orig-width="867" data-orig-height="332"/></figure><p><b><br/></b></p><p><b>Access Modifiers</b></p><p>Bindable allows developers to easily change the state of a component on a variety of conditions. Components can be hidden or disabled if a user lacks permission for a particular section of a page. Or maybe you just need to add a loading indicator to a button. These attributes make it easy to do either (or both!).</p><p><b></b></p><p><b>Value Converters</b></p><p>We’ve included a set of value converters that will take care of some of the most basic conversions for you. Things like sanitizing HTML, converting CSV data into an array, escaping a regex string, and even more simple things like capitalizing a string or formatting an ISO Date string.</p><p><b></b></p><p><b>Use, Contribute, & Reach Out</b></p><p>Explore the <a href="https://bindable-ui.com/">Bindable website</a> for helpful details about getting started and to see detailed info about a given component. We are excited to share Bindable with the open source community. We look forward to seeing what others build with Bindable, especially Aurelia developers. We welcome <a href="https://github.com/bindable-ui/bindable/pulls">pull requests</a> and <a href="mailto:%20luke.larsen@verizondigitalmedia.com">feedback</a>! Watch the project on <a href="https://github.com/bindable-ui/bindable">GitHub</a> for updates. Thanks!</p><p><b></b></p><p><b>Acknowledgements</b></p><p><a href="https://www.linkedin.com/in/cam-debuck-141964152/">Cam Debuck</a>, <a href="https://www.linkedin.com/in/ajitgauli/">Ajit Gauli</a>, <a href="https://www.linkedin.com/in/harley-jessop-25871539/">Harley Jessop</a>, <a href="https://www.linkedin.com/in/richarda/">Richard Austin</a>, <a href="https://www.linkedin.com/in/brandon-drake-6b362050/">Brandon Drake</a>, <a href="https://www.linkedin.com/in/dustindavis/">Dustin Davis</a></p>