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="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();