How to Use

How to use BUX components in your project.

Once you have successfully added BUX to your project, you are ready to integrate BUX components into your project's markup.

Component Markup

Integrating BUX components into your project is as simple as adding BUX classes to your markup using the provided code examples for reference.

Each component will have a documentation page that will provide the appropriate class names and markup examples. Furthermore, many component pages will also have implementation notes and advanced code examples.

Some components, such as buttons, only require the addition of a class to the button element:

<button class="bux-button">Button Text</button>

More complex components, such as alerts, requires the use of custom markup:

<div class="bux-alert bux-alert--info" role="status">
    <div class="bux-alert__icon" aria-hidden="true"></div>
    <div class="bux-alert__message">
        <div class="bux-alert__message-title">This is an info message.</div>
        <div class="bux-alert__message-text">This is additional text about this message.</div>
    </div>
</div>

If you are developing within a content management system such as Drupal or WordPress, you would alter the markup within your site's theme templates. Twig examples will be available for many components.

Component Statuses

Each component will go through phases in its lifecycle. Each component's current status will be listed as a badge at the top of its documentation page. See the Component Status page for more information about statuses.

JavaScript

Some components rely on JavaScript to function. Those components will have a JS badge at the top of the page.

Other components may only rely on JavaScript for a non-default variant or advanced functionality of the component. In those instances JavaScript reliance will be indicated within the appropriate section of the component's documentation.