├── .editorconfig ├── .gitattributes ├── .gitignore ├── .hound.yml ├── .jshintrc ├── .npmignore ├── .travis.yml ├── LICENSE-MIT.md ├── README.md ├── app-structure.png ├── app ├── index.js └── templates │ ├── _typeAdminWebApp │ ├── _blank-page.html │ ├── _bootstrap-elements.html │ ├── _bootstrap-grid.html │ ├── _bower.json │ ├── _forms.html │ ├── _index.html │ ├── _package.json │ ├── _tables.html │ ├── fonts │ │ ├── _FontAwesome.otf │ │ ├── _fontawesome-webfont.eot │ │ ├── _fontawesome-webfont.svg │ │ ├── _fontawesome-webfont.ttf │ │ └── _fontawesome-webfont.woff │ └── scss │ │ ├── _admin.scss │ │ ├── _bootstrap.scss │ │ ├── _font-awesome.scss │ │ └── _master.scss │ ├── _typeAngularApp │ ├── _README.md │ ├── _bower.json │ ├── _index.html │ └── _package.json │ ├── _typeFullPackWebApp │ ├── _README.md │ ├── _bower.json │ ├── _index.html │ └── _package.json │ ├── _typeRestifyApp │ ├── _app.js │ ├── _config.json │ ├── _db.js │ ├── _package.json │ ├── _routes.js │ ├── _userController.js │ └── _userSchema.js │ ├── _typeSimpleWebApp │ ├── _README.md │ ├── _gulpfile.js │ ├── _index.html │ └── _package.json │ ├── common │ ├── _404.html │ ├── _editorconfig │ ├── _favicon.ico │ ├── _gulpfile.js │ ├── _master.css │ └── _robots.txt │ ├── dot-files │ ├── _bowerrc │ ├── _gitattributes │ ├── _gitignore │ ├── _jshintignore │ └── _jshintrc │ ├── js │ ├── _angular_application.js │ ├── _application.js │ ├── _controller.js │ ├── _directive.js │ ├── _filter.js │ └── _service.js │ ├── partials │ ├── _footer.html │ └── _header.html │ ├── scss │ ├── _base.scss │ ├── _layout.scss │ ├── _master.scss │ ├── _mixins.scss │ ├── _module.scss │ ├── _page_landing.scss │ ├── _reset.scss │ └── _variables.scss │ └── tasks │ ├── _bower.js │ ├── _browser_sync.js │ ├── _clean.js │ ├── _config.js │ ├── _environment.js │ ├── _fonts.js │ ├── _html.js │ ├── _image.js │ ├── _scripts.js │ ├── _server.js │ ├── _styles.js │ ├── _watch.js │ ├── _zip.js │ └── simpleWebApp │ ├── _simple_browser_sync.js │ └── _simple_sass.js ├── controller └── index.js ├── directive └── index.js ├── filter └── index.js ├── package.json ├── release-notes.md ├── script-base.js ├── service └── index.js ├── smacss-in-action.png ├── test └── test.js └── util.js /.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | charset = utf-8 9 | trim_trailing_whitespace = true 10 | insert_final_newline = true 11 | translate_tabs_to_spaces: true 12 | 13 | [*.md] 14 | trim_trailing_whitespace = false 15 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | * text=auto 2 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | test/temp/ 3 | .DS_Store 4 | -------------------------------------------------------------------------------- /.hound.yml: -------------------------------------------------------------------------------- 1 | { 2 | "asi": false, 3 | "bitwise": true, 4 | "browser": true, 5 | "camelcase": true, 6 | "curly": true, 7 | "forin": true, 8 | "immed": true, 9 | "latedef": "nofunc", 10 | "maxlen": 300, 11 | "newcap": true, 12 | "noarg": true, 13 | "noempty": true, 14 | "nonew": true, 15 | "predef": [ 16 | "$", 17 | "jQuery", 18 | "jasmine", 19 | "beforeEach", 20 | "describe", 21 | "expect", 22 | "it", 23 | "angular", 24 | "inject", 25 | "module", 26 | "require" 27 | ], 28 | "quotmark": true, 29 | "trailing": true, 30 | "undef": true, 31 | "unused": true 32 | } 33 | -------------------------------------------------------------------------------- /.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | "node": true, 3 | "esnext": true, 4 | "bitwise": false, 5 | "curly": false, 6 | "eqeqeq": true, 7 | "eqnull": true, 8 | "immed": true, 9 | "latedef": true, 10 | "newcap": true, 11 | "noarg": true, 12 | "undef": true, 13 | "strict": false 14 | } 15 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | .npmignore 2 | .editorconfig 3 | .travis.yml 4 | .jshintrc 5 | .gitattributes 6 | contributing.md 7 | test 8 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - '0.12' 4 | - '0.11' 5 | -------------------------------------------------------------------------------- /LICENSE-MIT.md: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2014 Logesh Paul 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Generator for Frontend Projects 2 | 3 | Perfectionist generator that scaffolds out different types of Frontend application 4 | 5 | [![Join the chat at https://gitter.im/FuelFrontend/generator-smacss](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/FuelFrontend/generator-smacss?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) [![Travis CI](https://api.travis-ci.org/FuelFrontend/generator-smacss.svg?branch=master)](https://travis-ci.org/FuelFrontend/generator-smacss) [![Code Climate](https://codeclimate.com/github/FuelFrontend/generator-smacss/badges/gpa.svg)](https://codeclimate.com/github/FuelFrontend/generator-smacss) 6 | 7 | ![Generator Smacss](https://raw.githubusercontent.com/FuelFrontend/generator-smacss/master/smacss-in-action.png "Generator Smacss") 8 | 9 | # Features 10 | 11 | - **Different Projects; One Generator** - Create your type of project in fairly simple steps 12 | - **Highly Maintainable** - Uses [SMACSS](https://smacss.com/) approach (BEM, OOCSS, ITCSS in backlog) 13 | - **Readymade** — Directory structure, Naming convention, Linking your app done right. 14 | - **Speedy Workflow** - CSS Preprocessor (Sass), Partials, Browser Sync, Live reload. 15 | - **Performance Matters** - Minify HTML, CSS, & JS. Optimize Images. 16 | - **Quick Commands** - Generate Build, Clean up, Zip project, Angular commands and lot more to come. 17 | 18 | # App Types 19 | 20 | - **Simple Web App** — Sometimes you just need a gulp server(localhost), scss compiler & browser-sync(live reload). Well that's exactly what this app is for. 21 | - **Full Pack Web App** - Thinking of creating a solid frontend base with proper structure, well optimization; choose this applicaton type which comes with power features. 22 | - **Angular App** - Angular app with basic configurations and quick commands for creating controllers, directives, services and filters. More to come! 23 | - **Restify App** - API developer? Want to create REST API services with mongodb, This app type got your back which scaffolds basic files like models, controller, routes, db & config. 24 | - **Admin Web App** - Create an Admin app with bootstrap integrated. Pages: Dashboard, Sidebar, Notfication, Forms, Tabular Data and Bootstrap Elements for quick use. 25 | 26 | # Getting Started 27 | 28 | **Installation** 29 | 30 | You need to have [NodeJS](http://nodejs.org/) & [Yeoman](http://yeoman.io/) installed on your machine 31 | ``````` 32 | npm install -g yo 33 | ```````` 34 | 35 | Install smacss generator 36 | ``````` 37 | npm install --global generator-smacss 38 | ``````` 39 | 40 | **Creating project** 41 | 42 | - Run `yo smacss` 43 | - Answer simple questions in terminal 44 | - Generator will automatically try to install dependencies in your project folder. 45 | 46 | - You got your installation successfull 'You are lucky', run the server following the instruction in next section. 47 | - In case you got any error you may not have admin rights 48 | - a) cd to your project folder 49 | - b) Run `sudo bower install & npm install` followed by your machine password in Mac/Linux environment; Windows user try running as administrator 50 | 51 | **Run your project** 52 | 53 | At this stage your project is setup and dependencies are installed, It's showtime! 54 | 55 | - Run `gulp` to run the server, and you are good to start your development. 56 | 57 | # Directory Structure 58 | 59 | Your directory structure will look like this 60 | 61 | ![Directory Structure](https://raw.githubusercontent.com/FuelFrontend/generator-smacss/master/app-structure.png "Directory Structure") 62 | 63 | # Quick commands 64 | 65 | Terminal commands to speed up repetitive tasks you do in projects. Simple app idea is to maintain as minimal as possible; so quick commands won't work. 66 | 67 | #### General - Applies to Full Pack and Angular 68 | 69 | * **Clean** _Remove all files from your build folder_ 70 | 71 | ``````` 72 | gulp clean 73 | ``````` 74 | 75 | * **Zip** _Compress you app & save in `zip` folder with timestamp for quick sharing_ 76 | 77 | ``````` 78 | gulp zip 79 | ``````` 80 | 81 | #### Angular App 82 | 83 | * **Controller** _Creates a controller in `app/js/controllers`_ 84 | 85 | ``````` 86 | yo smacss:controller 87 | ``````` 88 | 89 | * **Service** _Creates a service in `app/js/services`_ 90 | 91 | ``````` 92 | yo smacss:service 93 | ``````` 94 | 95 | * **Directive** _Creates a directive in `app/js/directives`_ 96 | 97 | ``````` 98 | yo smacss:directive 99 | ``````` 100 | 101 | * **Filter** _Creates a filter in `app/js/filters`_ 102 | 103 | ``````` 104 | yo smacss:filter 105 | ``````` 106 | 107 | # Environment 108 | 109 | Generator Smacss comes with development and producution modes. In default it runs in development mode. 110 | 111 | You can switch to production mode using the following command 112 | 113 | ``````` 114 | gulp prod 115 | ``````` 116 | 117 | # Bower Components 118 | 119 | Tip: While installation additional bower components to your project, make sure your save your new component 120 | in your `bower.json` file by installing like below 121 | 122 | ``````` 123 | bower install --save 124 | ``````` 125 | 126 | So that generator will automatically include your new bower component to `bower.js` file for usage 127 | 128 | # Release Notes 129 | 130 | You can find the detailed release notes [here](https://github.com/FuelFrontend/generator-smacss/blob/master/release.md) 131 | 132 | 137 | 138 | # Options 139 | 140 | - `--skip-welcome-message` Skips the welcome message and take you to question. 141 | - `--skip-install` Skips the automatic execution of bower and npm after scaffolding has finished. 142 | 143 | # Contributions 144 | 145 | Contribution would be of great help to create a solid generator for frontend projects 146 | 147 | * Fork the project 148 | * Make your feature addition or bug fix 149 | * Send pull request 150 | 151 | **Active Contributors** 152 | 153 | [![Logesh Paul](https://avatars3.githubusercontent.com/u/41541?v=3&s=72)](http:/www.github.com/logeshpaul) [![Gokulakrishnan](https://avatars0.githubusercontent.com/u/2944237?v=3&s=72)](https://github.com/gokulkrishh) [![Thiyagarajan](https://avatars2.githubusercontent.com/u/9147343?v=3&s=72)](https://github.com/ThiyagarajanJ) [![Ritesh Babu](https://avatars3.githubusercontent.com/u/736660?v=3&s=72)](https://github.com/riteshbabu) [![Sugan Krishnan](https://avatars1.githubusercontent.com/u/680120?v=3&s=72)](https://github.com/rgksugan) [![Lubaib Gazir](https://avatars2.githubusercontent.com/u/6895882?v=3&s=72)](https://github.com/lubaibgazir) 154 | -------------------------------------------------------------------------------- /app-structure.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FuelFrontend/generator-smacss/02ae69e117cf205a2713bc41c75638ff9edd3ace/app-structure.png -------------------------------------------------------------------------------- /app/index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | var yeoman = require('yeoman-generator'), 3 | fs = require('fs'), 4 | util = require('util'), 5 | path = require('path'), 6 | yosay = require('yosay'), 7 | chalk = require('chalk'), 8 | shell = require('shelljs'), 9 | updateNotifier = require('update-notifier'), 10 | pkg = require('../package.json'); 11 | 12 | // Smacss Updater - Checks for available update and returns an instance 13 | var notifier = updateNotifier({pkg: pkg}); 14 | 15 | if(notifier.update) { 16 | // var notifier = updateNotifier({ 17 | // pkg: pkg, 18 | // updateCheckInterval: 1000 * 60 * 60 * 24 // 1 day 19 | // }); 20 | 21 | // Notify using the built-in convenience method 22 | notifier.notify(); 23 | 24 | // `notifier.update` contains some useful info about the update 25 | console.log(notifier.update); 26 | } 27 | 28 | var smacssGenerator = yeoman.generators.Base.extend({ 29 | constructor: function () { 30 | // note: arguments and options should be defined in the constructor. 31 | yeoman.generators.Base.apply(this, arguments); 32 | 33 | // Options 34 | this.option('app-suffix', { 35 | desc: 'Allow a custom suffix to be added to the module name', 36 | type: String, 37 | required: 'false' 38 | }); 39 | this.env.options['app-suffix'] = this.options['app-suffix']; 40 | 41 | this.option('skip-welcome-message', { 42 | desc: 'Skips the welcome message', 43 | type: Boolean 44 | }); 45 | 46 | this.option('skip-install', { 47 | desc: 'Skips the installation of dependencies', 48 | type: Boolean 49 | }); 50 | 51 | this.option('skip-install-message', { 52 | desc: 'Skips the message after the installation of dependencies', 53 | type: Boolean 54 | }); 55 | 56 | // This method adds support for a `--coffee` flag 57 | this.option('coffee'); 58 | // And you can then access it later on this way; e.g. 59 | this.scriptSuffix = (this.options.coffee ? ".coffee": ".js"); 60 | }, 61 | }); 62 | 63 | smacssGenerator.prototype.initializing = function initializing() { 64 | this.pkg = require('../package.json'); 65 | }; 66 | 67 | // Welcome Message with yeoman 68 | smacssGenerator.prototype.welcome = function welcome() { 69 | if (!this.options['skip-welcome-message']) { 70 | this.log(yosay('Yo! Welcome to SMACSS')); 71 | this.log( 72 | chalk.magenta("Your'e using the Perfectionist generator for Frontend\n") + 73 | chalk.yellow('┌──────────────────────────────────────────────────────────────┐ \n' + 74 | '| Answer simple questions to kick start your project | \n' + 75 | '└──────────────────────────────────────────────────────────────┘ ') 76 | ); 77 | } 78 | }; 79 | 80 | // Prompt - Ask for the type of application 81 | smacssGenerator.prototype.askAppType = function askAppType() { 82 | var done = this.async(); 83 | 84 | var prompts = [{ 85 | name: 'appName', 86 | message: 'What would you like to name your app/site?', 87 | default: process.cwd().split(path.sep).pop() 88 | },{ 89 | name: 'appType', 90 | message: 'Kind of app/site you are trying to build?', 91 | type: 'list', 92 | choices:[{ 93 | name: 'Simple Web App', 94 | value: 'typeSimpleWebApp', 95 | checked: false 96 | },{ 97 | name: 'Full Pack Web App', 98 | value: 'typeFullPackWebApp', 99 | checked: false 100 | },{ 101 | name: 'Angular App', 102 | value: 'typeAngularApp', 103 | checked: false 104 | },{ 105 | name: 'Restify App', 106 | value: 'typeRestifyApp', 107 | checked: false 108 | },{ 109 | name: 'Admin Web App', 110 | value: 'typeAdminWebApp', 111 | checked: false 112 | }], 113 | default: 1 114 | }]; 115 | this.prompt(prompts, function (answers) { 116 | var type = answers.type; 117 | 118 | this.appName = this._.camelize(this._.slugify(this._.humanize(answers.appName))); 119 | this.appType = answers.appType; 120 | 121 | // Underscore templating context to replace placeholders 122 | smacssGenerator.context = { 123 | site_name: this.appName, 124 | }; 125 | 126 | done(); 127 | }.bind(this)); 128 | }; 129 | 130 | // Prompt - Ask for the required plugins 131 | smacssGenerator.prototype.askAppLibraries = function askAppLibraries() { 132 | if(this.appType === 'typeFullPackWebApp' || 133 | this.appType === 'typeAdminWebApp') { 134 | var done = this.async(); 135 | var prompts = [{ 136 | name: 'appLibraries', 137 | message: 'Select some libraries to include in your app/site', 138 | type: 'checkbox', 139 | choices:[{ 140 | name: ' jQuery', 141 | value: 'includeQuery', 142 | checked: true 143 | },{ 144 | name: ' Backbone', 145 | value: 'includeBackbone', 146 | checked: false 147 | },{ 148 | name: ' Underscore', 149 | value: 'includeUnderscore', 150 | checked: false 151 | }] 152 | }]; 153 | this.prompt(prompts, function (answers) { 154 | var appLibraries = answers.appLibraries; 155 | 156 | var hasFeature = function (feat) { 157 | return appLibraries.indexOf(feat) !== -1; 158 | }; 159 | 160 | this.includeQuery = hasFeature('includeQuery'); 161 | this.includeBackbone = hasFeature('includeBackbone'); 162 | this.includeUnderscore = hasFeature('includeUnderscore'); 163 | 164 | done(); 165 | }.bind(this)); 166 | } 167 | }; 168 | 169 | // Prompt - Ask for the required angular modules 170 | smacssGenerator.prototype.askAngularModules = function askAngularModules() { 171 | if(this.appType === 'typeAngularApp') { 172 | var done = this.async(); 173 | var prompts = [{ 174 | name: 'angularModules', 175 | message: 'How about including some angular modules', 176 | type: 'checkbox', 177 | choices:[{ 178 | name: ' Angular Route', 179 | value: 'includeRouteModule', 180 | checked: true 181 | },{ 182 | name: ' Angular Resource', 183 | value: 'includeResourceModule', 184 | checked: false 185 | },{ 186 | name: ' Angular Sanitize', 187 | value: 'includeSanitizeModule', 188 | checked: false 189 | },{ 190 | name: ' Angular Animate', 191 | value: 'includeAnimateModule', 192 | checked: false 193 | }] 194 | }]; 195 | this.prompt(prompts, function (answers) { 196 | 197 | var hasModule = function (mod) { 198 | return answers.angularModules.indexOf(mod) !== -1; 199 | }; 200 | 201 | this.includeRouteModule = hasModule('includeRouteModule'); 202 | this.includeResourceModule = hasModule('includeResourceModule'); 203 | this.includeSanitizeModule = hasModule('includeSanitizeModule'); 204 | this.includeAnimateModule = hasModule('includeAnimateModule'); 205 | 206 | var angMods = []; 207 | 208 | if (this.includeRouteModule) { 209 | angMods.push("'ngRoute'"); 210 | } 211 | if (this.includeResourceModule) { 212 | angMods.push("'ngResource'"); 213 | } 214 | if (this.includeSanitizeModule) { 215 | angMods.push("'ngSanitize'"); 216 | } 217 | if (this.includeAnimateModule) { 218 | angMods.push("'ngAnimate'"); 219 | } 220 | 221 | if (angMods.length) { 222 | this.env.options.angularDeps = '\n ' + angMods.join(',\n ') + '\n '; 223 | } 224 | 225 | done(); 226 | }.bind(this)); 227 | } 228 | }; 229 | 230 | // Creating - App Directory structure 231 | smacssGenerator.prototype.scaffoldFolders = function scaffoldFolders() { 232 | this.log( 233 | chalk.yellow('\n┌──────────────────────────────────────────────────────────────┐ \n' + 234 | '| Creating the project structure | \n' + 235 | '└──────────────────────────────────────────────────────────────┘ ') 236 | ); 237 | 238 | if (this.appType === 'typeRestifyApp') { 239 | this.mkdir(this.appName + '/controllers'); 240 | this.mkdir(this.appName + '/models'); 241 | this.mkdir(this.appName + '/utils'); 242 | 243 | } else { 244 | 245 | // Common Scaffolding for all projets 246 | this.mkdir(this.appName + '/app'); 247 | this.mkdir(this.appName + '/app/css'); 248 | this.mkdir(this.appName + '/app/scss'); 249 | this.mkdir(this.appName + '/app/js'); 250 | this.mkdir(this.appName + '/app/images'); 251 | this.mkdir(this.appName + '/app/fonts'); 252 | 253 | if(this.appType === 'typeFullPackWebApp' || this.appType === 'typeAngularApp') { 254 | if(this.appType !== 'typeAdminWebApp') { 255 | this.mkdir(this.appName + '/app/partials'); 256 | } 257 | this.mkdir(this.appName + '/build'); 258 | } 259 | } 260 | }; 261 | 262 | // Copying - HTML files 263 | smacssGenerator.prototype.copyHTMLFiles = function copyHTMLFiles() { 264 | 265 | // Restify app - Don't have create html files 266 | if (this.appType === 'typeRestifyApp') { 267 | return false; 268 | } 269 | 270 | // Replace folder name with appType variable 271 | this.copy("common/_404.html", this.appName + "/app/404.html"); 272 | this.template("_" + this.appType + "/_index.html", this.appName + "/app/index.html", smacssGenerator.context); 273 | 274 | // Partial File Include 275 | if(this.appType === 'typeFullPackWebApp' || this.appType === 'typeAngularApp') { 276 | this.template("partials/_header.html", this.appName + "/app/partials/_header.html", smacssGenerator.context); 277 | this.template("partials/_footer.html", this.appName + "/app/partials/_footer.html", smacssGenerator.context); 278 | } 279 | 280 | // Files related to Aadmin Web App 281 | if(this.appType === 'typeAdminWebApp') { 282 | this.copy("_" + this.appType + "/_tables.html", this.appName + "/app/tables.html"); 283 | this.copy("_" + this.appType + "/_forms.html", this.appName + "/app/forms.html"); 284 | this.copy("_" + this.appType + "/_bootstrap-elements.html", this.appName + "/app/bootstrap-elements.html"); 285 | this.copy("_" + this.appType + "/_bootstrap-grid.html", this.appName + "/app/bootstrap-grid.html"); 286 | this.copy("_" + this.appType + "/_blank-page.html", this.appName + "/app/blank-page.html"); 287 | } 288 | }; 289 | 290 | // Copying - CSS stylesheet files 291 | smacssGenerator.prototype.copyCSSFiles = function copyCSSFiles() { 292 | 293 | if (this.appType === 'typeRestifyApp') { 294 | return false; 295 | } 296 | 297 | this.copy("common/_master.css", this.appName + "/app/css/master.css"); 298 | 299 | // SMACSS - SCSS Structure 300 | // TODO: Update structure based on ticket #7 301 | if(this.appType !== "typeAdminWebApp") { 302 | this.copy("scss/_master.scss", this.appName + "/app/scss/master.scss"); 303 | this.copy("scss/_base.scss", this.appName + "/app/scss/base.scss"); 304 | this.copy("scss/_layout.scss", this.appName + "/app/scss/layout.scss"); 305 | this.copy("scss/_reset.scss", this.appName + "/app/scss/reset.scss"); 306 | this.copy("scss/_variables.scss", this.appName + "/app/scss/variables.scss"); 307 | this.copy("scss/_mixins.scss", this.appName + "/app/scss/mixins.scss"); 308 | this.copy("scss/_module.scss", this.appName + "/app/scss/modules/module.scss"); 309 | this.copy("scss/_page_landing.scss", this.appName + "/app/scss/pages/page-landing.scss"); 310 | } 311 | 312 | if(this.appType === "typeAdminWebApp") { 313 | this.copy("_" + this.appType + "/scss/_master.scss", this.appName + "/app/scss/master.scss"); 314 | this.copy("_" + this.appType + "/scss/_admin.scss", this.appName + "/app/scss/admin.scss"); 315 | this.copy("_" + this.appType + "/scss/_bootstrap.scss", this.appName + "/app/scss/bootstrap.scss"); 316 | this.copy("_" + this.appType + "/scss/_font-awesome.scss", this.appName + "/app/scss/font-awesome.scss"); 317 | } 318 | 319 | }; 320 | 321 | // TODO: Replace with bower font-awesome plugin 322 | // Copy - Fonts for Admin Web App 323 | smacssGenerator.prototype.copyFonts = function copyFonts() { 324 | if(this.appType === "typeAdminWebApp") { 325 | this.copy("_" + this.appType + "/fonts/_fontawesome-webfont.eot", this.appName + "/app/fonts/fontawesome-webfont.eot"); 326 | this.copy("_" + this.appType + "/fonts/_fontawesome-webfont.svg", this.appName + "/app/fonts/fontawesome-webfont.svg"); 327 | this.copy("_" + this.appType + "/fonts/_fontawesome-webfont.ttf", this.appName + "/app/fonts/fontawesome-webfont.ttf"); 328 | this.copy("_" + this.appType + "/fonts/_fontawesome-webfont.woff", this.appName + "/app/fonts/fontawesome-webfont.woff"); 329 | this.copy("_" + this.appType + "/fonts/_FontAwesome.otf", this.appName + "/app/fonts/FontAwesome.otf"); 330 | } 331 | }; 332 | 333 | // Copy - Javascript Files 334 | smacssGenerator.prototype.copyJSFiles = function copyJSFiles() { 335 | if (this.appType === 'typeAngularApp') { 336 | this.template("js/_angular_application.js", this.appName + "/app/js/application.js", smacssGenerator.context); 337 | } 338 | else if (this.appType === 'typeRestifyApp') { 339 | this.template("_typeRestifyApp/_app.js", this.appName + "/app.js", smacssGenerator.context ); 340 | this.template("_typeRestifyApp/_routes.js", this.appName + "/routes.js", smacssGenerator.context ); 341 | this.template("_typeRestifyApp/_db.js", this.appName + "/db.js", smacssGenerator.context ); 342 | } 343 | else { 344 | this.copy("js/_application.js", this.appName + "/app/js/application.js"); 345 | } 346 | }; 347 | 348 | // Copy - Gulp Task Files 349 | smacssGenerator.prototype.copyTasksFile = function copyTasksFile() { 350 | if (this.appType === 'typeSimpleWebApp') { 351 | this.copy("tasks/simpleWebApp/_simple_browser_sync.js", this.appName + "/tasks/browser-sync.js"); 352 | this.copy("tasks/simpleWebApp/_simple_sass.js", this.appName + "/tasks/sass.js"); 353 | } 354 | else if(this.appType === 'typeFullPackWebApp' || this.appType === 'typeAngularApp' || this.appType === "typeAdminWebApp") { 355 | this.copy("tasks/_bower.js", this.appName + "/tasks/bower.js"); 356 | this.copy("tasks/_browser_sync.js", this.appName + "/tasks/browser-sync.js"); 357 | this.copy("tasks/_clean.js", this.appName + "/tasks/clean.js"); 358 | this.copy("tasks/_config.js", this.appName + "/tasks/config.js"); 359 | this.copy("tasks/_environment.js", this.appName + "/tasks/environment.js"); 360 | this.copy("tasks/_fonts.js", this.appName + "/tasks/fonts.js"); 361 | this.copy("tasks/_html.js", this.appName + "/tasks/html.js"); 362 | this.copy("tasks/_image.js", this.appName + "/tasks/image.js"); 363 | this.copy("tasks/_scripts.js", this.appName + "/tasks/scripts.js"); 364 | this.copy("tasks/_server.js", this.appName + "/tasks/server.js"); 365 | this.copy("tasks/_styles.js", this.appName + "/tasks/styles.js"); 366 | this.copy("tasks/_watch.js", this.appName + "/tasks/watch.js"); 367 | this.copy("tasks/_zip.js", this.appName + "/tasks/zip.js"); 368 | } 369 | }; 370 | 371 | // Copy - Dependency Files 372 | smacssGenerator.prototype.copyDependencyFiles = function copyDependencyFiles() { 373 | if (this.appType === 'typeRestifyApp') { 374 | this.template("_typeRestifyApp/_package.json", this.appName + "/package.json", smacssGenerator.context); 375 | this.template("_typeRestifyApp/_config.json", this.appName + "/config.json", smacssGenerator.context); 376 | this.template("_typeRestifyApp/_userSchema.js", this.appName + "/models/userSchema.js", smacssGenerator.context); 377 | this.template("_typeRestifyApp/_userController.js", this.appName + "/controllers/userController.js", smacssGenerator.context); 378 | return false; 379 | } 380 | 381 | if(this.appType === 'typeFullPackWebApp' || this.appType === 'typeAngularApp' || this.appType === "typeAdminWebApp") { 382 | this.template("common/_gulpfile.js", this.appName + "/gulpfile.js", smacssGenerator.context); 383 | } 384 | else { 385 | this.template("_typeSimpleWebApp/_gulpfile.js", this.appName + "/gulpfile.js", smacssGenerator.context); 386 | } 387 | 388 | this.template("_" + this.appType + "/_package.json", this.appName + "/package.json", smacssGenerator.context); 389 | }; 390 | 391 | // Copy - Project Files 392 | smacssGenerator.prototype.copyProjectfiles = function copyProjectfiles() { 393 | this.copy("dot-files/_gitignore", this.appName + "/.gitignore"); 394 | this.copy("dot-files/_gitattributes", this.appName + "/.gitattributes"); 395 | 396 | if (this.appType === 'typeAngularApp') { 397 | this.template("_typeAngularApp/_README.md", this.appName + "/README.md", smacssGenerator.context); 398 | } 399 | else if (this.appType === 'typeFullPackWebApp') { 400 | this.template("_typeFullPackWebApp/_README.md", this.appName + "/README.md", smacssGenerator.context); 401 | } 402 | else if (this.appType === 'typeSimpleWebApp') { 403 | this.template("_typeSimpleWebApp/_README.md", this.appName + "/README.md", smacssGenerator.context); 404 | } 405 | else if (this.appType === 'typeRestifyApp') { 406 | return false; 407 | } 408 | 409 | this.copy("common/_editorconfig", this.appName + "/.editorconfig"); 410 | this.copy("common/_robots.txt", this.appName + "/robots.txt"); 411 | this.copy("common/_favicon.ico", this.appName + "/app/favicon.ico"); 412 | 413 | if(this.appType !== 'typeSimpleWebApp') { 414 | this.template("dot-files/_jshintrc", this.appName + "/.jshintrc", smacssGenerator.context); 415 | this.template("dot-files/_jshintignore", this.appName + "/.jshintignore", smacssGenerator.context); 416 | } 417 | }; 418 | 419 | // Bower Dependency Injection 420 | smacssGenerator.prototype.injectDependencies = function injectDependencies() { 421 | // Bower is supported only in full & angular app types 422 | if(this.appType === 'typeFullPackWebApp' || this.appType === 'typeAngularApp' || this.appType === "typeAdminWebApp") { 423 | var bower = { 424 | name: this.appName, 425 | private: true, 426 | dependencies: {} 427 | }; 428 | this.copy('dot-files/_bowerrc', this.appName + '/.bowerrc'); 429 | 430 | this.template("_" + this.appType + '/_bower.json', this.appName + '/bower.json'); 431 | } 432 | }; 433 | 434 | // NPM, Bower Dependency Installation & Trigger Server 435 | smacssGenerator.prototype.install = function install() { 436 | // Installation context object 437 | var installContext = {}; 438 | installContext.appPath = process.cwd() + "/"+ this.appName; 439 | process.chdir(installContext.appPath); // activating app directory for installation 440 | 441 | // Assign context based on app types 442 | if(this.appType === 'typeSimpleWebApp' || this.appType === 'typeRestifyApp') { 443 | installContext.helpCommand = 'npm install'; 444 | installContext.includeNpm = true; 445 | installContext.includeBower = false; 446 | } 447 | else { 448 | installContext.helpCommand = 'npm install & bower install'; 449 | installContext.includeNpm = true; 450 | installContext.includeBower = true; 451 | } 452 | 453 | if (this.options['skip-install']) { 454 | this.log( 455 | chalk.green('\n ✔ Project structure created successfully! \n\n') + 456 | chalk.yellow('┌──────────────────────────────────────────────────────────────┐ \n' + 457 | '| Follow the instructions below | \n' + 458 | '└──────────────────────────────────────────────────────────────┘ ') 459 | ); 460 | 461 | var skipHelpMessage = function(appname, command) { 462 | console.log( 463 | 'Next Steps:' + 464 | '\n1) Now '+ chalk.yellow.bold('cd '+ appname +'') + ' into your project folder' + 465 | '\n2) Install dependencies by typing '+ chalk.yellow.bold(command) + 466 | '\n3) Run the server using: ' + chalk.yellow.bold('gulp') 467 | ); 468 | }; 469 | 470 | skipHelpMessage(this.appName, installContext.helpCommand); 471 | } 472 | else { 473 | this.log( 474 | chalk.green('\n ✔ Project structure created successfully! \n\n') + 475 | chalk.yellow('┌──────────────────────────────────────────────────────────────┐ \n' + 476 | '| Installating Dependencies, Please wait... | \n' + 477 | '└──────────────────────────────────────────────────────────────┘ ') 478 | ); 479 | 480 | this.on('end', function () { 481 | this.installDependencies({ 482 | bower: installContext.includeBower, 483 | npm: installContext.includeNpm, 484 | callback: function () { 485 | this.emit('dependenciesInstalled'); 486 | }.bind(this) 487 | }); 488 | }); 489 | 490 | this.on('dependenciesInstalled', function() { 491 | this.log( 492 | chalk.green('\n ✔ Dependencies installed successfully! \n\n') + 493 | chalk.yellow('┌──────────────────────────────────────────────────────────────┐ \n' + 494 | '| Please wait while we start the server... | \n' + 495 | '└──────────────────────────────────────────────────────────────┘ \n') 496 | ); 497 | 498 | shell.cd(installContext.appPath); 499 | 500 | if (this.appType === 'typeRestifyApp') { 501 | shell.exec('node app.js'); 502 | this.log(chalk.green('\n ✔ Please make sure your Database server is running! \n\n')); 503 | } else { 504 | shell.exec('gulp'); // trigger the server using gulp command 505 | } 506 | }); 507 | } 508 | }; 509 | 510 | smacssGenerator.prototype.helper = function helper() { 511 | //this.log('App Helper functions and methods'); 512 | }; 513 | 514 | smacssGenerator.prototype.errorHanding = function errorHanding() { 515 | //this.log('Something has gone wrong! Handle errors in this section'); 516 | }; 517 | 518 | smacssGenerator.prototype.paths = function paths() { 519 | //this.log('Path Handling'); 520 | }; 521 | 522 | module.exports = smacssGenerator; 523 | -------------------------------------------------------------------------------- /app/templates/_typeAdminWebApp/_blank-page.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | SMACSS Admin Template 10 | 11 | 12 | 13 | 14 | 15 | 16 | 20 | 21 | 22 |
23 | 24 | 25 | 176 | 177 |
178 |
179 | 180 |
181 |
182 |

183 | Blank Page 184 | Subheading 185 |

186 |
    187 |
  1. 188 | Dashboard 189 |
    2. 190 |
  2. 191 | Blank Page 192 |
    3. 193 |
194 |
195 |
196 | 197 |
198 | 199 |
200 | 201 | 202 |
203 | 204 | 205 | 206 | 207 | 208 | 209 | -------------------------------------------------------------------------------- /app/templates/_typeAdminWebApp/_bootstrap-elements.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | SMACSS Admin Template 10 | 11 | 12 | 13 | 14 | 15 | 16 | 20 | 21 | 22 |
23 | 24 | 25 | 176 | 177 |
178 | 179 |
180 | 181 | 182 |
183 |
184 |

185 | Bootstrap Elements 186 |

187 |
    188 |
  1. 189 | Dashboard 190 |
    2. 191 |
  2. 192 | Bootstrap Elements 193 |
    3. 194 |
195 |
196 |
197 | 198 | 199 | 200 |
201 |

Hello, world!

202 |

This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.

203 |

Learn more »

204 |
205 | 206 |
207 |

Buttons

208 |
209 |

210 | 211 | 212 | 213 | 214 | 215 | 216 | 217 |

218 |

219 | 220 | 221 | 222 | 223 | 224 | 225 | 226 |

227 |

228 | 229 | 230 | 231 | 232 | 233 | 234 | 235 |

236 |

237 | 238 | 239 | 240 | 241 | 242 | 243 | 244 |

245 | 246 |
247 |

Thumbnails

248 |
249 | 250 | 251 |
252 |

Dropdown menus

253 |
254 |
255 | Dropdown 256 | 263 |
264 | 265 |
266 |

Navbars

267 |
268 | 269 |
270 |
271 |
272 | 278 | Project name 279 |
280 |
281 | 298 |
299 | 300 |
301 |
302 | 303 |
304 |
305 |
306 | 312 | Project name 313 |
314 |
315 | 332 |
333 | 334 |
335 |
336 | 337 |
338 |

Alerts

339 |
340 |
341 | Well done! You successfully read this important alert message. 342 |
343 |
344 | Heads up! This alert needs your attention, but it's not super important. 345 |
346 |
347 | Warning! Best check yo self, you're not looking too good. 348 |
349 |
350 | Oh snap! Change a few things up and try submitting again. 351 |
352 | 353 |
354 |

Progress bars

355 |
356 |
357 |
358 | 60% Complete 359 |
360 |
361 |
362 |
363 | 40% Complete (success) 364 |
365 |
366 |
367 |
368 | 20% Complete 369 |
370 |
371 |
372 |
373 | 60% Complete (warning) 374 |
375 |
376 |
377 |
378 | 80% Complete (danger) 379 |
380 |
381 |
382 |
383 | 35% Complete (success) 384 |
385 |
386 | 20% Complete (warning) 387 |
388 |
389 | 10% Complete (danger) 390 |
391 |
392 | 393 |
394 |

List groups

395 |
396 |
397 |
398 |
    399 |
  • Cras justo odio
    • 400 |
  • Dapibus ac facilisis in
    • 401 |
  • Morbi leo risus
    • 402 |
  • Porta ac consectetur ac
    • 403 |
  • Vestibulum at eros
    • 404 |
405 |
406 | 407 |
408 |
409 | Cras justo odio 410 | Dapibus ac facilisis in 411 | Morbi leo risus 412 | Porta ac consectetur ac 413 | Vestibulum at eros 414 |
415 |
416 | 417 |
418 |
419 | 420 |

List group item heading

421 |

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

422 | 423 | 424 |

List group item heading

425 |

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

426 | 427 | 428 |

List group item heading

429 |

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

430 | 431 |
432 |
433 | 434 |
435 | 436 |
437 |

Panels

438 |
439 |
440 |
441 |
442 |
443 |

Panel title

444 |
445 |
446 | Panel content 447 |
448 |
449 |
450 |
451 |

Panel title

452 |
453 |
Panel content
454 |
455 |
456 | 457 |
458 |
459 |
460 |

Panel title

461 |
462 |
Panel content
463 |
464 |
465 |
466 |

Panel title

467 |
468 |
Panel content
469 |
470 |
471 | 472 |
473 |
474 |
475 |

Panel title

476 |
477 |
Panel content
478 |
479 |
480 |
481 |

Panel title

482 |
483 |
Panel content
484 |
485 |
486 | 487 |
488 |
489 |
490 |

Panel title

491 |
492 |
Panel content
493 |
494 |
495 | 496 |
497 |
498 |
499 |

Panel title

500 |
501 |
Panel content
502 |
503 |
504 | 505 |
506 |
507 |
508 |

Panel title

509 |
510 |
Panel content
511 |
512 |
513 | 514 |
515 | 516 |
517 |

Wells

518 |
519 |
520 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.

521 |
522 |
523 | 524 |
525 | 526 |
527 | 528 | 529 | 530 | 531 | 532 | 533 | -------------------------------------------------------------------------------- /app/templates/_typeAdminWebApp/_bootstrap-grid.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | SMACSS Admin Template 10 | 11 | 12 | 13 | 14 | 15 | 16 | 20 | 21 | 22 |
23 | 24 | 25 | 176 | 177 |
178 |
179 | 180 |
181 |
182 |

Bootstrap Grid

183 |
    184 |
  1. 185 | Dashboard 186 |
    2. 187 |
  2. 188 | Bootstrap Grid 189 |
    3. 190 |
191 |
192 |
193 | 194 |
195 |
196 |
197 |
198 | .col-lg-12 199 |
200 |
201 |
202 |
203 | 204 |
205 |
206 |
207 |
208 | .col-lg-6 209 |
210 |
211 |
212 |
213 |
214 |
215 | .col-lg-6 216 |
217 |
218 |
219 |
220 | 221 |
222 |
223 |
224 |
225 | .col-lg-4 226 |
227 |
228 |
229 |
230 |
231 |
232 | .col-lg-4 233 |
234 |
235 |
236 |
237 |
238 |
239 | .col-lg-4 240 |
241 |
242 |
243 |
244 | 245 |
246 |
247 |
248 |
249 | .col-lg-3 250 |
251 |
252 |
253 |
254 |
255 |
256 | .col-lg-3 257 |
258 |
259 |
260 |
261 |
262 |
263 | .col-lg-3 264 |
265 |
266 |
267 |
268 |
269 |
270 | .col-lg-3 271 |
272 |
273 |
274 |
275 | 276 |
277 |
278 |
279 |
280 | .col-lg-2 281 |
282 |
283 |
284 |
285 |
286 |
287 | .col-lg-2 288 |
289 |
290 |
291 |
292 |
293 |
294 | .col-lg-2 295 |
296 |
297 |
298 |
299 |
300 |
301 | .col-lg-2 302 |
303 |
304 |
305 |
306 |
307 |
308 | .col-lg-2 309 |
310 |
311 |
312 |
313 |
314 |
315 | .col-lg-2 316 |
317 |
318 |
319 |
320 | 321 |
322 |
323 |
324 |
325 | .col-lg-1 326 |
327 |
328 |
329 |
330 |
331 |
332 | .col-lg-1 333 |
334 |
335 |
336 |
337 |
338 |
339 | .col-lg-1 340 |
341 |
342 |
343 |
344 |
345 |
346 | .col-lg-1 347 |
348 |
349 |
350 |
351 |
352 |
353 | .col-lg-1 354 |
355 |
356 |
357 |
358 |
359 |
360 | .col-lg-1 361 |
362 |
363 |
364 |
365 |
366 |
367 | .col-lg-1 368 |
369 |
370 |
371 |
372 |
373 |
374 | .col-lg-1 375 |
376 |
377 |
378 |
379 |
380 |
381 | .col-lg-1 382 |
383 |
384 |
385 |
386 |
387 |
388 | .col-lg-1 389 |
390 |
391 |
392 |
393 |
394 |
395 | .col-lg-1 396 |
397 |
398 |
399 |
400 |
401 |
402 | .col-lg-1 403 |
404 |
405 |
406 |
407 | 408 |
409 |
410 |
411 |
412 | .col-lg-8 413 |
414 |
415 |
416 |
417 |
418 |
419 | .col-lg-4 420 |
421 |
422 |
423 |
424 | 425 |
426 |
427 |
428 |
429 | .col-lg-3 430 |
431 |
432 |
433 |
434 |
435 |
436 | .col-lg-6 437 |
438 |
439 |
440 |
441 |
442 |
443 | .col-lg-3 444 |
445 |
446 |
447 |
448 | 449 |
450 | 451 | 452 |
453 | 454 |
455 | 456 | 457 | 458 | 459 | 460 | 461 | -------------------------------------------------------------------------------- /app/templates/_typeAdminWebApp/_bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "<%= appName %>", 3 | "version": "0.0.1", 4 | "dependencies": { 5 | "bootstrap": "*", 6 | <% if (includeQuery) { %> 7 | "jquery": "*"<% } if (includeBackbone) { %>, 8 | "backbone": "*"<% } if (includeUnderscore) { %>, 9 | "underscore": "*" <% } %> 10 | }, 11 | "devDependencies": { 12 | 13 | }, 14 | "overrides": { 15 | 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /app/templates/_typeAdminWebApp/_forms.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | SMACSS Admin Template 10 | 11 | 12 | 13 | 14 | 15 | 16 | 20 | 21 | 22 |
23 | 24 | 175 | 176 |
177 |
178 | 179 | 180 |
181 |
182 |

183 | Forms 184 |

185 |
    186 |
  1. 187 | Dashboard 188 |
    2. 189 |
  2. 190 | Forms 191 |
    3. 192 |
193 |
194 |
195 | 196 | 197 |
198 |
199 |
200 |
201 | 202 | 203 |

Example block-level help text here.

204 |
205 |
206 | 207 | 208 |
209 |
210 | 211 |

email@example.com

212 |
213 |
214 | 215 | 216 |
217 |
218 | 219 | 220 |
221 |
222 | 223 |
224 | 227 |
228 |
229 | 232 |
233 |
234 | 237 |
238 |
239 |
240 | 241 | 244 | 247 | 250 |
251 |
252 | 253 |
254 | 257 |
258 |
259 | 262 |
263 |
264 | 267 |
268 |
269 |
270 | 271 | 274 | 277 | 280 |
281 |
282 | 283 | 290 |
291 |
292 | 293 | 300 |
301 | 302 | 303 | 304 |
305 |
306 |
307 |

Disabled Form States

308 | 309 |
310 |
311 |
312 | 313 | 314 |
315 |
316 | 317 | 320 |
321 |
322 | 325 |
326 | 327 | 328 |
329 |
330 | 331 |

Form Validation

332 | 333 |
334 |
335 | 336 | 337 |
338 |
339 | 340 | 341 |
342 |
343 | 344 | 345 |
346 |
347 | 348 |

Input Groups

349 | 350 |
351 |
352 | @ 353 | 354 |
355 |
356 | 357 | .00 358 |
359 |
360 | 361 | 362 |
363 |
364 | $ 365 | 366 | .00 367 |
368 |
369 | 370 | 371 |
372 |
373 | 374 |

For complete documentation, please visit Bootstrap's Form Documentation.

375 | 376 |
377 |
378 | 379 |
380 | 381 |
382 | 383 | 384 |
385 | 386 | 387 | 388 | 389 | 390 | 391 | -------------------------------------------------------------------------------- /app/templates/_typeAdminWebApp/_index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | SMACSS Admin Template 10 | 11 | 12 | 13 | 14 | 15 | 16 | 20 | 21 | 22 |
23 | 24 | 25 | 176 | 177 |
178 |
179 | 180 | 181 |
182 |
183 |

184 | Dashboard Statistics Overview 185 |

186 |
    187 |
  1. 188 | Dashboard 189 |
    2. 190 |
191 |
192 |
193 | 194 | 195 |
196 |
197 |
198 |
199 |
200 |
201 | 202 |
203 |
204 |
26
205 |
New Comments!
206 |
207 |
208 |
209 | 210 |
211 | View Details 212 | 213 |
214 |
215 | 216 |
217 |
218 |
219 |
220 |
221 |
222 |
223 | 224 |
225 |
226 |
12
227 |
New Tasks!
228 |
229 |
230 |
231 | 232 |
233 | View Details 234 | 235 |
236 |
237 | 238 |
239 |
240 |
241 |
242 |
243 |
244 |
245 | 246 |
247 |
248 |
124
249 |
New Orders!
250 |
251 |
252 |
253 | 254 |
255 | View Details 256 | 257 |
258 |
259 | 260 |
261 |
262 |
263 |
264 |
265 |
266 |
267 | 268 |
269 |
270 |
13
271 |
Support Tickets!
272 |
273 |
274 |
275 | 276 |
277 | View Details 278 | 279 |
280 |
281 | 282 |
283 |
284 |
285 | 286 | 287 |
288 |
289 |
290 |
291 |

Tasks Panel

292 |
293 |
294 |
295 | 296 | just now 297 | Calendar updated 298 | 299 | 300 | 4 minutes ago 301 | Commented on a post 302 | 303 | 304 | 23 minutes ago 305 | Order 392 shipped 306 | 307 | 308 | 46 minutes ago 309 | Invoice 653 has been paid 310 | 311 | 312 | 1 hour ago 313 | A new user has been added 314 | 315 | 316 | 2 hours ago 317 | Completed task: "pick up dry cleaning" 318 | 319 | 320 | yesterday 321 | Saved the world 322 | 323 | 324 | two days ago 325 | Completed task: "fix error on sales page" 326 | 327 |
328 |
329 | View All Activity 330 |
331 |
332 |
333 |
334 |
335 |
336 |
337 |

Transactions Panel

338 |
339 |
340 |
341 | 342 | 343 | 344 | 345 | 346 | 347 | 348 | 349 | 350 | 351 | 352 | 353 | 354 | 355 | 356 | 357 | 358 | 359 | 360 | 361 | 362 | 363 | 364 | 365 | 366 | 367 | 368 | 369 | 370 | 371 | 372 | 373 | 374 | 375 | 376 | 377 | 378 | 379 | 380 | 381 | 382 | 383 | 384 | 385 | 386 | 387 | 388 | 389 | 390 | 391 | 392 | 393 | 394 | 395 | 396 | 397 | 398 | 399 | 400 |
Order #Order DateOrder TimeAmount (USD)
332610/21/20133:29 PM$321.33
332510/21/20133:20 PM$234.34
332410/21/20133:03 PM$724.17
332310/21/20133:00 PM$23.71
332210/21/20132:49 PM$8345.23
332110/21/20132:23 PM$245.12
332010/21/20132:15 PM$5663.54
331910/21/20132:13 PM$943.45
401 |
402 |
403 | View All Transactions 404 |
405 |
406 |
407 |
408 |
409 | 410 | 411 |
412 | 413 |
414 | 415 | 416 |
417 | 418 | 419 | 420 | 421 | 422 | 423 | -------------------------------------------------------------------------------- /app/templates/_typeAdminWebApp/_package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "<%= site_name %>", 3 | "version": "0.0.1", 4 | "description": "Application description goes here", 5 | "licenses": "enter your license type here", 6 | "repository": "your repository url goes here", 7 | "devDependencies": { 8 | "gulp": "~3.9.0", 9 | "gulp-if": "~1.2.5", 10 | "gulp-sass": "~2.1.1", 11 | "gulp-concat": "~2.4.3", 12 | "gulp-file-include": "~0.8.0", 13 | "gulp-autoprefixer": "^2.3.1", 14 | "gulp-load-plugins": "~0.8.0", 15 | "gulp-changed": "^0.4.1", 16 | "gulp-filter": "^1.0.0", 17 | "gulp-ignore": "^1.2.0", 18 | "gulp-imagemin": "^0.6.2", 19 | "gulp-jshint": "^1.8.4", 20 | "gulp-minify-html": "^0.1.4", 21 | "gulp-minify-css": "^0.3.7", 22 | "gulp-rename": "^1.2.0", 23 | "gulp-size": "^1.0.0", 24 | "gulp-task-listing": "*", 25 | "gulp-uglify": "^0.3.1", 26 | "gulp-zip": "^0.3.4", 27 | "gulp-webserver": "^0.6.0", 28 | "gulp-filter": "^2.0.2", 29 | "gulp-sourcemaps": "^1.5.0", 30 | "del": "~1.1.1", 31 | "open": "~0.0.5", 32 | "chalk": "~0.5.1", 33 | "main-bower-files": "~2.5.0", 34 | "browser-sync": "~1.9.1", 35 | "run-sequence": "~1.0.2", 36 | "jshint-stylish": "~1.0.0", 37 | "bower": "~1.4.1", 38 | "underscore": "~1.8.3", 39 | "underscore.string": "3.0.3", 40 | "require-dir": "0.3.0", 41 | "portscanner": "^1.0.0" 42 | }, 43 | "engines": { 44 | "node": ">=0.10.0" 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /app/templates/_typeAdminWebApp/_tables.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | SMACSS Admin Template 10 | 11 | 12 | 13 | 14 | 15 | 16 | 20 | 21 | 22 |
23 | 24 | 175 | 176 |
177 |
178 | 179 |
180 |
181 |

182 | Tables 183 |

184 |
    185 |
  1. 186 | Dashboard 187 |
    2. 188 |
  2. 189 | Tables 190 |
    3. 191 |
192 |
193 |
194 | 195 |
196 |
197 |

Bordered Table

198 |
199 | 200 | 201 | 202 | 203 | 204 | 205 | 206 | 207 | 208 | 209 | 210 | 211 | 212 | 213 | 214 | 215 | 216 | 217 | 218 | 219 | 220 | 221 | 222 | 223 | 224 | 225 | 226 | 227 | 228 | 229 | 230 | 231 | 232 | 233 | 234 | 235 | 236 | 237 | 238 | 239 | 240 | 241 | 242 | 243 | 244 | 245 | 246 | 247 | 248 | 249 | 250 | 251 | 252 |
PageVisits% New VisitsRevenue
/index.html126532.3%$321.33
/about.html26133.3%$234.12
/sales.html66521.3%$16.34
/blog.html951689.3%$1644.43
/404.html2334.3%$23.52
/services.html42160.3%$724.32
/blog/post.html123393.2%$126.34
253 |
254 |
255 |
256 |

Bordered with Striped Rows

257 |
258 | 259 | 260 | 261 | 262 | 263 | 264 | 265 | 266 | 267 | 268 | 269 | 270 | 271 | 272 | 273 | 274 | 275 | 276 | 277 | 278 | 279 | 280 | 281 | 282 | 283 | 284 | 285 | 286 | 287 | 288 | 289 | 290 | 291 | 292 | 293 | 294 | 295 | 296 | 297 | 298 | 299 | 300 | 301 | 302 | 303 | 304 | 305 | 306 | 307 | 308 | 309 | 310 | 311 |
PageVisits% New VisitsRevenue
/index.html126532.3%$321.33
/about.html26133.3%$234.12
/sales.html66521.3%$16.34
/blog.html951689.3%$1644.43
/404.html2334.3%$23.52
/services.html42160.3%$724.32
/blog/post.html123393.2%$126.34
312 |
313 |
314 |
315 | 316 | 317 |
318 |
319 |

Basic Table

320 |
321 | 322 | 323 | 324 | 325 | 326 | 327 | 328 | 329 | 330 | 331 | 332 | 333 | 334 | 335 | 336 | 337 | 338 | 339 | 340 | 341 | 342 | 343 | 344 | 345 | 346 | 347 | 348 | 349 | 350 | 351 | 352 | 353 | 354 | 355 | 356 | 357 | 358 | 359 | 360 | 361 | 362 | 363 | 364 | 365 | 366 | 367 | 368 | 369 | 370 | 371 | 372 | 373 | 374 |
PageVisits% New VisitsRevenue
/index.html126532.3%$321.33
/about.html26133.3%$234.12
/sales.html66521.3%$16.34
/blog.html951689.3%$1644.43
/404.html2334.3%$23.52
/services.html42160.3%$724.32
/blog/post.html123393.2%$126.34
375 |
376 |
377 |
378 |

Striped Rows

379 |
380 | 381 | 382 | 383 | 384 | 385 | 386 | 387 | 388 | 389 | 390 | 391 | 392 | 393 | 394 | 395 | 396 | 397 | 398 | 399 | 400 | 401 | 402 | 403 | 404 | 405 | 406 | 407 | 408 | 409 | 410 | 411 | 412 | 413 | 414 | 415 | 416 | 417 | 418 | 419 | 420 | 421 | 422 | 423 | 424 | 425 | 426 | 427 | 428 | 429 | 430 | 431 | 432 | 433 |
PageVisits% New VisitsRevenue
/index.html126532.3%$321.33
/about.html26133.3%$234.12
/sales.html66521.3%$16.34
/blog.html951689.3%$1644.43
/404.html2334.3%$23.52
/services.html42160.3%$724.32
/blog/post.html123393.2%$126.34
434 |
435 |
436 |
437 | 438 | 439 |
440 |
441 |

Contextual Classes

442 |
443 | 444 | 445 | 446 | 447 | 448 | 449 | 450 | 451 | 452 | 453 | 454 | 455 | 456 | 457 | 458 | 459 | 460 | 461 | 462 | 463 | 464 | 465 | 466 | 467 | 468 | 469 | 470 | 471 | 472 | 473 | 474 | 475 | 476 | 477 | 478 | 479 | 480 | 481 | 482 | 483 | 484 | 485 | 486 | 487 | 488 | 489 | 490 | 491 | 492 | 493 | 494 | 495 | 496 |
PageVisits% New VisitsRevenue
/index.html126532.3%$321.33
/about.html26133.3%$234.12
/sales.html66521.3%$16.34
/blog.html951689.3%$1644.43
/404.html2334.3%$23.52
/services.html42160.3%$724.32
/blog/post.html123393.2%$126.34
497 |
498 |
499 |
500 |

Bootstrap Docs

501 |

For complete documentation, please visit Bootstrap's Tables Documentation.

502 |
503 |
504 | 505 | 506 |
507 | 508 |
509 | 510 |
511 | 512 | 513 | 514 | 515 | 516 | 517 | -------------------------------------------------------------------------------- /app/templates/_typeAdminWebApp/fonts/_FontAwesome.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FuelFrontend/generator-smacss/02ae69e117cf205a2713bc41c75638ff9edd3ace/app/templates/_typeAdminWebApp/fonts/_FontAwesome.otf -------------------------------------------------------------------------------- /app/templates/_typeAdminWebApp/fonts/_fontawesome-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FuelFrontend/generator-smacss/02ae69e117cf205a2713bc41c75638ff9edd3ace/app/templates/_typeAdminWebApp/fonts/_fontawesome-webfont.eot -------------------------------------------------------------------------------- /app/templates/_typeAdminWebApp/fonts/_fontawesome-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FuelFrontend/generator-smacss/02ae69e117cf205a2713bc41c75638ff9edd3ace/app/templates/_typeAdminWebApp/fonts/_fontawesome-webfont.ttf -------------------------------------------------------------------------------- /app/templates/_typeAdminWebApp/fonts/_fontawesome-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FuelFrontend/generator-smacss/02ae69e117cf205a2713bc41c75638ff9edd3ace/app/templates/_typeAdminWebApp/fonts/_fontawesome-webfont.woff -------------------------------------------------------------------------------- /app/templates/_typeAdminWebApp/scss/_admin.scss: -------------------------------------------------------------------------------- 1 | /*! 2 | * Start Bootstrap - SB Admin Bootstrap Admin Template (http://startbootstrap.com) 3 | * Code licensed under the Apache License v2.0. 4 | * For details, see http://www.apache.org/licenses/LICENSE-2.0. 5 | */ 6 | 7 | /* Global Styles */ 8 | 9 | body { 10 | margin-top: 100px; 11 | background-color: #222; 12 | } 13 | 14 | @media(min-width:768px) { 15 | body { 16 | margin-top: 50px; 17 | } 18 | } 19 | 20 | #wrapper { 21 | padding-left: 0; 22 | } 23 | 24 | #page-wrapper { 25 | width: 100%; 26 | padding: 0; 27 | background-color: #fff; 28 | } 29 | 30 | .huge { 31 | font-size: 50px; 32 | line-height: normal; 33 | } 34 | 35 | @media(min-width:768px) { 36 | #wrapper { 37 | padding-left: 225px; 38 | } 39 | 40 | #page-wrapper { 41 | padding: 10px; 42 | } 43 | } 44 | 45 | /* Top Navigation */ 46 | 47 | .top-nav { 48 | padding: 0 15px; 49 | } 50 | 51 | .top-nav>li { 52 | display: inline-block; 53 | float: left; 54 | } 55 | 56 | .top-nav>li>a { 57 | padding-top: 15px; 58 | padding-bottom: 15px; 59 | line-height: 20px; 60 | color: #999; 61 | } 62 | 63 | .top-nav>li>a:hover, 64 | .top-nav>li>a:focus, 65 | .top-nav>.open>a, 66 | .top-nav>.open>a:hover, 67 | .top-nav>.open>a:focus { 68 | color: #fff; 69 | background-color: #000; 70 | } 71 | 72 | .top-nav>.open>.dropdown-menu { 73 | float: left; 74 | position: absolute; 75 | margin-top: 0; 76 | border: 1px solid rgba(0,0,0,.15); 77 | border-top-left-radius: 0; 78 | border-top-right-radius: 0; 79 | background-color: #fff; 80 | -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175); 81 | box-shadow: 0 6px 12px rgba(0,0,0,.175); 82 | } 83 | 84 | .top-nav>.open>.dropdown-menu>li>a { 85 | white-space: normal; 86 | } 87 | 88 | ul.message-dropdown { 89 | padding: 0; 90 | max-height: 250px; 91 | overflow-x: hidden; 92 | overflow-y: auto; 93 | } 94 | 95 | li.message-preview { 96 | width: 275px; 97 | border-bottom: 1px solid rgba(0,0,0,.15); 98 | } 99 | 100 | li.message-preview>a { 101 | padding-top: 15px; 102 | padding-bottom: 15px; 103 | } 104 | 105 | li.message-footer { 106 | margin: 5px 0; 107 | } 108 | 109 | ul.alert-dropdown { 110 | width: 200px; 111 | } 112 | 113 | /* Side Navigation */ 114 | 115 | @media(min-width:768px) { 116 | .side-nav { 117 | position: fixed; 118 | top: 51px; 119 | left: 225px; 120 | width: 225px; 121 | margin-left: -225px; 122 | border: none; 123 | border-radius: 0; 124 | overflow-y: auto; 125 | background-color: #222; 126 | bottom: 0; 127 | overflow-x: hidden; 128 | padding-bottom: 40px; 129 | } 130 | 131 | .side-nav>li>a { 132 | width: 225px; 133 | } 134 | 135 | .side-nav li a:hover, 136 | .side-nav li a:focus { 137 | outline: none; 138 | background-color: #000 !important; 139 | } 140 | } 141 | 142 | .side-nav>li>ul { 143 | padding: 0; 144 | } 145 | 146 | .side-nav>li>ul>li>a { 147 | display: block; 148 | padding: 10px 15px 10px 38px; 149 | text-decoration: none; 150 | color: #999; 151 | } 152 | 153 | .side-nav>li>ul>li>a:hover { 154 | color: #fff; 155 | } 156 | 157 | /* Flot Chart Containers */ 158 | 159 | .flot-chart { 160 | display: block; 161 | height: 400px; 162 | } 163 | 164 | .flot-chart-content { 165 | width: 100%; 166 | height: 100%; 167 | } 168 | 169 | /* Custom Colored Panels */ 170 | 171 | .huge { 172 | font-size: 40px; 173 | } 174 | 175 | .panel-green { 176 | border-color: #5cb85c; 177 | } 178 | 179 | .panel-green > .panel-heading { 180 | border-color: #5cb85c; 181 | color: #fff; 182 | background-color: #5cb85c; 183 | } 184 | 185 | .panel-green > a { 186 | color: #5cb85c; 187 | } 188 | 189 | .panel-green > a:hover { 190 | color: #3d8b3d; 191 | } 192 | 193 | .panel-red { 194 | border-color: #d9534f; 195 | } 196 | 197 | .panel-red > .panel-heading { 198 | border-color: #d9534f; 199 | color: #fff; 200 | background-color: #d9534f; 201 | } 202 | 203 | .panel-red > a { 204 | color: #d9534f; 205 | } 206 | 207 | .panel-red > a:hover { 208 | color: #b52b27; 209 | } 210 | 211 | .panel-yellow { 212 | border-color: #f0ad4e; 213 | } 214 | 215 | .panel-yellow > .panel-heading { 216 | border-color: #f0ad4e; 217 | color: #fff; 218 | background-color: #f0ad4e; 219 | } 220 | 221 | .panel-yellow > a { 222 | color: #f0ad4e; 223 | } 224 | 225 | .panel-yellow > a:hover { 226 | color: #df8a13; 227 | } 228 | -------------------------------------------------------------------------------- /app/templates/_typeAdminWebApp/scss/_master.scss: -------------------------------------------------------------------------------- 1 | /* ----------------------------------------------------------------------- 2 | Version: 0.1 3 | 4 | SMACSS [Scalable Modular Architecture for CSS] 5 | Reference: http://smacss.com/ 6 | 7 | Categorizing: 8 | 1. Base - Defaults elements, attribute selectors, pseudo-class selectors styling [example: body, form, a] 9 | 2. Layout - Divide the page into sections [example: header, footer] [prefix: l-] 10 | 3. Modules - Reusable, Modular parts of design [example: sidebar, popup] [prefix: module-] 11 | 4. State - How our module or layouts look in particular state [example: expanded, active] [prefix: is-] 12 | 5. Theme - Look and feel of subcomponent based on theme [example: dark, light] [prefix: theme-] 13 | 6. Pages - Page specific styles. [prefix: page-] 14 | ----------------------------------------------------------------------- */ 15 | 16 | /*------------------------------------------------- 17 | MASTER: IMPORTING STYLESHEETS 18 | -------------------------------------------------*/ 19 | @import "bootstrap"; 20 | @import "admin"; 21 | @import "font-awesome"; 22 | -------------------------------------------------------------------------------- /app/templates/_typeAngularApp/_README.md: -------------------------------------------------------------------------------- 1 | # <%= site_name %> 2 | 3 | **Project Setup** 4 | 5 | ## Installation 6 | 7 | *You need to have [NodeJS](http://nodejs.org/)* 8 | 9 | *Type below commands in terminal* 10 | 11 | ``````` 12 | npm install -g yo 13 | 14 | npm install -g gulp 15 | 16 | npm install -g bower 17 | ``````` 18 | 19 | ### Install [smacss generator](https://github.com/FuelFrontend/generator-smacss) 20 | 21 | *Type below commands in terminal* 22 | 23 | ``````` 24 | npm install -g generator-smacss 25 | ``````` 26 | 27 | **Clone the repo & cd into it** 28 | 29 | 30 | ``````` 31 | sudo npm install 32 | 33 | bower install 34 | ``````` 35 | 36 | **Finally** 37 | 38 | *Type below command in terminal* 39 | 40 | ``````` 41 | gulp 42 | ``````` 43 | 44 | **Application Directory Structure** 45 | 46 | 47 | ```````` 48 | ├── app 49 | │ ├── bower_components 50 | │ ├── images 51 | │ ├── js 52 | │ │ └── lib 53 | │ │ │ └── third-party-files.js 54 | │ │ └── controllers 55 | │ │ └── directives 56 | │ │ └── services 57 | │ │ └── filters 58 | │ │ └── application.js 59 | │ ├── css 60 | │ │ └── master.css 61 | │ ├── partials 62 | │ │ └── header.html 63 | │ │ └── footer.html 64 | │ ├── scss 65 | │ │ └── modules 66 | │ │ │ └── module-name.scss 67 | │ │ └── pages 68 | │ │ │ └── page-landing.scss 69 | │ │ └── base.scss 70 | │ │ └── layout.css 71 | │ │ └── mixins.css 72 | │ │ └── reset.css 73 | │ │ └── variables.css 74 | │ └── index.html 75 | ├── build 76 | │ └── build-files 77 | ├── zip 78 | │ └── compressed-files 79 | ├── node_modules 80 | ├── package.json 81 | ├── gulpfile.js 82 | ├── bower.json 83 | ├── .bowerrc 84 | ├── .gitattributes 85 | └── .gitignore 86 | ```````` 87 | 88 | **Quick Commands** 89 | 90 | 91 | * **Clean** _Remove all files from your build folder_ 92 | 93 | ``````` 94 | gulp clean 95 | ``````` 96 | 97 | * **Zip** _Compress you app & save in `zip` folder with timestamp for quick sharing_ 98 | 99 | ``````` 100 | gulp zip 101 | ``````` 102 | 103 | * **Controller** _Creates a controller in `app/js/controllers`_ 104 | 105 | ``````` 106 | yo smacss:controller 107 | ``````` 108 | 109 | * **Service** _Creates a service in `app/js/services`_ 110 | 111 | ``````` 112 | yo smacss:service 113 | ``````` 114 | 115 | * **Directive** _Creates a directive in `app/js/directives`_ 116 | 117 | ``````` 118 | yo smacss:directive 119 | ``````` 120 | 121 | * **Filter** _Creates a filter in `app/js/filters`_ 122 | 123 | ``````` 124 | yo smacss:filter 125 | ``````` 126 | 127 | # Environment 128 | 129 | Generator Smacss comes with development and producution modes. In default it runs in development mode. 130 | 131 | You can switch to production mode using the following command 132 | 133 | ``````` 134 | gulp prod 135 | ``````` 136 | -------------------------------------------------------------------------------- /app/templates/_typeAngularApp/_bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "<%= appName %>", 3 | "version": "0.0.1", 4 | "dependencies": { 5 | "angular": "1.2.6"<% if (includeResourceModule) { %>, 6 | "angular-resource": "1.2.6"<% } if (includeSanitizeModule) { %>, 7 | "angular-sanitize": "1.2.6"<% } if (includeRouteModule) { %>, 8 | "angular-route": "1.2.6"<% } if (includeAnimateModule) { %>, 9 | "angular-animate": "1.2.6" <% } %> 10 | }, 11 | "devDependencies": { 12 | 13 | }, 14 | "overrides": { 15 | 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /app/templates/_typeAngularApp/_index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | <%= site_name %> 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | @@include('./partials/_header.html') 16 | 17 | 18 |
19 |

Sample angular page, Your good name please?

20 |

21 | 22 | Welcome {{ name }}, You look great today! 23 |

24 |
25 | 26 | @@include('./partials/_footer.html') 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /app/templates/_typeAngularApp/_package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "<%= site_name %>", 3 | "version": "0.0.1", 4 | "description": "Application description goes here", 5 | "licenses": "enter your license type here", 6 | "repository": "your repository url goes here", 7 | "devDependencies": { 8 | "gulp": "~3.9.0", 9 | "gulp-if": "~1.2.5", 10 | "gulp-sass": "~2.1.1", 11 | "gulp-concat": "~2.4.3", 12 | "gulp-file-include": "~0.8.0", 13 | "gulp-autoprefixer": "^2.3.1", 14 | "gulp-load-plugins": "~0.8.0", 15 | "gulp-changed": "^0.4.1", 16 | "gulp-filter": "^1.0.0", 17 | "gulp-ignore": "^1.2.0", 18 | "gulp-imagemin": "^0.6.2", 19 | "gulp-jshint": "^1.8.4", 20 | "gulp-minify-html": "^0.1.4", 21 | "gulp-minify-css": "^0.3.7", 22 | "gulp-rename": "^1.2.0", 23 | "gulp-size": "^1.0.0", 24 | "gulp-task-listing": "*", 25 | "gulp-uglify": "^0.3.1", 26 | "gulp-zip": "^0.3.4", 27 | "gulp-webserver": "^0.6.0", 28 | "gulp-filter": "^2.0.2", 29 | "gulp-sourcemaps": "^1.5.0", 30 | "del": "~1.1.1", 31 | "open": "~0.0.5", 32 | "chalk": "~0.5.1", 33 | "main-bower-files": "~2.5.0", 34 | "browser-sync": "~1.9.1", 35 | "run-sequence": "~1.0.2", 36 | "jshint-stylish": "~1.0.0", 37 | "bower": "~1.4.1", 38 | "underscore": "~1.8.3", 39 | "underscore.string": "3.0.3", 40 | "require-dir": "0.3.0", 41 | "portscanner": "^1.0.0" 42 | }, 43 | "engines": { 44 | "node": ">=0.10.0" 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /app/templates/_typeFullPackWebApp/_README.md: -------------------------------------------------------------------------------- 1 | # <%= site_name %> 2 | 3 | **Project Setup** 4 | 5 | ## Installation 6 | 7 | *You need to have [NodeJS](http://nodejs.org/)* 8 | 9 | *Type below commands in terminal* 10 | 11 | ``````` 12 | npm install -g yo 13 | 14 | npm install -g gulp 15 | 16 | npm install -g bower 17 | ``````` 18 | 19 | ### Install [smacss generator](https://github.com/FuelFrontend/generator-smacss) 20 | 21 | *Type below commands in terminal* 22 | 23 | ``````` 24 | npm install -g generator-smacss 25 | ``````` 26 | 27 | **Clone the repo & cd into it** 28 | 29 | 30 | ``````` 31 | sudo npm install 32 | 33 | bower install 34 | ``````` 35 | 36 | **Finally** 37 | 38 | *Type below command in terminal* 39 | 40 | ``````` 41 | gulp 42 | ``````` 43 | 44 | **Application Directory Structure** 45 | 46 | `````````` 47 | ├── app 48 | │ ├── bower_components 49 | │ ├── images 50 | │ ├── js 51 | │ │ └── lib 52 | │ │ │ └── third-party-files.js 53 | │ │ └── application.js 54 | │ ├── css 55 | │ │ └── master.css 56 | │ ├── partials 57 | │ │ └── header.html 58 | │ │ └── footer.html 59 | │ ├── scss 60 | │ │ └── modules 61 | │ │ │ └── module-name.scss 62 | │ │ └── pages 63 | │ │ │ └── page-landing.scss 64 | │ │ └── base.scss 65 | │ │ └── layout.css 66 | │ │ └── mixins.css 67 | │ │ └── reset.css 68 | │ │ └── variables.css 69 | │ └── index.html 70 | ├── build 71 | │ └── build-files 72 | ├── zip 73 | │ └── compressed-files 74 | ├── node_modules 75 | ├── package.json 76 | ├── gulpfile.js 77 | ├── bower.json 78 | ├── .bowerrc 79 | ├── .gitattributes 80 | └── .gitignore 81 | `````````` 82 | 83 | **Quick Commands** 84 | 85 | * **Clean** _Remove all files from your build folder_ 86 | 87 | ``````` 88 | gulp clean 89 | ``````` 90 | 91 | * **Zip** _Compress you app & save in `zip` folder with timestamp for quick sharing_ 92 | 93 | ``````` 94 | gulp zip 95 | ``````` 96 | 97 | # Environment 98 | 99 | Generator Smacss comes with development and producution modes. In default it runs in development mode. 100 | 101 | You can switch to production mode using the following command 102 | 103 | ``````` 104 | gulp prod 105 | ``````` 106 | -------------------------------------------------------------------------------- /app/templates/_typeFullPackWebApp/_bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "<%= appName %>", 3 | "version": "0.0.1", 4 | "dependencies": { 5 | <% if (includeQuery) { %> 6 | "jquery": "*"<% } if (includeBackbone) { %>, 7 | "backbone": "*"<% } if (includeUnderscore) { %>, 8 | "underscore": "*" <% } %> 9 | }, 10 | "devDependencies": { 11 | 12 | }, 13 | "overrides": { 14 | 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /app/templates/_typeFullPackWebApp/_index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | <%= site_name %> 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | @@include('./partials/_header.html') 15 | 16 | 17 |
18 |

It's nice to meet you :)

19 |
20 | 21 | @@include('./partials/_footer.html') 22 | 23 | 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /app/templates/_typeFullPackWebApp/_package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "<%= site_name %>", 3 | "version": "0.0.1", 4 | "description": "Application description goes here", 5 | "licenses": "enter your license type here", 6 | "repository": "your repository url goes here", 7 | "devDependencies": { 8 | "gulp": "~3.9.0", 9 | "gulp-if": "~1.2.5", 10 | "gulp-sass": "~2.1.1", 11 | "gulp-concat": "~2.4.3", 12 | "gulp-file-include": "~0.8.0", 13 | "gulp-autoprefixer": "^2.3.1", 14 | "gulp-load-plugins": "~0.8.0", 15 | "gulp-changed": "^0.4.1", 16 | "gulp-filter": "^1.0.0", 17 | "gulp-ignore": "^1.2.0", 18 | "gulp-imagemin": "^0.6.2", 19 | "gulp-jshint": "^1.8.4", 20 | "gulp-minify-html": "^0.1.4", 21 | "gulp-minify-css": "^0.3.7", 22 | "gulp-rename": "^1.2.0", 23 | "gulp-size": "^1.0.0", 24 | "gulp-task-listing": "*", 25 | "gulp-uglify": "^0.3.1", 26 | "gulp-zip": "^0.3.4", 27 | "gulp-webserver": "^0.6.0", 28 | "gulp-filter": "^2.0.2", 29 | "gulp-sourcemaps": "^1.5.0", 30 | "del": "~1.1.1", 31 | "open": "~0.0.5", 32 | "chalk": "~0.5.1", 33 | "main-bower-files": "~2.5.0", 34 | "browser-sync": "~1.9.1", 35 | "run-sequence": "~1.0.2", 36 | "jshint-stylish": "~1.0.0", 37 | "bower": "~1.4.1", 38 | "underscore": "~1.8.3", 39 | "underscore.string": "3.0.3", 40 | "require-dir": "0.3.0", 41 | "portscanner": "^1.0.0" 42 | }, 43 | "engines": { 44 | "node": ">=0.10.0" 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /app/templates/_typeRestifyApp/_app.js: -------------------------------------------------------------------------------- 1 | var restify = require('restify'); 2 | var config = require('./config'); 3 | var app = restify.createServer({name:'<%= site_name %>'}); 4 | 5 | app.use(restify.fullResponse()); 6 | app.use(restify.bodyParser()); 7 | app.use(restify.queryParser()); 8 | 9 | app.listen(config.port, function() { 10 | console.log('server listening on port number', config.port); 11 | }); 12 | var routes = require('./routes')(app); 13 | -------------------------------------------------------------------------------- /app/templates/_typeRestifyApp/_config.json: -------------------------------------------------------------------------------- 1 | { 2 | "dbPath": "mongodb://localhost/<%= site_name %>", 3 | "port": 8000 4 | } 5 | -------------------------------------------------------------------------------- /app/templates/_typeRestifyApp/_db.js: -------------------------------------------------------------------------------- 1 | var mongoose = require('mongoose'); 2 | var config = require('./config'); 3 | 4 | console.log('config data',config); 5 | 6 | mongoose.connect(config.dbPath); 7 | var db = mongoose.connection; 8 | 9 | db.on('error', function () { 10 | console.log('error occured from db'); 11 | }); 12 | 13 | db.once('open', function dbOpen() { 14 | console.log('successfully opened the db'); 15 | }); 16 | 17 | exports.mongoose = mongoose; 18 | -------------------------------------------------------------------------------- /app/templates/_typeRestifyApp/_package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "<%= site_name %>", 3 | "version": "0.1.0", 4 | "licenses": "enter your license type here", 5 | "repository": "your repository url goes here", 6 | "scripts": { 7 | "start": "node app.js" 8 | }, 9 | "dependencies": { 10 | "restify": "*", 11 | "mongoose": "*" 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /app/templates/_typeRestifyApp/_routes.js: -------------------------------------------------------------------------------- 1 | module.exports = function(app) { 2 | var user = require('./controllers/userController'); 3 | 4 | app.get('/', function(req, res, next) { 5 | return res.send("WELCOME TO REST API"); 6 | }); 7 | 8 | app.post('/createUser', user.createUser); 9 | }; 10 | -------------------------------------------------------------------------------- /app/templates/_typeRestifyApp/_userController.js: -------------------------------------------------------------------------------- 1 | //This Controller deals with all functionalities of User 2 | 3 | function userController () { 4 | var User = require('../models/userSchema'); 5 | 6 | // Creating New User 7 | this.createUser = function (req, res, next) { 8 | var name = req.params.name; 9 | var email = req.params.email; 10 | var age = req.params.age; 11 | var city = req.params.city; 12 | 13 | User.create({name:name,email:email,age:age,city:city}, function(err, result) { 14 | if (err) { 15 | console.log(err); 16 | return res.send({'error':err}); 17 | } 18 | else { 19 | return res.send({'result':result,'status':'successfully saved'}); 20 | } 21 | }); 22 | }; 23 | return this; 24 | 25 | } 26 | 27 | module.exports = new userController(); 28 | -------------------------------------------------------------------------------- /app/templates/_typeRestifyApp/_userSchema.js: -------------------------------------------------------------------------------- 1 | // Model for the Student 2 | module.exports = (function userSchema () { 3 | 4 | var mongoose = require('../db').mongoose; 5 | 6 | var schema = { 7 | name: {type: String, required: true}, 8 | email: {type: String, required: true}, 9 | age: {type: String, required: true}, 10 | city: {type: String, required: true} 11 | }; 12 | var collectionName = 'user'; 13 | var userSchema = mongoose.Schema(schema); 14 | var User = mongoose.model(collectionName, userSchema); 15 | 16 | return User; 17 | })(); 18 | -------------------------------------------------------------------------------- /app/templates/_typeSimpleWebApp/_README.md: -------------------------------------------------------------------------------- 1 | # <%= site_name %> 2 | 3 | **Project Setup** 4 | 5 | ## Installation 6 | 7 | *You need to have [NodeJS](http://nodejs.org/)* 8 | 9 | *Type below commands in terminal* 10 | 11 | ``````` 12 | npm install -g yo 13 | 14 | npm install -g gulp 15 | ``````` 16 | 17 | ### Install [smacss generator](https://github.com/FuelFrontend/generator-smacss) 18 | 19 | *Type below commands in terminal* 20 | 21 | ``````` 22 | npm install -g generator-smacss 23 | ``````` 24 | 25 | **Clone the repo & cd into it** 26 | 27 | 28 | ``````` 29 | sudo npm install 30 | 31 | ``````` 32 | 33 | **Finally** 34 | 35 | *Type below command in terminal* 36 | 37 | ``````` 38 | gulp 39 | ``````` 40 | 41 | **Application Directory Structure** 42 | 43 | `````````` 44 | ├── app 45 | │ ├── images 46 | │ ├── fonts 47 | │ ├── js 48 | │ │ └── application.js 49 | │ ├── css 50 | │ │ └── master.css 51 | │ ├── scss 52 | │ │ └── modules 53 | │ │ │ └── module-name.scss 54 | │ │ └── pages 55 | │ │ │ └── page-landing.scss 56 | │ │ └── base.scss 57 | │ │ └── layout.css 58 | │ │ └── mixins.css 59 | │ │ └── master.css 60 | │ │ └── reset.css 61 | │ │ └── variables.css 62 | │ └── index.html 63 | ├── node_modules 64 | ├── gulpfile.js 65 | ├── package.json 66 | ├── .gitattributes 67 | └── .gitignore 68 | `````````` 69 | -------------------------------------------------------------------------------- /app/templates/_typeSimpleWebApp/_gulpfile.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | /*----------------------------------------------------------- 3 | GULP: DEPENDENCIES 4 | Define the variables of your dependencies in this section 5 | -----------------------------------------------------------*/ 6 | var gulp = require('gulp'), 7 | requireDir = require('require-dir'); 8 | 9 | /*----------------------------------------------------------- 10 | GULP: TASKS 11 | Necessary gulp tasks required to run your application like 12 | magic. Feel free to add more tasks inside tasks folder 13 | -----------------------------------------------------------*/ 14 | var tasks = requireDir('./tasks'); 15 | 16 | /*----------------------------------------------------------- 17 | GULP : WATCH TASKS 18 | -----------------------------------------------------------*/ 19 | gulp.task('default', ['sass', 'browser-sync'], function () { 20 | gulp.watch("app/scss/*.scss", ['sass']); 21 | }); 22 | -------------------------------------------------------------------------------- /app/templates/_typeSimpleWebApp/_index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | <%= site_name %> 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 |

Yo, Smacss!

17 |

Perfectionist Frontend Generator

18 | 19 | 20 | 21 |
22 |

It's nice to meet you :)

23 |
24 | 25 | 26 | 29 | 30 | 31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /app/templates/_typeSimpleWebApp/_package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "<%= site_name %>", 3 | "version": "0.0.1", 4 | "description": "Application description goes here", 5 | "licenses": "enter your license type here", 6 | "repository": "your repository url goes here", 7 | "devDependencies": { 8 | "gulp": "~3.9.0", 9 | "gulp-sass": "~2.1.1", 10 | "gulp-concat": "~2.4.3", 11 | "gulp-autoprefixer": "^2.3.1", 12 | "browser-sync": "~1.9.1", 13 | "require-dir": "^0.3.0", 14 | "portscanner": "^1.0.0" 15 | }, 16 | "engines": { 17 | "node": ">=0.10.0" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /app/templates/common/_404.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Page Not Found :( 6 | 122 | 123 | 124 |
125 |

Not found :(

126 |

Sorry, but the page you were trying to view does not exist.

127 |

It looks like this was the result of either:

128 |
    129 |
  • a mistyped address
    • 130 |
  • an out-of-date link
    • 131 |
132 | 135 | 136 |
137 | 138 | 139 | -------------------------------------------------------------------------------- /app/templates/common/_editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | charset = utf-8 9 | trim_trailing_whitespace = true 10 | insert_final_newline = true 11 | translate_tabs_to_spaces: true 12 | 13 | [*.md] 14 | trim_trailing_whitespace = false 15 | -------------------------------------------------------------------------------- /app/templates/common/_favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FuelFrontend/generator-smacss/02ae69e117cf205a2713bc41c75638ff9edd3ace/app/templates/common/_favicon.ico -------------------------------------------------------------------------------- /app/templates/common/_gulpfile.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | /*----------------------------------------------------------- 3 | GULP: DEPENDENCIES 4 | Define the variables of your dependencies in this section 5 | -----------------------------------------------------------*/ 6 | var gulp = require('gulp'), 7 | gulploadPlugins = require('gulp-load-plugins'), 8 | requireDir = require('require-dir'); 9 | 10 | var tasks = requireDir('./tasks'); 11 | 12 | var plugins = gulploadPlugins(); 13 | 14 | /*========================================================== 15 | GULP: ENVIRONMENT :: Gulp Default Tasks -- build 16 | ===========================================================*/ 17 | 18 | gulp.task('default', ['build']); 19 | 20 | 21 | /*----------------------------------------------------------- 22 | GULP : HELPERS 23 | Quick tasks to make your life easier! 24 | -----------------------------------------------------------*/ 25 | 26 | // GULP: HELPERS :: List all gulp plugin tasks 27 | gulp.task('help', plugins.taskListing); 28 | -------------------------------------------------------------------------------- /app/templates/common/_master.css: -------------------------------------------------------------------------------- 1 | /* ----------------------------------------------------------------------- 2 | Version: 0.1 3 | 4 | SMACSS [Scalable Modular Architecture for CSS] 5 | Reference: http://smacss.com/ 6 | 7 | Categorizing: 8 | 1. Base - Defaults elements, attribute selectors, pseudo-class selectors styling [example: body, form, a] 9 | 2. Layout - Divide the page into sections [example: header, footer] [prefix: l-] 10 | 3. Modules - Reusable, Modular parts of design [example: sidebar, popup] [prefix: module-] 11 | 4. State - How our module or layouts look in particular state [example: expanded, active] [prefix: is-] 12 | 5. Theme - Look and feel of subcomponent based on theme [example: dark, light] [prefix: theme-] 13 | 6. Pages - Page specific styles. [prefix: page-] 14 | ----------------------------------------------------------------------- */ 15 | body { 16 | background: #009688; 17 | } 18 | -------------------------------------------------------------------------------- /app/templates/common/_robots.txt: -------------------------------------------------------------------------------- 1 | User-Agent: * 2 | Disallow: 3 | Disallow: /node_modules 4 | Disallow: /bower_components 5 | -------------------------------------------------------------------------------- /app/templates/dot-files/_bowerrc: -------------------------------------------------------------------------------- 1 | { 2 | "directory" : "bower_components" 3 | } 4 | -------------------------------------------------------------------------------- /app/templates/dot-files/_gitattributes: -------------------------------------------------------------------------------- 1 | * text=auto 2 | -------------------------------------------------------------------------------- /app/templates/dot-files/_gitignore: -------------------------------------------------------------------------------- 1 | .sass-cache 2 | .DS_Store 3 | npm-debug.log 4 | node_modules/ 5 | zip/ 6 | bower_components/ 7 | build/ 8 | -------------------------------------------------------------------------------- /app/templates/dot-files/_jshintignore: -------------------------------------------------------------------------------- 1 | app/js/lib/ 2 | -------------------------------------------------------------------------------- /app/templates/dot-files/_jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | "node": true, 3 | "esnext": true, 4 | "bitwise": true, 5 | "camelcase": true, 6 | "curly": true, 7 | "eqeqeq": true, 8 | "immed": true, 9 | "indent": 2, 10 | "latedef": true, 11 | "newcap": true, 12 | "noarg": true, 13 | "quotmark": "single", 14 | "regexp": true, 15 | "undef": true, 16 | "unused": true, 17 | "strict": true, 18 | "trailing": true, 19 | "smarttabs": true, 20 | "white": true 21 | } 22 | -------------------------------------------------------------------------------- /app/templates/js/_angular_application.js: -------------------------------------------------------------------------------- 1 | /*================================================================ 2 | App <%= site_name %> 3 | ==================================================================*/ 4 | 'use strict'; 5 | 6 | var app = angular.module('<%= site_name %>', ['ngRoute']); 7 | 8 | app.config(['$routeProvider', function($routeProvider) { 9 | $routeProvider 10 | .when('', { 11 | controller: '', 12 | templateUrl: '' 13 | }) 14 | 15 | .otherwise({ redirectTo: '/' }); 16 | }]); 17 | -------------------------------------------------------------------------------- /app/templates/js/_application.js: -------------------------------------------------------------------------------- 1 | /**================================================ 2 | JS : MY CUSTOM SCRIPTS 3 | ===================================================*/ 4 | -------------------------------------------------------------------------------- /app/templates/js/_controller.js: -------------------------------------------------------------------------------- 1 | /*================================================================ 2 | Controller = <%= classedName %>Ctrl 3 | ==================================================================*/ 4 | 5 | app.controller('<%= classedName %>Ctrl', ['$scope', function ($scope) { 6 | 'use strict'; 7 | 8 | console.log('Controller === <%= classedName %>Ctrl'); 9 | }]); 10 | 11 | /*----- End of Controller = <%= classedName %>Ctrl ------*/ 12 | -------------------------------------------------------------------------------- /app/templates/js/_directive.js: -------------------------------------------------------------------------------- 1 | /*================================================================ 2 | Directive = <%= cameledName %> 3 | ==================================================================*/ 4 | 5 | app.directive('<%= cameledName %>', ['$rootScope', function ($rootScope) { 6 | 'use strict'; 7 | 8 | return { 9 | restrict: 'A', 10 | link: function (scope, element, attrs) { 11 | console.log('Directive === <%= cameledName %>'); 12 | } 13 | }; 14 | 15 | }]); 16 | 17 | /*----- End of Directive = <%= cameledName %> ------*/ 18 | -------------------------------------------------------------------------------- /app/templates/js/_filter.js: -------------------------------------------------------------------------------- 1 | /*================================================================ 2 | Filter = <%= cameledName %> 3 | ==================================================================*/ 4 | 5 | app.filter('<%= cameledName %>', function () { 6 | 'use strict'; 7 | 8 | return function (input) { 9 | console.log('Filter == <%= cameledName %>'); 10 | return; 11 | }; 12 | }); 13 | 14 | /*----- End of Filter = <%= cameledName %> ------*/ 15 | -------------------------------------------------------------------------------- /app/templates/js/_service.js: -------------------------------------------------------------------------------- 1 | /*================================================================ 2 | Service = <%= cameledName %> 3 | ==================================================================*/ 4 | 5 | app.service('<%= cameledName %>', ['$rootScope', '$q', '$http', function ($rootScope, $q, $http) { 6 | 'use strict'; 7 | 8 | //GET method 9 | this.getUserData = function (url) { 10 | var defer = $q.defer(); 11 | 12 | $http.get(url) 13 | .success(function (data) { 14 | deferred.resolve(data); 15 | }) 16 | .error(function (err) { 17 | deferred.reject(err); 18 | }); 19 | 20 | return deferred.promise; 21 | }; 22 | 23 | //POST method 24 | this.postUserData = function (userData) { 25 | var defer = $q.defer(); 26 | 27 | var url = ''; //POST url 28 | 29 | $http.post({ 30 | url : url, 31 | data : userData 32 | }) 33 | .success(function (data) { 34 | deferred.resolve(data); 35 | }) 36 | .error(function (err) { 37 | deferred.reject(err); 38 | }); 39 | 40 | return deferred.promise; 41 | }; 42 | 43 | }]); 44 | 45 | /*----- End of Service = <%= cameledName %> ------*/ 46 | -------------------------------------------------------------------------------- /app/templates/partials/_footer.html: -------------------------------------------------------------------------------- 1 | 2 | 5 | -------------------------------------------------------------------------------- /app/templates/partials/_header.html: -------------------------------------------------------------------------------- 1 | 2 |
3 |

Yo, Smacss!

4 |

Perfectionist Frontend Generator

5 |
6 | -------------------------------------------------------------------------------- /app/templates/scss/_base.scss: -------------------------------------------------------------------------------- 1 | /*------------------------------------------------- 2 | SMACSS: BASE 3 | -------------------------------------------------*/ 4 | body { 5 | background: #22272a; 6 | color: #ced9e0; 7 | font-family: $font-OpenSans; 8 | } 9 | 10 | a { 11 | color: $color-gray; 12 | } 13 | a:hover { 14 | color: #ced9e0; 15 | } 16 | -------------------------------------------------------------------------------- /app/templates/scss/_layout.scss: -------------------------------------------------------------------------------- 1 | /*------------------------------------------------- 2 | SMACSS: LAYOUT - COMMON 3 | -------------------------------------------------*/ 4 | header, 5 | section, 6 | footer { 7 | max-width: 800px; 8 | margin: 50px auto; 9 | } 10 | 11 | /*------------------------------------------------- 12 | SMACSS: LAYOUT - HEADER 13 | -------------------------------------------------*/ 14 | header { 15 | border-top: 2px solid $color-red; 16 | padding: 10px; 17 | color: $color-red; 18 | 19 | .title { 20 | font-size: em(30); // em to px convertor 21 | } 22 | 23 | .caption { 24 | padding-top: 10px; 25 | font-size: 14px; 26 | } 27 | } 28 | 29 | /*------------------------------------------------- 30 | SMACSS: LAYOUT - SECTION 31 | -------------------------------------------------*/ 32 | section { 33 | padding: 40px 20px; 34 | color: $color-white; 35 | font-size: em(70); 36 | font-weight: 300; 37 | } 38 | 39 | /*------------------------------------------------- 40 | SMACSS: LAYOUT - FOOTER 41 | -------------------------------------------------*/ 42 | footer { 43 | color: $color-gray; 44 | font-size: 11px; 45 | text-align: center; 46 | padding: 10px; 47 | width: 100%; 48 | } 49 | -------------------------------------------------------------------------------- /app/templates/scss/_master.scss: -------------------------------------------------------------------------------- 1 | /* ----------------------------------------------------------------------- 2 | Version: 0.1 3 | 4 | SMACSS [Scalable Modular Architecture for CSS] 5 | Reference: http://smacss.com/ 6 | 7 | Categorizing: 8 | 1. Base - Defaults elements, attribute selectors, pseudo-class selectors styling [example: body, form, a] 9 | 2. Layout - Divide the page into sections [example: header, footer] [prefix: l-] 10 | 3. Modules - Reusable, Modular parts of design [example: sidebar, popup] [prefix: module-] 11 | 4. State - How our module or layouts look in particular state [example: expanded, active] [prefix: is-] 12 | 5. Theme - Look and feel of subcomponent based on theme [example: dark, light] [prefix: theme-] 13 | 6. Pages - Page specific styles. [prefix: page-] 14 | ----------------------------------------------------------------------- */ 15 | 16 | /*------------------------------------------------- 17 | MASTER: IMPORTING STYLESHEETS 18 | -------------------------------------------------*/ 19 | @import "reset"; 20 | @import "variables"; 21 | @import "mixins"; 22 | @import "base"; 23 | 24 | @import "layout"; 25 | 26 | @import "modules/module"; 27 | @import "pages/page-landing"; 28 | -------------------------------------------------------------------------------- /app/templates/scss/_mixins.scss: -------------------------------------------------------------------------------- 1 | /* 2 | TODO :: 3 | [] Integrate Bourbon to make use of most mixins - http://bourbon.io/docs/ 4 | */ 5 | /*------------------------------------------------- 6 | MIXIN :: CLEARFIX 7 | -------------------------------------------------*/ 8 | @mixin clearfix() { 9 | clear: both; 10 | &:before, 11 | &:after { 12 | content: ""; 13 | display: table; 14 | } 15 | &:after { 16 | clear: both; 17 | } 18 | } 19 | 20 | /*------------------------------------------------- 21 | MIXIN :: PIXEL TO EM CONVERTOR 22 | -------------------------------------------------*/ 23 | $browser-context: 16; // Default 24 | @function em($pixels, $context: $browser-context) { 25 | @return #{$pixels/$context}em 26 | } 27 | 28 | /*------------------------------------------------- 29 | MIXIN :: BORDER RADIUS 30 | -------------------------------------------------*/ 31 | @mixin borderRadius($radius) { 32 | -webkit-border-radius: $radius; 33 | -moz-border-radius: $radius; 34 | -ms-border-radius: $radius; 35 | border-radius: $radius; 36 | } 37 | @mixin borderRadiusCombination($top-left, $top-right, $bottom-right, $bottom-left) { 38 | -webkit-border-radius: $top-left $top-right $bottom-right $bottom-left; 39 | -moz-border-radius: $top-left $top-right $bottom-right $bottom-left; 40 | -ms-border-radius: $top-left $top-right $bottom-right $bottom-left; 41 | border-radius: $top-left $top-right $bottom-right $bottom-left; 42 | } 43 | 44 | /*------------------------------------------------- 45 | MIXIN :: TRANSITION 46 | -------------------------------------------------*/ 47 | @mixin transition($transition-property, $transition-time, $method) { 48 | -webkit-transition: $transition-property $transition-time $method; 49 | -moz-transition: $transition-property $transition-time $method; 50 | -ms-transition: $transition-property $transition-time $method; 51 | -o-transition: $transition-property $transition-time $method; 52 | transition: $transition-property $transition-time $method; 53 | } 54 | 55 | /*------------------------------------------------- 56 | MIXIN :: BOX SHADOW 57 | -------------------------------------------------*/ 58 | @mixin boxShadow($top, $left, $blur, $color, $inset: false) { 59 | @if $inset { 60 | -webkit-box-shadow:inset $top $left $blur $color; 61 | -moz-box-shadow:inset $top $left $blur $color; 62 | box-shadow:inset $top $left $blur $color; 63 | } @else { 64 | -webkit-box-shadow: $top $left $blur $color; 65 | -moz-box-shadow: $top $left $blur $color; 66 | box-shadow: $top $left $blur $color; 67 | } 68 | } 69 | 70 | /*------------------------------------------------- 71 | MIXIN :: SCALE - TRANSFORM 72 | -------------------------------------------------*/ 73 | @mixin scale($scale) { 74 | transform: scale($scale); 75 | -moz-transform: scale($scale); 76 | -webkit-transform: scale($scale); 77 | } 78 | 79 | /*------------------------------------------------- 80 | MIXIN :: ROTATE - TRANSFORM 81 | -------------------------------------------------*/ 82 | @mixin rotate($rotate) { 83 | transform: rotate($rotate); 84 | -moz-transform: rotate($rotate); 85 | -webkit-transform: rotate($rotate); 86 | } 87 | 88 | /*------------------------------------------------- 89 | MIXIN :: FONT STYLE 90 | -------------------------------------------------*/ 91 | //Font styling font-family, font-size and color of the font 92 | @mixin fontStyle($fontFamily, $fontSize, $fontColor) { 93 | font-family: $fontFamily; 94 | font-size: $fontSize; 95 | color: $fontColor; 96 | } 97 | -------------------------------------------------------------------------------- /app/templates/scss/_module.scss: -------------------------------------------------------------------------------- 1 | // TODO: Add modules to a seperate folder 2 | -------------------------------------------------------------------------------- /app/templates/scss/_page_landing.scss: -------------------------------------------------------------------------------- 1 | /*------------------------------------------------- 2 | SMACSS: PAGE - LANDING 3 | -------------------------------------------------*/ 4 | 5 | .page-landing { 6 | 7 | } 8 | -------------------------------------------------------------------------------- /app/templates/scss/_reset.scss: -------------------------------------------------------------------------------- 1 | /* http://meyerweb.com/eric/tools/css/reset/ 2 | v2.0 | 20110126 3 | License: none (public domain) 4 | */ 5 | 6 | html, body, div, span, applet, object, iframe, 7 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 8 | a, abbr, acronym, address, big, cite, code, 9 | del, dfn, em, img, ins, kbd, q, s, samp, 10 | small, strike, strong, sub, sup, tt, var, 11 | b, u, i, center, 12 | dl, dt, dd, ol, ul, li, 13 | fieldset, form, label, legend, 14 | table, caption, tbody, tfoot, thead, tr, th, td, 15 | article, aside, canvas, details, embed, 16 | figure, figcaption, footer, header, hgroup, 17 | menu, nav, output, ruby, section, summary, 18 | time, mark, audio, video { 19 | margin: 0; 20 | padding: 0; 21 | border: 0; 22 | font-size: 100%; 23 | font: inherit; 24 | vertical-align: baseline; 25 | } 26 | /* HTML5 display-role reset for older browsers */ 27 | article, aside, details, figcaption, figure, 28 | footer, header, hgroup, menu, nav, section { 29 | display: block; 30 | } 31 | body { 32 | line-height: 1; 33 | } 34 | ol, ul { 35 | list-style: none; 36 | } 37 | blockquote, q { 38 | quotes: none; 39 | } 40 | blockquote:before, blockquote:after, 41 | q:before, q:after { 42 | content: ''; 43 | content: none; 44 | } 45 | table { 46 | border-collapse: collapse; 47 | border-spacing: 0; 48 | } 49 | -------------------------------------------------------------------------------- /app/templates/scss/_variables.scss: -------------------------------------------------------------------------------- 1 | /*------------------------------------------------- 2 | SMACSS: VARIABLES 3 | -------------------------------------------------*/ 4 | /* Colors */ 5 | $color-white: #fff; 6 | $color-black: #000; 7 | $color-red: #e85151; 8 | $color-gray: #5A5F62; 9 | 10 | /* Font */ 11 | $font-OpenSans: 'Open Sans', 'Arial', sans-serif; 12 | -------------------------------------------------------------------------------- /app/templates/tasks/_bower.js: -------------------------------------------------------------------------------- 1 | /*========================================================== 2 | GULP: APP TASKS :: Bower file include 3 | ===========================================================*/ 4 | var gulp = require('gulp'), 5 | bower = require('bower'), 6 | gulpIf = require('gulp-if'), 7 | underscore = require('underscore'), 8 | underscoreStr = require('underscore.string'), 9 | sourcemaps = require('gulp-sourcemaps'), 10 | filter = require('gulp-filter'), 11 | gulploadPlugins = require('gulp-load-plugins'); 12 | 13 | var plugins = gulploadPlugins(); 14 | var exclude = []; 15 | 16 | var filterByExtension = function(extension){ 17 | return filter(function(file){ 18 | return file.path.match(new RegExp('.' + extension + '$')); 19 | }); 20 | }; 21 | 22 | var config = require('./config'); 23 | 24 | // TASKS 25 | 26 | gulp.task('bower', function(cb){ 27 | console.log(config.notify.update('\n--------- Running Bower Task --------------------------------------------\n')); 28 | bower.commands.install([], {save: true}, {}) 29 | .on('end', function(installed){ 30 | //console.log(update('Bower installation completed')); 31 | cb(); // notify gulp that this task is finished 32 | }); 33 | }); 34 | 35 | gulp.task('bundle-libraries', ['bower'], function(){ 36 | var bowerFile = require('../bower.json'); 37 | var bowerPackages = bowerFile.dependencies; 38 | var bowerDir = '../bower_components'; 39 | var packagesOrder = []; 40 | var mainFiles = []; 41 | 42 | // Function for adding package name into packagesOrder array in the right order 43 | function addPackage(name){ 44 | // package info and dependencies 45 | var info = require(bowerDir + '/' + name + '/bower.json'); 46 | var dependencies = info.dependencies; 47 | 48 | // add dependencies by repeat the step 49 | if(!!dependencies){ 50 | underscore.each(dependencies, function(value, key){ 51 | if(exclude.indexOf(key) === -1){ 52 | addPackage(key); 53 | } 54 | }); 55 | } 56 | 57 | // and then add this package into the packagesOrder array if they are not exist yet 58 | if(packagesOrder.indexOf(name) === -1){ 59 | packagesOrder.push(name); 60 | } 61 | } 62 | 63 | // calculate the order of packages 64 | underscore.each(bowerPackages, function(value, key){ 65 | if(exclude.indexOf(key) === -1){ // add to packagesOrder if it's not in exclude 66 | addPackage(key); 67 | } 68 | }); 69 | 70 | // get the main files of packages base on the order 71 | underscore.each(packagesOrder, function(bowerPackage){ 72 | var info = require(bowerDir + '/' + bowerPackage + '/bower.json'); 73 | var main = info.main; 74 | var mainFile = main; 75 | 76 | // get only the .js file if mainFile is an array 77 | if(underscore.isArray(main)){ 78 | underscore.each(main, function(file){ 79 | if(underscoreStr.endsWith(file, '.js')){ 80 | mainFile = file; 81 | } 82 | }); 83 | } 84 | 85 | // make the full path 86 | mainFile = bowerDir + '/' + bowerPackage + '/' + mainFile; 87 | 88 | // only add the main file if it's a js file 89 | if(underscoreStr.endsWith(mainFile, '.js')){ 90 | mainFiles.push(mainFile.split('../')[1]); //.split() to remove '../' to work properly 91 | } 92 | }); 93 | 94 | // run the gulp stream 95 | return gulp.src(mainFiles) 96 | .pipe(sourcemaps.init({loadMaps : true})) 97 | .pipe(plugins.concat('bower.js')) 98 | .pipe(gulpIf(config.production, plugins.uglify())) 99 | .pipe(gulpIf(config.production, sourcemaps.write('./'))) 100 | .pipe(gulp.dest(config.build.js)); 101 | }); 102 | -------------------------------------------------------------------------------- /app/templates/tasks/_browser_sync.js: -------------------------------------------------------------------------------- 1 | /*========================================================== 2 | GULP: APP TASKS :: Browser sync to sync with browser 3 | ===========================================================*/ 4 | var gulp = require('gulp'), 5 | browserSync = require('browser-sync'); 6 | 7 | var config = require('./config'); 8 | 9 | gulp.task('browser-sync', function () { 10 | browserSync.init([config.build.root + '*/*.*', config.build.root + '**/*.*'], 11 | { 12 | server : { baseDir : './build' } 13 | }); 14 | }); 15 | -------------------------------------------------------------------------------- /app/templates/tasks/_clean.js: -------------------------------------------------------------------------------- 1 | // GULP: HELPERS :: Clean - remove files and folder in build 2 | var gulp = require('gulp'), 3 | del = require('del'); 4 | 5 | var config = require('./config'); 6 | 7 | gulp.task('clean', function () { 8 | console.log(config.notify.update('\n--------- Clean:Build Folder ------------------------------------------\n')); 9 | 10 | del('build/', function (err) { 11 | console.log(config.notify.update('All are files deleted from the build folder')); 12 | }); 13 | }); 14 | -------------------------------------------------------------------------------- /app/templates/tasks/_config.js: -------------------------------------------------------------------------------- 1 | var chalk = require('chalk'); 2 | 3 | /*----------------------------------------------------------- 4 | GULP: APP CONFIGURATION 5 | Source, Build folder and other application configuration 6 | -----------------------------------------------------------*/ 7 | var config = function() { 8 | 9 | // Source Path 10 | var src = { 11 | root : 'app', 12 | css : 'app/css', 13 | scss : 'app/scss', 14 | js : 'app/js', 15 | images : 'app/images', 16 | fonts : 'app/fonts', 17 | bower : './bower_components', 18 | zip : './zip' 19 | }; 20 | 21 | // Build Path 22 | var build = { 23 | root : 'build', 24 | css : 'build/css', 25 | js : 'build/js', 26 | images : 'build/images', 27 | fonts : 'build/fonts' 28 | }; 29 | 30 | // Server Configuration 31 | var serverConfiguration = { 32 | host : 'localhost', 33 | port : 3000, 34 | open : true, 35 | livereload : { 36 | enable: true, 37 | port: 35729 38 | } 39 | }; 40 | 41 | // Default production mode set to false 42 | var production = false; 43 | 44 | // Bower Configuration 45 | var bowerConfiguration = { 46 | paths: { 47 | bowerDirectory : src.bower, 48 | bowerrc : '.bowerrc', 49 | bowerJson : 'bower.json' 50 | } 51 | }; 52 | 53 | // Minification options for HTML 54 | var opts = { 55 | comments : false, 56 | quotes : true, 57 | spare : true, 58 | empty : true, 59 | cdata : true 60 | }; 61 | 62 | // Chalk config 63 | var notify = { 64 | error : chalk.red.bold, 65 | warning : chalk.black.bold.bgYellow, 66 | update : chalk.yellow.underline, 67 | success : chalk.green 68 | }; 69 | 70 | // CSS autoprefix config 71 | var browserVersion = ['last 2 versions']; 72 | 73 | return { 74 | source: src, 75 | build: build, 76 | serverConfiguration: serverConfiguration, 77 | production: production, 78 | bowerConfiguration: bowerConfiguration, 79 | opts: opts, 80 | notify: notify, 81 | browserVersion: browserVersion 82 | }; 83 | }; 84 | 85 | module.exports = config(); 86 | -------------------------------------------------------------------------------- /app/templates/tasks/_environment.js: -------------------------------------------------------------------------------- 1 | /*----------------------------------------------------------- 2 | GULP : ENVIRONMENT 3 | Set your environment here, as of now it's development and 4 | production. You can also include testing and staging 5 | -----------------------------------------------------------*/ 6 | /*========================================================== 7 | GULP: ENVIRONMENT :: Gulp build Tasks - dev, production 8 | ===========================================================*/ 9 | var gulp = require('gulp'), 10 | runSequence = require('run-sequence'); 11 | 12 | var config = require('./config'); 13 | 14 | gulp.task('build', function () { 15 | 16 | console.log(config.notify.update('\n--------- Build Development Mode --------------------------------------\n')); 17 | runSequence('html', 'scripts', 'styles', 'bundle-libraries', 'image', 'fonts', 'server', 'watch'); 18 | }); 19 | 20 | gulp.task('prod', function () { 21 | 22 | console.log(config.notify.update('\n--------- Build Production Mode ---------------------------------------\n')); 23 | config.production = true; 24 | runSequence('html', 'scripts', 'styles', 'bundle-libraries', 'image', 'fonts', 'server', 'watch'); 25 | 26 | }); 27 | -------------------------------------------------------------------------------- /app/templates/tasks/_fonts.js: -------------------------------------------------------------------------------- 1 | /*=========================================================== 2 | GULP : APP TASKS :: FONTS 3 | ===========================================================*/ 4 | var gulp = require('gulp'), 5 | gulploadPlugins = require('gulp-load-plugins'); 6 | 7 | var plugins = gulploadPlugins(); 8 | var config = require('./config'); 9 | 10 | gulp.task('fonts', function () { 11 | 12 | console.log(config.notify.update('\n--------- Running Fonts tasks --------------------------------------------\n')); 13 | return gulp.src([config.source.fonts + '/*.*', config.source.fonts + '/**/*.*']) 14 | .pipe(plugins.size()) 15 | .pipe(gulp.dest(config.build.fonts)); 16 | }); 17 | -------------------------------------------------------------------------------- /app/templates/tasks/_html.js: -------------------------------------------------------------------------------- 1 | /*=========================================================== 2 | GULP : APP TASKS :: HTML -- Minify html to build 3 | ===========================================================*/ 4 | var gulp = require('gulp'), 5 | gulpIf = require('gulp-if'), 6 | gulploadPlugins = require('gulp-load-plugins'); 7 | 8 | var plugins = gulploadPlugins(); 9 | var config = require('./config'); 10 | 11 | gulp.task('html', function () { 12 | 13 | console.log(config.notify.update('\n--------- Running HTML tasks ------------------------------------------\n')); 14 | return gulp.src([config.source.root + '/*.html', config.source.root + '/**/*.html']) 15 | .pipe(plugins.fileInclude({ 16 | prefix: '@@', 17 | basepath: '@file' 18 | })) 19 | .pipe(gulpIf(config.production, plugins.minifyHtml(config.opts))) 20 | .pipe(plugins.size()) 21 | .pipe(gulp.dest(config.build.root)); 22 | }); 23 | -------------------------------------------------------------------------------- /app/templates/tasks/_image.js: -------------------------------------------------------------------------------- 1 | /*=========================================================== 2 | GULP: APP TASKS :: Images minification 3 | ===========================================================*/ 4 | var gulp = require('gulp'), 5 | gulploadPlugins = require('gulp-load-plugins'); 6 | 7 | var plugins = gulploadPlugins(); 8 | var config = require('./config'); 9 | 10 | gulp.task('image', function () { 11 | 12 | console.log(config.notify.update('\n--------- Image Minification --------------------------------------------\n')); 13 | return gulp.src([config.source.images + '/*.*', config.source.images + '/**/*.*']) 14 | .pipe(plugins.imagemin()) 15 | .pipe(plugins.size()) 16 | .pipe(gulp.dest(config.build.images)); 17 | }); 18 | -------------------------------------------------------------------------------- /app/templates/tasks/_scripts.js: -------------------------------------------------------------------------------- 1 | /*=========================================================== 2 | GULP: APP TASKS :: Script -- js hint, uglify & concat 3 | ===========================================================*/ 4 | var gulp = require('gulp'), 5 | gulpIf = require('gulp-if'), 6 | jshintStylish = require('jshint-stylish'), 7 | gulploadPlugins = require('gulp-load-plugins'); 8 | 9 | var plugins = gulploadPlugins(); 10 | var config = require('./config'); 11 | 12 | gulp.task('scripts', function () { 13 | 14 | console.log(config.notify.update('\n--------- Running SCRIPT tasks -----------------------------------------\n')); 15 | return gulp.src([config.source.js + '/*.js', config.source.js + '/**/*.js']) 16 | .pipe(plugins.jshint('.jshintrc')) 17 | .pipe(plugins.jshint.reporter(jshintStylish)) 18 | .pipe(plugins.concat('application.js')) 19 | .pipe(gulpIf(config.production, plugins.uglify())) 20 | .pipe(plugins.size()) 21 | .pipe(gulp.dest(config.build.js)); 22 | }); 23 | -------------------------------------------------------------------------------- /app/templates/tasks/_server.js: -------------------------------------------------------------------------------- 1 | /*=========================================================== 2 | GULP : APP TASKS :: Start server and live reload 3 | ===========================================================*/ 4 | var gulp = require('gulp'), 5 | gulploadPlugins = require('gulp-load-plugins'); 6 | 7 | var plugins = gulploadPlugins(); 8 | var config = require('./config'); 9 | var portScanner = require('portscanner'); 10 | 11 | gulp.task('server', function () { 12 | console.log(config.notify.update('\n--------- Server started at http://localhost:'+ config.serverConfiguration.port +' ------------------------\n')); 13 | var serverPort = config.serverConfiguration.port; 14 | portScanner.findAPortNotInUse(serverPort, serverPort + 10, '127.0.0.1', function(error, port) { 15 | 16 | config.serverConfiguration.port = port; 17 | var lrPort = config.serverConfiguration.livereload.port; 18 | portScanner.findAPortNotInUse(lrPort, lrPort + 10, '127.0.0.1', function(error, port) { 19 | 20 | config.serverConfiguration.livereload.port = port; 21 | 22 | return gulp.src('build') 23 | .pipe(plugins.webserver(config.serverConfiguration)); 24 | }); 25 | }); 26 | }); 27 | -------------------------------------------------------------------------------- /app/templates/tasks/_styles.js: -------------------------------------------------------------------------------- 1 | /*=========================================================== 2 | GULP : APP TASKS :: CSS & SASS -- minify, concat 3 | ===========================================================*/ 4 | var gulp = require('gulp'), 5 | config = require('./config'), 6 | gulpIf = require('gulp-if'), 7 | gulploadPlugins = require('gulp-load-plugins'), 8 | autoprefixer = require('gulp-autoprefixer'); 9 | 10 | var plugins = gulploadPlugins(); 11 | var config = require('./config'); 12 | 13 | var callback = function (err) { 14 | console.log(config.notify.error('\n--------- SASS file has error clear it to see changes, check the log below -------------\n')); 15 | console.log(err); 16 | }; 17 | 18 | gulp.task('sass', function () { 19 | 20 | console.log(config.notify.update('\n--------- Running SASS tasks -------------------------------------------')); 21 | return gulp.src(['app/scss/master.scss']) 22 | .pipe(plugins.sass({ onError: callback })) 23 | .pipe(plugins.size()) 24 | .pipe(gulp.dest(config.source.css)); 25 | }); 26 | 27 | gulp.task('styles', ['sass'], function () { 28 | 29 | console.log(config.notify.update('\n--------- Running CSS tasks --------------------------------------------\n')); 30 | return gulp.src([config.source.css + '/**/*.css']) 31 | .pipe(autoprefixer({ 32 | browsers: config.browserVersion, 33 | cascade: false 34 | })) 35 | .pipe(gulpIf(config.production, plugins.minifyCss())) 36 | .pipe(plugins.concat('master.css')) 37 | .pipe(plugins.size()) 38 | .pipe(gulp.dest(config.build.css)); 39 | }); 40 | -------------------------------------------------------------------------------- /app/templates/tasks/_watch.js: -------------------------------------------------------------------------------- 1 | /*=========================================================== 2 | GULP: APP TASKS :: Watch -- all files 3 | ===========================================================*/ 4 | var gulp = require('gulp'), 5 | runSequence = require('run-sequence'), 6 | gulploadPlugins = require('gulp-load-plugins'); 7 | 8 | var plugins = gulploadPlugins(); 9 | 10 | var config = require('./config'); 11 | 12 | gulp.task('watch', function () { 13 | 14 | console.log(config.notify.update('\n--------- Watching All Files -------------------------------------------\n')); 15 | var HTML = gulp.watch(['app/*.html', 'app/**/*.html'], ['html']), 16 | JS = gulp.watch(['app/*.js', 'app/js/**/*.js'], ['scripts']), 17 | CSS = gulp.watch(['app/*.css', 'app/css/**/*.css'], ['styles']), 18 | SASS = gulp.watch(['app/*.scss', 'app/scss/**/*.scss'], ['styles']), 19 | FONTS = gulp.watch(['app/fonts/*.*', 'app/fonts/**/*.*'], ['fonts']), 20 | IMG = gulp.watch(['app/images/*.*', 'app/images/**/*.*'], ['image']), 21 | BOWER = gulp.watch(['bower_components/**/*.*', 'bower_components/**/**', 'bower.json'], ['bundle-libraries']); 22 | 23 | var log = function (event) { 24 | if (event.type === 'deleted') { 25 | runSequence('clean'); 26 | setTimeout(function () { 27 | runSequence('html', 'scripts', 'styles', 'watch'); 28 | }, 500); 29 | } 30 | console.log(config.notify.update('\n--------- File ' + event.path + ' was ' + event.type + ' ------------------------\n')); 31 | }; 32 | 33 | //on change print file name and event type 34 | HTML.once('update', log); 35 | CSS.once('update', log); 36 | SASS.once('update', log); 37 | JS.once('update', log); 38 | IMG.once('update', log); 39 | FONTS.once('update', log); 40 | BOWER.once('update', log); 41 | }); 42 | -------------------------------------------------------------------------------- /app/templates/tasks/_zip.js: -------------------------------------------------------------------------------- 1 | // GULP: HELPERS :: Zip all build files with date 2 | var gulp = require('gulp'), 3 | gulploadPlugins = require('gulp-load-plugins'), 4 | del = require('del'); 5 | 6 | var plugins = gulploadPlugins(); 7 | 8 | var config = require('./config'); 9 | 10 | gulp.task('zip', function () { 11 | var date = new Date().toDateString(); 12 | 13 | console.log(config.notify.update('\n--------- Zipping Build Files ------------------------------------------\n')); 14 | return gulp.src([config.build.root + '/**/*']) 15 | .pipe(plugins.zip('ProjectName - ' + date + '.zip')) 16 | .pipe(plugins.size()) 17 | .pipe(gulp.dest('./zip/')); 18 | }); 19 | -------------------------------------------------------------------------------- /app/templates/tasks/simpleWebApp/_simple_browser_sync.js: -------------------------------------------------------------------------------- 1 | /*----------------------------------------------------------- 2 | GULP : Browser Sync Task 3 | -----------------------------------------------------------*/ 4 | var gulp = require('gulp'), 5 | browserSync = require('browser-sync'); 6 | 7 | gulp.task('browser-sync', function() { 8 | browserSync.init(["./app/*.html", "./app/js/*.js", "./app/css/*.css", "./app/images/*.*", "./app/fonts/*.*"], { 9 | server: { 10 | baseDir: "./app/" 11 | } 12 | }); 13 | }); 14 | -------------------------------------------------------------------------------- /app/templates/tasks/simpleWebApp/_simple_sass.js: -------------------------------------------------------------------------------- 1 | /*----------------------------------------------------------- 2 | GULP : SASS Task 3 | -----------------------------------------------------------*/ 4 | var gulp = require('gulp'), 5 | sass = require('gulp-sass'), 6 | concat = require('gulp-concat'), 7 | autoprefixer = require('gulp-autoprefixer'); 8 | 9 | gulp.task('sass', function () { 10 | gulp.src(['./app/scss/master.scss']) 11 | .pipe(sass({includePaths: ['scss']})) 12 | .pipe(autoprefixer('last 2 version')) 13 | .pipe(gulp.dest('./app/css')) 14 | .pipe(concat('master.css')) 15 | .pipe(gulp.dest('./app/css/')); 16 | }); 17 | -------------------------------------------------------------------------------- /controller/index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | var util = require('util'), 3 | chalk = require('chalk'); 4 | 5 | var ScriptBase = require('../script-base.js'); 6 | 7 | var smacssGenerator = module.exports = function smacssGenerator() { 8 | ScriptBase.apply(this, arguments); 9 | 10 | // if the controller name is suffixed with ctrl, remove the suffix 11 | // if the controller name is just "ctrl," don't append/remove "ctrl" 12 | if (this.name && this.name.toLowerCase() !== 'ctrl' && this.name.substr(-4).toLowerCase() === 'ctrl') { 13 | this.name = this.name.slice(0, -4); 14 | } 15 | }; 16 | 17 | util.inherits(smacssGenerator, ScriptBase); 18 | 19 | // Function to create controller 20 | smacssGenerator.prototype.createControllerFiles = function createControllerFiles() { 21 | this.log( 22 | chalk.yellow('\n┌──────────────────────────────────────────────────────────────┐ \n' + 23 | '| Creating controller, please wait... | \n' + 24 | '└──────────────────────────────────────────────────────────────┘ ') 25 | ); 26 | 27 | this.generateSourceAndTest( 28 | '_controller', // controller template name 29 | 'spec/controller', //for generating test file in test folder 30 | 'controllers', //target dir 31 | this.options['skip-add'] || false 32 | ); 33 | 34 | }; 35 | -------------------------------------------------------------------------------- /directive/index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | var util = require('util'), 3 | chalk = require('chalk'); 4 | 5 | var ScriptBase = require('../script-base.js'); 6 | 7 | var smacssGenerator = module.exports = function smacssGenerator() { 8 | ScriptBase.apply(this, arguments); 9 | }; 10 | 11 | util.inherits(smacssGenerator, ScriptBase); 12 | 13 | smacssGenerator.prototype.createDirectiveFiles = function createDirectiveFiles() { 14 | this.log( 15 | chalk.yellow('\n┌──────────────────────────────────────────────────────────────┐ \n' + 16 | '| Creating directive, please wait... | \n' + 17 | '└──────────────────────────────────────────────────────────────┘ ') 18 | ); 19 | 20 | this.generateSourceAndTest( 21 | '_directive', 22 | 'spec/directive', 23 | 'directives', 24 | this.options['add-index'] || false 25 | ); 26 | }; 27 | -------------------------------------------------------------------------------- /filter/index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | var util = require('util'), 3 | chalk = require('chalk'); 4 | 5 | var ScriptBase = require('../script-base.js'); 6 | 7 | var smacssGenerator = module.exports = function smacssGenerator() { 8 | ScriptBase.apply(this, arguments); 9 | }; 10 | 11 | util.inherits(smacssGenerator, ScriptBase); 12 | 13 | smacssGenerator.prototype.createFilterFiles = function createFilterFiles() { 14 | this.log( 15 | chalk.yellow('\n┌──────────────────────────────────────────────────────────────┐ \n' + 16 | '| Creating filter, please wait... | \n' + 17 | '└──────────────────────────────────────────────────────────────┘ ') 18 | ); 19 | 20 | this.generateSourceAndTest( 21 | '_filter', 22 | 'spec/filter', 23 | 'filters', 24 | this.options['add-index'] || false 25 | ); 26 | }; 27 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "generator-smacss", 3 | "version": "0.2.8", 4 | "description": "Perfectionist Frontend Generator", 5 | "author": { 6 | "name": "Logesh Paul", 7 | "email": "logeshpaul@gmail.com", 8 | "url": "https://github.com/logeshpaul" 9 | }, 10 | "licenses": [ 11 | { 12 | "type": "MIT", 13 | "url": "https://github.com/FuelFrontend/generator-smacss/blob/master/LICENSE-MIT.md" 14 | } 15 | ], 16 | "keywords": [ 17 | "yeoman-generator", 18 | "scaffold", 19 | "framework", 20 | "mvc", 21 | "smacss", 22 | "web-generator" 23 | ], 24 | "main": "app/index.js", 25 | "files": [ 26 | "app", 27 | "controller", 28 | "directive", 29 | "factory", 30 | "filter", 31 | "service", 32 | "script-base.js", 33 | "util.js" 34 | ], 35 | "repository": "FuelFrontend/generator-smacss", 36 | "scripts": { 37 | "test": "mocha --reporter spec" 38 | }, 39 | "engines": { 40 | "node": ">=0.10.0", 41 | "npm": ">=1.3" 42 | }, 43 | "dependencies": { 44 | "yeoman-generator": "^0.17.3", 45 | "chalk": "~0.4.0", 46 | "yosay": "^0.1.0", 47 | "wiredep": "^2.2.2", 48 | "shelljs": "^0.4.0", 49 | "update-notifier": "^0.5.0" 50 | }, 51 | "peerDependencies": { 52 | "yo": ">=1.0.0", 53 | "generator-mocha": ">=0.1.0", 54 | "gulp": ">=3.5.0" 55 | }, 56 | "devDependencies": { 57 | "mocha": "^2.1.0" 58 | } 59 | } 60 | -------------------------------------------------------------------------------- /release-notes.md: -------------------------------------------------------------------------------- 1 | # Release Notes 2 | 3 | **v0.2.7** 4 | - Bug fixes: Bower bundling tasks is not working 5 | - Improvements: Code climate fixes, end of new line added, extra fields include in `package.json`. 6 | 7 | **v0.2.6** 8 | - Bug fixes: Angular quick commands, Generator not listed in yeoman site. 9 | 10 | **v0.2.5** 11 | - Modularized Gulp file - Ever thought that the `gulpfile.js` is growing too large, We heard your inner voice. 12 | Gulp file is modularized using `require-dir` plugin; you can find your gulp tasks in `app\tasks\` folder 13 | - Update Notifier - CLI notifies if you are using an older version of `generator-smacss` 14 | 15 | **v0.2.4** 16 | - Yet another New App Type - Admin Web App! With generator-smacss you can create bootstraped admin panels; 17 | which comes with predefined dashboard, forms, tabular data, sidebar, notification bar for creating 18 | admin apps faster 19 | - Added meta tag viewport to support responsive web. 20 | 21 | **v0.2.3** 22 | - New App Type - Restify! With generator-smacss you can create restify apps. 23 | - Code cleanup and improvements. 24 | 25 | **v0.2.2** 26 | 27 | - Bower Components - Auto check dependencies and concat in right order 28 | - Test integrated for basic app scaffolding, more to come in next release 29 | - New CI: Hound to validate all pull request for lint, syntax, formatting etc., 30 | - CI update: Travis now validates all pull request for `npm test` 31 | - Generator now uses `gulp-load-plugins` to load gulp plugins 32 | - Bug fixes and Improvements: zip sitename fix, bower concat fix & gitignore update 33 | - Documentation: Added Bower components tips and release notes 34 | 35 | **v0.2.1** 36 | - Improvements: Refactoring, Extracted Methods, Cleanup, Director structure update 37 | - Readme file improvements and Better Favicon 38 | - Included 404 Page 39 | 40 | **v0.2.0** 41 | - Two great and good to have features included 42 | - Completely automated dependency installation, trigger local server, open the app in browser 43 | - Angular app quick commands for creating - controller, directive, filter and services 44 | 45 | **v0.1.9** 46 | - Bower integrated to handle dependencies for full pack and angular apps 47 | - Sourcemaps added to production mode for easier debugging 48 | - Angular index page updated to shows minor angular feature 49 | - Favicon and robots.txt added to all apps 50 | - Message rephrased for `--skip-install` option based on app type 51 | - Directory structure and contribution updated in readme file 52 | - Optimization: Codeclimate fixes #4 and a lot more cleanup 53 | 54 | **v0.1.8** 55 | - Automatically install dependencies 56 | - Travis CI configuration 57 | - #7 SCSS directory structure update 58 | - Updated installation steps and format 59 | - Modified app types (simple web app, full pack web app) 60 | - Template structure change (root and sub folders for apps) 61 | 62 | **v0.1.7** 63 | - NPM plugin documentation fix 64 | 65 | **v0.1.6** 66 | - Changed application file to object prototype pattern 67 | - Prompts separated to handle different projects 68 | - Bower file creating and dependency injection 69 | - Angular project basic setup 70 | - Removed bower-conact for time being 71 | - #3 - Codeclimate issue fixes 72 | 73 | **v0.1.1** 74 | - NPM Read me error fix 75 | 76 | **v0.1.0** 77 | - Initial working version of Static app generator 78 | - SMACSS approach - directory structure, naming convention 79 | - Productivity helper tasks 80 | -------------------------------------------------------------------------------- /script-base.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | var util = require('util'); 3 | var path = require('path'); 4 | var yeoman = require('yeoman-generator'); 5 | var angularUtils = require('./util.js'); 6 | var chalk = require('chalk'); 7 | 8 | var Generator = module.exports = function Generator() { 9 | yeoman.generators.NamedBase.apply(this, arguments); 10 | 11 | var bowerJson = {}; 12 | 13 | try { 14 | bowerJson = require(path.join(process.cwd(), 'bower.json')); 15 | } catch (e) {} 16 | 17 | if (bowerJson.name) { 18 | this.appname = bowerJson.name; 19 | } else { 20 | this.appname = path.basename(process.cwd()); 21 | } 22 | 23 | this.appname = this._.slugify(this._.humanize(this.appname)); 24 | 25 | this.scriptAppName = bowerJson.moduleName || this._.camelize(this.appname) + angularUtils.appName(this); 26 | 27 | this.cameledName = this._.camelize(this.name); 28 | this.classedName = this._.classify(this.name); 29 | 30 | if (typeof this.env.options.appPath === 'undefined') { 31 | this.env.options.appPath = this.options.appPath || bowerJson.appPath || 'app'; 32 | this.options.appPath = this.env.options.appPath; 33 | } 34 | 35 | this.env.options.testPath = this.env.options.testPath || bowerJson.testPath || 'test/spec'; 36 | 37 | this.env.options.coffee = this.options.coffee; 38 | if (typeof this.env.options.coffee === 'undefined') { 39 | this.option('coffee'); 40 | 41 | // attempt to detect if user is using CS or not 42 | // if cml arg provided, use that; else look for the existence of cs 43 | if (!this.options.coffee && 44 | this.expandFiles(path.join(this.env.options.appPath, '/scripts/**/*.coffee'), {}).length > 0) { 45 | this.options.coffee = true; 46 | } 47 | 48 | this.env.options.coffee = this.options.coffee; 49 | } 50 | 51 | var sourceRoot = '/app/templates/js'; 52 | this.scriptSuffix = '.js'; 53 | 54 | if (this.env.options.coffee) { 55 | sourceRoot = '/templates/coffeescript'; 56 | this.scriptSuffix = '.coffee'; 57 | } 58 | 59 | this.sourceRoot(path.join(__dirname, sourceRoot)); 60 | }; 61 | 62 | util.inherits(Generator, yeoman.generators.NamedBase); 63 | 64 | Generator.prototype.appTemplate = function (src, dest) { 65 | yeoman.generators.Base.prototype.template.apply(this, [ 66 | src + this.scriptSuffix, 67 | path.join(this.env.options.appPath, dest.toLowerCase()) + this.scriptSuffix 68 | ]); 69 | }; 70 | 71 | Generator.prototype.testTemplate = function (src, dest) { 72 | yeoman.generators.Base.prototype.template.apply(this, [ 73 | src + this.scriptSuffix, 74 | path.join(this.env.options.testPath, dest.toLowerCase()) + this.scriptSuffix 75 | ]); 76 | }; 77 | 78 | Generator.prototype.htmlTemplate = function (src, dest) { 79 | yeoman.generators.Base.prototype.template.apply(this, [ 80 | src, 81 | path.join(this.env.options.appPath, dest.toLowerCase()) 82 | ]); 83 | }; 84 | 85 | Generator.prototype.addScriptToIndex = function (script) { 86 | try { 87 | var appPath = this.env.options.appPath; 88 | var fullPath = path.join(appPath, 'index.html'); 89 | angularUtils.rewriteFile({ 90 | file: fullPath, 91 | needle: '', 92 | splicable: [ 93 | '' 94 | ] 95 | }); 96 | } catch (e) { 97 | this.log.error(chalk.yellow( 98 | '\nUnable to find ' + fullPath + '. Reference to ' + script + '.js ' + 'not added.\n' 99 | )); 100 | } 101 | }; 102 | 103 | Generator.prototype.generateSourceAndTest = function (appTemplate, testTemplate, targetDirectory, skipAdd) { 104 | 105 | skipAdd = true; 106 | 107 | this.appTemplate(appTemplate, path.join('js', targetDirectory, this.name)); 108 | // this.testTemplate(testTemplate, path.join(targetDirectory, this.name)); 109 | if (!skipAdd) { 110 | this.addScriptToIndex(path.join(targetDirectory, this.name)); 111 | } 112 | }; 113 | -------------------------------------------------------------------------------- /service/index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | var util = require('util'), 3 | chalk = require('chalk'); 4 | 5 | var ScriptBase = require('../script-base.js'); 6 | 7 | var smacssGenerator = module.exports = function smacssGenerator() { 8 | ScriptBase.apply(this, arguments); 9 | }; 10 | 11 | util.inherits(smacssGenerator, ScriptBase); 12 | 13 | smacssGenerator.prototype.createServiceFiles = function createServiceFiles() { 14 | this.log( 15 | chalk.yellow('\n┌──────────────────────────────────────────────────────────────┐ \n' + 16 | '| Creating service, please wait... | \n' + 17 | '└──────────────────────────────────────────────────────────────┘ ') 18 | ); 19 | 20 | this.generateSourceAndTest( 21 | '_service', 22 | 'spec/service', 23 | 'services', 24 | this.options['skip-add'] || false 25 | ); 26 | }; 27 | -------------------------------------------------------------------------------- /smacss-in-action.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FuelFrontend/generator-smacss/02ae69e117cf205a2713bc41c75638ff9edd3ace/smacss-in-action.png -------------------------------------------------------------------------------- /test/test.js: -------------------------------------------------------------------------------- 1 | /*global describe, beforeEach, it */ 2 | // TODO: Add tests for all app types 3 | 'use strict'; 4 | var path = require('path'); 5 | var helpers = require('yeoman-generator').test; 6 | 7 | describe('Generator Smacss test', function () { 8 | beforeEach(function (done) { 9 | helpers.testDirectory(path.join(__dirname, 'temp'), function (err) { 10 | if (err) { 11 | done(err); 12 | return; 13 | } 14 | 15 | this.smacss = helpers.createGenerator('smacss:app', [ 16 | '../../app', [ 17 | helpers.createDummyGenerator(), 18 | 'mocha:app' 19 | ] 20 | ]); 21 | this.smacss.options['skip-install'] = true; 22 | 23 | done(); 24 | }.bind(this)); 25 | }); 26 | 27 | it('the generator can be required without throwing', function () { 28 | // not testing the actual run of generators yet 29 | this.app = require('../app'); 30 | }); 31 | 32 | it('creates expected files', function (done) { 33 | var expected = [ 34 | 'package.json', 35 | 'gulpfile.js', 36 | 'app/favicon.ico', 37 | 'app/index.html' 38 | ]; 39 | 40 | helpers.mockPrompt(this.smacss, { 41 | appType: ['typeFullPackWebApp'], 42 | appLibraries: ['includeQuery'] 43 | }); 44 | 45 | this.smacss.run(function () { 46 | helpers.assertFile(expected); 47 | done(); 48 | }); 49 | }); 50 | }); 51 | -------------------------------------------------------------------------------- /util.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | var path = require('path'), 3 | fs = require('fs'); 4 | 5 | function rewriteFile(args) { 6 | args.path = args.path || process.cwd(); 7 | var fullPath = path.join(args.path, args.file); 8 | 9 | args.haystack = fs.readFileSync(fullPath, 'utf8'); 10 | var body = rewrite(args); 11 | 12 | fs.writeFileSync(fullPath, body); 13 | } 14 | 15 | function escapeRegExp(str) { 16 | return str.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, '\\$&'); 17 | } 18 | 19 | function rewrite(args) { 20 | // check if splicable is already in the body text 21 | var re = new RegExp(args.splicable.map(function (line) { 22 | return '\s*' + escapeRegExp(line); 23 | }).join('\n')); 24 | 25 | if (re.test(args.haystack)) { 26 | return args.haystack; 27 | } 28 | 29 | var lines = args.haystack.split('\n'); 30 | 31 | var otherwiseLineIndex = 0; 32 | lines.forEach(function (line, i) { 33 | if (line.indexOf(args.needle) !== -1) { 34 | otherwiseLineIndex = i; 35 | } 36 | }); 37 | 38 | var spaces = 0; 39 | while (lines[otherwiseLineIndex].charAt(spaces) === ' ') { 40 | spaces += 1; 41 | } 42 | 43 | var spaceStr = ''; 44 | while ((spaces -= 1) >= 0) { 45 | spaceStr += ' '; 46 | } 47 | 48 | lines.splice(otherwiseLineIndex, 0, args.splicable.map(function (line) { 49 | return spaceStr + line; 50 | }).join('\n')); 51 | 52 | return lines.join('\n'); 53 | } 54 | 55 | function appName(self) { 56 | var counter = 0, suffix = self.options['app-suffix']; 57 | 58 | // Have to check this because of generator bug #386 59 | process.argv.forEach(function (value) { 60 | if (value.indexOf('--app-suffix') > -1) { 61 | counter++; 62 | } 63 | }); 64 | 65 | // if (counter === 0 || (typeof suffix === 'boolean' && suffix)) { 66 | if (typeof suffix === 'boolean' && suffix) { 67 | suffix = 'App'; 68 | } 69 | return suffix ? self._.classify(suffix) : ''; 70 | } 71 | 72 | module.exports = { 73 | rewrite: rewrite, 74 | rewriteFile: rewriteFile, 75 | appName: appName 76 | }; 77 | --------------------------------------------------------------------------------