atomic-component

AtomicComponent

Micro Framework for building Atomic Components.

Installation

• Run npm install.
• Run gulp build.

Usage

This framework is intended to be used in conjuction with adherance to Atomic Design principles. It helps provide a uniform way to build Atomic components using HTML, CSS, and JavaScript. An example use case in building a Molecule is as follows:

Molecules are prefixed with “m-” in CSS, JavaScript, and HTML files.

HTML:

<div class="m-notification">
    <span class="m-notification_icon cf-icon"></span>
    <div class="m-notification_content" role="alert">
        <div class="h4 m-notification_message">message</div>
            <p class="h4 m-notification_explanation">
              Please check the URL and try again.
            </p>
        </div>
    </div>
</div>

CSS:

.m-notification {
    display: none;
    position: relative;
    padding: @notification-padding__px;
    …

JavaScript:

const CONSTANTS = { MESSAGE: 'message', EXPLANATION: 'explanation' };

const NotificationMolecule = Molecule.extend( {
      classes: {
        isVisible:    'm-notification__visible'
      },

      ui: {
        base:        '.m-notification',
        explanation: '.m-notification_explanation',
        message:     '.m-notification_message'
      },

      initialize: function() {
        this.ui.message.textContent = CONSTANTS.MESSAGE;
        this.ui.explanation.textContent = CONSTANTS.EXPLANATION;
      }
} );

NotificationMolecule.constants = CONSTANTS;
NotificationMolecule.init();

Gulp Tasks

In addition to gulp watch, there are a number of other important gulp tasks, particularly gulp build and gulp test, which will build the project and test it, respectively. Using the gulp --tasks command you can view all available tasks. The important ones are listed below:

gulp build           # Concatenate, optimize, and copy source files to the /lib/ directory.
gulp lint            # Lint the scripts and build files.
gulp test            # Run unit tests.

Contributing

We welcome your feedback and contributions. See the contribution guidelines for more details.

Additionally, you may want to consider contributing to the Capital Framework, which is the front-end pattern library used in this project.

Open source licensing info

• TERMS
• LICENSE
• CFPB Source Code Policy