Nickelback Plays Music

    atomic-core

    0.12.0 • Public • Published

    atomic-core NPM version

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

    Translations

    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

    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...

    Install

    npm i atomic-core

    DownloadsWeekly Downloads

    26

    Version

    0.12.0

    License

    MIT

    Last publish

    Collaborators

    • luissardon