or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

index.mdjavascript-plugins.mdruby-integration.mdsass-stylesheets.md
tile.json

tessl/npm-bootstrap-sass

A Sass-powered version of Bootstrap 3, ready to drop right into your Sass powered applications.

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/bootstrap-sass@3.4.x

To install, run

npx @tessl/cli install tessl/npm-bootstrap-sass@3.4.0

index.mddocs/

Bootstrap Sass

Bootstrap-sass is a Sass-powered version of Bootstrap 3, the popular HTML, CSS, and JavaScript front-end framework. It provides complete Bootstrap functionality through Sass stylesheets for customizable styling, JavaScript plugins for interactive components, and Glyphicons icon fonts, making it ready to drop into any Sass-powered application.

Package Information

  • Package Name: bootstrap-sass
  • Package Type: npm/gem (dual Ruby gem and npm package)
  • Language: Sass/SCSS with JavaScript
  • Version: 3.4.1 (Bootstrap 3.4.1 + Sass integration)
  • Installation: npm install bootstrap-sass or gem install bootstrap-sass

Core Imports

Sass Imports

Complete Bootstrap (all components):

@import "bootstrap";

Bootstrap with asset helpers for Sprockets:

@import "bootstrap-sprockets";
@import "bootstrap";

Selective component imports:

@import "bootstrap/variables";
@import "bootstrap/mixins";
@import "bootstrap/buttons";
@import "bootstrap/forms";

JavaScript Imports

All Bootstrap JavaScript:

//= require bootstrap

With Sprockets (individual modules):

//= require bootstrap-sprockets

Individual plugins:

//= require bootstrap/modal
//= require bootstrap/dropdown

Basic Usage

Sass Styling

// Import Bootstrap
@import "bootstrap";

// Customize Bootstrap variables
$brand-primary: #007bff;
$font-size-base: 16px;

// Use Bootstrap mixins
.my-button {
  @include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
}

// Use Bootstrap classes in HTML
// <div class="container">
//   <div class="row">
//     <div class="col-md-6">Content</div>
//   </div>
// </div>

JavaScript Components

// Initialize Bootstrap components
$(document).ready(function() {
  // Auto-initialize dropdowns
  $('.dropdown-toggle').dropdown();
  
  // Show a modal
  $('#myModal').modal('show');
  
  // Initialize tooltip
  $('[data-toggle="tooltip"]').tooltip();
});

Architecture

Bootstrap-sass is organized into several key areas:

  • Sass Stylesheets: Complete CSS framework with variables, mixins, and component styles
  • JavaScript Plugins: Interactive components requiring jQuery
  • Asset Helpers: Integration modules for different build systems (Sprockets, Compass, Mincer)
  • Font Assets: Glyphicons icon font files
  • Ruby Integration: Rails engine and asset path helpers for Ruby applications

Capabilities

Sass Stylesheets

Complete Bootstrap CSS framework with customizable variables and mixins for building responsive layouts and styled components.

// Main import - includes all Bootstrap components
@import "bootstrap";

// Asset helper imports for different build systems
@import "bootstrap-sprockets"; // For Sprockets
@import "bootstrap-compass";   // For Compass  
@import "bootstrap-mincer";    // For Mincer

Sass Stylesheets

JavaScript Plugins

Interactive Bootstrap components including modals, dropdowns, carousels, and other dynamic UI elements.

// Sprockets manifest for all plugins
//= require bootstrap-sprockets

// Individual plugin requires
//= require bootstrap/modal
//= require bootstrap/dropdown
//= require bootstrap/tooltip

JavaScript Plugins

Ruby Integration

Rails engine and asset path configuration for seamless integration with Ruby on Rails applications.

# Gem integration (auto-loaded)
require 'bootstrap-sass'

# Manual path access
Bootstrap.stylesheets_path  # => path to stylesheets
Bootstrap.javascripts_path  # => path to javascripts
Bootstrap.fonts_path       # => path to fonts

Ruby Integration

Eyeglass Integration

Node.js Sass integration using Eyeglass module system for easy importing in Node.js build tools.

// Eyeglass module configuration
module.exports = function(eyeglass, sass) {
  return {
    sassDir: path.join(__dirname, 'assets/stylesheets')
  }
};

Usage Example:

// With Eyeglass in Node.js
const eyeglass = require("eyeglass");
const sass = require("sass");

const options = eyeglass({
  importer: eyeglass.importer(sass),
  loadPaths: [/* other paths */]
});

// Now @import "bootstrap" works in Sass compilation
const result = sass.render({
  ...options,
  data: '@import "bootstrap";'
});

Types

// Key Bootstrap variables (partial list)
$gray-base: #000 !default;
$brand-primary: #337ab7 !default;
$font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif !default;
$grid-columns: 12 !default;
$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px
) !default;
// jQuery plugin interface (example for modal)
interface ModalOptions {
  backdrop?: boolean | 'static';
  keyboard?: boolean;
  focus?: boolean;
  show?: boolean;
}

// Plugin method signatures
$.fn.modal(options?: ModalOptions | string): JQuery;
$.fn.dropdown(options?: string): JQuery;
$.fn.tooltip(options?: TooltipOptions | string): JQuery;