%20(2).svg)
The market is evolving rapidly. While many ideas see success in no time, that success is seldom sustainable if the solution itself is not sustainable or if it is not implemented at the right time.
In most of the cases, it begins with a website or mobile application. While there are many approaches to build a website or mobile application, picking the right one is important. The approach should help you come up with a minimum viable product (MVP) fast and adapt to user feedback and market needs easily.
In this two-part article, We'll discuss how we can quickly build a sustainable website, with or without a designer, using Theming Library. We'll discuss how to make the website scalable using the atomic design principle.
1. Introduction to Atomic Design
2. Introduction to Theming library
3. Setup Theming library with React
4. Create atoms
1. Overview of molecules and organisms
2. Templates and page
3. Fine tune the theme
4. Add dark mode
5. Deploy
Atomic Design methodology allows us to split user interface (UI) code into smaller components and build it bottom-up into a fully functional page or application.
As the name suggests, the Atomic Design principle is inspired from the basic building blocks of nature, which are the atoms, molecules, and organisms.
The key driving concept of the Atomic design methodology is to build reusable UI components that accelerate the development process and create an application with a uniform look.
.svg)
We use atomic design principles to build atoms, molecules, organisms, templates, and pages for more manageable and easy-to-use code.
Theming libraries are a set of pre-built UI components, which adhere to the Material design system. It can be used to easily build professional and beautiful applications. Many libraries also include some basic customization options for typography, spacing, and color themes.
Most programmers/developers are problem solvers and are more focused on the business logic. They take inspiration from other websites with limited understanding of what dimensions to use (and many do not even bother with that). A Theming Library helps create a uniform appearance across the application without asking the developer to deeply understand principles of design. It allows her or him to easily replicate the referring application or design.
Most professional designers stick to Material design system as a baseline to build creative and innovative applications. To speed up development and deployment, designers are able to customize specific components of the library and insert creative elements as needed. So the tradeoff is this: instead of designers having to build 20 components from scratch, they only have to build 2.
Many Theming libraries also provide dark theme support.
Another reason to still use a Theming Library is to upgrade your entire site (based on the fast-changing market requirements) with minimal effort.
We already have atoms and molecules from the theming library. What are we building with them?
Let’s build it and see how it comes together.
We are building a React application with Material UI following Atomic Design principles.
Refer: Material UI
This version does not have margins or dimensions. Now, to build out each section.
We'll use Visual Studio Code with a prettier plugin for the rest of the article, you can use your favorite integrated development environment for React.
Use create-react-app for a fast build
npx create-react-app reminder-atomic-app
cd reminder-atomic-app
The application is now functional; let us add a Material UI library to the application.
npm install @material-ui/core
npm install @material-ui/icons
You can add icons to make your application even more visually appealing. Standard open source icons are available freely for use in the application; no worries about searching for icons and licensing.
As per the de facto standard, pages are not components. It is simply the styling of templates. So here we go…
On a side note, we prefer having absolute imports in the application. So, We'll be using absolute imports for the rest of the application. It can be easily added by adding a file jsconfig.json (or tsconfig.json for typescript) in the root folder with the following content.
{
"compilerOptions": {
"baseUrl": "src"
},
"include": ["src"]
}
Let us begin by setting up a theme
.svg)
We have set up a base theme and the theme provider in the main application. We'll discuss more as we proceed further.
We are not adding any colors, spacing, or theming yet. That is the beauty of this approach, begin with MVP features and style it as per your convenience.
But before that, let us see if our application runs without errors…
npm start
1. Header: Atom
2. Title: Atom
3. Subtitle: Atom
4. Label: Atom
5. Text: Atom
6. Primary button: Atom
7. Icon button: Atom
8. List item: Molecule
9. Event list: Organism
10. Next event banner: Organism
11. Add event: Organism
1. Atom: This is the smallest possible unit in the application that can be used directly. For example, the header cannot be broken down further, but it can exist on its own.
2. Molecule vs. Organism: This part can get tricky. One rule of thumb is, if a collection of atoms or molecules form a unit and there are chances that this unit will be reused in other components again, then it’s a molecule. For example,
3. List item: is a collection of atoms and it is further used as a child in the list component; hence it is a molecule.
4. Event List: But the “event list” and the “next event banner'' are not used in any other components as “child”, hence they are organisms.
5. List: is a collection of molecules and “banner” is a collection of atoms; yet both are called organisms because of their usage in the application.
6. Templates: are just a special placeholder component for other components. Hence we do not consider it as a direct parent for the components.
7. Components: If a component that is directly added to a template is reused in other components, it’s a molecule by precedence.
Also, it is not necessary that a molecule is always a collection of atoms; a molecule can also be a collection of other molecules.
We can either add the component in theApp.jsto to preview it, or use Storybook to render each component. We are using Storybook for the rest of this article. (Don’t worry, I will include the code for that too in the project repository.)
Material UI already comes with a button component that works perfectly in most cases. But sometimes, we can wrap it in an atom to achieve a uniform look across the app. Here, we’ll make sure that all developers use the same button with the same dimensions and colors.
.svg)
Test file and Storybook setup are included in the Github Project link here.
Create an atom for the Icon Button
Though called the button component, Primary Button and Icon Button look completely different and present different types of information. Hence, the need to create two components.
Unlike two different buttons, we’ll be using a single typography component for all types of text in the application, except the label text. This example is for a very simple typography component. Many more mappings and configurations can be done per your requirements.
We will not create a label component. It is very rare that a label will be used in isolation. We'll use it either with a dropdown or a Text Field, and therefore, can be considered a single atom.
.svg)
We will cover how to set up molecules, organisms, templates and everything else to complete the page in Part 2; unlike your favorite show, we’ll not make you wait for it.
You can find the full project on Github from the Zemoso author.
An earlier version of this blog post was published by the author on Medium.
.png)
.png)
.svg)
.svg)
.svg)
.png)
.png)
.png)
.svg)
.jpg)
.svg)
The market is evolving rapidly. While many ideas see success in no time, that success is seldom sustainable if the solution itself is not sustainable or if it is not implemented at the right time.
In most of the cases, it begins with a website or mobile application. While there are many approaches to build a website or mobile application, picking the right one is important. The approach should help you come up with a minimum viable product (MVP) fast and adapt to user feedback and market needs easily.
In this two-part article, We'll discuss how we can quickly build a sustainable website, with or without a designer, using Theming Library. We'll discuss how to make the website scalable using the atomic design principle.
1. Introduction to Atomic Design
2. Introduction to Theming library
3. Setup Theming library with React
4. Create atoms
1. Overview of molecules and organisms
2. Templates and page
3. Fine tune the theme
4. Add dark mode
5. Deploy
Atomic Design methodology allows us to split user interface (UI) code into smaller components and build it bottom-up into a fully functional page or application.
As the name suggests, the Atomic Design principle is inspired from the basic building blocks of nature, which are the atoms, molecules, and organisms.
The key driving concept of the Atomic design methodology is to build reusable UI components that accelerate the development process and create an application with a uniform look.
We use atomic design principles to build atoms, molecules, organisms, templates, and pages for more manageable and easy-to-use code.
Theming libraries are a set of pre-built UI components, which adhere to the Material design system. It can be used to easily build professional and beautiful applications. Many libraries also include some basic customization options for typography, spacing, and color themes.
Most programmers/developers are problem solvers and are more focused on the business logic. They take inspiration from other websites with limited understanding of what dimensions to use (and many do not even bother with that). A Theming Library helps create a uniform appearance across the application without asking the developer to deeply understand principles of design. It allows her or him to easily replicate the referring application or design.
Most professional designers stick to Material design system as a baseline to build creative and innovative applications. To speed up development and deployment, designers are able to customize specific components of the library and insert creative elements as needed. So the tradeoff is this: instead of designers having to build 20 components from scratch, they only have to build 2.
Many Theming libraries also provide dark theme support.
Another reason to still use a Theming Library is to upgrade your entire site (based on the fast-changing market requirements) with minimal effort.
We already have atoms and molecules from the theming library. What are we building with them?
Let’s build it and see how it comes together.
We are building a React application with Material UI following Atomic Design principles.
Refer: Material UI
This version does not have margins or dimensions. Now, to build out each section.
We'll use Visual Studio Code with a prettier plugin for the rest of the article, you can use your favorite integrated development environment for React.
Use create-react-app for a fast build
npx create-react-app reminder-atomic-app
cd reminder-atomic-app
The application is now functional; let us add a Material UI library to the application.
npm install @material-ui/core
npm install @material-ui/icons
You can add icons to make your application even more visually appealing. Standard open source icons are available freely for use in the application; no worries about searching for icons and licensing.
As per the de facto standard, pages are not components. It is simply the styling of templates. So here we go…
On a side note, we prefer having absolute imports in the application. So, We'll be using absolute imports for the rest of the application. It can be easily added by adding a file jsconfig.json (or tsconfig.json for typescript) in the root folder with the following content.
{
"compilerOptions": {
"baseUrl": "src"
},
"include": ["src"]
}
Let us begin by setting up a theme
We have set up a base theme and the theme provider in the main application. We'll discuss more as we proceed further.
We are not adding any colors, spacing, or theming yet. That is the beauty of this approach, begin with MVP features and style it as per your convenience.
But before that, let us see if our application runs without errors…
npm start
1. Header: Atom
2. Title: Atom
3. Subtitle: Atom
4. Label: Atom
5. Text: Atom
6. Primary button: Atom
7. Icon button: Atom
8. List item: Molecule
9. Event list: Organism
10. Next event banner: Organism
11. Add event: Organism
1. Atom: This is the smallest possible unit in the application that can be used directly. For example, the header cannot be broken down further, but it can exist on its own.
2. Molecule vs. Organism: This part can get tricky. One rule of thumb is, if a collection of atoms or molecules form a unit and there are chances that this unit will be reused in other components again, then it’s a molecule. For example,
3. List item: is a collection of atoms and it is further used as a child in the list component; hence it is a molecule.
4. Event List: But the “event list” and the “next event banner'' are not used in any other components as “child”, hence they are organisms.
5. List: is a collection of molecules and “banner” is a collection of atoms; yet both are called organisms because of their usage in the application.
6. Templates: are just a special placeholder component for other components. Hence we do not consider it as a direct parent for the components.
7. Components: If a component that is directly added to a template is reused in other components, it’s a molecule by precedence.
Also, it is not necessary that a molecule is always a collection of atoms; a molecule can also be a collection of other molecules.
We can either add the component in theApp.jsto to preview it, or use Storybook to render each component. We are using Storybook for the rest of this article. (Don’t worry, I will include the code for that too in the project repository.)
Material UI already comes with a button component that works perfectly in most cases. But sometimes, we can wrap it in an atom to achieve a uniform look across the app. Here, we’ll make sure that all developers use the same button with the same dimensions and colors.
Test file and Storybook setup are included in the Github Project link here.
Create an atom for the Icon Button
Though called the button component, Primary Button and Icon Button look completely different and present different types of information. Hence, the need to create two components.
Unlike two different buttons, we’ll be using a single typography component for all types of text in the application, except the label text. This example is for a very simple typography component. Many more mappings and configurations can be done per your requirements.
We will not create a label component. It is very rare that a label will be used in isolation. We'll use it either with a dropdown or a Text Field, and therefore, can be considered a single atom.
We will cover how to set up molecules, organisms, templates and everything else to complete the page in Part 2; unlike your favorite show, we’ll not make you wait for it.
You can find the full project on Github from the Zemoso author.
An earlier version of this blog post was published by the author on Medium.
The market is evolving rapidly. While many ideas see success in no time, that success is seldom sustainable if the solution itself is not sustainable or if it is not implemented at the right time.
In most of the cases, it begins with a website or mobile application. While there are many approaches to build a website or mobile application, picking the right one is important. The approach should help you come up with a minimum viable product (MVP) fast and adapt to user feedback and market needs easily.
In this two-part article, We'll discuss how we can quickly build a sustainable website, with or without a designer, using Theming Library. We'll discuss how to make the website scalable using the atomic design principle.
1. Introduction to Atomic Design
2. Introduction to Theming library
3. Setup Theming library with React
4. Create atoms
1. Overview of molecules and organisms
2. Templates and page
3. Fine tune the theme
4. Add dark mode
5. Deploy
Atomic Design methodology allows us to split user interface (UI) code into smaller components and build it bottom-up into a fully functional page or application.
As the name suggests, the Atomic Design principle is inspired from the basic building blocks of nature, which are the atoms, molecules, and organisms.
The key driving concept of the Atomic design methodology is to build reusable UI components that accelerate the development process and create an application with a uniform look.
We use atomic design principles to build atoms, molecules, organisms, templates, and pages for more manageable and easy-to-use code.
Theming libraries are a set of pre-built UI components, which adhere to the Material design system. It can be used to easily build professional and beautiful applications. Many libraries also include some basic customization options for typography, spacing, and color themes.
Most programmers/developers are problem solvers and are more focused on the business logic. They take inspiration from other websites with limited understanding of what dimensions to use (and many do not even bother with that). A Theming Library helps create a uniform appearance across the application without asking the developer to deeply understand principles of design. It allows her or him to easily replicate the referring application or design.
Most professional designers stick to Material design system as a baseline to build creative and innovative applications. To speed up development and deployment, designers are able to customize specific components of the library and insert creative elements as needed. So the tradeoff is this: instead of designers having to build 20 components from scratch, they only have to build 2.
Many Theming libraries also provide dark theme support.
Another reason to still use a Theming Library is to upgrade your entire site (based on the fast-changing market requirements) with minimal effort.
We already have atoms and molecules from the theming library. What are we building with them?
Let’s build it and see how it comes together.
We are building a React application with Material UI following Atomic Design principles.
Refer: Material UI
This version does not have margins or dimensions. Now, to build out each section.
We'll use Visual Studio Code with a prettier plugin for the rest of the article, you can use your favorite integrated development environment for React.
Use create-react-app for a fast build
npx create-react-app reminder-atomic-app
cd reminder-atomic-app
The application is now functional; let us add a Material UI library to the application.
npm install @material-ui/core
npm install @material-ui/icons
You can add icons to make your application even more visually appealing. Standard open source icons are available freely for use in the application; no worries about searching for icons and licensing.
As per the de facto standard, pages are not components. It is simply the styling of templates. So here we go…
On a side note, we prefer having absolute imports in the application. So, We'll be using absolute imports for the rest of the application. It can be easily added by adding a file jsconfig.json (or tsconfig.json for typescript) in the root folder with the following content.
{
"compilerOptions": {
"baseUrl": "src"
},
"include": ["src"]
}
Let us begin by setting up a theme
We have set up a base theme and the theme provider in the main application. We'll discuss more as we proceed further.
We are not adding any colors, spacing, or theming yet. That is the beauty of this approach, begin with MVP features and style it as per your convenience.
But before that, let us see if our application runs without errors…
npm start
1. Header: Atom
2. Title: Atom
3. Subtitle: Atom
4. Label: Atom
5. Text: Atom
6. Primary button: Atom
7. Icon button: Atom
8. List item: Molecule
9. Event list: Organism
10. Next event banner: Organism
11. Add event: Organism
1. Atom: This is the smallest possible unit in the application that can be used directly. For example, the header cannot be broken down further, but it can exist on its own.
2. Molecule vs. Organism: This part can get tricky. One rule of thumb is, if a collection of atoms or molecules form a unit and there are chances that this unit will be reused in other components again, then it’s a molecule. For example,
3. List item: is a collection of atoms and it is further used as a child in the list component; hence it is a molecule.
4. Event List: But the “event list” and the “next event banner'' are not used in any other components as “child”, hence they are organisms.
5. List: is a collection of molecules and “banner” is a collection of atoms; yet both are called organisms because of their usage in the application.
6. Templates: are just a special placeholder component for other components. Hence we do not consider it as a direct parent for the components.
7. Components: If a component that is directly added to a template is reused in other components, it’s a molecule by precedence.
Also, it is not necessary that a molecule is always a collection of atoms; a molecule can also be a collection of other molecules.
We can either add the component in theApp.jsto to preview it, or use Storybook to render each component. We are using Storybook for the rest of this article. (Don’t worry, I will include the code for that too in the project repository.)
Material UI already comes with a button component that works perfectly in most cases. But sometimes, we can wrap it in an atom to achieve a uniform look across the app. Here, we’ll make sure that all developers use the same button with the same dimensions and colors.
Test file and Storybook setup are included in the Github Project link here.
Create an atom for the Icon Button
Though called the button component, Primary Button and Icon Button look completely different and present different types of information. Hence, the need to create two components.
Unlike two different buttons, we’ll be using a single typography component for all types of text in the application, except the label text. This example is for a very simple typography component. Many more mappings and configurations can be done per your requirements.
We will not create a label component. It is very rare that a label will be used in isolation. We'll use it either with a dropdown or a Text Field, and therefore, can be considered a single atom.
We will cover how to set up molecules, organisms, templates and everything else to complete the page in Part 2; unlike your favorite show, we’ll not make you wait for it.
You can find the full project on Github from the Zemoso author.
An earlier version of this blog post was published by the author on Medium.
.svg)
.svg){kind=small}
.png){kind=small}
