Generator-capybara NPM

Capybara Generator

Capybara Generator follows the Atomic Design methodology and with a modern workflow (webpack, es6 and stylus).

Installation

First, install Yeoman and generator-capybara using npm (we assume you have pre-installed node.js).

npm install -g yo generator-capybara

Generators

Available generators:

capybara

Capybara App

Sets up a new Capy app, generating all the boilerplate you need to get started. The app generator also optionally installs frameworks.

example:

  yo capybara  #in your project folder

(optional) Put this in your ~/.bashrc or ~/.zshrc

  alias capybara='yo capybara' #use 'capybara' in your project folder for starting

Options

Full app Atomic Design
- Name your Project
- Choice frameworks
  - Angular
  - No framework
  - Vue 2 (Wished. Contributors welcome. :star2:)
  - React (Wished. Contributors welcome. :star2:)
  - Angular 2 (Wished. Contributors welcome. :star2:)
  - Backbone (Wished. Contributors welcome. :star2:)
  - Ember 2 (Wished. Contributors welcome. :star2:)
Folder Atomic Stylus

Atomic Design

Capybara follows the Atomic Design methodology. :small_orange_diamond:

Directory Layout

Atomic Design Structure in Stylus

├── □ styl
|   |     
|   ├── □ base
|   |   |   ├── _forms.styl
|   |   |   ├── _global-classes.styl
|   |   |   └── _headings.styl
|   ├── □ generic
|   |   |   ├── _debugs.styl
|   |   |   ├── _mixins.styl
|   |   |   └── _reset.styl
|   ├── □ patterns                                   
|   |   ├── □ 00_bosons                        
|   |   |   ├── _boson-button.styl
|   |   |   ├── _boson-colors.styl
|   |   |   ├── _boson-responsive.styl
|   |   |   ├── _boson-typography.styl
|   |   |   ├── _boson-variables.styl
|   |   |   └──  boson-main.styl
|   ├── □ 01_quarks                        
|   |   |   ├── _quarks-icon.styl
|   |   |   ├── _quark-link.styl
|   |   |   └── quark-main.styl
|   ├── □ 02_atoms                        
|   |   |   ├── _atoms-buttons.styl
|   |   |   ├── _atoms-icons.styl
|   |   |   ├── _atoms-images.styl
|   |   |   ├── _atoms-inputs.styl
|   |   |   ├── _atoms-texts.styl
|   |   |   ├── _atoms-titles.styl
|   |   |   └── atom-main.styl
|   ├── □ 03_molecules                        
|   |   |   ├── _molecules-logo.styl
|   |   |   ├── _molecules-menu.styl
|   |   |   └── molecule-main.styl
|   ├── □ 04_organisms                        
|   |   |   ├── _organism-content.styl
|   |   |   ├── _organism-header.styl
|   |   |   └── organism-main.styl
|   ├── □ 05_pages                        
|   |   |   └── page-main.styl
|   ├── □ 06_templates                        
|   |   |   ├── _template-content.styl
|   |   |   └── template-main.styl

Run

NPM scripts	Gulp tasks	Description
`npm run build`	`gulp` or `gulp build`	to build an optimized version of your application in /dist
`npm run serve`	`gulp serve`	to launch a browser sync server on your source files
`npm run serve:dist`	`gulp serve:dist`	to launch a server on your optimized application
`npm run test`	`gulp test`	to launch your unit tests with Karma
`npm run test:auto`	`gulp test:auto`	to launch your unit tests with Karma in watch mode

Frontend Technologies

Angular (optional): AngularJS lets you extend HTML vocabulary for your application.
Webpack: module bundler for the browser
Stylus: expressive, dynamic, robust CSS