From 2772bb14336e3ef8f05f754a39f28b94ae84bc79 Mon Sep 17 00:00:00 2001 From: logeshpaul Date: Thu, 2 Apr 2015 13:36:30 +0530 Subject: [PATCH] v0.2.0 - Readme, release and package update --- README.md | 169 +++++++++++++++++++++++++-------------- package.json | 2 +- Version.md => release.md | 7 +- 3 files changed, 118 insertions(+), 60 deletions(-) rename Version.md => release.md (82%) diff --git a/README.md b/README.md index 54d3528..fe66f4b 100644 --- a/README.md +++ b/README.md @@ -1,24 +1,58 @@ # Generator for Frontend Projects [![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) + + -[Work In Progress] Perfectionist generator that scaffolds out different types of Front-end application +[Work In Progress] 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](https://smacss.com/) approach (BEM, OOCSS, ITCSS to be followed soon) +- **Highly Maintainable** - Uses [SMACSS](https://smacss.com/) 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 and more. +- **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** - Work In Progress +- **Angular App** - Angular app with basic configurations and quick commands for creating controllers, directives, services and filters. More to come! + +# Getting Started + +**Installation** + +You need to have [NodeJS](http://nodejs.org/) & [Yeoman](http://yeoman.io/) 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 @@ -31,8 +65,6 @@ Your directory structure will look like this │ ├── images │ ├── fonts │ ├── js -│ │ └── lib -│ │ │ └── third-party-files.js │ │ └── application.js │ ├── css │ │ └── master.css @@ -60,8 +92,6 @@ Your directory structure will look like this `````````` ├── app │ ├── bower_components -│ │ ├── jquery -│ │ └── modernizr │ ├── images │ ├── js │ │ └── lib @@ -98,83 +128,106 @@ Your directory structure will look like this **Angular App** -_WIP_ - - -# Getting Started - -**Installation** - -You need to have [NodeJS](http://nodejs.org/) & [Yeoman](http://yeoman.io/) installed on your machine -``````` -npm install -g yo +```````` +├── app +│ ├── bower_components +│ ├── images +│ ├── js +│ │ └── lib +│ │ │ └── third-party-files.js +│ │ └── controllers +│ │ └── directives +│ │ └── services +│ │ └── filters +│ │ └── application.js +│ ├── css +│ │ └── master.css +│ ├── partials +│ │ └── header.html +│ │ └── footer.html +│ ├── scss +│ │ └── modules +│ │ │ └── module-name.scss +│ │ └── pages +│ │ │ └── page-landing.scss +│ │ └── base.scss +│ │ └── layout.css +│ │ └── mixins.css +│ │ └── reset.css +│ │ └── variables.css +│ └── index.html +├── build +│ └── build-files +├── zip +│ └── compressed-files +├── node_modules +├── package.json +├── gulpfile.js +├── bower.json +├── .bowerrc +├── .gitattributes +└── .gitignore ```````` -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** +# Quick commands -At this stage your project is setup and dependencies are installed, It's showtime! +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. -- Run `gulp` to run the server, and you are good to start your development. +######General - Applies to Full Pack and Angular -# Quick commands +* **Clean** _Remove all files from your build folder_ + ``````` + gulp clean + ``````` -**Angular App** +* **Zip** _Compress you app & save in `zip` folder with timestamp for quick sharing_ -Use terminal to create controller, service, directive etc. Run following commands to create. + ``````` + gulp zip + ``````` -1) Controller +######Angular App -creates a controller in app/js/controllers +* **Controller** _Creates a controller in `app/js/controllers`_ -``````` - yo smacss:controller -``````` + ``````` + yo smacss:controller + ``````` +* **Service** _Creates a service in `app/js/services`_ -2) Service + ``````` + yo smacss:service + ``````` -creates a service in app/js/services +* **Directive** _Creates a directive in `app/js/directives`_ -``````` - yo smacss:service -``````` + ``````` + yo smacss:directive + ``````` -3) Directive +* **Filter** _Creates a filter in `app/js/filters`_ -creates a directive in app/js/directives + ``````` + yo smacss:filter + ``````` -``````` - yo smacss:directive -``````` +# Environment -4) Filter +Generator Smacss comes with development and producution modes. In default it runs in development mode. -creates a filter in app/js/filters +You can switch to production mode using the following command ``````` - yo smacss:filter +gulp prod ``````` + # Options diff --git a/package.json b/package.json index 3beb734..0859a8d 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "generator-smacss", - "version": "0.1.9", + "version": "0.2.0", "description": "Perfectionist Frontend Generator", "author": { "name": "Logesh Paul", diff --git a/Version.md b/release.md similarity index 82% rename from Version.md rename to release.md index 2a026fd..7042304 100644 --- a/Version.md +++ b/release.md @@ -1,4 +1,9 @@ -# Version +# Release History + +**v0.2.0** +- Two great and good to have features included +- Completely automated dependency installation, trigger local server, open the app in browser +- Angular app quick commands for creating - controller, directive, filter and services **v0.1.9** - Bower integrated to handle dependencies for full pack and angular apps