Atomatic

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.

Features

• integration with any build tool or task runner such as webpack, gulp, Grunt, brunch, ...
• template engine of your choice (Pug, Twig, Liquid, Jinja2, etc.)
• meaningful and reusable fake data with the help of JSON Schema Faker
• build in livereload and synchronized browser testing in development mode based on Browsersync
• css analysis for usage of colors, fonts and media queries
• static style guide version for deployment

Requirements

Atomatic is written in Node.js and requires Version: 7+. So far it has been tested in Mac and Linux only.

Demo

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:

Gulp stack with Pug (comming soon)
Gulp stack with Twig (comming soon)
Gulp stack with Liquid (comming soon)
Webpack stack with Twig (comming soon)

Installation

In order to make integration and updating of Atomatic in your project as easy as possible it is published as single npm module.

$ npm install atomatic -s

Usage

Atomatic is shipped with a default configuration, 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.

const config = {
  /* CONFIGURATION OBJECT THAT OVERRIDES DEFAULT CONFIG */
};
const Atomatic = require('atomatic');     
new Atomatic(config[, watch[, callback]]);

Options

• baseDir (default: 'source/styleguide')
  relative path to the root folder of the style guide sources
• dest (default: 'public')
  relative path to the target folder for generated files
• templateExt (default: 'pug')
  file extension of template files
• htmlExt (default: 'html')
  file extension of generated html files
• markdownExt (default: 'md')
  file extension of markdown files (for documentation purposes)
• dataExt (default: 'json5')
  file extension of data files
• defaultDataFileName (default: 'data')
  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
• sections (default: see Sections config)
  enables the different Atomatic collectors with a distinct configuration for each of them
• app (type: Object)
  configuration of the viewer app
• server (type: Object)
  configuration local web server that serves the viewer in development mode
• dumpData (default: false)
  tells Atomatic to dump generated data to the file system in order to simplify debugging
• logLevel (default: 2)
  sets the level of verbosity

License

All files are released under the MIT license.