Design System Dev Resource

Helper scripts


browser and device info

How to use:
- This script adds a 2 CSS classes to the body tag of your document: its current operating system & its browser (ex. 'mac chrome').
- OS/browser specific styling can be added based on these classes.
- Additional browser details can be accessed in the browserSettings object within the script.

SCSS file JS file
<!-- no HTML, JS only -->

component toggler

How to use:
- This script assigns a button that, when clicked, will hide/show other specific elements on a page. Example usage is below.
1. Add the script below to your JS file.
2. Add a unique CSS class to each element on the page that you want to hide/show when a button is clicked.
3. Add the data attribute data-bh-toggle-type to each element from step 2. Set their value to the ideal display CSS style, ie: block, inline, flex, etc
4. Add the data attribute data-bh-toggle to the button that will trigger the hide/show action of other elements. Set the value of data-bh-toggle to the unique CSS class in step 2.
5. (Optional) A class is also added to the button itself - bh-toggle-off, which can be used to style the button when clicked.

This content will show/hide

This content will also show/hide

SCSS file JS file
<!-- Example usage: -->
<button type="button" class="bh-primary-button" data-bh-toggle="interesting-classname">Click to toggle</button>
<p class="bh-body-1-main interesting-classname" data-bh-toggle-type="flex">This content will show/hide</p>
<p class="bh-body-1-main interesting-classname" data-bh-toggle-type="block">This content will also show/hide</p>