CSS Modules
By default, everything in CSS is global. This might be a problem. You don’t want any of your CSS to conflict with CSS in Bindable. CSS Modules allow the CSS in Bindable to be scoped locally by default. No more CSS conflicts with the design system.
Tokens are the main building blocks for other parts of Bindable. They are CSS custom properties and set things like colors and fonts that other components will use.
Global Properties
Things like the default font-family, body background, and body color are set with Global Properties.
Color
There are 36 color CSS custom properties you can set to color your app as you see fit.
Fonts
You can set a primary, secondary, and mono spaced fonts using CSS custom properties.
All spacing between items in Bindable happens with layouts. This allows for spacing around and between things to stay consistent and orderly. You can create complex layouts when using them together. Below are 6 of the 9 layouts included in Bindable.
Box
The box, the most simple layout of them all, simply centers your content in a container. You can configure margin, padding, and more.
Center
The center layout allows centering something within its parent. Some configuration options are spacing, max-width, and text-center.
Cluster
The cluster places items in a nice orderly row for you. You can configure spacing, alignment, wrapping, and other properties.
Cover
The cover simply covers all the available space that it can. Some configuration options are padding, scrolling, and gutter spacing.
Grid
The grid places items in a nice grid formation for you. You can configure min-size, gap, auto-sizing, and others.
Sidebar
The sidebar supports a content area and a sidebar. You can configure scrolling, widths, spacing, and more.
Components make up the bulk of Bindable. There are over 40 components currently and more always being added. Each has its own set of properties and configurations. Below is an example of three components.
Button
<l-cluster spacing="var(--s0)">
<div>
<c-button>Primary Button</c-button>
<c-button color="secondary">Secondary Button</c-button>
<c-button color="subOne">Sub One Button</c-button>
<c-button color="neutral">Neutral Button</c-button>
</div>
</l-cluster>Notification
<l-stack spacing="var(--s0)">
<c-notification type="info">Info Notification</c-notification>
<c-notification type="warning">Warning Notification</c-notification>
<c-notification type="critical">Critical Notification</c-notification>
<c-notification type="success">Success Notification</c-notification>
<c-notification type="success" state="hidden">Will not show</c-notification>
</l-stack>Text Input
<l-grid min-size="250px">
<c-form-text text-value.bind="vFormTextOutput" label="Normal Input" placeholder="Placeholder Text"></c-form-text>
<c-form-text label="Button Text Input" button="lock"></c-form-text>
<c-form-text label="Error Field" text-value="Invalid Input" error-msg="This is the error message" state="error"></c-form-text>
</l-grid>An element is a set of packaged up components that performs one task. The delete-confirm element is a perfect example. Altogether it uses the tip, form-input, icon, paragraph and button components. See the example blow.
Delete Confirm
<e-delete-confirm tip-side="top" tip-size="xlarge" tip-arrow-position="leftEdge" title="Thing" delete-message="Confirm delete by typing DELETE ME in the field below." action.call="testDelete()" match="DELETE ME"></e-delete-confirm>
Value converters will take data and convert it into a more human-friendly version that can be displayed in the UI. Bindable has 18 converters currenlty. Below are a few examples.
Pluralize
Item${2 | pluralize}Items
Capitalize
${'something' | capitalize}Something
Datetime
${872386823 | msToHms}242:19:46
There are two repos hosted on Github for Bindable. The main repo has everything except for icons. The icons are located in their own repo. You don’t have to use the Bindable Icons. You can load your customized icons if you want.