This Yeoman generator scaffolds an atomic-design templating framework based on the markup language Jade. It comes bundled with BabelJS for ES6 support, Twitter Bootstrap, LESS, 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 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.
npm install -g yo
To install generator-atomic from npm, run:
npm install -g generator-atomic
Initiate the generator in your project folder:
yo atomic
To generate modules use following commands in your project folder:
yo atomic:atom
yo atomic:molecule
yo atomic:organism
yo atomic:template
yo atomic:page
Runs grunt serve
.
Start a development server that watches files and livereloads on changes.
Subtarget: grunt serve:dist
: Serve a production Build.
Build the (optimized for production) code into /dist
.
Build, Serve and run Layout-Tests with Galen.
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. |
├── □ app
| ├── □ 0_basics
| | ├── _default.jade # HTML Mastertemplate (HTML Header/Footer)
| | ├── controller.js # Javascript Main Controller
| | ├── basics.yaml # Content YAML
| | ├── main.less # Less-file for Module imports
| | ├── variables.less # Less Variables
| | ├── nojs.less # Fallback CSS for Browsers without JS
| | ├── ie9.less # Fallback CSS for IE9
| | ├── □ bootstrap # Twitter bootstrap
| | └── □ 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_templates # Folder for Templates
Each Module (atom, molecule, organism...) has this Directory Layout:
| | ├── index.jade # Module Overview Page
| | └── □ breadcrumb
| | ├── breadcrumb.jade # Demo: showcase the Module in all available versions
| | ├── _breadcrumb.jade # Markup: Jade Mixins (with _underscore)
| | ├── breadcrumb.js # Script: ES2015 through BabelJS (not in atoms, templates and pages)
| | ├── breadcrumb.less # Styles: LESS precompiler
| | ├── breadcrumb.spec # Test: Galen Specfile for Layout Tests
| | └── breadcrumb.yaml # Content Model for this module
- Fork it
- Create your feature branch:
git checkout -b my-new-feature
- Commit your changes:
git commit -am 'feat(filename): add my-new-feature...'
- Push to the branch:
git push origin my-new-feature
- Submit a pull request
Thank you for your time, we appreciate it.
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.