diff --git a/generators/app/index.js b/generators/app/index.js index fb51cfba..2ddffae9 100644 --- a/generators/app/index.js +++ b/generators/app/index.js @@ -331,6 +331,9 @@ var AppGenerator = generators.Base.extend( // Style and Compass: , 'src/sass' + , 'src/sass/overrides' + , 'src/sass/settings' + , 'src/sass/views' , 'src/style' , 'src/style/images/' @@ -385,9 +388,14 @@ var AppGenerator = generators.Base.extend( // Style and Compass: - , [ 'src/sass/app.sass' ] + , 'src/sass/settings/_compass.sass' + , 'src/sass/settings/_fonts.sass' + , 'src/sass/settings/_icons.scss' + , 'src/sass/settings/_layout.sass' + , 'src/sass/_overrides.sass' , 'src/sass/_settings.sass' , 'src/sass/_views.sass' + , [ 'src/sass/app.sass' ] , 'src/style/images/sprites/check-green.png' ] ; diff --git a/generators/app/templates/src/sass/_overrides.sass b/generators/app/templates/src/sass/_overrides.sass new file mode 100644 index 00000000..7e090b8a --- /dev/null +++ b/generators/app/templates/src/sass/_overrides.sass @@ -0,0 +1,7 @@ +// +// Define only CSS overrides here. +// +// Variable definitions are best done in a corresponding 'settings/*' section. +// + +// @import "overrides/..." diff --git a/generators/app/templates/src/sass/_settings.sass b/generators/app/templates/src/sass/_settings.sass index 097eb161..48ca89aa 100644 --- a/generators/app/templates/src/sass/_settings.sass +++ b/generators/app/templates/src/sass/_settings.sass @@ -1,22 +1,44 @@ -// All variables and loading of mixins should be done here + +// +// Define only variables and mixins here. +// +// Variable definitions are best done in a corresponding 'settings/*' section. +// + +// +// Compass's mixins and variables definitions. // +@import "settings/_compass" -// Load default compass mixins + +// +// Font definitions. // -@import "compass/utilities/general/clearfix" -@import "compass/utilities/general/hacks" -@import "compass/css3" -@import "compass/css3/box-shadow" -@import "compass/css3/user-interface" -// Setup the automatic spriting +@import "settings/_fonts" + + +// +// Icon definitions. // -// Want to use a sprite? -// Step 1: Add the image to the sprites folder -// Step 2: Use example: "background: sprite( $sprites-sprite, name-of-file-without-extension ) no-repeat" -// Step 3: Sit back and relax, when compass compiles it generates the sprite for you and -// does the heavy lifting for you.... + +@import "settings/_icons" + + +// +// App variables definitions. +// + +@import "settings/_layout" + +// ... add more as needed... + + +// +// Framework variable defaults. +// + +// For instance: // -$sprites-path: "images/sprites/" -$sprites-sprite: sprite-map( "sprites/*.png" ) +// @import "settings/_bootstrap" diff --git a/generators/app/templates/src/sass/app.sass b/generators/app/templates/src/sass/app.sass index b33ce80b..f7b3b759 100644 --- a/generators/app/templates/src/sass/app.sass +++ b/generators/app/templates/src/sass/app.sass @@ -1,12 +1,34 @@ .<%- packageName %> - @import _settings + // + // App variables definitions. + // Fonts definitions. + // Compass's mixins and variables definitions. + // Defaults for framework variables. + // + + @import "_settings" + + // + // Frameworks. + // + + // For instance: + // + // @import "bootstrap/_bootstrap" + + // + // CSS overrides. + // + + @import "_overrides" // + // App views' CSS. // Every view should have it's own style file in the `views` folder and be `@import`-ed in '_views.sass'. // - @import _views + @import "_views" // // Only really global styling should be here. diff --git a/generators/app/templates/src/sass/settings/_compass.sass b/generators/app/templates/src/sass/settings/_compass.sass new file mode 100644 index 00000000..0cc46413 --- /dev/null +++ b/generators/app/templates/src/sass/settings/_compass.sass @@ -0,0 +1,21 @@ + +// +// Compass mixins. +// + +@import "compass/utilities/general/clearfix" +@import "compass/utilities/general/hacks" +@import "compass/css3" +@import "compass/css3/box-shadow" +@import "compass/css3/user-interface" + +// Setup the automatic spriting +// +// Want to use a sprite? +// Step 1: Add the image to the sprites folder +// Step 2: Use example: "background: sprite( $sprites-sprite, name-of-file-without-extension ) no-repeat" +// Step 3: Sit back and relax, when compass compiles it generates the sprite for you and +// does the heavy lifting for you.... +// +$sprites-path: "images/sprites/" +$sprites-sprite: sprite-map( "sprites/*.png" ) diff --git a/generators/app/templates/src/sass/settings/_fonts.sass b/generators/app/templates/src/sass/settings/_fonts.sass new file mode 100644 index 00000000..173ca0fe --- /dev/null +++ b/generators/app/templates/src/sass/settings/_fonts.sass @@ -0,0 +1,8 @@ + +// For instance: +// +// Comfortaa +// +// http://webfonts.ffonts.net/Comfortaa.font +// +// +font-face( 'Comfortaa', font-files('comfortaa/comfortaa.ttf.woff','comfortaa/comfortaa.ttf.svg'), 'comfortaa/comfortaa.ttf.eot', 'normal', 'normal' ) diff --git a/generators/app/templates/src/sass/settings/_icons.scss b/generators/app/templates/src/sass/settings/_icons.scss new file mode 100644 index 00000000..662eda05 --- /dev/null +++ b/generators/app/templates/src/sass/settings/_icons.scss @@ -0,0 +1,18 @@ + +// +// Perhaps create your own icon font at: +// +// http://fontastic.me/ +// + +// +// Include the generated font, say, `my-icons` like so: +// +// @at-root { +// @include font-face( 'my-icons', font-files('my-icons/my-icons.woff','my-icons/my-icons.ttf','my-icons/my-icons.svg'), 'my-icons/my-icons.eot', 'normal', 'normal' ); +// } +// + +// +// Include the css mappings to the font's 'characters here. +// diff --git a/generators/app/templates/src/sass/settings/_layout.sass b/generators/app/templates/src/sass/settings/_layout.sass new file mode 100644 index 00000000..09a00380 --- /dev/null +++ b/generators/app/templates/src/sass/settings/_layout.sass @@ -0,0 +1,4 @@ + +// +// Global layout dependent settings (dimensions, positioning, etc) can go here. +//