COMPONETIFY
DIVIDE AND YOU WILL CONQUER
DIVIDE AND YOU WILL CONQUER
1
Tokenify
EVERYTHING IS A TOKEN.
OTHERWISE WRONG
Buy Now!
.button{
color: #00acc1;
font-weight: 500;
padding: 16px;
border-radius: 10px;
}.button{
color: $color-brand-blue;
font-weight: $font-weight-med;
padding: $padding-MD;
border-radius: $border-radius-SM;
}// Border Radius
$border-radius-XS: 0.125rem;
$border-radius-round: 50%;
// Colors - Brand
$color-brand-blue: #00acc1;
// Colors - States
$color-state--error: #d50000;
// Colors - Neutrals
$color-gray: #7b7b7b;
// Color - Gradients
$color-gradient-brand:
($color-brand-blue, $color-state--error);
// Font Weights
$font-weight-med: 500;
// Font Families
$font-roboto: Roboto;
// Font Sizes
$font-size-base: 1rem;
$font-size-MD: ($font-size-base * 1);
// Line Heights
$line-height-MD: 1.25;
// Sizing
$sizing-base: 1rem;
$sizing-MD: ($sizing-base * 0.75);
// Elevations
$elevation-MD:
0 $sizing-XS $sizing-SM 0 rgba($color-black, 0.3);
// Transitions
$transition-base: all ease 0.3s;
// Text Color
$text-color-muted: $color-gray;
// Z-Index
$z-index-default: 1;
$z-index-header: 1000;2
BEMit
BLOCK
ELEMENT
MODIFIER
.block {}
.block__element {}
.block--modifier {}
.block__element--modifier {}Make your code self-documented
<figure class="media">
<img
class="logo-img"
src="logo.png"
alt="Wayne Interprises">
<figcaption>
<h3 class="title">
Wayne Inc. Corp.
</h3>
<p class="alpha">
Gotham Major Tech Suit
</p>
</figcaption>
</figure><figure class="logo-caption">
<img
class="logo-caption__img"
src="logo.svg"
alt="Wayne Interprises">
<figcaption>
<h3 class="logo-caption__title">
Wayne Inc. Corp.
</h3>
<p class="
logo-caption__desc
logo-caption__desc--soft">
Gotham Major Tech Suit
</p>
</figcaption>
</figure>3
ORGANISM
MOLECULES
MOLECULES
ATOMS
ATOMS
ATOMS
ATOMIC DESIGN
Page
TEMPLATE
ORGANISM
MOLECULE
ATOM
SHOULD THAT
BE AN ATOM?
We can reuse it.
It isolates a functionality
It has its own semantic/function
Enhances code readability
Extends functionality
Deep logic which returns a single node
It doesn't depend on another atom
4
GENERATORS
HAVE YOUR OWN
CSS FRAMEWORK
[property]-[side]-[sizing]
.padding-left-MD
.margin-top-XS
[color-property]-[color]
.font-color-muted
.bg-color-brand-blue
[d: display]-[type]
.d-flex
font-[property]-[sizing]
.font-size-LG
.font-weight-lig
ATOMS MOLECULES
TOKENS COLLECTIONS
$sides: "-top", "-left"...;
$font-sizes: (
1: $font-size-1,
2: $font-size-2,
);
$colors: (
black: $color-black,
brand-blue: $color-brand-blue,
);
$displays: "block","flex"...;
$font-weights: (
lig: $font-weight-lig,
reg: $font-weight-reg,
);
$sizings: (
"-MD": $sizing-MD,
"-collapsed": 0,
);GENERATORS
@each $color, $value in $colors {
.bg-#{$color} {
background-color: $value;
}
}
@each $color, $value in $text-colors {
.text-color-#{$color} {
color: $value;
}
}
@each $size, $value in $font-sizes {
.font-size-#{$size} {
font-size: $value;
}
}@each $side in $sides {
@each $name, $value in $sizings {
.margin#{$side}#{$name} {
margin#{$side}: $value;
}
.padding#{$side}#{$name} {
padding#{$side}: $value;
}
}
@each $color, $value in $colors {
.border#{$side}-#{$color} {
border#{$side}-width: $sizing-4XS;
border#{$side}-style: solid;
border#{$side}-color: $value;
}
}
}5
TOO MUCH?
PURGE YOUR SINS... AND CSS
body {
background-color: #600090;
color: #fff;
font-family: arial, helvetica, sans-serif;
font-size: 1em;
font-weight: bold;
margin: auto;
text-align: center;
overflow-x: hidden;
}
a {
display: inline-block;
}
a:link {
color: orange;
}
a:visited {
color: orangered;
}
a:hover {
color: yellow;
}
a:active {
color: white;
}
#menu {
width: 100vw;
height: calc(100vh - 70px);
margin-bottom: 70px;
}
#bottomBar {
z-index: 10;
position: absolute;
padding-left: 15px;
width: 100vw;
height: 70px;
bottom: -100px;
animation: bottomBar 1s 0s forwards ease-out,
bottomBarColourScroll 2s 600s infinite;
background-color: rgba(128, 0, 255, 0.5);
}
@keyframes bottomBar {
from {
bottom: -100px;
}
to {
bottom: 0;
}
}
@keyframes bottomBarColourScroll {
from {
filter: hue-rotate(0deg);
}
to {
filter: hue-rotate(360deg);
}
}
.bbbContainer {
display: inline-block;
margin-right: 30px;
width: 200px;
height: 200px;
}
@keyframes reduceSpacer {
from {
height: 100vh;
}
to {
height: 0vh;
}
}
#subText {
text-align: center;
font-size: 2vw;
text-shadow: 0px 0px 1vw rgba(255, 255, 255, 0.9);
}
.promoLink {
border-radius: 15px;
transition: transform 0.2s;
margin: 5px;
filter: grayscale(70%);
}
#bbb1,
#bbb2,
#bbb3,
#bbb4,
#bbb5 {
display: block;
margin-top: 100px;
border-radius: 5px;
box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.6);
filter: grayscale(50%);
transition: all 1s ease;
cursor: pointer;
animation: bbbGlideUp 1s 1s forwards ease-out;
}
#bbb2 {
animation: bbbGlideUp 1s 1.2s forwards ease-out;
}
#bbb3 {
animation: bbbGlideUp 1s 1.4s forwards ease-out;
}
#bbb4 {
animation: bbbGlideUp 1s 1.6s forwards ease-out;
}
#bbb5 {
animation: bbbGlideUp 1s 1.8s forwards ease-out;
}
@keyframes bbbGlideUp {
from {
margin-top: 100px;
}
to {
margin-top: 5px;
}
}
#bbb1:hover,
#bbb2:hover,
#bbb3:hover,
#bbb4:hover,
#bbb5:hover {
transform: scale(1.1);
box-shadow: 4px 8px 10px 14px rgba(0, 0, 0, 0.5);
filter: grayscale(0%);
}
#fbLike {
z-index: 15;
position: absolute;
bottom: 3px;
right: -100px;
box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.6);
animation: fbLikeGlideIn 1s 7s forwards ease-out paused;
}
@keyframes fbLikeGlideIn {
from {
right: -100px;
}
to {
right: 5px;
}
}
@keyframes flash {
0% {
filter: brightness(0) invert(1);
}
20% {
filter: brightness(1) invert(0);
}
40% {
filter: brightness(0) invert(1);
}
60% {
filter: brightness(1) invert(0);
}
80% {
filter: brightness(0) invert(1);
}
100% {
filter: brightness(1) invert(0);
}
}
PURGE CSS
Purgecss is a tool to remove unused CSS. It can be used as part of your development workflow. Purgecss comes with a JavaScript API, a CLI, and plugins for popular build tools.
6
Q&A
LET'S CODE
Thanks!
from Chewy and brandy!
/Nikodermus
nicolasm@nikodermus.media
