| 1 | # Atomatic
|
| 2 |
|
| 3 | Atomatic is a flexible and easy to use build and development tool for Atomic Design systems. It enables you and your team to concentrate on what really matters, growing and improving your component library. Therefore it takes over the whole process of watching and updating the style guide. Due to it's flexibility and it's file based approach it can be integrated in almost any modern development stack with ease. And since Atomatic isn't bound to a specific templating language your style guide and production environment can share their source files in order to prevent yourself from unnecessary code duplication and circumvention of your style guide.
|
| 4 |
|
| 5 |
|
| 6 | ## Features
|
| 7 |
|
| 8 | - integration with any build tool or task runner such as [webpack](https://webpack.github.io), [gulp](http://gulpjs.com/), [Grunt](https://gruntjs.com/), [brunch](http://brunch.io/), ...
|
| 9 | - template engine of your choice ([Pug](https://pugjs.org), [Twig](https://twig.sensiolabs.org/), [Liquid](https://shopify.github.io/liquid/), [Jinja2](http://jinja.pocoo.org/), etc.)
|
| 10 | - meaningful and reusable fake data with the help of [JSON Schema Faker](https://www.npmjs.com/package/json-schema-faker)
|
| 11 | - build in livereload and synchronized browser testing in development mode based on [Browsersync](https://browsersync.io/)
|
| 12 | - css analysis for usage of colors, fonts and media queries
|
| 13 | - static style guide version for deployment
|
| 14 |
|
| 15 | ## Requirements
|
| 16 |
|
| 17 | Atomatic is written in Node.js and requires Version: 7+. So far it has been tested in Mac and Linux only.
|
| 18 |
|
| 19 |
|
| 20 | ## Demo
|
| 21 |
|
| 22 | In case you don't have time to read the documentation first and for better idea of options and capabilities in general we created a couple of demo projects:
|
| 23 |
|
| 24 | Gulp stack with Pug _(comming soon)_
|
| 25 | Gulp stack with Twig _(comming soon)_
|
| 26 | Gulp stack with Liquid _(comming soon)_
|
| 27 | Webpack stack with Twig _(comming soon)_
|
| 28 |
|
| 29 |
|
| 30 | ## Installation
|
| 31 |
|
| 32 | In order to make integration and updating of Atomatic in your project as easy as possible it is published as single npm module.
|
| 33 |
|
| 34 | ```shell
|
| 35 | $ npm install atomatic -s
|
| 36 | ```
|
| 37 |
|
| 38 | ## Usage
|
| 39 |
|
| 40 | Atomatic is shipped with a [default configuration](https://github.com/stefan-lehmann/atomatic/blob/master/config/default.json), that can be overridden easily in order to adapt the setup to the requirements of your project. Adaption just need to be passed in on instantiation of Atomatic.
|
| 41 |
|
| 42 | ```javascript
|
| 43 | const config = {
|
| 44 | /* CONFIGURATION OBJECT THAT OVERRIDES DEFAULT CONFIG */
|
| 45 | };
|
| 46 | const Atomatic = require('atomatic');
|
| 47 | new Atomatic(config[, watch[, callback]]);
|
| 48 | ```
|
| 49 | ### Options
|
| 50 |
|
| 51 | - **baseDir (default: 'source/styleguide')**
|
| 52 | _relative path to the root folder of the style guide sources_
|
| 53 | - **dest (default: 'public')**
|
| 54 | _relative path to the target folder for generated files_
|
| 55 | - **templateExt (default: 'pug')**
|
| 56 | _file extension of template files_
|
| 57 | - **htmlExt (default: 'html')**
|
| 58 | _file extension of generated html files_
|
| 59 | - **markdownExt (default: 'md')**
|
| 60 | _file extension of markdown files (for documentation purposes)_
|
| 61 | - **dataExt (default: 'json5')**
|
| 62 | _file extension of data files_
|
| 63 | - **defaultDataFileName (default: 'data')**
|
| 64 | _name of the default data files, which act as fallback in case there is no specific data file that matches the name of the template file_
|
| 65 | - **sections (default: see [Sections config](#sections-config))**
|
| 66 | _enables the different Atomatic collectors with a distinct configuration for each of them_
|
| 67 | - **app (type: Object)**
|
| 68 | _configuration of the viewer app_
|
| 69 | - **server (type: Object)**
|
| 70 | _configuration local web server that serves the viewer in development mode_
|
| 71 | - **dumpData (default: false)**
|
| 72 | _tells Atomatic to dump generated data to the file system in order to simplify debugging_
|
| 73 | - **logLevel (default: 2)**
|
| 74 | _sets the level of verbosity_
|
| 75 |
|
| 76 | # License
|
| 77 |
|
| 78 | All files are released under the [MIT license](https://raw.githubusercontent.com/stefan-lehmann/atomatic/master/LICENSE.md).
|
| 79 |
|