Bootstrap-sass provides comprehensive Ruby integration through a gem that automatically configures asset paths and provides framework integration for Rails, Sprockets, Compass, and Hanami applications.
Main module providing path helpers and automatic framework detection.
module Bootstrap
# Automatically loads and configures Bootstrap for detected frameworks
# This method registers with Rails, Compass, Sprockets, or Hanami
# and sets Sass precision to minimum 8 for Bootstrap compatibility
def self.load!
end
# Path helpers
def self.gem_path
# Returns the gem installation directory path
# @return [String] Path to bootstrap-sass gem directory
end
def self.assets_path
# Returns the assets directory path
# @return [String] Path to assets directory (stylesheets, javascripts, fonts)
end
def self.stylesheets_path
# Returns the stylesheets directory path
# @return [String] Path to Sass stylesheets directory
end
def self.javascripts_path
# Returns the JavaScript files directory path
# @return [String] Path to JavaScript plugins directory
end
def self.fonts_path
# Returns the fonts directory path
# @return [String] Path to Glyphicons font files
end
# Environment detection helpers
def self.sprockets?
# Detects if Sprockets is available
# @return [Boolean] True if Sprockets is defined
end
def self.compass?
# Detects if Compass is available
# @return [Boolean] True if Compass::Frameworks is defined
end
def self.rails?
# Detects if Rails is available
# @return [Boolean] True if Rails is defined
end
def self.hanami?
# Detects if Hanami is available
# @return [Boolean] True if Hanami is defined
end
endUsage Examples:
# Gem loads automatically when required
require 'bootstrap-sass'
# Access asset paths
puts Bootstrap.stylesheets_path
# => "/path/to/gems/bootstrap-sass-3.4.3/assets/stylesheets"
puts Bootstrap.javascripts_path
# => "/path/to/gems/bootstrap-sass-3.4.3/assets/javascripts"
puts Bootstrap.fonts_path
# => "/path/to/gems/bootstrap-sass-3.4.3/assets/fonts"
# Environment detection
if Bootstrap.rails?
puts "Running in Rails environment"
elsif Bootstrap.compass?
puts "Running with Compass"
endAccess to Bootstrap and gem version information.
module Bootstrap
# Gem version string
VERSION = "3.4.3"
# Bootstrap source commit SHA
BOOTSTRAP_SHA = "hash_string"
endUsage Examples:
require 'bootstrap-sass/version'
puts Bootstrap::VERSION
# => "3.4.3"
puts Bootstrap::BOOTSTRAP_SHA
# => "commit_hash"Automatic Rails asset pipeline configuration.
module Bootstrap
module Rails
# Rails engine that automatically configures asset paths
class Engine < ::Rails::Engine
# Automatically adds Bootstrap assets to Rails asset pipeline
# Configures precompilation for fonts and images
end
end
endUsage Examples:
# In Rails applications, the engine loads automatically
# No manual configuration needed
# In config/application.rb (optional explicit loading)
require 'bootstrap-sass/engine'
# Assets are automatically available in Rails
# app/assets/stylesheets/application.scss
@import "bootstrap-sprockets";
@import "bootstrap";
# app/assets/javascripts/application.js
//= require bootstrap-sprocketsFor non-Rails applications, manual registration methods are available.
# Internal methods called automatically by load!
def self.register_compass_extension
# Registers Bootstrap as a Compass extension
# Configures stylesheets directory and templates
end
def self.register_sprockets
# Adds Bootstrap paths to Sprockets load path
# Includes stylesheets, fonts, and javascripts
end
def self.register_hanami
# Adds Bootstrap assets to Hanami assets sources
endUsage Examples:
# These are called automatically by Bootstrap.load!
# Manual usage typically not needed
# For Sprockets without Rails
require 'sprockets'
require 'bootstrap-sass'
# Bootstrap paths automatically added to Sprockets
# For Compass
require 'compass'
require 'bootstrap-sass'
# Bootstrap registered as Compass extension# Gemfile
gem 'bootstrap-sass', '~> 3.4.3'
gem 'sass-rails', '>= 5.0'
# app/assets/stylesheets/application.scss
@import "bootstrap-sprockets";
@import "bootstrap";
# app/assets/javascripts/application.js
//= require jquery
//= require bootstrap-sprockets
# Custom variables (before @import "bootstrap")
$brand-primary: #428bca;
$grid-gutter-width: 20px;
@import "bootstrap-sprockets";
@import "bootstrap";require 'sass'
require 'bootstrap-sass'
# Bootstrap stylesheets are automatically added to Sass load paths
sass_engine = Sass::Engine.new('@import "bootstrap";', {
syntax: :scss,
load_paths: [Bootstrap.stylesheets_path]
})
css_output = sass_engine.render# config.rb
require 'bootstrap-sass'
# Bootstrap is automatically registered as a Compass extension
# @import "bootstrap" is available in your stylesheetsrequire 'sprockets'
require 'bootstrap-sass'
# Create Sprockets environment
env = Sprockets::Environment.new
# Bootstrap paths are automatically added
# Files are available for asset compilation
bootstrap_css = env['bootstrap.css']
bootstrap_js = env['bootstrap.js']require 'sass'
require 'bootstrap-sass'
# Configure Sass with Bootstrap
Sass.load_paths << Bootstrap.stylesheets_path
# Compile with custom variables
scss_content = %{
$brand-primary: #007bff;
$font-size-base: 16px;
@import "bootstrap";
}
css = Sass.compile(scss_content, syntax: :scss)# config/application.rb or config/environments/production.rb
config.assets.precompile += %w(
bootstrap/glyphicons-halflings-regular.eot
bootstrap/glyphicons-halflings-regular.svg
bootstrap/glyphicons-halflings-regular.ttf
bootstrap/glyphicons-halflings-regular.woff
bootstrap/glyphicons-halflings-regular.woff2
)# config/application.rb
# Ensure proper MIME types for font files
config.assets.configure do |env|
env.register_mime_type('application/vnd.ms-fontobject', extensions: ['.eot'])
env.register_mime_type('application/x-font-ttf', extensions: ['.ttf'])
env.register_mime_type('application/font-woff', extensions: ['.woff'])
env.register_mime_type('application/font-woff2', extensions: ['.woff2'])
endCommon issues and solutions:
# Sass precision issues (handled automatically)
# Bootstrap requires minimum precision of 8
if defined?(::Sass::Script::Value::Number)
::Sass::Script::Value::Number.precision = [8, ::Sass::Script::Value::Number.precision].max
end
# Missing jQuery error
# Ensure jQuery is loaded before Bootstrap JavaScript
//= require jquery
//= require bootstrap-sprockets
# Asset path issues in production
# Ensure asset helpers are imported before Bootstrap
@import "bootstrap-sprockets";
@import "bootstrap";