Atomic Design is a methodology for creating design systems in a structured and scalable way. It was introduced by Brad Frost and is based on the idea of breaking down UI components into smaller, reusable building blocks, similar to how atoms form molecules and organisms in chemistry.

The Five Levels of Atomic Design:

• Atoms The smallest building blocks (e.g., buttons, input fields, icons, labels).
• Molecules Simple components made up of multiple atoms (e.g., a search bar combining an input field and a button).
• Organisms: Complex components composed of multiple molecules and/or atoms (e.g., a website header containing a logo, navigation menu, and search bar).
• Templates: Page-level structures that define the layout of organisms but without final content (e.g., a wireframe of a product page).
• Pages: Fully designed screens with real content, ready for deployment.
  

Why Use Atomic Design?

• Promotes consistency in UI design.
• Enhances scalability and reusability.
• Improves collaboration between designers and developers.
• Helps maintain a modular design system.

Create a new react project with npm, vite or yarn add add the required packages:

From the root-dir of your project, create your first component with the following command:

Where <platform> is one of the following options:

• react: React / NextJS, plain JavaScript
• react-ts: React / NextJS, TypeScript
• react-native: React Native, plain JavaScript
• react-native-ts: React Native, TypeScript
• react-ts-vite: React, Vite,TypeScript

This will create an .atomic-bomb file in the root of your project. This file contains the configuration for the atomic bomb tool. Please include it in your git repository.It contains the following information (or something similar, depending on your chosen platform):

Install SASS

Install SASS/SCSS in your project (if you haven't already) with the following command:

add the atomic resources

I've created a package that contains the atomic resources for you. It setups an entire SCSS framework you can control with a single Design Token, a JSON file.

Execute following command in the root of your project:

This will give you the following file tree:

Description

• The design\token.json file contains all the design tokens for your project.
• In the fonts folder you can place the fonts to use in the project. freesans is already in there.
• The styles\**\* folders contain al the SCSS script files for the project (not listed here).
• The main.scss file is the overall SCSS in which all components are included
• and the ./src/resources/styles/main.css file is the compiled CSS file you should include in your app and Storybook.

scripts

Add the following scripts to your package.json file:

Since there is actually no standard (yet) for how a design token should be constructed, I designed my own. It's working perfectly for me and this implementation and covers quite a lot, but you can change it or feel free to adapt my SCSS code to your own needs

In this example you'll see the token I used for constructing this (react) website.

The structure is fairly self-explanatory. But there are some items you should take a look at:

• unit: the unit to use in your project. This is used in the SCSS code to convert the values to the correct unit.
• page: the default page settings. This is used in the SCSS code to set the default page settings.
• colors: the colors to use in your project. This is used in the SCSS code to set the colors and the shades (in %).
• fonts: the fonts to use in your project, you can refer to the name instead of the actual family.
  Attention: the URI is double-quoted, otherwise the script crashes/
• headings: the headings to use in your project. Again the double quoting and name to refer to
• spacing: the spacing to use in your project. (currently not implemented yet)

The main.scss has the following content:

Including the file in Storybook is done in the preview.js file.

Including the file in React is done in the index.js|tsx,main.tsx or App.js|tsx files.

Once you've set up the platform, Use the following command to create a new component:

Where type is one of: atom, molecule, organism, page or template

and name is the name of the component you want to create.
The component will be created in the src/components/<type>/<component name> folder.

Naming conventions are important, so atomic bomb use Pascal Casing to correctly name the components and the files. To match the react requirements, atomic bomb automatically converts button to Button ,If you need something like ButtonGroup use following syntax:

This will create a folder ..../molecules/ButtonGroup with the following content:

The ButtonGroup.tsx file contains the component itself, the ButtonGroup.interface.tsx file contains the TypeScript interface for the component, the ButtonGroup.stories.tsx file contains the Storybook stories for the component, the ButtonGroup.test.tsx file contains the unit tests for the component, the ButtonGroup.mock.ts file contains the mock data for the component and the _ButtonGroup.style.scss file contains the SCSS code for the component.
The _index.scss file is used to include all components in a single file. This is used to include all components in the main.scss file.The index.ts file is used to export the component

In the parent directory, the index.ts file is used to export all components in the folder - the same applies to _index.scss

You can include this component in your project by importing it in the index.ts file of the molecules folder.:

The code for ButtonGroup.tsx looks like this:

multiple components

Creating multiple components at once is also possible, Make sure there are no spaces between the names.

removing a component

Just remove the directory of the component you want to remove.And make sure you remove the component from the index.ts|js and _index.css file one level up.

The Rust version will be based on the same principles as the React version. It will be a CLI tool that creates boilerplate code for individual front-end components. The components will be based on the Atomic Design principles and will be easily customizable and reusable.