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