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:

• Atomic Design | Brad Frost
• Atomic Design Methodology | Atomic Design by Brad Frost
• Your Frontend Methodology Is All of Them: Atomic Design & Pattern Lab
• Modular CSS / Atomic Design in the Enterprise
• Atomic Design Node by Suissa

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.

License

MIT © Victor Igor