atomic-core

OOP Javascript Library for Building Components Under the Atomic Design System for The Atomic Project.

Translations

• Spanish

How it works

This library works under the concept of atomic design, so their only purpose is to give us a way to manage the functional part in this concept, for making components.

If you didn't know about The Atomic Project at all, I recommend you to first take a look at ***"Parts of an Atomic Component"***.

Features

• Creating components classes by Inheritance.
• Targeting on his view by passing the Component's Name (name) through the constructor of the class.
• Manages communication between components through Actions Dispatchers.
• Global access to the components.

Getting started

Installation

Node

npm install atomic-core --save

Making a Component

1st Create a Component

Into a new file, we're going to create a Button class that extends from Atom.

//- button.js
 
'use strict';
 
import Atom from 'atomic-core';
 
/**
 * Button Component
 *
 * @author Luis Sardon
 *
 * @type atom
 *
 */
 
class Button extends Atom {
  constructor(name) {
    super(name);
  }
}
 
extends default Button;

2nd Instantiate a Component

For this purpose the only way to instantiate an Atom is within a Molecule or Organism, so into a new file, we're going to create a Menu class that extends from Molecule to accomplish it.

//- menu.js
 
'use strict';
 
import Molecule from 'atomic-core';
import Button from 'button.js';
 
/**
 * Menu Component
 *
 * @author Luis Sardon
 *
 * @type molecule
 *
 */
 
class Menu extends Molecule {
  constructor(name) {
    super(name);
 
    this.myButton = new Button('myButton');
    // where 'myButton' is the data-name attribute value of the component
    // from the html view.
  }
}
 
extends default Menu;

... currently in development...