Front-end Architecture with Atomic Design

Understanding better CSS with Atomic Design and building an awesome Architecture. — Part II

Part II

Now, you already know a little bit about Atomic Design. Let’s build our Architecture, I’ll show the way I did in my project.

Let's start with Bosons.

Boson Architecture

Before you get started, I want to explain that every $-index.scss serves to call others files.

Inside my $-index.scss file:

@import “boson-grid”;
@import “boson-responsive”;
@import “boson-variables”;
@import “boson-colors”;
@import “boson-typography”;
@import “boson-title”;
@import “boson-button”;
@import “boson-item”;
@import “boson-search”;
@import “boson-controls-icons”;

As you can see, it serves to @import. Using Sass, it doesn’t have any problem with @imports.

%boson-grid.scss

Here I set a grid that I created just with placeholders, based on Foundation.

So, I have my grid and I call it just like that:

.molecule-box {
  @extend %phone-12;
  @extend %tablet-6;
  @extend %desktop-4;
}

Foundation use small, medium and large. To improve semantics, I changed to phone, tablet and desktop. So, now I know when I should use each. ☺

For those who want to use: link

%boson-responsive.scss

Here is a simple mixin that I created to make my life easier.

@mixin breakpoint($point) {
  $breakpoint-tablet: $min-width;
  $breakpoint-desktop: $max-width;
@if $point == tablet {
    @media #{$breakpoint-tablet} { @content; }
  } @else if $point == desktop {
    @media #{$breakpoint-desktop} { @content; }
  }
}

Now I can define my @media-queries easier than before:

.myClass {
  border-color: blue;
@include breakpoint(tablet) {
    border-color: red;
  }
  
  @include breakpoint(desktop) {
    border-color: green;
  }
}

Remembering that already is MOBILE-FIRST! ☺

For those who want to use: link

%boson-variables.scss

Here I define all my variables. Fonts, paths, colors and some utilities.

Defining colors:

// Colors
$white: #fff;
$black: #000;
$gray: #edeff0;
$gray-light: #f7f8f8;
$gray-dark: #777777;
$blue: #1eb7db;
$blue-light: #00bddb;
$blue-dark: #353c44;
$green: #85c440;
$red: #a41034;

Paths:

// Paths
$path-to-images: “../images/”;
$path-to-fonts: “../../assets/fonts/”;
$path-to-icons: “../../assets/icons/”;

But why do you define colors on %boson-variables if already exist %boson-colors? Well, here’s the thing. I define all colors name, then in %boson-colors I define where I want to use it.

$body-bg: $gray;
$quark-link-text: $blue-dark;
$quark-arrow-down: $blue-dark;
$quark-arrow-down-hover: $blue;
$atom-logo-text: $blue-dark;
$atom-item-text: $blue-dark;
$atom-dropdown-item-hover: $blue;
$atom-dropdown-toggle-item-bg: $blue-light;
$atom-sign-in-bg: $green;
$atom-search-bg: $gray-dark;
$molecule-dropdown-bg: $blue-dark;
$organism-subheader-bg: $gray-light;

To be honest, this part I’m not quite sure If I should use in that way, because it take a lot of time to build it. Despite that it’s easier to use and to do some maintance. But it’s something that I’ve been testing.

%boson-button.scss

%boson-button {
  padding: 6px 12px;
  display: inline-block;
  border-radius: 3px;
  cursor: pointer;
  font-size: 1rem;
}
%boson-button-large {
  @extend %boson-button;
  padding: 10px 16px;
  font-size: 1.25rem;
}
%boson-button-small {
  @extend %boson-button;
  padding: 7px 9px;
  font-size: .9rem;
}

Front-end Architecture with Atomic Design

Front-end Architecture with Atomic Design