Bootstrap Brain Framework (BSB)

2.0.4 · active · verified Sun Apr 19

Bootstrap Brain (BSB) Framework, currently at version 2.0.4, is an extension layer built on top of Bootstrap 5 (specifically v5.3.3). It aims to provide additional pre-styled basic components and templates, augmenting Bootstrap's core capabilities without fundamentally altering its underlying structure. The framework focuses on delivering readily usable HTML and CSS patterns, making it suitable for rapid web development. It differentiates itself by offering a curated collection of free components and templates directly available for download, streamlining the design and development process for projects utilizing Bootstrap 5. Its release cadence aligns with Bootstrap's ecosystem, providing updates and new assets that are compatible with the latest stable Bootstrap releases. Primarily, BSB is a styling and templating resource rather than a JavaScript library for programmatic use.

Common errors

```
Custom BSB styles are not applying or are being overridden.
```
cause Incorrect order of stylesheet inclusion or CSS specificity issues. Bootstrap's styles or other custom CSS are overriding BSB's rules.

fix Ensure that `bsb.css` is included *after* `bootstrap.min.css` in your HTML `<head>` section. If using custom CSS that should override BSB, place it after `bsb.css`.
```
JavaScript-dependent Bootstrap components (e.g., modals, carousels) are not functioning.
```
cause Bootstrap's JavaScript bundle (e.g., `bootstrap.bundle.min.js`) is either missing, incorrectly linked, or loaded before jQuery/Popper.js (if older Bootstrap versions or specific components require them).

fix Verify that `bootstrap.bundle.min.js` (or individual Bootstrap JS files) is correctly linked via a `<script>` tag, preferably at the end of the `<body>`, and that it's compatible with your Bootstrap CSS version. BSB itself provides minimal JS and relies heavily on Bootstrap's JS.

Warnings

breaking BSB Framework is built on Bootstrap 5. Any breaking changes or updates in major or minor versions of Bootstrap could potentially affect BSB's functionality or appearance. Always verify compatibility when updating Bootstrap.
Fix: Consult the BSB documentation and Bootstrap's release notes for compatibility guides before upgrading Bootstrap. Test thoroughly after any Bootstrap update.
gotcha BSB extends Bootstrap's styles, meaning there's a possibility of class name conflicts or style overrides if custom CSS or other Bootstrap extensions use the same class names as BSB, leading to unexpected styling.
Fix: Inspect element using browser developer tools to identify conflicting styles. Prioritize BSB's stylesheet loading after Bootstrap's, and your custom CSS after BSB's, to leverage CSS specificity. Consider using BSB's Sass files for better integration and customization.
gotcha The package currently shows 'not healthy version release cadence and project activity because the last version was released a year ago' on npm security analysis, despite the README stating v2.0.4. This might imply slower updates or maintenance.
Fix: Monitor the GitHub repository for recent commits and issues to gauge ongoing development. Be aware that critical bug fixes or Bootstrap compatibility updates might not be as frequent as with actively developed libraries.

Install

npm install bs-brain npm
yarn add bs-brain yarn
pnpm add bs-brain pnpm

Imports

CSS Stylesheet
```
<link rel="stylesheet" href="https://unpkg.com/bs-brain/bsb.css" />
```
BSB is primarily a CSS framework; its main 'import' is linking the stylesheet in HTML. No direct JavaScript exports are typically used in application code.
JavaScript (optional)
```
<script src="https://unpkg.com/bs-brain/dist/bsb.min.js"></script>
```
While BSB is mostly CSS, some components might include minimal JavaScript. This would typically be included via a script tag, often after Bootstrap's JS. The `index.js` file exists in the repository, but no specific named exports are indicated for direct ES module imports.
Sass/SCSS
```
@import 'node_modules/bs-brain/scss/bsb';
```
For projects using Sass, BSB's styles can be imported into your main SCSS file to allow for customization and integration with your build process. This assumes a Sass-enabled build setup.

Quickstart

Demonstrates how to integrate Bootstrap Brain's CSS alongside Bootstrap 5 in a basic HTML page, showcasing a custom BSB class.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BSB Quickstart</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <!-- BSB Framework CSS -->
    <link rel="stylesheet" href="https://unpkg.com/bs-brain/bsb.css" />
</head>
<body>
    <div class="container mt-5">
        <h1 class="mb-4">Welcome to Bootstrap Brain!</h1>
        <div class="bsb-section-title">
            <h2>An Extended Bootstrap Section</h2>
            <p>This text is styled with a BSB-specific class.</p>
        </div>
        <button class="btn btn-primary bsb-btn-xl">BSB Styled Button</button>
        <p class="mt-3">Explore <a href="https://bootstrapbrain.com/component-category/free/" target="_blank">BSB Components</a>.</p>
    </div>

    <!-- Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</body>
</html>

view raw JSON →