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.
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;
}