From 225071cfe1bf5fbf44fc649a450140b8a70c91bc Mon Sep 17 00:00:00 2001 From: Daniel Barbour Date: Sat, 4 Jul 2015 16:42:07 -0500 Subject: [PATCH] Added grunt sass compiling --- Gruntfile.js | 23 ++++++++++++++ README.md | 6 ++++ package.json | 4 +++ scss/config.rb | 24 +++++++++++++++ scss/foundation/_grid.scss | 58 ++++++++++++++++++++++++++++++++++++ scss/foundation/_layout.scss | 3 ++ scss/mixins/_utility.scss | 4 +++ scss/style.scss | 4 +++ 8 files changed, 126 insertions(+) create mode 100644 Gruntfile.js create mode 100644 scss/config.rb create mode 100644 scss/foundation/_grid.scss create mode 100644 scss/foundation/_layout.scss create mode 100644 scss/mixins/_utility.scss create mode 100644 scss/style.scss diff --git a/Gruntfile.js b/Gruntfile.js new file mode 100644 index 00000000..737fec04 --- /dev/null +++ b/Gruntfile.js @@ -0,0 +1,23 @@ +module.exports = function(grunt) { + grunt.initConfig({ + pkg: grunt.file.readJSON('package.json'), + compass: { + dist: { + options: { + config: 'scss/config.rb', + sassDir: 'scss', + cssDir: 'public/css' + } + } + }, + watch: { + css: { + files: '**/*.scss', + tasks: ['compass'] + } + } + }); + grunt.loadNpmTasks('grunt-contrib-compass'); + grunt.loadNpmTasks('grunt-contrib-watch'); + grunt.registerTask('default',['watch']); +} \ No newline at end of file diff --git a/README.md b/README.md index 89cd81fd..25fd369a 100644 --- a/README.md +++ b/README.md @@ -19,9 +19,15 @@ Once you have them installed, go ahead and clone the repository. git clone git@github.com:martindale/soundtrack.io.git cd soundtrack.io +Ruby and ruby-dev are required as part of the scss compilation. + + gem install sass + gem install compass + You will need to fetch the dependencies and then you can start up the server. npm install + npm install -g grunt-cli node soundtrack.js ## API diff --git a/package.json b/package.json index 243335f8..e3151f98 100644 --- a/package.json +++ b/package.json @@ -40,6 +40,10 @@ }, "devDependencies": { "coveralls": "^2.11.2", + "grunt": "^0.4.5", + "grunt-contrib-compass": "^1.0.3", + "grunt-contrib-sass": "^0.9.2", + "grunt-contrib-watch": "^0.6.1", "istanbul": "^0.3.5", "mocha": "^2.1.0" } diff --git a/scss/config.rb b/scss/config.rb new file mode 100644 index 00000000..68f99c87 --- /dev/null +++ b/scss/config.rb @@ -0,0 +1,24 @@ +require 'compass/import-once/activate' +# Require any additional compass plugins here. + +# Set this to the root of your project when deployed: +http_path = "../" +css_dir = "public/css" +sass_dir = "scss" +images_dir = "public/img" + +# You can select your preferred output style here (can be overridden via the command line): +# output_style = :expanded or :nested or :compact or :compressed + +# To enable relative paths to assets via compass helper functions. Uncomment: +# relative_assets = true + +# To disable debugging comments that display the original location of your selectors. Uncomment: +# line_comments = false + + +# If you prefer the indented syntax, you might want to regenerate this +# project again passing --syntax sass, or you can uncomment this: +# preferred_syntax = :sass +# and then run: +# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass diff --git a/scss/foundation/_grid.scss b/scss/foundation/_grid.scss new file mode 100644 index 00000000..bcf5f07a --- /dev/null +++ b/scss/foundation/_grid.scss @@ -0,0 +1,58 @@ +$number-of-columns: 12; +$fixed-width: 960px; +$gutter-width: 40px; +$max-width: none; + +$number-of-rows: 10; +$height-per-row: 40px; + +$gutter-width-half: $gutter-width / 2; +$flex-widths: (); +$fix-widths: (); + +@for $i from 1 through $number-of-columns { + $flex-widths: append($flex-widths, $i / $number-of-columns * 100%); + $fix-widths: append($fix-widths, $i / $number-of-columns * $fixed-width); +} + +body { min-width: $fixed-width; } +.container { max-width: $max-width; margin-right: auto; margin-left: auto; padding-left: $gutter-width-half; padding-right: $gutter-width-half; @include box-sizing(border-box); @extend %clearfix; } +.row { margin-left: -$gutter-width-half; margin-right: -$gutter-width-half; @extend %clearfix; } +[class*="col-"] { padding-left: $gutter-width / 2; padding-right: $gutter-width / 2; float: left; @include box-sizing(border-box); @extend %clearfix; } + +%clearfix { + & { zoom: 1; } + &:before, &:after { content: '.'; display: block; overflow: hidden; visibility: hidden; font-size: 0; line-height: 0; width: 0; height: 0; } + &:after { clear: both; } +} + +@for $i from 1 through length($flex-widths) { + .col-#{$i} { + & { width: nth($flex-widths, $i); } + &.fixed-width { width: nth($fix-widths, $i); } + + @if $number-of-columns - $i > 0 { + @for $ii from 1 through $number-of-columns - $i { + &.with-fixed-#{$ii} { @include calc(width, #{nth($flex-widths, $i + $ii)} - #{nth($fix-widths, $ii)}); } + } + } + } +} + +.row- { + @for $i from 1 through $number-of-rows { + &#{$i} { height: ($height-per-row * $i); } + } +} +.row-full { + & { height: 100%; } + + @for $i from 1 through $number-of-rows { + &.with-height-#{$i} { @include calc(height, 100% - #{($height-per-row * $i)}); } + } +} + +.no- { + &left-gutter { padding-left: 0; } + &right-gutter { padding-right: 0; } +} \ No newline at end of file diff --git a/scss/foundation/_layout.scss b/scss/foundation/_layout.scss new file mode 100644 index 00000000..8bc2764e --- /dev/null +++ b/scss/foundation/_layout.scss @@ -0,0 +1,3 @@ +* { + @include box-sizing(border-box); +} \ No newline at end of file diff --git a/scss/mixins/_utility.scss b/scss/mixins/_utility.scss new file mode 100644 index 00000000..165b5faa --- /dev/null +++ b/scss/mixins/_utility.scss @@ -0,0 +1,4 @@ +@mixin calc($property, $expression) { + #{$property}: -webkit-calc(#{$expression}); + #{$property}: calc(#{$expression}); +} \ No newline at end of file diff --git a/scss/style.scss b/scss/style.scss new file mode 100644 index 00000000..2547b21d --- /dev/null +++ b/scss/style.scss @@ -0,0 +1,4 @@ +@import 'compass'; +@import 'mixins/utility'; +@import 'foundation/layout'; +@import 'foundation/grid'; \ No newline at end of file