Package Exports

generator-capybara

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (generator-capybara) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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. 🌟)
  - React (Wished. Contributors welcome. 🌟)
  - Angular 2 (Wished. Contributors welcome. 🌟)
  - Backbone (Wished. Contributors welcome. 🌟)
  - Ember 2 (Wished. Contributors welcome. 🌟)
Folder Atomic Stylus

Atomic Design

Capybara follows the Atomic Design methodology. 🔸

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

Dev Technologies

Babel: A es6/es7 compiler.
Karma: A productive testing environment to developers
Eslint: The pluggable linting utility for JavaScript and JSX.
BrowserSync: Time-saving synchronised browser testing.
Rupture: Simple media queries for stylus.
Kouto-Swiss: A complete CSS framework for Stylus.
Jeet: A grid system for human.

generator-capybara