Components are first categorized and put in one of the following folders, based on Atomic Design principles: utilities/, atoms/, molecules/, organisms/, templates/, or pages/. Atomic Design is a methodology for breaking down and front end development into manageable, modular pieces that are easier to maintain. Boilerplate uses Atomic Design because it is useful, thought out, well documented, and has a strong community.
The notable addition to the typical Atomic Design categories is utilities/ (although Atomic Design doesn’t oppose this kind of category at all.) The utilities/ folder is meant for utilities - code that isn’t specific to a single component.
It’s okay for components to change categories during development. Whenever you’re trying to choose a category for a component, make your best guess, erring on making it smaller. For example, if you’re torn between something being an atom or a molecule, start with atom.
Each component should have its own folder. These folder names should use kebab-case. Within that folder, a component may contain the following:
A Sass file, with the same name as the folder, defining the styles for this component.
A Twig file, with the same name as the folder, containing example markup for this component.
A README.md, with additional, component specific documentation.