Atomic Lab

Component Guide Generator based on partial templates (ejs/jade/haml/html)

View on Github

About Atomic Lab

Atomic Lab is a component guide generator, you can build with Node.js

The porpose

There are so many styleguide generators out there such as hologram, fractal etc.. But, Do you really need those style guide generators? Actually I and some other friends dislike leaving comments on css files for making documents

These days, when making websites, You may often separate a template into many parts such as "header" "footer" "menu" by using template like ejs. So I thought It is more efficient to use such partial templates to generate documents instead of using css files


$ npm install atomic-lab --save

or install with yarn.

$ yarn add atomic-lab


Via npx

$ npx atomic-lab build

With $(npm bin)

$ $(npm bin)/atomic-lab build

Your project directory will look like this

├── partials/
│   └── _header.ejs
│   └── _main.ejs
│   └── ...
├── styleguide/
│   └── components.json
│   └── config.json
│   └── bundle.js
│   └── index.html


Specify src/dist directory

Via npx

$ npx atomic-lab build --src ./components --dist ./styleguide

or npm bin

$ $(npm bin)/atomic-lab build --src ./components --dist ./styleguide


When you want to use with ejs

# @category organism
# @name uc-header
# @css ./uc-header.scss
# @desc grid system and clearfix

<!--@template tilte="Blog" -->
<header class="uc-header _black">
<div class="uc-header-logo"><a href="/"><%= title %></a></div>
<div class="uc-header-menu _small-hidden" role="navigation">
    <a href="#">About</a>
    <a href="#">Portfolio</a>
    <a href="#">GitHub</a>
<div class="uc-menu-btn _medium-hidden _large-hidden"><button><i class="uc-menu-btn-icon"></i></button></div>
<!--@/template -->

<uc-header title="Horic Design" />

## You can write markdown here
you can highlight souce codes with following syntax

Starter Kit

I prepared git repository so that you can easily get on board


Make styleguide with EJS


Make styleguide with Jade


Make styleguide with Haml