pure scss asset helpers, new paths

This commit is contained in:
Gleb Mazovetskiy 2014-06-24 02:57:06 +02:00
parent 380194abaf
commit 0cbe7255b5
16 changed files with 47 additions and 98 deletions

View File

@ -3,5 +3,5 @@ source 'https://rubygems.org'
gemspec
group :development do
gem 'byebug', platform: :mri_20, require: false
gem 'byebug', platform: :mri_21, require: false
end

View File

@ -94,7 +94,7 @@ bower install bootstrap-sass-official
`bootstrap-sass` is taken so make sure you use the command above.
Sass, JS, and all other assets are located at [vendor/assets](/vendor/assets).
Sass, JS, and all other assets are located at [assets](/assets).
By default, `bower.json` main field list only the main `bootstrap.scss` and all the static assets (fonts and JS).
This is compatible by default with asset managers such as [wiredep](https://github.com/taptapship/wiredep).
@ -135,13 +135,13 @@ Otherwise the fonts are referenced as:
`$icon-font-path` defaults to `bootstrap/`.
When not using an asset pipeline, you can copy fonts and JS from bootstrap-sass, they are located at [vendor/assets](/vendor/assets):
When not using an asset pipeline, you can copy fonts and JS from bootstrap-sass, they are located at [assets](/assets):
```bash
mkdir public/fonts
cp -r $(bundle show bootstrap-sass)/vendor/assets/fonts/ public/fonts/
cp -r $(bundle show bootstrap-sass)/assets/fonts/ public/fonts/
mkdir public/javascripts
cp -r $(bundle show bootstrap-sass)/vendor/assets/javascripts/ public/javascripts/
cp -r $(bundle show bootstrap-sass)/assets/javascripts/ public/javascripts/
```
## Usage
@ -174,7 +174,7 @@ $navbar-default-color: $light-orange;
You can also import components explicitly. To start with a full list of modules copy this file from the gem:
```bash
cp $(bundle show bootstrap-sass)/vendor/assets/stylesheets/bootstrap.scss \
cp $(bundle show bootstrap-sass)/assets/stylesheets/bootstrap.scss \
app/assets/stylesheets/bootstrap-custom.scss
```
Comment out components you do not want from `bootstrap-custom`.
@ -188,7 +188,7 @@ In `application.sass`, replace `@import 'bootstrap'` with:
### Javascript
We have a helper that includes all Bootstrap javascripts. If you use Rails (or Sprockets separately),
put this in your Javascript manifest (usually in `application.js`) to load the files in the [correct order](/vendor/assets/javascripts/bootstrap.js):
put this in your Javascript manifest (usually in `application.js`) to load the files in the [correct order](/assets/javascripts/bootstrap.js):
```js
// Loads all Bootstrap javascripts
@ -229,9 +229,9 @@ To convert a specific branch or version, pass the branch name or the commit hash
The latest converter script is located [here][converter] and does the following:
* Converts upstream bootstrap LESS files to its matching SCSS file.
* Copies all upstream JavaScript into `vendor/assets/javascripts/bootstrap`
* Generates a javascript manifest at `vendor/assets/javascripts/bootstrap.js`
* Copies all upstream font files into `vendor/assets/fonts/bootstrap`
* Copies all upstream JavaScript into `assets/javascripts/bootstrap`
* Generates a javascript manifest at `assets/javascripts/bootstrap.js`
* Copies all upstream font files into `assets/fonts/bootstrap`
* Sets `Bootstrap::BOOTSTRAP_SHA` in [version.rb][version] to the branch sha.
This converter fully converts original LESS to SCSS. Conversion is automatic but requires instructions for certain transformations (see converter output).

View File

@ -13,7 +13,6 @@ end
desc 'Dumps output to a CSS file for testing'
task :debug do
require 'sass'
require './lib/bootstrap-sass/sass_functions'
path = Bootstrap.stylesheets_path
%w(bootstrap).each do |file|
engine = Sass::Engine.for_file("#{path}/#{file}.scss", syntax: :scss, load_paths: [path])
@ -36,10 +35,9 @@ end
desc 'Compile bootstrap-sass to tmp/ (or first arg)'
task :compile, :css_path do |t, args|
require 'sass'
require 'bootstrap-sass/sass_functions'
require 'term/ansicolor'
path = 'vendor/assets/stylesheets'
path = 'assets/stylesheets'
css_path = args.with_defaults(css_path: 'tmp')[:css_path]
puts Term::ANSIColor.bold "Compiling SCSS in #{path}"
Dir.mkdir(css_path) unless File.directory?(css_path)

View File

@ -10,23 +10,23 @@
],
"description": "bootstrap-sass is a Sass-powered version of Bootstrap, ready to drop right into your Sass powered applications.",
"main": [
"vendor/assets/stylesheets/bootstrap.scss",
"vendor/assets/fonts/bootstrap/glyphicons-halflings-regular.eot",
"vendor/assets/fonts/bootstrap/glyphicons-halflings-regular.svg",
"vendor/assets/fonts/bootstrap/glyphicons-halflings-regular.ttf",
"vendor/assets/fonts/bootstrap/glyphicons-halflings-regular.woff",
"vendor/assets/javascripts/bootstrap/affix.js",
"vendor/assets/javascripts/bootstrap/alert.js",
"vendor/assets/javascripts/bootstrap/button.js",
"vendor/assets/javascripts/bootstrap/carousel.js",
"vendor/assets/javascripts/bootstrap/collapse.js",
"vendor/assets/javascripts/bootstrap/dropdown.js",
"vendor/assets/javascripts/bootstrap/tab.js",
"vendor/assets/javascripts/bootstrap/transition.js",
"vendor/assets/javascripts/bootstrap/scrollspy.js",
"vendor/assets/javascripts/bootstrap/modal.js",
"vendor/assets/javascripts/bootstrap/tooltip.js",
"vendor/assets/javascripts/bootstrap/popover.js"
"assets/stylesheets/bootstrap.scss",
"assets/fonts/bootstrap/glyphicons-halflings-regular.eot",
"assets/fonts/bootstrap/glyphicons-halflings-regular.svg",
"assets/fonts/bootstrap/glyphicons-halflings-regular.ttf",
"assets/fonts/bootstrap/glyphicons-halflings-regular.woff",
"assets/javascripts/bootstrap/affix.js",
"assets/javascripts/bootstrap/alert.js",
"assets/javascripts/bootstrap/button.js",
"assets/javascripts/bootstrap/carousel.js",
"assets/javascripts/bootstrap/collapse.js",
"assets/javascripts/bootstrap/dropdown.js",
"assets/javascripts/bootstrap/tab.js",
"assets/javascripts/bootstrap/transition.js",
"assets/javascripts/bootstrap/scrollspy.js",
"assets/javascripts/bootstrap/modal.js",
"assets/javascripts/bootstrap/tooltip.js",
"assets/javascripts/bootstrap/popover.js"
],
"keywords": [
"twbs",

View File

@ -2,7 +2,6 @@ module Bootstrap
class << self
# Inspired by Kaminari
def load!
require 'bootstrap-sass/sass_functions'
register_compass_extension if compass?
if rails?
@ -30,7 +29,7 @@ module Bootstrap
end
def assets_path
@assets_path ||= File.join gem_path, 'vendor', 'assets'
@assets_path ||= File.join gem_path, 'assets'
end
# Environment detection helpers
@ -49,6 +48,8 @@ module Bootstrap
private
def configure_sass
require 'sass' unless defined?(::Sass)
::Sass.load_paths << stylesheets_path
# bootstrap requires minimum precision of 10, see https://github.com/twbs/bootstrap-sass/issues/409

View File

@ -1,7 +1,10 @@
module Bootstrap
module Rails
class Engine < ::Rails::Engine
initializer "bootstrap-sass.assets.precompile" do |app|
initializer 'bootstrap-sass.assets.precompile' do |app|
%w(stylesheets javascripts fonts images).each do |sub|
app.config.assets.paths << root.join('assets', sub)
end
app.config.assets.precompile << %r(bootstrap/glyphicons-halflings-regular\.(?:eot|svg|ttf|woff)$)
end
end

View File

@ -1,53 +0,0 @@
require 'sass'
require 'bootstrap-sass'
module Sass::Script::Functions
def twbs_font_path(source)
twbs_asset_path source, :font
end
declare :twbs_font_path, [:source]
def twbs_image_path(source)
twbs_asset_path source, :image
end
declare :twbs_image_path, [:source]
def twbs_asset_path(source, type)
return Sass::Script::String.new('', :string) if source.to_s.empty?
url = if Bootstrap.asset_pipeline? && (context = sprockets_context)
context.send(:"#{type}_path", source.value)
elsif Bootstrap.compass?
send(:"#{type}_url", source, Sass::Script::Bool.new(true)).value.sub /url\((.*)\)$/, '\1'
end
# sass-only
url ||= source.value.gsub('"', '')
Sass::Script::String.new(url, :string)
end
declare :twbs_asset_path, [:source, :type]
unless Sass::Script::Functions.instance_methods.include?(:ie_hex_str)
# polyfill sass < 3.2.6 (taken from sass 3.2.12):
def ie_hex_str(color)
assert_type color, :Color, :color
alpha = (color.alpha * 255).round.to_s(16).rjust(2, '0')
Sass::Script::String.new("##{alpha}#{color.send(:hex_str)[1..-1]}".upcase)
end
declare :ie_hex_str, [:color]
end
protected
def sprockets_context
# Modern Rails way to get context:
if options.key?(:sprockets)
options[:sprockets][:context]
# Sprockets-sass context:
elsif options.key?(:custom)
options[:custom][:sprockets_context]
# Compatibility with sprockets pre 2.10.0:
elsif (importer = options[:importer]) && importer.respond_to?(:context)
importer.context
end
end
end

View File

@ -16,7 +16,7 @@ namespace :bower do
Dir.chdir Bootstrap.gem_path do
spec = JSON.parse(File.read 'bower.json')
js_paths = File.read(File.join Bootstrap.javascripts_path, 'bootstrap.js').lines.map do |line|
line.strip if line.sub!(%r(//\s*=\s*require\s*(.*)\s*), 'vendor/assets/javascripts/\1.js')
line.strip if line.sub!(%r(//\s*=\s*require\s*(.*)\s*), 'assets/javascripts/\1.js')
end.compact
spec['main'] =

View File

@ -42,9 +42,9 @@ class Converter
@cache_path = cache_path
@repo_url = "https://github.com/#@repo"
@save_to = {
js: 'vendor/assets/javascripts/bootstrap',
scss: 'vendor/assets/stylesheets/bootstrap',
fonts: 'vendor/assets/fonts/bootstrap'}.merge(save_to)
js: 'assets/javascripts/bootstrap',
scss: 'assets/stylesheets/bootstrap',
fonts: 'assets/fonts/bootstrap'}.merge(save_to)
end
def_delegators :@logger, :log, :log_status, :log_processing, :log_transform, :log_file_info, :log_processed, :log_http_get_file, :log_http_get_files, :silence_log

View File

@ -14,7 +14,7 @@ class Converter
name = name.gsub(/\.js$/, '')
content << "//= require ./bootstrap/#{name}\n"
end
path = 'vendor/assets/javascripts/bootstrap.js'
path = 'assets/javascripts/bootstrap.js'
save_file(path, content)
log_processed path
end

View File

@ -5,7 +5,7 @@ stylesheet 'styles.sass'
# SCSS:
assets = '../../vendor/assets'
assets = '../../assets'
bs_stylesheets = "#{assets}/stylesheets/bootstrap"
stylesheet '_bootstrap-variables.sass.erb', :to => '_bootstrap-variables.sass', :erb => true,

View File

@ -3,7 +3,7 @@ require 'fileutils'
class CompilationTest < Test::Unit::TestCase
def test_compilation
path = 'vendor/assets/stylesheets'
path = 'assets/stylesheets'
%w(bootstrap bootstrap/_theme).each do |file|
engine = Sass::Engine.for_file("#{path}/#{file}.scss", syntax: :scss, load_paths: [path])
assert_nothing_raised do

View File

@ -39,10 +39,10 @@ var environment = new Mincer.Environment(process.cwd());
// Include bootstrap scss load path
var bootstrapPath = '../../';
environment.appendPath(bootstrapPath + 'vendor/assets/stylesheets');
environment.appendPath(bootstrapPath + 'assets/stylesheets');
// Include fonts load path
environment.appendPath(bootstrapPath + 'vendor/assets/fonts');
environment.appendPath(bootstrapPath + 'assets/fonts');
// Include dir with assets, root just for test
environment.appendPath('./');

View File

@ -1 +1,2 @@
@import "bootstrap"
@import 'bootstrap-sprockets'
@import 'bootstrap'

View File

@ -3,7 +3,7 @@ require 'fileutils'
class NodeSassTest < Test::Unit::TestCase
def test_node_sass_compilation
path = 'vendor/assets/stylesheets'
path = 'assets/stylesheets'
%w(bootstrap bootstrap/_theme).each do |file|
FileUtils.mkdir_p "tmp/node-sass"
command = "node-sass #{path}/#{file} -o tmp/node-sass/#{File.basename file}.css"

View File

@ -6,7 +6,6 @@ require File.expand_path('dummy_rails/config/environment', File.dirname(__FILE__
require 'test/unit'
require 'sass'
require 'lib/bootstrap-sass/sass_functions'
require 'rails/test_help'