Skip to main content

BUX with Drupal

Tips for using BUX in Drupal.

Setup​

1. Add the package via Composer​

Follow the instructions for installing BUX via Composer.

2. Enable the BUX Module​

Go to /admin/modules on your Drupal site and install through the UI or install with Drush.

drush en bux

What's included​

The BUX Composer package contains Single Directory Components (SDC) to easily slot in BUX components on your Drupal sites.

Global Styles and Fonts​

This module attaches a global.css file and BUX fonts when installed. BUX fonts will be available anywhere on your site without needing to attach them yourself.

Components​

All available SDCs live in the module's components directory: modules/contrib/bux/components

Each component follows Drupal's SDC structure:

components/
  card/
    card.component.yml
    card.twig
    card.css
    card.js (optional)
  • Properties that are available in Twig are defined in *.component.yml
  • Markup is defined in *.twig
  • Specific component styling is in *.css
  • Optional scripting is defined in *.js

Using Components​

Twig​

Use BUX components within your theme/module Twig markup.

Buckeye UX namespace: bux

Passing Properties​

Most components will require you to pass properties with the include. You can find the available properties through the components *.component.yml file or in the DocBlock at the top of the *.twig file.

{{ include('bux:link'), {
  link_text: 'Example Link',
  link_url: '#'
}, with_context = false }}

Using Slots​

Some components have blocks that allow you to override a portion of the markup. For these, you will need to use Twig's embed tag while specifying the block you want to override. Slots are defined in the components *.component.yml file.

{% embed 'bux:link'
  with {
    link_url: '#'
  }
%}
  {% block content %}
    <span>{{ card_heading }}</span>
    <span class="bux-card__heading-icon" aria-hidden="true"></span>
  {% endblock content %}
{% endembed %}

Overriding Components​

Sometimes BUX component markup isn't exactly what is needed for your site and there aren't slots to override.

In those cases, it might make sense to override the component with your own markup.

Overriding in a theme is as simple as copying the existing component directory into your theme.

themes/custom/YOUR_THEME/components

Once copied, add a replaces: metadata key in the *.component.yml file

$schema: >-
  https://git.drupalcode.org/project/drupal/-/raw/10.1.x/core/assets/schemas/v1/metadata.schema.json
name: Card
status: experimental
replaces: bux:card # <-- Add this!
props:
  type: object
  properties:
    # --- properties hidden for brevity --- #
slots:
  content:
    title: Content
    description: The content slot.

Now, your version of the component will take priority over BUX's. Reverting back to the original is as simple as removing the directory.

Back to top