root/regexper-static
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Switching from compass to node-sass and Bourbon

Browse Source
This commit is contained in:
Jeff Avallone 2015-10-31 22:36:37 -04:00
parent 54ddc1337d
commit 025636d559
13 changed files with 115 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.ruby-gemset
View File

@ -1 +0,0 @@
regexper

1
.ruby-version
View File

@ -1 +0,0 @@
2.1.5

3
Gemfile
View File

@ -1,3 +0,0 @@
source 'https://rubygems.org'
gem 'compass'

28
Gemfile.lock
View File

@ -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

5
README.md
View File

@ -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:

7
config.js
View File

@ -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,

14
gulpfile.js
View File

@ -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() {

4
lib/data/svg_styles.js
View File

@ -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'
})
});

4
package.json
View File

@ -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"
}

2
src/humans.txt
View File

@ -13,4 +13,4 @@
# TECHNOLOGY COLOPHON
HTML5, CSS3, SVG, Compass, Open Iconic
HTML5, CSS3, SVG, Sass, Open Iconic

37
src/sass/_base.scss
View File

@ -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);
}

44
src/sass/main.scss
View File

@ -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%;

48
src/sass/reset.scss Normal file
View File

@ -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;
}