Back

There are the following tricks:

CSS rem & responsive size system

The first we need to define base font-size:

html {
    font-size: 10px;
}

Then we can define all sizes in rem instead of px:

width: 1.5rem; // That means 15px;

Best practice to define the initial font size:

html {
    font-size: 100%;  // That means 16px - default browser value.
    font-size: 62.5%; // That means 10px
}

body {
    font-size: 1.6rem;
}

Initial CSS:

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

body { 
  font-family: Roboto, "Helvetica Neue", sans-serif;
  color: #000;
  background-color: #fff;

  box-sizing: border-box;
}

Font import:

@font-face {
  font-family: 'Roboto';
  font-weight: 500;
  src: url('../assets/fonts/Roboto/Roboto-Medium.ttf')  format('truetype');
}

Import CSS from third party library

@import "~tippy.js/dist/tippy.css";

Initial CSS

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: inherit;
}

html {
    font-size: 10px;
}
  
body { 
    font-family: $pl-font-family;
    color: #000;
    background-color: #fff;
    box-sizing: border-box;
    font-size: 1.6rem;
}

input, textarea, button {
    font-family: inherit;
}