diff --git a/app/index.js b/app/index.js index 1920e7559..a4ed35d1b 100644 --- a/app/index.js +++ b/app/index.js @@ -173,6 +173,25 @@ Generator.prototype.askForCompass = function askForCompass() { }.bind(this)); }; +Generator.prototype.askForLess = function askForLess() { + var compass = this.compass; + var cb = this.async(); + + this.prompt([{ + type: 'confirm', + name: 'less', + message: 'Would you like to use Less?', + default: true, + when: function (props) { + return !compass; + } + }], function (props) { + this.less = props.less; + + cb(); + }.bind(this)); +}; + Generator.prototype.askForBootstrap = function askForBootstrap() { var compass = this.compass; var cb = this.async(); @@ -284,10 +303,19 @@ Generator.prototype.readIndex = function readIndex() { }; Generator.prototype.bootstrapFiles = function bootstrapFiles() { - var cssFile = 'styles/main.' + (this.compass ? 's' : '') + 'css'; + var cssFile = 'styles/main.css'; + var sass = this.compass; + var mainFile = 'styles/main.'; + if (this.less) { + mainFile += 'less'; + } + else { + mainFile += (sass ? 's' : '') + 'css'; + } + this.copy( path.join('app', cssFile), - path.join(this.appPath, cssFile) + path.join(this.appPath, mainFile) ); }; diff --git a/templates/common/app/styles/main.css b/templates/common/app/styles/main.css index ae7a83f32..9fa03f87b 100644 --- a/templates/common/app/styles/main.css +++ b/templates/common/app/styles/main.css @@ -1,3 +1,19 @@ +<% if (bootstrap) { %> +<% if (compassBootstrap) { %>$icon-font-path: "../bower_components/bootstrap-sass-official/assets/fonts/bootstrap/"; +// bower:scss +// endbower +<% } else { %> + @import 'bootstrap/less/bootstrap'; + <% } %> +<% } %> + +.browsehappy { + margin: 0.2em 0; + background: #ccc; + color: #000; + padding: 0.2em 0; +} + /* Space out content a bit */ body { padding-top: 20px; diff --git a/templates/common/app/styles/main.scss b/templates/common/app/styles/main.scss deleted file mode 100644 index 6839a643b..000000000 --- a/templates/common/app/styles/main.scss +++ /dev/null @@ -1,91 +0,0 @@ -<% if (compassBootstrap) { %>$icon-font-path: "../bower_components/bootstrap-sass-official/assets/fonts/bootstrap/"; -<% } %>// bower:scss -// endbower - -.browsehappy { - margin: 0.2em 0; - background: #ccc; - color: #000; - padding: 0.2em 0; -} - -/* Space out content a bit */ -body { - padding-top: 20px; - padding-bottom: 20px; -} - -/* Everything but the jumbotron gets side spacing for mobile first views */ -.header, -.marketing, -.footer { - padding-left: 15px; - padding-right: 15px; -} - -/* Custom page header */ -.header { - border-bottom: 1px solid #e5e5e5; - - /* Make the masthead heading the same height as the navigation */ - h3 { - margin-top: 0; - margin-bottom: 0; - line-height: 40px; - padding-bottom: 19px; - } -} - -/* Custom page footer */ -.footer { - padding-top: 19px; - color: #777; - border-top: 1px solid #e5e5e5; -} - -.container-narrow > hr { - margin: 30px 0; -} - -/* Main marketing message and sign up button */ -.jumbotron { - text-align: center; - border-bottom: 1px solid #e5e5e5; - - .btn { - font-size: 21px; - padding: 14px 24px; - } -} - -/* Supporting marketing content */ -.marketing { - margin: 40px 0; - - p + h4 { - margin-top: 28px; - } -} - -/* Responsive: Portrait tablets and up */ -@media screen and (min-width: 768px) { - .container { - max-width: 730px; - } - - /* Remove the padding we set earlier */ - .header, - .marketing, - .footer { - padding-left: 0; - padding-right: 0; - } - /* Space out the masthead */ - .header { - margin-bottom: 30px; - } - /* Remove the bottom border on the jumbotron for visual effect */ - .jumbotron { - border-bottom: 0; - } -} diff --git a/templates/common/root/_Gruntfile.js b/templates/common/root/_Gruntfile.js index 13bc6e52f..97d79c3a3 100644 --- a/templates/common/root/_Gruntfile.js +++ b/templates/common/root/_Gruntfile.js @@ -55,7 +55,11 @@ module.exports = function (grunt) { compass: { files: ['<%%= yeoman.app %>/styles/{,*/}*.{scss,sass}'], tasks: ['compass:server', 'autoprefixer'] - },<% } else { %> + },<% } else if (less) { %> + less: { + files: ['<%%= yeoman.app %>/styles/{,*/}*.less'], + tasks: ['less:dist', 'autoprefixer'] + }, <% } else { %> styles: { files: ['<%%= yeoman.app %>/styles/{,*/}*.css'], tasks: ['newer:copy:styles', 'autoprefixer'] @@ -241,7 +245,23 @@ module.exports = function (grunt) { debugInfo: true } } - },<% } %> + },<% } else if (less) { %> + // Compiles Less to CSS and generates necessary files if requested + less: { + options: { + compile: true, + paths: ['./bower_components'] + }, + dist: { + files: [{ + expand: true, + cwd: '<%%= yeoman.app %>/styles', + src: '{,*/}*.less', + dest: '.tmp/styles/', + ext: '.css' + }] + } + }, <% } %> // Renames files for browser caching purposes filerev: { @@ -416,17 +436,20 @@ module.exports = function (grunt) { concurrent: { server: [<% if (coffee) { %> 'coffee:dist',<% } %><% if (compass) { %> - 'compass:server'<% } else { %> + 'compass:server'<% } else if (less) { %> + 'less:dist' <% } else { %> 'copy:styles'<% } %> ], test: [<% if (coffee) { %> 'coffee',<% } %><% if (compass) { %> - 'compass'<% } else { %> + 'compass'<% } else if (less) { %> + 'less' <% } else { %> 'copy:styles'<% } %> ], dist: [<% if (coffee) { %> 'coffee',<% } %><% if (compass) { %> - 'compass:dist',<% } else { %> + 'compass:dist',<% } else if (less) { %> + 'less:dist',<% } else { %> 'copy:styles',<% } %> 'imagemin', 'svgmin' diff --git a/templates/common/root/_package.json b/templates/common/root/_package.json index e9ce9138d..1f89f08e8 100644 --- a/templates/common/root/_package.json +++ b/templates/common/root/_package.json @@ -8,7 +8,8 @@ "grunt-concurrent": "^0.5.0", "grunt-contrib-clean": "^0.5.0",<% if (coffee) { %> "grunt-contrib-coffee": "^0.10.1",<% } %><% if (compass) { %> - "grunt-contrib-compass": "^0.7.2",<% } %> + "grunt-contrib-compass": "^0.7.2",<% } %><% if (less) { %> + "grunt-contrib-less": "^0.10.0",<% } %> "grunt-contrib-concat": "^0.4.0", "grunt-contrib-connect": "^0.7.1", "grunt-contrib-copy": "^0.5.0",