Commit 28bd7c07 authored by Corey Sewell's avatar Corey Sewell

Add support for SASS/SCSS

Refactored less files to be more scss friendly
 * Ensured no variables are used before assignment
 * Removed interpolated variable usage with similar substitute

Added SCSS Grunt tasks
 * convert_less - Converts theme less files to scss
 * swatch_scss - Same as original swatch task, but using sass
 * compress_scss - Same as original compress task, but using sass

Added dependencies for SCSS

Updated _config.yml so jekyll includes theme _bootswatch.scss and _variables.scss files

Added .sass-cache dir to .gitignore
parent 3f867ba1
......@@ -4,3 +4,4 @@ node_modules
build
_site
*.lock
.sass-cache/
module.exports = function (grunt) {
grunt.loadNpmTasks('grunt-autoprefixer');
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-connect');
grunt.loadNpmTasks('grunt-contrib-clean');
......@@ -28,7 +29,7 @@ module.exports = function (grunt) {
},
clean: {
build: {
src: ['*/build.less', '!global/build.less']
src: ['*/build.less', '*/build.scss', '!global/build.less', '!global/build.scss']
}
},
concat: {
......@@ -118,6 +119,40 @@ module.exports = function (grunt) {
compress ? 'compress:'+lessDest+':'+'<%=builddir%>/' + theme + '/bootstrap.min.css':'none']);
});
grunt.registerTask('build_scss', 'build a regular theme from scss', function(theme, compress) {
var theme = theme == undefined ? grunt.config('buildtheme') : theme;
var compress = compress == undefined ? true : compress;
var isValidTheme = grunt.file.exists(theme, '_variables.scss') && grunt.file.exists(theme, '_bootswatch.scss');
// cancel the build (without failing) if this directory is not a valid theme
if (!isValidTheme) {
return;
}
var concatSrc;
var concatDest;
var scssDest;
var scssSrc;
var files = {};
var dist = {};
concatSrc = 'global/build.scss';
concatDest = theme + '/build.scss';
scssDest = '<%=builddir%>/' + theme + '/bootstrap.css';
scssSrc = [theme + '/' + 'build.scss'];
dist = {src: concatSrc, dest: concatDest};
grunt.config('concat.dist', dist);
files = {};
files[scssDest] = scssSrc;
grunt.config('sass.dist.files', files);
grunt.config('sass.dist.options.style', 'expanded');
grunt.config('sass.dist.options.precision', 8);
grunt.config('sass.dist.options.unix-newlines', true);
grunt.task.run(['concat', 'sass:dist', 'prefix:' + scssDest, 'clean:build',
compress ? 'compress_scss:' + scssDest + ':' + '<%=builddir%>/' + theme + '/bootstrap.min.css' : 'none']);
});
grunt.registerTask('prefix', 'autoprefix a generic css', function(fileSrc) {
grunt.config('autoprefixer.dist.src', fileSrc);
grunt.task.run('autoprefixer');
......@@ -132,18 +167,78 @@ module.exports = function (grunt) {
grunt.task.run(['less:dist']);
});
grunt.registerTask('compress_scss', 'compress a generic css with sass', function(fileSrc, fileDst) {
var files = {}; files[fileDst] = fileSrc;
grunt.log.writeln('compressing file ' + fileSrc);
grunt.config('sass.dist.files', files);
grunt.config('sass.dist.options.style', 'compressed');
grunt.task.run(['sass:dist']);
});
grunt.registerMultiTask('swatch', 'build a theme', function() {
var t = this.target;
grunt.task.run('build:'+t);
});
grunt.registerTask('swatch_scss', 'build a theme from scss ', function (theme) {
var t = theme;
if (!t) {
for (var t in grunt.config('swatch')) {
grunt.task.run('build_scss:' + t);
}
} else {
grunt.task.run('build_scss:' + t);
}
});
grunt.event.on('watch', function(action, filepath) {
var path = require('path');
var theme = path.dirname(filepath);
grunt.config('buildtheme', theme);
});
grunt.registerTask('server', 'connect:keepalive')
/**
* Regex borrowed form
* https://gist.github.com/rosskevin/ddfe895091de2ca5f931
* */
grunt.registerTask('convert_less', 'Convert less to scss using regular expression', function () {
var convertBaseDir = '';
grunt.file.expand(convertBaseDir + '*/*.less').forEach(function (lessFile) {
if (lessFile !=="global/build.less"){
var srcContents = grunt.file.read(lessFile);
var out = srcContents
// 1. replace @ with $
.replace(/@(?!import|media|keyframes|-)/g, '$')
// 2. replace mixins
.replace(/[\.#](?![0-9])([\w\-]*)\s*\((.*)\)\s*\{/g, '@mixin $1($2){')
// 3. In LESS, bootstrap namespaces mixins, in SASS they are just prefixed e.g #gradient > .vertical-three-colors becomes @include gradient-vertical-three-colors
.replace(/[\.#](?![0-9])([\w\-]*)\s>\s\.(.*;)/g, '@include $1-$2')
// 4. replace includes
.replace(/[\.#](?![0-9])([\w\-].*\(.*;)/g, '@include $1')
// 5. replace no param mixin includes with empty parens
.replace(/@include\s([\w\-]*\s*);/g, '@include $1();')
// 6. replace extends .class; @extend .class;
.replace(/(\.(?![0-9])([\w\-]+);)/g, '@extend $1')
// 7. replace string literals
.replace(/~"(.*)"/g, '#{"$1"}')
// 8. replace interpolation ${var} > #{$var}
.replace(/\$\{(.*)\}/g, '#{$$$1}')
// 9. replace spin to adjust-hue (function name diff)
.replace(/spin\(/g, 'adjust-hue(')
// 10. replace bower and imports in build.scss
.replace(/bootstrap\/less\//g, 'bootstrap-sass-official/assets/stylesheets/')
.replace(/\.less/g, '');
var baseDirRegex = new RegExp("^" + convertBaseDir, "g");
var sassFile = lessFile.replace(baseDirRegex, '').replace(/\.less$/, '.scss').replace(/(bootswatch|variables)/, '_$1');
grunt.file.write(sassFile, out);
grunt.log.writeln('Converted less file: ', lessFile, Array(27 - lessFile.length).join(' '),'> ', sassFile);
}
});
});
grunt.registerTask('server', 'connect:keepalive');
grunt.registerTask('default', ['connect:base', 'watch']);
};
exclude: ["src", "node_modules", "bower.json", "bower_components/font-awesome/src", "composer.json", "package.json", "README.md", "LICENSE", "Gruntfile.js", "Gemfile"]
include: ["_bootswatch.scss","_variables.scss"]
......@@ -32,7 +32,8 @@
"*/index.html"
],
"dependencies": {
"bootstrap": "~3.3.0"
"bootstrap": "~3.3.0",
"bootstrap-sass-official": "~3.3.1"
},
"devDependencies": {
"font-awesome": "~4.0.0",
......
{
"name": "bootstrap-sass",
"version": "3.3.1",
"homepage": "https://github.com/twbs/bootstrap-sass",
"authors": [
"Thomas McDonald",
"Tristan Harward",
"Peter Gumeson",
"Gleb Mazovetskiy"
],
"description": "bootstrap-sass is a Sass-powered version of Bootstrap, ready to drop right into your Sass powered applications.",
"main": [
"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",
"bootstrap",
"sass"
],
"license": "MIT",
"ignore": [
"**/.*",
"lib",
"tasks",
"templates",
"test",
"*.gemspec",
"Rakefile",
"Gemfile"
],
"dependencies": {
"jquery": ">= 1.9.0"
},
"_release": "3.3.1",
"_resolution": {
"type": "version",
"tag": "v3.3.1",
"commit": "cdad0d4b5d17e6bc84863b2907b82d45e856be22"
},
"_source": "git://github.com/twbs/bootstrap-sass.git",
"_target": "~3.3.1",
"_originalSource": "bootstrap-sass-official"
}
\ No newline at end of file
# Changelog
## 3.3.1.0
* Variables override template at templates/project/_bootstrap-variables.sass
* Readme: Bower + Rails configuration
## 3.3.0.1
* Fix loading issue with the ruby gem version
## 3.3.0
* Improve libsass compatibility
* Support using Bower package with Rails
## 3.2.0.2
Main bootstrap file is now a partial (_bootstrap.scss), for compatibility with Compass 1+.
Fixed a number of bugs. [Issues closed in v3.2.0.2](https://github.com/twbs/bootstrap-sass/issues?q=is%3Aissue+is%3Aclosed+milestone%3Av3.2.0.2).
## 3.2.0.1
Fixed a number of bugs: [Issues closed in v3.2.0.1](https://github.com/twbs/bootstrap-sass/issues?q=is%3Aissue+is%3Aclosed+milestone%3Av3.2.0.1).
## 3.2.0.0
- Assets (Sass, JS, fonts) moved from `vendor/assets` to `assets`. `bootstrap.js` now contains concatenated JS.
- Compass generator now copies JS and fonts, and provides a better default `styles.sass`.
- Compass, Sprockets, and Mincer asset path helpers are now provided in pure Sass: `bootstrap-compass`, `bootstrap-sprockets`, and `bootstrap-mincer`.
Asset path helpers must be imported before `bootstrap`, more in Readme.
- Sprockets / Mincer JS manifest has been moved to `bootstrap-sprockets.js`.
It can be required without adding Bootstrap JS directory to load path, as it now uses relative paths.
- Sprockets: `depend_on_asset` (`glyphicons.scss`) has been changed to `depend_on` to work around an issue with `depend_on_asset`.
[More information](https://github.com/twbs/bootstrap-sass/issues/592#issuecomment-46570286).
## 3.1.1.0
- Updated Bower docs
## 3.1.0.2
- #523: Rails 3.2 compatibility
- Bugfixes from upstream up to 7eb532262fbd1112215b5a547b9285794b5360ab.
## 3.1.0.1
- #518: `scale` mixin Sass compatibility issue
## 3.1.0.0
* compiles with libsass master
## 3.0.2.1
* fix vendor paths for compass
## 3.0.0.0
* Fully automated (lots of string juggling) LESS -> Sass conversion. - *Gleb Mazovetskiy*
* Ported rake task from vwall/compass-twitter-bootstrap to convert Bootstrap upstream - *Peter Gumeson*
* Moved javascripts to us `bootstrap-component.js` to `bootstrap/component.js` - *Peter Gumeson*
## 2.3.2.2
* Allow sass-rails `>= 3.2` - *Thomas McDonald*
## 2.3.2.1
## 2.3.2.0
* Update to Bootstrap 2.3.2 - *Dan Allen*
## 2.3.1.3
* Find the correct Sprockets context for the `image_path` function - *Tristan Harward, Gleb Mazovetskiy*
## 2.3.1.2
* Fix changes to image url - *Gleb Mazovetskiy*
* Copy _variables into project on Compass install - *Phil Thompson*
* Add `bootstrap-affix` to the Compass template file - *brief*
## 2.3.1.1 (yanked)
* Change how image_url is handled internally - *Tristan Harward*
* Fix some font variables not having `!default` - *Thomas McDonald*
## 2.3.0.0
* [#290] Update to Bootstrap 2.3.0 - *Tristan Harward*
* Fix `rake:debug` with new file locations - *Thomas McDonald*
* Add draft contributing document - *Thomas McDonald*
* [#260] Add our load path to the global Sass load path - *Tristan Harward*
* [#275] Use GitHub notation in Sass head testing gemfile - *Timo Schilling*
* [#279, #283] Readme improvements - *theverything, Philip Arndt*
## 2.2.2.0
* [#270] Update to Bootstrap 2.2.2 - *Tristan Harward*
* [#266] Add license to gemspec - *Peter Marsh*
## 2.2.1.1
* [#258] Use `bootstrap` prefix for `@import`ing files in `bootstrap/bootstrap.scss` - *Umair Siddique*
## 2.2.1.0
* [#246] Update to Bootstrap 2.2.1 - *Tristan Harward*
* [#246] Pull Bootstrap updates from jlong/sass-twitter-bootstrap - *Tristan Harward*
## 2.1.1.0
* Update to Bootstrap 2.1.1
* [#222] Remove 100% multiplier in vertical-three-colours
* [#227] Fix IE component animation collapse
* [#228] Fix variables documentation link
* [#231] Made .input-block-level a class as well as mixin
## 2.1.0.1
* [#219] Fix expected a color. Got: transparent.
* [#207] Add missing warning style for table row highlighting
* [#208] Use grid-input-span for input spans
## 2.1.0.0
* Updated to Bootstrap 2.1
* Changed some mixin names to be more consistent. Nested mixins in Less are separated by a `-` when they are flattened in Sass.
## 2.0.4.1
* Fix `.row-fluid > spanX` nesting
* Small Javascript fixes for those staying on the 2.0.4 release
* Add `!default` to z-index variables.
## 2.0.4.0
* Updated to Bootstrap 2.0.4
* Switched to Bootstrap 2.0.3+'s method of separating responsive files
* [#149, #150] Fix off by one error introduced with manual revert of media query breakpoints
* `rake debug` and `rake test` both compile bootstrap & bootstrap-responsive
## 2.0.3.1
* [#145, #146] Fix button alignment in collapsing navbar as a result of an incorrect variable
## 2.0.3
* Updated to Bootstrap 2.0.3
* [#106] Support for Rails < 3.1 through Compass
* [#132] Add CI testing
* [#106] Support Rails w/Compass
* [#134] Fix support for Rails w/Compass
## 2.0.2
* [#86] Updated to Bootstrap 2.0.2
Things of note: static navbars now have full width. (to be fixed in 2.0.3) `.navbar-inner > .container { width:940px; }` seems to work in the meanwhile
* [#62] Fixed asset compilation taking a *very* long time.
* [#69, #79, #80] \(Hopefully) clarified README. Now with less cat humour.
* [#91] Removed doubled up Sass extensions for Rails.
* [#63, #73] Allow for overriding of image-path
* [[SO](http://stackoverflow.com/a/9909626/241212)] Added makeFluidColumn mixin for defining fluid columns. Fluid rows must use `@extend .row-fluid`, and any column inside it can use `@include makeFluidColumn(num)`, where `num` is the number of columns. Unfortunately, there is a rather major limitation to this: margins on first-child elements must be overriden. See the attached Stack Overflow answer for more information.
## 2.0.1
* Updated to Bootstrap 2.0.1
* Modified `@mixin opacity()` to take an argument `0...1` rather than `0...100` to be consistent with Compass.
## 2.0.0
* Updated to Bootstrap 2.0.0
# Contributing to bootstrap-sass
## Asset Changes
Any changes to `bootstrap-sass` assets (scss, javascripts, fonts) should be checked against the `convert` rake task.
For usage instructions, see the [README](/README.md).
If something is broken in the converter, it's preferable to update the converter along with the asset itself.
## Bugs
A bug is a _demonstrable problem_ that is caused by the code in the
repository. Good bug reports are extremely helpful - thank you!
Guidelines for bug reports:
1. **Does it belong here?** &mdash; is this a problem with bootstrap-sass, or
it an issue with [twbs/bootstrap](https://github.com/twbs/bootstrap)?
We only distribute a direct port and will not modify files if they're not
changed upstream.
2. **Use the GitHub issue search** &mdash; check if the issue has already been
reported.
3. **Isolate the problem** &mdash; ideally create a [reduced test
case](http://css-tricks.com/6263-reduced-test-cases/) and a live example.
A good bug report shouldn't leave others needing to chase you up for more
information. Please try to be as detailed as possible in your report. What is
your environment? What steps will reproduce the issue? What browser(s) and OS
experience the problem? What would you expect to be the outcome? All these
details will help people to fix any potential bugs.
Example:
> Short and descriptive example bug report title
>
> A summary of the issue and the browser/OS environment in which it occurs. If
> suitable, include the steps required to reproduce the bug.
>
> 1. This is the first step
> 2. This is the second step
> 3. Further steps, etc.
>
> `<url>` (a link to the reduced test case)
>
> Any other information you want to share that is relevant to the issue being
> reported. This might include the lines of code that you have identified as
> causing the bug, and potential solutions (and your opinions on their
> merits).
**[File a bug report](https://github.com/twbs/bootstrap-sass/issues/)**
## Pull requests
**We will not accept pull requests that modify the SCSS beyond fixing bugs caused by *our* code!**
Most pull requests should go to [twbs/bootstrap](https://github.com/twbs/bootstrap) or [jlong/sass-twitter-bootstrap](https://github.com/jlong/sass-twitter-bootstrap)
Good pull requests - patches, improvements, new features - are a fantastic
help. They should remain focused in scope and avoid containing unrelated
commits. If your contribution involves a significant amount of work or substantial
changes to any part of the project, please open an issue to discuss it first.
Make sure to adhere to the coding conventions used throughout a project
(indentation, accurate comments, etc.). Please update any documentation that is
relevant to the change you're making.
## Do not…
Please **do not** use the issue tracker for personal support requests (use
[Stack Overflow](http://stackoverflow.com/)).
Please **do not** derail or troll issues. Keep the
discussion on topic and respect the opinions of others.
*props [html5-boilerplate](https://github.com/h5bp/html5-boilerplate/blob/master/CONTRIBUTING.md)*
The MIT License (MIT)
Copyright (c) 2013 Twitter, Inc
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
This diff is collapsed.
//= require ./bootstrap/affix
//= require ./bootstrap/alert
//= require ./bootstrap/button
//= require ./bootstrap/carousel
//= require ./bootstrap/collapse
//= require ./bootstrap/dropdown
//= require ./bootstrap/tab
//= require ./bootstrap/transition
//= require ./bootstrap/scrollspy
//= require ./bootstrap/modal
//= require ./bootstrap/tooltip
//= require ./bootstrap/popover
/* ========================================================================
* Bootstrap: affix.js v3.3.1
* http://getbootstrap.com/javascript/#affix
* ========================================================================
* Copyright 2011-2014 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* ======================================================================== */
+function ($) {
'use strict';
// AFFIX CLASS DEFINITION
// ======================
var Affix = function (element, options) {
this.options = $.extend({}, Affix.DEFAULTS, options)
this.$target = $(this.options.target)
.on('scroll.bs.affix.data-api', $.proxy(this.checkPosition, this))
.on('click.bs.affix.data-api', $.proxy(this.checkPositionWithEventLoop, this))
this.$element = $(element)
this.affixed =
this.unpin =
this.pinnedOffset = null
this.checkPosition()
}
Affix.VERSION = '3.3.1'
Affix.RESET = 'affix affix-top affix-bottom'
Affix.DEFAULTS = {
offset: 0,
target: window
}
Affix.prototype.getState = function (scrollHeight, height, offsetTop, offsetBottom) {
var scrollTop = this.$target.scrollTop()
var position = this.$element.offset()
var targetHeight = this.$target.height()
if (offsetTop != null && this.affixed == 'top') return scrollTop < offsetTop ? 'top' : false
if (this.affixed == 'bottom') {
if (offsetTop != null) return (scrollTop + this.unpin <= position.top) ? false : 'bottom'
return (scrollTop + targetHeight <= scrollHeight - offsetBottom) ? false : 'bottom'
}
var initializing = this.affixed == null
var colliderTop = initializing ? scrollTop : position.top
var colliderHeight = initializing ? targetHeight : height
if (offsetTop != null && colliderTop <= offsetTop