Bootstrap Utilities

A standalone SASS package for generating Bootstrap's utility classes. This package provides the core utility API from Bootstrap without requiring the entire framework. It distributes SASS source files that can be used to dynamically generate CSS utility classes.

This package was created because the Bootstrap utilities are fantastically powerful, but I don't always need the entire framework along for the right. The utility API is extracted from Bootstrap 5.3.8.

Installation

npm install github:joshmcarthur/bootstrap-utilities

I'll happily publish this as an NPM package if there is demand for it, otherwise it's available here on GitHub.

Quick Start

Basic Usage

// Define your utilities
$utilities: (
  "display": (
    print: true,
    property: display,
    class: d,
    values: inline inline-block block grid inline-grid table table-row table-cell flex inline-flex none,
  ),
  "margin": (
    responsive: true,
    // This value will be disregarded if you don't define breakpoints
    property: margin,
    class: m,
    values: (
      0: 0,
      1: 0.25rem,
      2: 0.5rem,
      3: 1rem,
      4: 1.5rem,
      5: 3rem,
      auto: auto,
    ),
  ),
);

// Use the main entry point
@use "node_modules/bootstrap-utilities/scss/bootstrap-utilities" with (
  $utilities: $utilities
);

With Breakpoints

// Define your utilities
$utilities: (
  "display": (
    print: true,
    property: display,
    class: d,
    values: inline inline-block block grid inline-grid table table-row table-cell flex inline-flex none,
  ),
  "margin": (
    responsive: true,
    // This value will be disregarded if you don't define breakpoints
    property: margin,
    class: m,
    values: (
      0: 0,
      1: 0.25rem,
      2: 0.5rem,
      3: 1rem,
      4: 1.5rem,
      5: 3rem,
      auto: auto,
    ),
  ),
);

// Define your breakpoints
$breakpoints: (
  xs: 0,
  sm: 480px,
  md: 768px,
  lg: 1024px,
  xl: 1280px,
  xxl: 1536px,
);

@use "node_modules/bootstrap-utilities/scss/bootstrap-utilities" with (
  $utilities: $utilities,
  $breakpoints: $breakpoints
);

With CSS Variables

// Define your utilities
$utilities: (
  "border-opacity": (
    class: border-opacity,
    variable: border-opacity,
    values: (
      0: 0,
      25: 25%,
      50: 50%,
      75: 75%,
      100: 100%,
    ),
  ),
);

// Use with CSS variable prefix
@use "bootstrap-utilities" with (
  $utilities: $utilities,
  $prefix: "my-app-" // border-opacity-50 = --my-app-border-opacity: 50% variable is set with the utility class.
);

Available Utilities

This package provides the structure to generate utility classes. No utilities are provided by package. It is highly recommended to check out Bootstrap's default utilities to get a sense of what is possible.

Configuration Options

Breakpoints

$breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px,
);

CSS Variable Prefix

$prefix: "bs-"; // Default: ""

Important Utilities

$enable-important-utilities: true; // Default: false

File Structure

bootstrap-utilities/
├── scss/
│   ├── bootstrap-utilities.scss # Main entry point (contains everything)
│   ├── _functions.scss        # Utility functions
│   ├── _mixins.scss           # Utility mixins
│   └── _variables.scss        # Variable declarations
└── examples/                  # Usage examples

Examples

Check the examples/ directory for more detailed usage examples:

• basic-usage.scss - Simple usage with defaults
• custom-breakpoints.scss - Custom breakpoint configuration
• custom-utilities.scss - Adding and modifying utilities
• css-variables.scss - Using CSS variables
• selective-utilities.scss - Including only specific utilities

Building

This package distributes SASS source files. To generate CSS, you'll need to compile the SASS files in your own build process:

# Using sass CLI
sass scss/bootstrap-utilities.scss output.css

# Using sass with custom configuration
sass scss/custom-utilities.scss output.css

# Using with build tools like webpack, vite, etc.
# Import the SASS files directly in your build process
@use "node_modules/bootstrap-utilities/scss/bootstrap-utilities" as * with (
  $utilities: (
    # Your utilities are defined here
  ),
  $breakpoints: (
    # Optional - if you want to have responsive utilities
  ),
  $prefix: "my-app-" # Optional - if you want to have CSS variables available to you to use set by utility classes
)

Browser Support

This package generates CSS that works in all modern browsers. You should be aware that this package does not define any default utilities. You must define your own utilities and breakpoints.

License

MIT License - see LICENSE file for details.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Changelog

1.0.0

• Initial release
• Complete Bootstrap utility API
• Customizable breakpoints and utilities
• TypeScript definitions
• Comprehensive examples