tessl/npm-bootstrap-sass

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

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

Bootstrap Sass

Name: tessl/npm-bootstrap-sass
Author: tessl

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;