Add the stylesheet <link rel="stylesheet" href="https://app-framework.bambuser.com/bam-ui.css" /> and the Javascript <script src="https://app-framework.bambuser.com/bam-ui.js"></script> into <head>. Then preferrably also specify <html class="bam-ui"> to automatically allow the library to adapt standard HTML elements without you needing to add extra .bam-xyz classes to all of the elements.
At its core the library provides an element to easily create a layout using the 4px spacing sysyem by using <div class="bam-container">
By default this will have a 16px (normal) spacing value between the elements with no padding and elements will layout vertically. See below for how to change this default behavior.
To specify spacing value use <div class="bam-container" data-spacing="[size-name]">
To specify padding value use <div class="bam-container" data-padding="[size-name]">
To specify layout value use <div class="bam-container" data-layout="[layout-name]">
For text elements that represent headings in different sizes use <h1> to <h5>. For any other type of text elements you can use <p> or <span> with a .bam-[typography-name] class to render a specific variant.
The following CSS variables are available to apply theming to typography elements:
For regular icons use <i data-variant="[icon-name]"> to render a specific icon.
For form elements use native elements like <input> and <select> together with <div class="bam-container" data-spacing="[size-name]"> for grouping of label and element.
The following CSS variables are available to apply theming to form elements:
Additional components that are built by composing multiple elements into a more complex structure