Utils

In addition to Bootstrap utilities, we have also included some. With these additions, the styling of the template follows an improved utility first approach.

Position

The template contains a basic positioning utility, which is very helpful to position absolute elements such as tags and badges. There is no responsive definition since the values are very small.

Reference

/* Positive values */
{property}-{size}

/* Negative values */
{property}-n{size}

/* Positions */
$positions: (
  '0': 0,         // 0px
  '1': 0.25rem,   // 4px
  '2': 0.5rem,    // 8px
  '3': 1rem,      // 16px
  '4': 1.5rem,    // 24px
  '5': 2rem       // 32px
);

Examples

// top: 0.25rem
<div class="t-1"></div>

// right: 0.5rem
<div class="e-2"></div>

// bottom: 1rem
<div class="b-3"></div>

// left: 1.5rem
<div class="s-4"></div>

// top: -0.25rem
<div class="t-n1"></div>

// right: -0.5rem
<div class="e-n2"></div>

// bottom: -1rem
<div class="b-n3"></div>

// left: -1.5rem
<div class="s-n4"></div>

Spacing

We have modified spacing utilities and added 6-7 for more versatile margin and padding. Also activated negative values.

Reference

/* Positive values */
{property}{sides}-{breakpoint}-{size}

/* Negative values */
{property}{sides}-{breakpoint}-n{size}

/* Positions */
$positions: (
  '0': 0,         // 0px
  '1': 0.25rem,   // 4px
  '2': 0.5rem,    // 8px
  '3': 1rem,      // 16px
  '4': 1.5rem,    // 24px
  '5': 2rem,      // 32px
  '6': 2.5rem,    // 40px
  '7': 3rem       // 48px
);

Examples

// margin-top: 0.25rem
<div class="mt-1"></div>

// margin-right: 0.5rem
<div class="me-2"></div>

// margin-bottom: 1rem
<div class="mb-3"></div>

// margin-left: 1.5rem
<div class="ms-4"></div>

// padding-top: -0.25rem
<div class="pt-n1"></div>

// padding-right: -0.5rem
<div class="pe-n2"></div>

// padding-bottom: -1rem
<div class="pb-n3"></div>

// padding-left: -1.5rem
<div class="ps-n4"></div>

// margin-top: 0.25rem for screen sizes large and above large
<div class="mt-lg-1"></div>

// margin: 0.25rem for extra small and small screen sizes 
//         0.5rem for medium, large and extra large screen sizes
//         1rem for extra extra large screen sizes. 
<div class="m-1 m-md-2 m-xxl-3"></div>

// padding: 0 for screen sizes from small to large, 3rem for extra large and above.
<div class="p-xl-7"></div>

Sizing

The template comes with static width and height utilities which supports Bootstrap's responsive syntax.

Reference

/* Values */
s{property}-{breakpoint}-{size}

/* Sizes */
$sizes: (
  '0': 0,         // 0px
  '1': 0.5rem,    // 8px
  '2': 1rem,      // 16px
  '3': 1.5rem,    // 24px
  '4': 2rem,      // 32px
  '5': 2.5rem,    // 40px
  '6': 3rem,      // 48px
  '7': 3.5rem,    // 56px
  '8': 4rem,      // 64px
  '9': 4.5rem,    // 72px
  '10': 5rem,     // 80px
  '11': 5.5rem,   // 88px
  '12': 6rem,     // 96px
  '13': 6.5rem,   // 104px
  '14': 7rem,     // 112px
  '15': 7.5rem,   // 120px
  '16': 8rem,     // 128px
  '17': 8.5rem,   // 136px
  '18': 9rem,     // 144px
  '19': 9.5rem,   // 152px
  '20': 10rem,    // 160px
  '21': 10.5rem,  // 168px
  '22': 11rem,    // 176px
  '23': 11.5rem,  // 184px
  '24': 12rem,    // 192px
  '25': 12.5rem,  // 200px
  '30': 15rem,    // 240px
  '35': 17.5rem,  // 280px
  '40': 20rem,    // 320px
  '45': 22.5rem,  // 360px
  '50': 25rem,    // 400px
  '60': 30rem,    // 480px
  '70': 35rem,    // 560px
  '80': 40rem,    // 640px
);

Examples

// width: 5rem
<div class="sw-10"></div>

// height: 5rem
<div class="sh-10"></div>

// width: 5rem for screen sizes from small to large, 10rem for extra large and above.
<div class="sw-10 sw-xl-20 "></div>

// height: 5rem for screen sizes from small to large, 10rem for extra large and above.
<div class="sh-10 sh-xl-20 "></div>

// width: 100% for screen sizes from small to large, 10rem for extra large and above.
<div class="w-100 sw-xl-20 "></div>

// height: 100% for screen sizes from small to large, 10rem for extra large and above.
<div class="h-100 sh-xl-20 "></div>