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)

Front-end Architecture

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. ☺

Front-end Architecture with Atomic Design

Front-end Architecture with Atomic Design