Particle is an opinionated set of tools and a methodology for design implementation. Particle empowers users to rapidly prototype front end components by creating a living, breathing style guide and using it to create front end code. Particle handles both dependency management and code compilation, so developers can create and modify components quickly and easily regardless of chosen design system.
Particle comes with bootstrap installed which provides several example components. You can choose to either use these existing components or remove them depending on your needs.
Particle uses atomic design for organization. Atomic design is a tool to break down designs into re-usable pieces. These pieces act like lego bricks, combining smaller pieces to create larger and larger components. In particle we start with protons, and eventually work up to pages.
Protons -> Atoms -> Molecules -> Organisms -> Templates -> Pages
Protons are used to create your living style guide and are atomic design components unique to Particle. Protons are included globally by design, so there is no need to declare protons inside of larger twig templates. Protons are pure assets that don't result in usable twig files elsewhere, such as colors, typography, image styles and mixns.
Protons are divided into printing and non-printing variables. Printing variables will generate css, while non-printing variables will not.
Particle comes with bootstrap 4, built in and displays the bootstrap color palette on the colors demo page by default.
You can add custom color variables to your design system by declaring them in the non-printing/_colors.scs file.
source/default/_patterns/00-protonsprotons/non-printing/_colors.scssn// Greyscale$c-white: #fff;$c-gray--light: #f0f0f0;$c-gray: #d0d0d0;$c-gray--dark: #878787;//Colors$c-primary: #ed786a;$c-secondary: #fd887a;