### CSS Grid Start Column Example Source: https://boosted.orange.com/docs/5.3/layout/css-grid Use start classes to define the starting column for a grid item. These classes correspond to `grid-column-start` and are 1-based. ```html
.g-col-3 .g-start-2
.g-col-4 .g-start-6
``` -------------------------------- ### Install and Watch Sass Source: https://boosted.orange.com/docs/5.3/customize/sass Install the Sass CLI globally and then use it to watch your custom Sass files for changes and compile them into CSS. ```bash # Install Sass globally npm install -g sass # Watch your custom Sass for changes and compile it to CSS sass --watch ./scss/custom.scss ./css/custom.css ``` -------------------------------- ### Add npm Start Script Source: https://boosted.orange.com/docs/5.3/getting-started/vite Adds a 'start' script to package.json to run the Vite development server. ```json { // ... "scripts": { "start": "vite", "test": "echo \"Error: no test specified\" && exit 1" }, // ... } ``` -------------------------------- ### Small File Input Example - HTML Source: https://boosted.orange.com/docs/5.3/forms/form-control Provides an example of a small file input, noting its incompatibility with Orange Design System specifications. ```html
``` -------------------------------- ### Install Local Dependencies Source: https://boosted.orange.com/docs/5.3/getting-started/contribute Run this command in the root directory of the Boosted source files to install local dependencies required for development. ```bash npm install ``` -------------------------------- ### Sample Output Example Source: https://boosted.orange.com/docs/5.3/content/reboot Use the `` tag to display sample output from a computer program. ```html This text is meant to be treated as sample output from a computer program. ``` -------------------------------- ### Install mini-css-extract-plugin Source: https://boosted.orange.com/docs/5.3/getting-started/webpack Install the mini-css-extract-plugin as a development dependency using npm. ```bash npm install --save-dev mini-css-extract-plugin ``` -------------------------------- ### Install Boosted and Popper.js Source: https://boosted.orange.com/docs/5.3/getting-started/parcel Installs Boosted CSS/JavaScript framework and Popper.js, a positioning engine for popovers, tooltips, and dropdowns. Use `--save-dev` for development dependencies. ```bash npm i --save boosted @popperjs/core ``` -------------------------------- ### Basic Input Group Examples Source: https://boosted.orange.com/docs/5.3/forms/input-group Demonstrates various ways to use input groups with text or buttons on one or both sides of an input. Includes examples for usernames, vanity URLs, currency amounts, and textareas. ```html
@
@example.com
https://example.com/users/
Example help text goes outside the input group.
$ .00
@
``` -------------------------------- ### Responsive Dark-Themed Navbar Example Source: https://boosted.orange.com/docs/5.3/components/navbar This example demonstrates a complete responsive dark-themed navbar that collapses at the 'lg' breakpoint. It includes brand, navigation links, dropdowns, and a search form. ```html ``` -------------------------------- ### Custom Focus Ring Example Source: https://boosted.orange.com/docs/5.3/helpers/focus-ring Demonstrates applying a custom focus ring to an anchor element using utility classes. This example shows how to achieve a custom focus style that replaces the default outline. ```html Custom focus ring ``` -------------------------------- ### Add Parcel npm Start Script Source: https://boosted.orange.com/docs/5.3/getting-started/parcel Configures the 'start' script in your package.json to run the Parcel development server. This script serves your HTML file and compiles assets. ```json { // ... "scripts": { "start": "parcel serve src/index.html --public-url / --dist-dir dist", "test": "echo \"Error: no test specified\" && exit 1" }, // ... } ``` -------------------------------- ### Colored Link Examples with Utilities Source: https://boosted.orange.com/docs/5.3/utilities/link Demonstrates various colored links using Bootstrap's link utilities for opacity, underline opacity, and hover effects. Note that these examples may not fully comply with Orange Design System specifications or accessibility standards. ```html

Primary link

Secondary link

Success link

Danger link

Warning link

Info link

Light link

Dark link

Emphasis link

``` -------------------------------- ### Create Project Structure Source: https://boosted.orange.com/docs/5.3/getting-started/parcel Sets up the necessary folders and files for your project. Run this command in your project's root directory. ```bash mkdir {src,src/js,src/scss} touch src/index.html src/js/main.js src/scss/styles.scss ``` -------------------------------- ### Vertical Pills Navigation Example Source: https://boosted.orange.com/docs/5.3/components/navs-tabs This example demonstrates a vertical pills navigation setup. It includes a disabled tab and requires specific ARIA attributes for accessibility, such as `aria-orientation="vertical"` on the tab list container. ```html
...
...
...
...
...
``` -------------------------------- ### Serve Local Documentation Source: https://boosted.orange.com/docs/5.3/getting-started/contribute Build and serve the Boosted documentation locally. This command is used after installing dependencies. ```bash npm run docs-serve ``` -------------------------------- ### Dark Navbar Example Source: https://boosted.orange.com/docs/5.3/components/navbar Use `data-bs-theme="dark"` on the `.navbar` to enable a dark color mode. This is the recommended approach for dark navbars starting from v5.3.3. ```html ``` -------------------------------- ### Three Equal Columns (Medium Tiers and Up) Source: https://boosted.orange.com/docs/5.3/examples/grid Creates three equal-width columns that stack on smaller viewports. This example starts applying the column structure from the medium breakpoint upwards. ```html .col-md-4 .col-md-4 .col-md-4 ``` -------------------------------- ### Compile and Serve Locally Source: https://boosted.orange.com/docs/5.3/getting-started/contribute Compiles CSS and JavaScript, builds the documentation, and starts a local server for development. ```bash npm start ``` -------------------------------- ### Basic Placeholder Usage Source: https://boosted.orange.com/docs/5.3/components/placeholders Demonstrates how to create placeholders using the `.placeholder` class and a grid column class to set width. Also shows how to apply to buttons. ```html ``` -------------------------------- ### Responsive CSS Grid Layout Source: https://boosted.orange.com/docs/5.3/layout/css-grid Adjust the CSS Grid layout across viewports by using responsive classes. This example starts with two columns on narrow viewports and expands to three columns on medium viewports and above. ```html
.g-col-6 .g-col-md-4
.g-col-6 .g-col-md-4
.g-col-6 .g-col-md-4
``` -------------------------------- ### Install Boosted via yarn Source: https://boosted.orange.com/docs/5.3/getting-started/download Install Boosted in your Node.js powered applications using yarn. This command installs version 5.3.8. ```bash yarn add boosted@5.3.8 ``` -------------------------------- ### Create Project Folder and Initialize npm Source: https://boosted.orange.com/docs/5.3/getting-started/parcel Creates a new project directory and initializes npm with default settings. This is the first step in setting up a new Parcel project. ```bash mkdir my-project && cd my-project npm init -y ``` -------------------------------- ### Install Boosted via npm Source: https://boosted.orange.com/docs/5.3/getting-started/download Install Boosted in your Node.js powered applications using npm. This command installs version 5.3.8. ```bash npm install boosted@5.3.8 ``` -------------------------------- ### Basic Stepped Process Example Source: https://boosted.orange.com/docs/5.3/components/stepped-process Demonstrates the basic structure of a stepped process bar. Use short labels for steps and the `title` attribute for more details. Add the `.active` class to the current step and `aria-current="step"` for accessibility. ```html ``` -------------------------------- ### Install Boosted via Bun Source: https://boosted.orange.com/docs/5.3/getting-started/download Install Boosted in your Bun or Node.js powered applications using the Bun CLI. This command installs version 5.3.8. ```bash bun add boosted@5.3.8 ``` -------------------------------- ### Live Toast Example with JavaScript Source: https://boosted.orange.com/docs/5.3/components/toasts Demonstrates how to show a toast dynamically using JavaScript. The toast is positioned in the lower right corner using utility classes. ```html
``` ```javascript if (document.getElementById('liveToastBtn')) { document.getElementById('liveToastBtn').addEventListener('click', () => { boosted.Toast.getOrCreateInstance(document.getElementById('liveToast')).show() }) } ``` -------------------------------- ### Install Vite for Development Source: https://boosted.orange.com/docs/5.3/getting-started/vite Installs Vite as a development dependency. This tool is essential for the frontend build process. ```bash npm i --save-dev vite ``` -------------------------------- ### All Breakpoints Grid Example Source: https://boosted.orange.com/docs/5.3/layout/grid Use `.col` and `.col-*` classes for grids that are consistent across all device sizes. Specify numbered classes for specific column sizes, or use `.col` for equal distribution. ```html
col
col
col
col
col-8
col-4
``` -------------------------------- ### Vertical Alignment: Start Source: https://boosted.orange.com/docs/5.3/layout/columns Aligns columns to the start of the cross axis. Use responsive `align-items-start` classes on the row. ```html
One of three columns
One of three columns
One of three columns
``` -------------------------------- ### Loading Card Example with Placeholders Source: https://boosted.orange.com/docs/5.3/components/placeholders Compares a typical card component with a recreated version using placeholders to demonstrate a loading state. Ensures size and proportions are consistent. ```html
...
Card title

Some quick example text to build on the card title and make up the bulk of the card’s content.

Go somewhere
``` -------------------------------- ### Apply Focus Ring Theme Colors with Utilities Source: https://boosted.orange.com/docs/5.3/helpers/focus-ring Use `.focus-ring-*` utility classes to quickly apply focus ring styles with different theme colors. Examples include primary, secondary, success, danger, warning, info, light, and dark. ```html

Primary focus

Secondary focus

Success focus

Danger focus

Warning focus

Info focus

Light focus

Dark focus

``` -------------------------------- ### Install Parcel Source: https://boosted.orange.com/docs/5.3/getting-started/parcel Installs Parcel as a development dependency. Parcel is a zero-configuration web application bundler that simplifies the development process. ```bash npm i --save-dev parcel ``` -------------------------------- ### Align Content Start Source: https://boosted.orange.com/docs/5.3/utilities/flex Use `align-content-start` to align flex items to the start of the cross axis. Requires `flex-wrap: wrap`. ```html
...
``` -------------------------------- ### Basic Form Example Source: https://boosted.orange.com/docs/5.3/forms/overview Demonstrates a standard form structure with email, password, and checkbox inputs, along with a submit button. Ensure correct `type` attributes are used for inputs. ```html
We’ll never share your email with anyone else.
``` -------------------------------- ### Install Boosted via Composer Source: https://boosted.orange.com/docs/5.3/getting-started/download Install and manage Boosted's Sass and JavaScript using Composer. This command requires version 5.3.8. ```bash composer require orange-opensource/orange-boosted-bootstrap:5.3.8 ``` -------------------------------- ### Single Breakpoint CSS Example Source: https://boosted.orange.com/docs/5.3/layout/breakpoints This is an example of the compiled CSS for the `media-breakpoint-only(md)` mixin, demonstrating how it targets a specific screen size range. ```css // Example // Apply styles starting from medium devices and up to extra large devices @media (min-width: 768px) and (max-width: 1023.98px) { ... } ``` -------------------------------- ### Container Examples Source: https://boosted.orange.com/docs/5.3/examples/grid Demonstrates various container classes for defining layout boundaries. These include fixed-width containers at different breakpoints and a fluid container. ```html .container .container-sm .container-md .container-lg .container-xl .container-xxl .container-fluid ``` -------------------------------- ### HTML structure for Sass layout example Source: https://boosted.orange.com/docs/5.3/layout/grid The corresponding HTML structure for the Sass-defined two-column layout. This pairs with the SCSS example to create the visual layout. ```html
Main content
Secondary content
``` -------------------------------- ### RTL Starter Template Source: https://boosted.orange.com/docs/5.3/getting-started/rtl This HTML template demonstrates the required HTML structure for RTL support, including `dir="rtl"` and `lang="ar"` attributes on the `` element, along with the necessary CSS includes. ```html مرحبًا بالعالم!

مرحبًا بالعالم!

``` -------------------------------- ### Between Breakpoints CSS Example Source: https://boosted.orange.com/docs/5.3/layout/breakpoints This is an example of the compiled CSS for the `media-breakpoint-between(md, xl)` mixin, showing the resulting media query that covers the specified range. ```css // Example // Apply styles starting from medium devices and up to extra large devices @media (min-width: 768px) and (max-width: 1279.98px) { ... } ``` -------------------------------- ### Responsive Pagination Behavior Source: https://boosted.orange.com/docs/5.3/components/pagination This example demonstrates how pagination can adapt to different screen sizes by limiting the number of items displayed to prevent wrapping or overflow. ```html ``` -------------------------------- ### Stacked Toasts Example Source: https://boosted.orange.com/docs/5.3/components/toasts To stack multiple toasts, use a single `toast-container` element. This example shows two toasts that will automatically stack when displayed. ```html
``` -------------------------------- ### Z-index example Source: https://boosted.orange.com/docs/5.3/utilities/z-index Use z-index utilities to stack elements. Ensure elements have a non-static position. These utilities are for low-level stacking, with higher values reserved for overlays. ```html
z-3
z-2
z-1
z-0
z-n1
``` -------------------------------- ### Custom Light Navbar Example Source: https://boosted.orange.com/docs/5.3/components/navbar Example of a light navbar with a custom background color using inline styles and `data-bs-theme="light"`. ```html ``` -------------------------------- ### Get Tooltip Instance and Set Content Source: https://boosted.orange.com/docs/5.3/components/tooltips Demonstrates how to retrieve an existing tooltip instance using `getInstance` and then update its content using the `setContent` method. This is useful for dynamically changing tooltip text after initialization. ```javascript const tooltip = boosted.Tooltip.getInstance('#example') // Returns a Boosted tooltip instance // setContent example tooltip.setContent({ '.tooltip-inner': 'another title' }) ``` -------------------------------- ### Adding Rows and Customizing Placement Source: https://boosted.orange.com/docs/5.3/layout/css-grid Demonstrates how to define multiple rows using --bs-rows and control item placement with grid-row and g-start classes. ```html
Auto-column
Auto-column
Auto-column
``` -------------------------------- ### Offcanvas Top Placement Example Source: https://boosted.orange.com/docs/5.3/components/offcanvas Use the `.offcanvas-top` class to position the offcanvas at the top of the viewport. This example includes the toggle button and the offcanvas structure. ```html
Offcanvas top
...
``` -------------------------------- ### User Input Example Source: https://boosted.orange.com/docs/5.3/content/reboot Use the `` tag to denote keyboard input. Nested `` tags can represent key combinations. ```html To switch directories, type cd followed by the name of the directory.
To edit settings, press Ctrl + , ``` -------------------------------- ### Install Webpack Development Dependencies Source: https://boosted.orange.com/docs/5.3/getting-started/webpack Installs core Webpack, the CLI for terminal commands, a development server, and a plugin for handling HTML files. These are development-only dependencies. ```bash npm i --save-dev webpack webpack-cli webpack-dev-server html-webpack-plugin ``` -------------------------------- ### Install Sass for CSS Bundling Source: https://boosted.orange.com/docs/5.3/getting-started/vite Installs Sass as a development dependency. This is necessary for importing and bundling Boosted's CSS files within the Vite project. ```bash npm i --save-dev sass ``` -------------------------------- ### Clearfix Example with Buttons Source: https://boosted.orange.com/docs/5.3/helpers/clearfix Demonstrates how the clearfix utility prevents layout issues when elements inside a container are floated. ```html
``` -------------------------------- ### NPM Scripts for Webpack Source: https://boosted.orange.com/docs/5.3/getting-started/webpack Defines npm scripts for starting the Webpack development server and building the project for production. The 'start' script uses 'webpack serve'. ```json { // ... "scripts": { "start": "webpack serve", "build": "webpack build --mode=production", "test": "echo \"Error: no test specified\" && exit 1" }, // ... } ``` -------------------------------- ### Basic Progress Bar Examples Source: https://boosted.orange.com/docs/5.3/components/progress Demonstrates various states of a basic progress bar, from 0% to 100%. Ensure the parent `.progress` div has appropriate ARIA attributes for accessibility. ```html
``` -------------------------------- ### Button Plugin Initialization Source: https://boosted.orange.com/docs/5.3/components/buttons You can create a button instance with the button constructor. ```APIDOC ## Button Plugin Initialization You can create a button instance with the button constructor, for example: ```javascript const bsButton = new boosted.Button('#myButton') ``` ``` -------------------------------- ### Tab Methods Source: https://boosted.orange.com/docs/5.3/components/list-group All API methods are asynchronous and start a transition. They return to the caller as soon as the transition is started, but before it ends. A method call on a transitioning component will be ignored. ```APIDOC ## dispose ### Description Destroys an element’s tab. ### Method `dispose` ## getInstance ### Description Static method which allows you to get the tab instance associated with a DOM element. ### Method `getInstance(element)` ## getOrCreateInstance ### Description Static method which returns a tab instance associated to a DOM element or create a new one in case it wasn’t initialized. ### Method `getOrCreateInstance(element)` ## show ### Description Selects the given tab and shows its associated pane. Any other tab that was previously selected becomes unselected and its associated pane is hidden. Returns to the caller before the tab pane has actually been shown (i.e. before the `shown.bs.tab` event occurs). ### Method `show` ```