fuelfrontend / generator-smacss

Perfectionist generator that scaffolds out different types of Frontend apps

Generator for Frontend Projects

Perfectionist generator that scaffolds out different types of Frontend application

Features

• Different Projects; One Generator - Create your type of project in fairly simple steps
• Highly Maintainable - Uses SMACSS approach (BEM, OOCSS, ITCSS in backlog)
• Readymade — Directory structure, Naming convention, Linking your app done right.
• Speedy Workflow - CSS Preprocessor (Sass), Partials, Browser Sync, Live reload.
• Performance Matters - Minify HTML, CSS, & JS. Optimize Images.
• Quick Commands - Generate Build, Clean up, Zip project, Angular commands and lot more to come.

App Types

• 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.
• 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.
• Angular App - Angular app with basic configurations and quick commands for creating controllers, directives, services and filters. More to come!
• 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.
• Admin Web App - Create an Admin app with bootstrap integrated. Pages: Dashboard, Sidebar, Notfication, Forms, Tabular Data and Bootstrap Elements for quick use.

Getting Started

Installation

You need to have NodeJS & Yeoman installed on your machine

npm install -g yo

Install smacss generator

npm install --global generator-smacss

Creating project

• Run yo smacss

• Answer simple questions in terminal

• Generator will automatically try to install dependencies in your project folder.

• You got your installation successfull 'You are lucky', run the server following the instruction in next section.

• In case you got any error you may not have admin rights

  • a) cd to your project folder
  • b) Run sudo bower install & npm install followed by your machine password in Mac/Linux environment; Windows user try running as administrator

Run your project

At this stage your project is setup and dependencies are installed, It's showtime!

• Run gulp to run the server, and you are good to start your development.

Directory Structure

Your directory structure will look like this

Quick commands

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.

General - Applies to Full Pack and Angular

• Clean Remove all files from your build folder

  gulp clean
  

• Zip Compress you app & save in zip folder with timestamp for quick sharing

  gulp zip
  

Angular App

• Controller Creates a controller in app/js/controllers

  yo smacss:controller <name>
  

• Service Creates a service in app/js/services

  yo smacss:service <name>
  

• Directive Creates a directive in app/js/directives

  yo smacss:directive <name>
  

• Filter Creates a filter in app/js/filters

  yo smacss:filter <name>
  

Environment

Generator Smacss comes with development and producution modes. In default it runs in development mode.

You can switch to production mode using the following command

gulp prod

Bower Components

Tip: While installation additional bower components to your project, make sure your save your new component in your bower.json file by installing like below

bower install <bower-component-name> --save

So that generator will automatically include your new bower component to bower.js file for usage

Release Notes

You can find the detailed release notes here

Options

• --skip-welcome-message Skips the welcome message and take you to question.
• --skip-install Skips the automatic execution of bower and npm after scaffolding has finished.

Contributions

Contribution would be of great help to create a solid generator for frontend projects

• Fork the project
• Make your feature addition or bug fix
• Send pull request

Active Contributors

generator-smacss's Issues

Unmet Peer dependency when i have installed all the dependencies. Plz refer to my attached screenshot.

SCSS Directory structure suggestion

Hi @logeshpaul

Thinking about scalability, I would prefer separate directories for each components (base, layout, master etc.), rather than a single file.

Even modules can have different directories, for which we can provide with sub generators.

Detach prompting from common module, Create sub modules

1. Prompting the user has to separated from common module smacssGenerator
2. Create sub module for type of projects like 'Static-HTML', 'Angular' as of now
3. Remove hybrid app

Browser Sync as default to trigger server

Currently we are using gulp webserver for local server and to perform live reload feature. It doesn't comes with cool features like Sync: scroll, user input & connected devices.

Browser sync does comes along with those features. So why don't we directly opt for browser sync instead of old school gulp-webserver

Gulp server throws error as Uhoh. Got error listen EADDRINUSE ...

