Atomic

Atomic components

Atomic Component is a micro framework for building Atomic Design components that utilize JavaScript. It is a dependency of other packages and isn’t used on its own.

Use cases

This framework is intended to be used in conjunction with adherence to Atomic Design principles. It helps provide a uniform way to build Atomic components using HTML, CSS, and JavaScript.

Atomic prefixing standards for atoms, molecules, and organisms are covered in greater detail in cfgov-refresh documentation.

An example use case in building a Molecule: molecules are prefixed with “m-” in CSS, JavaScript, and HTML files, as demonstrated below.

HTML:

<div class="m-notification">
    <span class="m-notification__icon cf-icon"></span>
    <div class="m-notification__content" role="alert">
        <div class="m-notification__message">message</div>
            <p class="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();

Latest Updates

Page last edited:
Edit page