From 025636d55952cb8eb31aa50ccec9b68d3cfaf13b Mon Sep 17 00:00:00 2001 From: Jeff Avallone Date: Sat, 31 Oct 2015 22:36:37 -0400 Subject: [PATCH] Switching from compass to node-sass and Bourbon --- .ruby-gemset | 1 - .ruby-version | 1 - Gemfile | 3 --- Gemfile.lock | 28 ------------------------ README.md | 5 ++--- config.js | 7 ------ gulpfile.js | 14 ++++++++++-- lib/data/svg_styles.js | 4 ++-- package.json | 4 +++- src/humans.txt | 2 +- src/sass/_base.scss | 37 ++++++++++++++++++++++++++++++-- src/sass/main.scss | 44 +++++++++++--------------------------- src/sass/reset.scss | 48 ++++++++++++++++++++++++++++++++++++++++++ 13 files changed, 115 insertions(+), 83 deletions(-) delete mode 100644 .ruby-gemset delete mode 100644 .ruby-version delete mode 100644 Gemfile delete mode 100644 Gemfile.lock create mode 100644 src/sass/reset.scss diff --git a/.ruby-gemset b/.ruby-gemset deleted file mode 100644 index 4fc3312..0000000 --- a/.ruby-gemset +++ /dev/null @@ -1 +0,0 @@ -regexper diff --git a/.ruby-version b/.ruby-version deleted file mode 100644 index cd57a8b..0000000 --- a/.ruby-version +++ /dev/null @@ -1 +0,0 @@ -2.1.5 diff --git a/Gemfile b/Gemfile deleted file mode 100644 index 4e0fa85..0000000 --- a/Gemfile +++ /dev/null @@ -1,3 +0,0 @@ -source 'https://rubygems.org' - -gem 'compass' diff --git a/Gemfile.lock b/Gemfile.lock deleted file mode 100644 index fcd9867..0000000 --- a/Gemfile.lock +++ /dev/null @@ -1,28 +0,0 @@ -GEM - remote: https://rubygems.org/ - specs: - chunky_png (1.3.3) - compass (1.0.1) - chunky_png (~> 1.2) - compass-core (~> 1.0.1) - compass-import-once (~> 1.0.5) - rb-fsevent (>= 0.9.3) - rb-inotify (>= 0.9) - sass (>= 3.3.13, < 3.5) - compass-core (1.0.1) - multi_json (~> 1.0) - sass (>= 3.3.0, < 3.5) - compass-import-once (1.0.5) - sass (>= 3.2, < 3.5) - ffi (1.9.6) - multi_json (1.10.1) - rb-fsevent (0.9.4) - rb-inotify (0.9.5) - ffi (>= 0.5.0) - sass (3.4.8) - -PLATFORMS - ruby - -DEPENDENCIES - compass diff --git a/README.md b/README.md index ea67f75..8064f14 100644 --- a/README.md +++ b/README.md @@ -10,11 +10,10 @@ When sending pull requests, please keep them focused on a single issue. I would ### Working with the code -Node and Ruby are required for working with this site. It is recommended to use rbenv or rvm to manage your Ruby installation, and configuration files are included to set the Ruby version and gemset. +Node is required for working with this site. -To start with, install the necessary dependencies for Node and Ruby: +To start with, install the necessary dependencies: - $ bundle install $ npm install There are several gulp tasks available to build various parts of the site, but to get started you only need: diff --git a/config.js b/config.js index 4b46290..94660fd 100644 --- a/config.js +++ b/config.js @@ -17,13 +17,6 @@ module.exports = { js: ['./src/**/*.js', './src/**/*.peg'], spec: './spec/**/*_spec.js' }, - compass: { - sass: './src/sass', - css: buildPath('css'), - javascript: buildPath('js'), - font: buildPath('font'), - sourcemap: true - }, browserify: { debug: true, fullPaths: false, diff --git a/gulpfile.js b/gulpfile.js index fb91220..b29e5a6 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -80,11 +80,21 @@ gulp.task('markup', ['styles'], function() { }); gulp.task('styles', function() { - var compass = require('gulp-compass'); + var sourcemaps = require('gulp-sourcemaps'), + sass = require('gulp-sass'), + rename = require('gulp-rename'); return gulp.src(config.globs.sass) .pipe(errorHandler()) - .pipe(compass(config.compass)); + .pipe(sourcemaps.init()) + .pipe(sass({ + includePaths: require('node-bourbon').includePaths + })) + .pipe(rename(function(path) { + path.dirname = ''; + })) + .pipe(sourcemaps.write('.')) + .pipe(gulp.dest(config.buildPath('css'))); }); gulp.task('scripts', function() { diff --git a/lib/data/svg_styles.js b/lib/data/svg_styles.js index 94c45e6..1ccaebc 100644 --- a/lib/data/svg_styles.js +++ b/lib/data/svg_styles.js @@ -2,6 +2,6 @@ var fs = require('fs'), path = require('path'), config = require('../../config'); -module.exports = fs.readFileSync(path.join(config.compass.css, 'svg.css'), { +module.exports = fs.readFileSync(config.buildPath('css/svg.css'), { encoding: 'utf-8' -}) +}); diff --git a/package.json b/package.json index 5a499ad..71ed2f6 100644 --- a/package.json +++ b/package.json @@ -15,7 +15,6 @@ "es6ify": "^1.5.1", "folder-toc": "^0.1.0", "gulp": "^3.8.10", - "gulp-compass": "^2.0.4", "gulp-connect": "^2.2.0", "gulp-docco": "0.0.4", "gulp-front-matter": "^1.3.0", @@ -23,6 +22,8 @@ "gulp-notify": "^2.0.1", "gulp-plumber": "^1.0.0", "gulp-rename": "^1.2.2", + "gulp-sass": "^2.1.0", + "gulp-sourcemaps": "^1.6.0", "gulp-tap": "^0.1.3", "handlebars-layouts": "^3.1.2", "jasmine-core": "^2.3.4", @@ -32,6 +33,7 @@ "karma-jasmine": "^0.3.1", "karma-notify-reporter": "^0.1.1", "lodash": "^3.10.1", + "node-bourbon": "^4.2.3", "snapsvg": "^0.4.0", "through": "^2.3.8" } diff --git a/src/humans.txt b/src/humans.txt index b490464..d7ad082 100644 --- a/src/humans.txt +++ b/src/humans.txt @@ -13,4 +13,4 @@ # TECHNOLOGY COLOPHON - HTML5, CSS3, SVG, Compass, Open Iconic + HTML5, CSS3, SVG, Sass, Open Iconic diff --git a/src/sass/_base.scss b/src/sass/_base.scss index a152120..d02d60e 100644 --- a/src/sass/_base.scss +++ b/src/sass/_base.scss @@ -1,3 +1,5 @@ +@import 'bourbon'; + $green: #bada55; $dark-green: shade($green, 25%); $light-green: tint($green, 25%); @@ -13,5 +15,36 @@ $white: #fff; $base-font-size: 16px; $base-line-height: 24px; -$default-box-shadow-color: $black; -$default-box-shadow-blur: 10px; +@mixin box-shadow { + @include prefixer(box-shadow, 0 0 10px $black, webkit moz spec); +} + +@mixin input-placeholder { + &:-moz-placeholder { + @content; + } + + &::-moz-placeholder { + @content; + } + + &:-ms-input-placeholder { + @content; + } + + &::-webkit-input-placeholder { + @content; + } +} + +@function rhythm($scale, $font-size: $base-font-size) { + @return ($scale * $base-line-height / $font-size) * 1em; +} + +@mixin adjust-font-size-to($to-size, $lines: auto) { + font-size: ($to-size / $base-font-size) * 1em; + @if $lines == auto { + $lines: ceil($to-size / $base-font-size); + } + line-height: rhythm($lines, $to-size); +} diff --git a/src/sass/main.scss b/src/sass/main.scss index c17b6f1..5b73929 100644 --- a/src/sass/main.scss +++ b/src/sass/main.scss @@ -1,21 +1,11 @@ @import 'base'; @import 'open-iconic'; -@import 'compass/reset'; -@import 'compass/typography/lists/inline-block-list'; -@import 'compass/typography/vertical_rhythm'; -@import 'compass/css3/box-shadow'; -@import 'compass/css3/border-radius'; -@import 'compass/css3/user-interface'; -@import 'compass/css3/animation'; -@import 'compass/css3/transform'; -@import 'compass/css3/images'; -@import 'compass/typography/links/unstyled-link'; -@import 'compass/utilities/general/clearfix'; - -@include establish-baseline; +@import 'reset'; body { font-family: sans-serif; + font-size: $base-font-size; + line-height: $base-line-height; background: $gray; margin-bottom: rhythm(1); } @@ -34,9 +24,13 @@ h1 { ul.inline-list { @include adjust-font-size-to(14px, 2/3); - @include inline-block-list; + @include clearfix; li { + list-style-type: none; + display: inline-block; + white-space: nowrap; + &::after { content: '//'; padding: 0 rhythm(1/4); @@ -58,11 +52,9 @@ ul.inline-list { } #deprecation-notice { - @include background(linear-gradient(top, $green, $dark-green)); - background-color: $green; + @include linear-gradient(top, $green, $dark-green); padding: rhythm(1); margin: rhythm(1); - @include border-radius(20px); @include box-shadow; @include clearfix; @@ -76,8 +68,7 @@ ul.inline-list { } header { - @include background(linear-gradient(top, $green, $dark-green)); - background-color: $green; + @include linear-gradient(top, $green, $dark-green); padding: rhythm(1); @include box-shadow; @include clearfix; @@ -264,8 +255,7 @@ header { @include adjust-font-size-to($base-font-size); width: 100px; border: 0 none; - @include background(linear-gradient(top, $green, $dark-green)); - background-color: $green; + @include linear-gradient(top, $green, $dark-green); float: left; cursor: pointer; } @@ -304,17 +294,7 @@ header { margin: rhythm(1) auto; div { - background: $green; - @include background-image(linear-gradient( - -45deg, - $green 25%, - $light-green 25%, - $light-green 50%, - $green 50%, - $green 75%, - $light-green 75%, - $light-green 100% - )); + @include linear-gradient(-45deg, $green 25%, $light-green 25%, $light-green 50%, $green 50%, $green 75%, $light-green 75%, $light-green 100%); background-size: rhythm(2) rhythm(2); background-repeat: repeat-x; height: 100%; diff --git a/src/sass/reset.scss b/src/sass/reset.scss new file mode 100644 index 0000000..e29c0f5 --- /dev/null +++ b/src/sass/reset.scss @@ -0,0 +1,48 @@ +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ + +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} +body { + line-height: 1; +} +ol, ul { + list-style: none; +} +blockquote, q { + quotes: none; +} +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +}