# generator-atomic > Yeoman Generator for Atomic-Design with Pug, Less and BabelJS. Integrated Galen for easy Layout-Tests. Latest version **1.5.1** (published 2017-09-15) · MIT license · 0 weekly downloads ## Install ```sh npm install generator-atomic pnpm add generator-atomic yarn add generator-atomic bun add generator-atomic ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.5.1 | | Published | 2017-09-15 | | First published | 2015-06-24 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Node | >=0.10.0 | | Dependencies | 7 | | Known vulnerabilities | 0 (+1 in 1 direct dependencies) | | Install scripts | no | | Author | Michael Seel | | Maintainers | michaseel, nexumag | | Keywords | yeoman-generator, scaffold, front-end, pug, less, bootstrap, galen, galenframework, babeljs, es6, es2015, grunt, atomic design | ## Links - npm: https://www.npmjs.com/package/generator-atomic - Repository: https://github.com/nexumAG/generator-atomic - Issues: https://github.com/nexumAG/generator-atomic/issues - npm.io page: https://npm.io/package/generator-atomic ## Dependencies (7) - [chalk](https://npm.io/package/chalk.md) ^2.1.0 - [yosay](https://npm.io/package/yosay.md) ^2.0.0 - [camelize](https://npm.io/package/camelize.md) 1.0.0 - [yeoman-test](https://npm.io/package/yeoman-test.md) ^1.4.0 - [yeoman-assert](https://npm.io/package/yeoman-assert.md) ^3.0.0 - [yeoman-generator](https://npm.io/package/yeoman-generator.md) 0.22.6 - [underscore.string](https://npm.io/package/underscore.string.md) 3.3.4 ## Alternatives - [@openai/codex-sdk](https://npm.io/package/@openai/codex-sdk.md) — 731.4K weekly downloads - [babel-plugin-transform-react-jsx](https://npm.io/package/babel-plugin-transform-react-jsx.md) — 565.0K weekly downloads - [babel-helper-remove-or-void](https://npm.io/package/babel-helper-remove-or-void.md) — 508.5K weekly downloads - [@pnpm/store-controller-types](https://npm.io/package/@pnpm/store-controller-types.md) — 186.9K weekly downloads - [react-native-signature-canvas](https://npm.io/package/react-native-signature-canvas.md) — 155.6K weekly downloads ## Recent versions - 1.5.1 (latest) — 2017-09-15 - 1.0.0-0 (beta) — 2015-10-30 - 1.5.0 — 2017-08-18 - 1.4.1 — 2017-08-18 - 1.4.0 — 2017-08-11 - 1.3.1 — 2016-10-25 - 1.3.0 — 2016-10-21 - 1.2.7 — 2016-08-09 - 1.2.6 — 2016-08-09 - 1.2.5 — 2016-02-10 - 1.2.4 — 2016-02-01 - 1.2.3 — 2016-01-22 - 1.2.2 — 2016-01-05 - 1.2.1 — 2015-12-18 - 1.2.0 — 2015-12-14 - … 33 more at https://npm.io/package/generator-atomic/versions ## README # generator-atomic [![npm version](https://badge.fury.io/js/generator-atomic.svg)](https://badge.fury.io/js/generator-atomic) [![Build Status](https://travis-ci.org/nexumAG/generator-atomic.svg?branch=master)](https://travis-ci.org/nexumAG/generator-atomic) [![Dependency Status](https://david-dm.org/nexumAG/generator-atomic.svg)](https://david-dm.org/nexumAG/generator-atomic) This [Yeoman](http://yeoman.io) generator scaffolds an atomic-design templating framework based on the markup language [Pug](http://http://pug-lang.com/). It comes bundled with [BabelJS](http://babeljs.io/) for ES6 support, [Twitter Bootstrap](http://getbootstrap.com/), [LESS](http://www.lesscss.org/) or [SCSS](http://sass-lang.com/), ESLint and a build-in Livereload Server. Several Subgenerators (atom, molecule, organism...) help you during your project to quickly add new modules and link them properly. [Grunt](http://gruntjs.com/) helps you to automate your workflow with several helpful tasks like "build", "release" and "serve" (default). For automated Layout-testing you can use the [Galen Framework](http://galenframework.com/). ## Installation ### Install Yeoman ```bash npm install -g yo ``` ### Install generator-atomic To install generator-atomic from npm, run: ```bash npm install -g generator-atomic ``` ## Usage Initiate the generator in your project folder: ```bash yo atomic ``` To generate modules use following commands in your project folder: ```bash yo atomic:atom ``` ```bash yo atomic:molecule ``` ```bash yo atomic:organism ``` ```bash yo atomic:template ``` ```bash yo atomic:page ``` ## Grunt Workflow ### `grunt default` Runs [`grunt serve`](#grunt-serve). ### `grunt serve` Start a development server that watches files and livereloads on changes. Subtarget: `grunt serve:dist`: Serve a production Build. ### `grunt build` Build the (optimized for production) code into `/dist`. ### `grunt test` Build, Serve and run Layout-Tests with Galen. ### `grunt release` Create a Release of the Project (bump and tag). |Tasks| Description |---------|------- | `grunt release:patch` | Create a patch release of the Project. | `grunt release:minor` | Create a minor release of the Project. | `grunt release:mayor` | Create a mayor release of the Project. ### Directory Layout ``` ├── □ app | ├── □ 0_basics | | ├── _default.pug # HTML Mastertemplate (HTML Header/Footer) | | ├── controller.js # Javascript Main Controller | | ├── basics.yaml # Content YAML | | ├── main.scss # Stylesheet-file for Module imports | | ├── variables.scss # Stylesheet Variables | | ├── nojs.scss # Fallback CSS for Browsers without JS | | ├── ie9.scss # Fallback CSS for IE9 | | └── □ nx helpers # Less Helper Classes | ├── □ 1_atoms # Folder for Atoms | ├── □ 2_molecules # Folder for Molecules | ├── □ 3_organisms # Folder for Organisms | ├── □ 4_templates # Folder for Templates | └── □ 5_pages # Folder for Pages | └── □ nx # Folder for nx-navigation, only if navigation is chosen ``` ### Module Directory Layout Each Module (atom, molecule, organism...) has this Directory Layout: ``` | | ├── index.pug # Module Overview Page | | └── □ breadcrumb | | ├── breadcrumb.pug # Demo: showcase the Module in all available versions | | ├── _breadcrumb.pug # Markup: Pug Mixins (with _underscore) | | ├── breadcrumb.js # Script: ES2015 through BabelJS (not in atoms, templates and pages) | | ├── breadcrumb.unit.js # Unit-Test: Karma/Jasmine Unit Test | | ├── breadcrumb.scss # Stylesheet | | ├── breadcrumb.spec # Test: Galen Specfile for Layout Tests | | └── breadcrumb.yaml # Content Model for this module ``` ## Optional Navigation While initiating your project you can choose a toggleable navigation to navigate convenient through your atomic patterns. ### Customize the brand logo in the navigation Per default the nexum logo is shown in the navigation but you can add a your own logo path in the basics.yaml. ``` ├── □ app | ├── □ 0_basics └── basics.yaml # Content YAML ``` ## Note for Windows-Users: Windows Users with npm3/node5 should use the Microsoft PowerShell. The Standard-Shell has Problems with the prompts. ## Contributing You can contribute by * Issue submission * writing Unit Tests * providing Bugfixes Please use the [Angular Commit Message Format](https://github.com/angular/angular.js/blob/master/CONTRIBUTING.md#commit-message-format) for easier Changelog generation. ## Pull Request Guidelines * Please check to make sure that there aren't existing pull requests attempting to address the issue mentioned. We also recommend checking for issues related to the issue on the tracker, as a team member may be working on the issue in a branch or fork. * Non-trivial changes should be discussed in an issue first * Develop in a topic branch, not master * Add relevant tests to cover the change * Make sure test-suite passes: `npm test` * Squash your commits * Write a convincing description of your PR and why we should land it Thank you for your time, we appreciate it. ## License MIT Licence Copyright © 2015 Michael Seel, nexum AG Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. --- _Source: https://npm.io/package/generator-atomic · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._