Front-end Architecture with Atomic Design
Understanding better CSS with Atomic Design and building an awesome Architecture. — Part III
Part III
Boson’s part were made, let’s go to the Atoms now.
Remember that the Atoms gain mass when it interacts with the Higgs Field, which in this cases are the bosons.
%atom-buttons.scss
Here are all the settings of my buttons.
.atom-sign-in {
@extend %boson-button-small;
background: $atom-sign-in-bg;
color: $white;
margin-top: 20px;
}
You can see that it have interaction with %boson-button, so it gained mass.
.atom-sign-in {
padding: 7px 9px;
display: inline-block;
border-radius: 3px;
cursor: pointer;
font-size: .9rem;
backgorund: #85c440;
color: #fff;
margin-top: 20px;
}
Let’s see another example.
%atom-titles
Here are all the settings of my titles (h1, h2, h3, h4, h5, h6)
.atom-title-header {
@extend %boson-title;
color: $atom-title-logo;
font-size: 5rem;
}.atom-title-stack {
@extend %boson-title;
color: $atom-title-stack;
font-size: 2rem;
}
I built in this way, so I have a pattern.
atom: can be atom, boson, molecule, organism;
title: what is it? title, text, label;
header: from where it comes? header, footer, aside;
My architecture (not finished yet)
Thank you for following this series of posts. I hope you enjoyed and if you have any question, feel free to ask me. And if you have suggestions or complaints, do not hesitate to come talk to me. ☺