Even after running localhost server in different port, gulp throws error.

Steps to reproduce

1. Run a gulp in terminal with default port (3000)
2. Run one more application with another port as 4000, error message is printed in the terminal as
   Error: listen EADDRINUSE

But gulp server is working properly. Try it get rid of that message

Generator is missing latest update notifier

Since smacss is continuously updated with new features and issue fixes. There is no option to show to user that smacss is updated to newer version. So user has to manually update using npm update generator-smcass. By using update-notifier we can notify user that a new update for available in the command line.

Follow generator directory structure for restify app

Generator follows a common directory structure throughout all app types. This needs to be followed in Restify App as well.

Current structure

├── controllers
│   └── userController.js
├── models
│   └── userSchema.js
├── route.js
├── app.js
├── config.json
├── db.js
├── node_modules
├── package.json
├── gulpfile.js
├── .gitattributes
└── .gitignore

Proposed structure

├── app
│   ├── controllers
│   │   └── userController.js
│   ├── models
│   │   └── userSchema.js
│   └── route.js
│   └── app.js
│   └── config.json
│   └── db.js
├── node_modules
├── package.json
├── gulpfile.js
├── .gitattributes
└── .gitignore

Automation & Deployment quick commands

Write automation and deployment helper methods for complete workflow

Suggestion
Shipit - https://github.com/shipitjs/shipit

Gulp Prod command throws

While doing gulp prod in terminal, throws an error do minification of HTML files before gulp file include. I have fixed this issue in my latest PR.

Not listed in yeoman.io

This generator is not listed in the yeoman.io site

Bower Components - Auto check dependencies and concat in right order

We will need a Gulp task that parse the bower components files and add main files to bower.js in the right order (dependencies first and then the library itself after) to avoid undefined error while running the application.

Tip: Each Bower library has its own bower.json file, which specifies the dependencies of that library.

Include Bootstrap framework in app types

Users may want to create quick applications sometimes, for one of the main reason

• No time to write all the code from scratch cause of less time

In that situation its better to opt for bootstrap.

Generator should give an option to select bootstrap for applications.

1. Simple web app (can consider)
2. Full Stack (have to include the option to select)
3. Angular (have to include the option to select)

Bower cannot import jquery lib

Hi, I'm trying to bring jquery in my project with bower install <package> but not occurs. The image below exemplifies what happens:

What can it be? Anyway, I really appreciate your project, it's very useful for my projects. Congratulations.

Server - Port Issue

Current: If port is already occupied, gulp fails to start the server.

Expected: It should start assign new port and run server in that port.

Replace smacss-in-action image with demo gif

Replace smacss-in-action static image with quick demo gif for better understanding of the plugin.

Gif should show

1. Terminal - User Input
2. Terminal - App File Creation
3. Terminal - App Dependency Installation
4. Terminal - Server trigger
5. Browser - App running

In Angular js App - creating directives using cmd is not working. Please check it.

Angular App - bundling bower is not working

Getting a 404 error for bower.js file cause the gulp task is not bundling the bower files correctly.

Screenshot

Bower concat issue on watch task

1. Fonts not copied
2. Images not copied
3. Bower files are not copied

Adding README file for the application

It would be great if we can add a readme file for installation and other details of application user is creating.

gulp task suggestion - ng-annotate

It would be great to have ng-annotate task for angular apps.

End user — Dependencies can be reduced

End user app has lot of dependencies which make the dependency installation heavy and taking quite long.

Suggested Solution

1. Once the user decides the app type(static, angular, etc.,) in step 2 of user prompting, ask for lite or full_packed or custom
2. lite - should only have limited and super necessary dependencies
3. full_packed - should have all necessary dependencies
4. custom - shows a list of useful dependencies which user can select from.

Let me know if you have a better suggestion.

Bower - Save dev documentation

While installing bower components user should use --save-dev to include in bower.js while concat process.

This needs to be communicate to the user in documentation clearly.

