February 3, 2021 12:25 am Posted by: dimi

The basic philosophy is to use flex-box in headers and an internal container to style the form. Also in this tutorial we will be using a basic sass structure using typography , mix-ins, UI Fabric and a custom style. By combining them all together we can then re-use lots of our CSS code from mix-ins by adding the @include command.

For writing nice and neat sass code I got an idea from a really great colleague , Bibek , who I would like to thank and he does some nice tutorials on YouTube. Search for “code with Bibek” in YouTube to get an idea of his simple and neat work.

For the compilation we used Koala application.

View and download code here: Google Home Page

The scss structure I followed with the help of my colleague:

// 1. Basics
@import 'scss/base/mixins';
@import 'scss/base/variables';
@import 'scss/base/display';
@import 'scss/base/reset';
@import 'scss/base/typography';
@import 'scss/base/forms';

// 2.  UI Fabric
@import 'scss/uifabric/fabric.css';

// 3. Fonts
@import 'scss/fonts/fonts';

// 4. Custom
@import 'scss/custom/custom';

p {
  color: $primary-color;
}

.box {
  @include size(500px, 300px);
  background: $primary-color;
}