ODE Bootstrap CSS Framework

Common errors

• Module not found: Error: Can't resolve 'ode-bootstrap/dist/css/ode-bootstrap.min.css'

  cause The import path for the CSS file is incorrect or the package is not installed correctly.
  fix Verify the package is installed (`npm install ode-bootstrap`) and check the exact file path in `node_modules/ode-bootstrap`.

• Styles are not applied to my HTML elements after importing the CSS.

  cause Your build tool (e.g., Webpack) is not configured to process CSS files, or the CSS is being overridden by other styles with higher specificity.
  fix Ensure your bundler has the necessary CSS loaders (e.g., `css-loader` and `style-loader` for Webpack). Inspect element styles in the browser developer tools to check CSS specificity and inheritance.

Warnings

• breaking Version `1.0.0-dev.0` is an early development release and is not stable for production environments. Expect frequent, unannounced breaking changes to the API and internal structure.
  Fix: Avoid using `dev` versions in production. Monitor the project's development for stable releases.
• gotcha As a custom framework based on Bootstrap, ODE Bootstrap may override or modify standard Bootstrap styles and utility classes. This could lead to unexpected visual behavior if standard Bootstrap documentation is followed without considering ODE's customizations.
  Fix: Refer to ODE Bootstrap's specific documentation (if available) for intended usage. Test thoroughly against standard Bootstrap expectations.
• gotcha Compatibility with specific Bootstrap versions is crucial. Ensure the version of Bootstrap you are using in your project is compatible with the version ODE Bootstrap was built upon.
  Fix: Check `ode-bootstrap`'s `package.json` for peer dependency requirements for `bootstrap`. Install a compatible version of `bootstrap`.
• gotcha When integrating with bundlers, ensure your build setup is correctly configured to process CSS files. Missing loaders (e.g., `css-loader`, `style-loader` for Webpack) will prevent styles from being applied.
  Fix: Configure your bundler (e.g., Webpack, Vite) to handle `.css` and `.scss` file imports appropriately with relevant loaders/plugins.

Install

• npm install ode-bootstrap npm
• yarn add ode-bootstrap yarn
• pnpm add ode-bootstrap pnpm

Imports

• CSS Stylesheet (for bundlers)
  wrong:

  const odeBootstrap = require('ode-bootstrap');

  correct:

  import 'ode-bootstrap/dist/css/ode-bootstrap.min.css';

  This import statement is used by module bundlers (like Webpack, Vite) to include the minified CSS into your JavaScript/TypeScript project. Ensure your build configuration handles CSS files.
• SCSS Source (for customization)

  @import 'ode-bootstrap/scss/ode-bootstrap';

  If you are extending or overriding ODE Bootstrap styles using Sass/SCSS, import the source SCSS file within your main stylesheet. Requires a Sass compiler in your build process.
• HTML Link Tag

  <link rel="stylesheet" href="/path/to/ode-bootstrap.min.css">

  For direct inclusion in HTML, typically from a CDN or local static assets, not usually managed by JavaScript module imports.

Quickstart

This quickstart demonstrates how to import ODE Bootstrap's CSS into a modern TypeScript project using LitElement, and showcases basic usage of its customized Bootstrap components.

import 'ode-bootstrap/dist/css/ode-bootstrap.min.css';
// Assuming Bootstrap's JavaScript is also handled, if needed for interactive components
// import 'bootstrap/dist/js/bootstrap.bundle.min.js';

import { LitElement, html, css } from 'lit';
import { customElement, property } from 'lit/decorators.js';

@customElement('ode-app')
export class OdeApp extends LitElement {
  static styles = css`
    /* Your application-specific styles, potentially overriding ODE Bootstrap */
    .custom-section {
      padding: 1.5rem;
      background-color: var(--bs-light);
      border-radius: 0.5rem;
      margin-top: 1.5rem;
    }
  `;

  @property({ type: String })
  appName = 'My ODE Project';

  render() {
    return html`
      <header class="navbar navbar-expand-lg navbar-dark bg-primary">
        <div class="container-fluid">
          <a class="navbar-brand" href="#">${this.appName}</a>
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
            aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav ms-auto">
              <li class="nav-item">
                <a class="nav-link active" aria-current="page" href="#">Home</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">About</a>
              </li>
            </ul>
          </div>
        </div>
      </header>
      <main class="container mt-4">
        <div class="alert alert-success" role="alert">
          Welcome to your ODE-styled application! This alert uses custom theme colors.
        </div>
        <button type="button" class="btn btn-secondary me-2">Secondary Button</button>
        <button type="button" class="btn btn-outline-info">Info Outline Button</button>
        <div class="custom-section">
          <h4>Feature Section</h4>
          <p>This area demonstrates custom content styled with ODE Bootstrap utility classes and some internal overrides.</p>
          <span class="badge bg-warning text-dark">New Feature</span>
        </div>
      </main>
    `;
  }
}

// To integrate this web component into an HTML page:
// document.body.appendChild(document.createElement('ode-app'));