Run server automatically

After the prompts the generator is automatically installing the dependencies.

Run the command gulp to fire the server also to reduce the user interaction by one step.

An option to create project in current directory

Lets say we already have git repo and we need to create a project in the root of the cloned repo. There is not option to it add in same directory.

There should be flag to create project in current directory. Like below

yo smacss current

Problem in concating bootstrap and other libraries through bower

Through bower-install gulp task, libraries like bootstrap is not concating css and js file due to bower.json not present in bower_components/bootstrap

Bootstrap and some other libraries in bower contains .bower.json file instead bower.json. In bower task we have check this also

Modularize gulp file

Lets break down the gulp file - https://github.com/gulpjs/gulp/blob/master/docs/recipes/split-tasks-across-multiple-files.md

In this way we will easily be able to include / exclude gulp tasks based on multiple factors.

Angular - Quick commands

Quick commands
Example type in smacss: controller controllername --options in terminal and it should

1. create necessary files in JS, CSS, etc.,
2. Write default code in files
3. Make necessary connections between the files

Bower components - Needs to be updated based on user choice in prompts

1. User selected features like (jquery, modernizer) or any other bower components needs to be include in bower file.
2. Include bower concat in gulpjs file.

Angular scaffold folder structure

Please create default folder structure like (controller, models,directives...etc) while creating angular app.

image folder is not coming in build folder

When i try to do gulp,
Image folder is not coming in the build folder.

Please check this and let me know.

Angular app - Basic configuration

1. Basic scaffolding
2. Directory structure - (JS based on module)
3. Angular dependencies

gulp task suggestion - gulp-autoprefixer

gulp-autoprefixer task to auto prefix vendor specific css properties

node-sass error

Hi. Thanks for your time and work on the smacss generator.

I'm new to web development but would realllly like to use this generator but am not sure if I should post this problem as an issue on github or not.

josh@josh-700-310xt:~/Desktop/testy/testThisBitch$ gulp
[21:52:10] Warning: gulp version mismatch:
[21:52:10] Global gulp is 3.9.0
[21:52:10] Local gulp is 3.8.11
/home/josh/Desktop/testy/testThisBitch/node_modules/node-sass/lib/index.js:22
throw new Error('libsass bindings not found. Try reinstalling node-sass?');
^

Error: libsass bindings not found. Try reinstalling node-sass?
at getBinding (/home/josh/Desktop/testy/testThisBitch/node_modules/node-sass/lib/index.js:22:11)
at Object. (/home/josh/Desktop/testy/testThisBitch/node_modules/node-sass/lib/index.js:188:23)
at Module._compile (module.js:425:26)
at Object.Module._extensions..js (module.js:432:10)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:311:12)
at Module.require (module.js:366:17)
at require (module.js:385:17)
at Object. (/home/josh/Desktop/testy/testThisBitch/node_modules/gulp-sass/index.js:3:17)
at Module._compile (module.js:425:26)

... Is this normal behavior?

Do I have to install and use gulp 3.8.11 globally or is there something else?

Should I create a new issue for this?

Index page information update

Default index page of the scaffold app needs to hold the information about

1. App structure
2. Features
3. Quick commands

while running gulp i am getting the problem

this is the problem i am getting while running gulp command in angular js app.

--------- Server started at http://localhost:3000 ------------------------

[22:26:05] Webserver started at http://localhost:3000

events.js:72
throw er; // Unhandled 'error' event
^
Error: getaddrinfo ENOTFOUND
at errnoException (dns.js:37:11)
at Object.onanswer as oncomplete

Gulp cant find Modernizr Error on Fullpack

Tried installing the FullPack option with jQuery and Modernizer, but am getting an error:

