Responsive and space Guide

Breakpoint

// Some code
/*-- Breakpoint --*/
$mobile-down: 600px;
$mobile-up: 601px;

$tablet-down: 1024px;
$tablet-up: 1025px;

$laptop-down: 1440px;
$laptop-up: 1441px;

For certain case studies, you can customize the breakpoint according to your needs

How to use

@use '../../base/variables'as v;

.class-name {
   color: blue;
   
   @media (max-width: v.$mobile-down) {
      color: black;
   }
}

Devices to check

Make sure the display of the website is still good at every resolution

Space

For space, we should use even number (and it's multiplication, eg: 4,8,12,24,32 etc)

// BAD
.class-name {
    padding: 3px;
}

// GOOD
.class-name {
    padding: 4px;
}