Basic Atomic Component
npm install atomic-componentMicro Framework for building Atomic Components.
npm install.gulp build.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:
``
Please check the URL and try again.
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
, 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.
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.
1. TERMS
2. LICENSE
3. CFPB Source Code Policy