[16:20:27] Error: Cannot find module '../bower_components/modernizr/bower.json'
    at Function.Module._resolveFilename (module.js:440:15)
    at Function.Module._load (module.js:388:25)
    at Module.require (module.js:468:17)
    at require (internal/module.js:20:19)
    at addPackage (/Users/peterberwind/code/smacssFullpack/tasks/bower.js:45:16)
    at /Users/peterberwind/code/smacssFullpack/tasks/bower.js:66:7
    at Function._.each._.forEach (/Users/peterberwind/code/smacssFullpack/node_modules/underscore/underscore.js:158:9)
    at Gulp.<anonymous> (/Users/peterberwind/code/smacssFullpack/tasks/bower.js:64:14)
    at module.exports (/Users/peterberwind/code/smacssFullpack/node_modules/orchestrator/lib/runTask.js:34:7)
    at Gulp.Orchestrator._runTask (/Users/peterberwind/code/smacssFullpack/node_modules/orchestrator/index.js:273:3)
Error running task sequence: { task: 'bundle-libraries',
  message: 'bundle-libraries catch',
  duration: 0.000709324,

  hrDuration: [ 0, 709324 ],
  err:
   { Error: Cannot find module '../bower_components/modernizr/bower.json'
       at Function.Module._resolveFilename (module.js:440:15)
       at Function.Module._load (module.js:388:25)
       at Module.require (module.js:468:17)
       at require (internal/module.js:20:19)
       at addPackage (/Users/peterberwind/code/smacssFullpack/tasks/bower.js:45:16)
       at /Users/peterberwind/code/smacssFullpack/tasks/bower.js:66:7
       at Function._.each._.forEach (/Users/peterberwind/code/smacssFullpack/node_modules/underscore/underscore.js:158:9)
       at Gulp.<anonymous> (/Users/peterberwind/code/smacssFullpack/tasks/bower.js:64:14)
       at module.exports (/Users/peterberwind/code/smacssFullpack/node_modules/orchestrator/lib/runTask.js:34:7)
       at Gulp.Orchestrator._runTask (/Users/peterberwind/code/smacssFullpack/node_modules/orchestrator/index.js:273:3) code: 'MODULE_NOT_FOUND' }
}

I tried running sudo npm install and sudo bower install

Does anyone know what might be causing this issue?

Include testing frameworks

Integrate some testing frameworks for TDD

Suggestions
Mocha - http://mochajs.org/
Chai - http://chaijs.com/

Meta tag viewport is missing in the index page

Since the meta tag for viewport is not present, media query won't work in mobile and tablets.

New App Type - React App

Create a new app type for scaffolding React application

Better error notification for dependency installation

On dependency failing: Provide comments to install as admin

Deactivate JSlint validating library files

JS lint is validating library files also. Create jslint config file and exclude library folder

minor suggestion for directory structure

The gulp tasks directory should be outside the app directory.

The app directory should contain code which is necessary to build the dist directory. Even if the developer uses some other build system like grunt, we should be able to pass him the app directory and the developer should be able to continue the development.

Index.js - Codeclimate copyMainFiles() complex method issue

File: app/index.js

Complex method copyMainFiles (complexity = 18)

https://codeclimate.com/github/FuelFrontend/generator-smacss/app/index.js

Update main readme file with directory structure

Readme file has to show app structure for different type of type for the user to understand how the generator will scaffold the folders

Example

├── app
│   ├── bower_components
│   │   ├── jquery
│   │   └── modernizr
│   ├── images
│   ├── js
│   │   └── lib
│   │   │   └── third-party-files
│   │   └── main.js
│   ├── css
│   │   └── main.css
│   ├── scss
│   │   └── lib
│   ├── favicon.ico
│   ├── index.html
│   └── robots.txt
├── dist
│   ├── scripts
│   └── styles
├── node_modules
├── test
├── .bowerrc
├── .gitignore
├── bower.json
├── gulpfile.js
└── package.json

Gulpfile - Codeclimate complexity issues

File: app/templates/_gulpfile.js

1. Expected '===' and instead saw '=='. (Line 232)
2. 'change' is not defined. (Line 238)