Recently, I had the pleasure of reading Brad Frost’s “Atomic Design”. If you haven’t gotten to it yet, I’d definitely recommend that you do. It’s available online HERE. To summarize, Atomic Design goes through the methodology of creating a design system and compares it to the organism system. There are Atoms, molecules, organisms, templates, and pages.
Atoms are the basic building blocks of matter, then the atoms of our interfaces serve as the foundational building blocks that comprise all our user interfaces.
Molecules are simple groups of UI elements functioning together as a unit.
Organisms are more elaborate UI components created from groups of molecules and/or atoms and/or other organisms.
Templates are complete page-level objects that place components into a layout and express the design’s underlying structure. They are the representation of what Pages will become.
Pages are templates that show what a UI looks like with real representative content in place.
This breakdown by Smashing magazine gives a good example of how this file structure may look like:
Issues I faced
Once the design was planned and completed, developing FriendlyAtoms was pretty simple. Ha. Kidding. Nothing is ever as simple as expected. Making FriendlyAtoms gave me a new and deeper appreciation of Mark Otto (@mdo) and Jacob Thornton (@fat), original makers of Bootstrap. The biggest issues I faced / currently face is the FriendlyAtoms grid. Oh mer gawd. The grid.
Unlike Bootstrap, that allows you to describe the width of the column, currently, FA currently only supports one column size .col. You can add endless columns to a row, and each flex to fit it’s parent container;
This is something I want to work on, but first I want to dig deeper into how Bootstrap created its grid.
Another thing I had issues with (which turned out to be really easy) was learning to create an NPM package. (It was my time.) Thankfully, this tutorial really helped.
Up next, I plan to extend FA by adding navigation, as well as other components.
You can see the full project here.
