Module 5 : Understanding Bootstrap File Structure (CSS, JS, Utilities).
1. Bootstrap CSS : concepts
1.1 Source vs compiled
Source (SCSS): The editable files using Sass variables, maps, and mixins. This is where theming and custom builds happen.
Compiled CSS: The bootstrap.css and bootstrap.min.css files consumed by browsers. Generated by running Sass compilation and autoprefixing.
1.2 Top-level organization (typical scss/ folder)
_variables.scss — global variables like colors, spacings, breakpoints, font-sizes.
_functions.scss — Sass helper functions (e.g., color manipulation, breakpoint math).
_mixins.scss — reusable mixins (e.g., media query helpers, clearfix, vendor prefixes).
_root.scss — :root CSS custom properties (if supported / enabled) or initial CSS variables mapping.
bootstrap.scss — master entry that @imports all pieces in the correct order.
utilities/ — utility mixins and generator logic; may include _utilities.scss that builds utility classes from maps.
components/ — component-specific files such as _buttons.scss, _navbar.scss, _cards.scss.
layout/ — grid system (_grid.scss, _containers.scss), helpers for flex and spacing.
vendor/ — optional vendor-specific overrides or polyfills.
1.3 Why this order matters
Variables first: Components rely on variables (colors, spacings). Variables must be defined before use.
Mixins & functions next: Components and utilities call mixins and functions.
Layout & components: These generate the core UI rules.
Utilities last: Utilities can safely override earlier rules and provide atomic helpers.
2. SCSS mechanisms used in Bootstrap
2.1 Variables & maps
Variables (e.g., $primary: #0d6efd;) provide single-source-of-truth for colors, breakpoints, etc.
Maps allow structured collections (e.g., $theme-colors: ("primary": $primary, "secondary": $secondary);).
Maps are used to programmatically generate classes for each key.
2.2 Mixins & functions
Mixins accept parameters and output reusable blocks of CSS (e.g., @mixin clearfix { ... }).
Functions return values used in CSS generation (lighten($color, 10%)).
2.3 Looping / generation
Sass @each, @for, and @if are used to loop over maps and dynamically emit classes (common for utilities like .m-1, .p-2, .text-primary).
2.4 Responsive utilities using breakpoints map
Breakpoints are stored as a map such as $grid-breakpoints. Mixins iterate over breakpoints to create responsive variants: .d-md-block, .m-lg-3, etc.
2.5 Custom properties (CSS variables)
Modern versions optionally expose CSS variables (e.g., --bs-primary) for runtime theming. SCSS can be configured to emit them in :root or component scopes.
3. Bootstrap JavaScript: architecture & usage
3.1 Plugins (ES vs UMD)
Bootstrap JS is written as ES6 classes and exported as individual (e.g., modal.js, dropdown.js).
Build artifacts typically include a combined bundle (bootstrap.bundle.js) that includes dependencies (like Popper), and a bundle (bootstrap.esm.js) for tree-shaking.
3.2 Popper dependency
Components like Tooltip and Popover rely on Popper.js for positioning. The bundle includes Popper; the ESM build expects you to import Popper separately.
3.3 Initialization patterns
Data-api (HTML attributes): Many plugins auto-initialize from markup attributes (e.g., data-bs-toggle="modal").
JavaScript instantiation: You can create instances in code: const myModal = new bootstrap.Modal(element, { keyboard: false });.
jQuery (legacy): Older Bootstrap versions provided jQuery plugins; modern versions incentivize native JS usage.
3.4 Events & methods
Each plugin exposes lifecycle events (e.g., show.bs.modal, hidden.bs.modal) and methods (e.g., .show(), .hide()).
Knowing event names and how to listen is critical for complex UI orchestration.
3.5 imports for performance
Import only what you need: import Modal from 'bootstrap/js/dist/modal' — reduces bundle size when using bundlers like Webpack/Rollup/Vite.
4. Utilities system
4.1 What are utilities?
(atomic helpers) such as .text-center, .d-flex, .m-3. They are designed for quick composition and overriding.
4.2 Utility generation flow
A Sass map ($utilities) describes the categories (display, text, spacing), what values each has.
A utility generator mixin loops over the map and emits the appropriate classes, including responsive variants.
Because utilities are emitted after components, they have higher specificity when used later in HTML.
4.3 Customizing utilities
Edit $utilities map in your _custom.scss or override variables before importing bootstrap.scss.
Use Sass @include to generate only the utility groups you want.
4.4 Utility-first tradeoffs
Pros: Rapid development, reduced need for custom CSS, consistency.
Cons: HTML becomes verbose; overuse can harm readability and make semantic styling harder.
5. methods & code examples
5.1 Simple example: customizing the primary color
// _custom-variables.scss
$primary: #1a73e8; // override default
@import "node_modules/bootstrap/scss/bootstrap";
Result: compiled Bootstrap CSS uses your color for .btn-primary, .text-primary, etc.
// custom-bootstrap.scss
@import "node_modules/bootstrap/scss/functions";
@import "node_modules/bootstrap/scss/variables";
@import "node_modules/bootstrap/scss/mixins";
// define a minimal utilities map
$utilities: (
"spacing": (
property: margin,
class: m,
values: (0, 1, 2, 3, 4, 5)
)
);
@include utilities($utilities);
This outputs only .m-* classes (and responsive variants if you include breakpoints) — reducing CSS size.
5.3 JavaScript: lazy-loading
// using ESM import (Vite/Rollup/Webpack)
import Modal from 'bootstrap/js/dist/modal';
const btn = document.querySelector('#openModal');
btn.addEventListener('click', async () => {
const modalEl = document.getElementById('myModal');
const modal = new Modal(modalEl, { backdrop: true });
modal.show();
});
This pattern supports code splitting: the rest of Bootstrap JS is not included unless required.
6. Build a
custom
Bootstrap
Goal: produce a custom-bootstrap.min.css that only includes grid, buttons, navbar, spacing utilities, and a minimal JS bundle with Modal only.
6.1 Prerequisites
Node.js + npm
Sass compiler (dart-sass recommended)
Bundler (Vite/Parcel/Rollup/webpack)
6.2 Steps
Initialize
mkdir bs-custom && cd bs-custom
npm init -y
npm install bootstrap sass --save
Create scss/custom-bootstrap.scss — import only the pieces you need (order: functions -> variables -> mixins -> required components -> utilities)
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";
// layout
@import "../node_modules/bootstrap/scss/grid";
@import "../node_modules/bootstrap/scss/utilities"; // optional, see customizing map
// components
@import "../node_modules/bootstrap/scss/buttons";
@import "../node_modules/bootstrap/scss/navbar";
// minimal utilities (custom map or include default utilities last)
@include utilities($utilities); // or selectively include generator
Compile SCSS
npx sass scss/custom-bootstrap.scss dist/custom-bootstrap.css --style=compressed
npx postcss dist/custom-bootstrap.css --use autoprefixer -o dist/custom-bootstrap.min.css
Create minimal JS bundle — using ESM imports
// src/index.js
import Modal from 'bootstrap/js/dist/modal';
window.openModal = (selector) => {
const el = document.querySelector(selector);
const m = new Modal(el);
m.show();
}
Bundle with your bundler to dist/custom-bootstrap.bundle.js.
Test: create an index.html that includes your custom-bootstrap.min.css and script. Verify markup and functionality.
6.3 deliverables & evaluation
dist/custom-bootstrap.min.css size comparison with full bootstrap.min.css.
dist/custom-bootstrap.bundle.js size and absence of unused code.
A short report: what was included, what was excluded, and why.
7. Exercises
Exercise 1 — Identify order problems
Problem: You imported _buttons.scss before _variables.scss and observed compilation errors. Explain why.
Answer. Buttons use color and spacing variables defined in _variables.scss; importing them before variables means Sass encounters undefined variables. Variables must be defined first.
Exercise 2 — Create a .text-brand utility
Add a utility .text-brand th
Done created a detailed document titled "Bootstrap File Structure — CSS, JS, Utilities
No comments:
Post a Comment