Bask - CSS Library

• Padding util

.pad is the utility to handle the padding. It has 2 parameters, which go directly in the class name.

.pad-{direction}-{number}, where {direction} has to be a value from the $directions map (t = top,r = right,b = bottom,l = left), and {number} is our multiplier for the $u variable

pad is padding
r is right, the direction
3 is the multiplier parameter.
Which translates to padding-right: 24px;, because the multiplier parameter (3) gets multiplied by 8px.

• Margin util

.mar is the utility to handle the margin. It has 2 parameters, which go directly in the class name.

.mar-{direction}-{number}, where {direction} has to be a value from the $directions map (t = top,r = right,b = bottom,l = left), and {number} is our multiplier for the $u variable

mar is margin
b is bottom, the direction
4 is the multiplier parameter.
Which translates to margin-bottom: 32px;, because the multiplier parameter (4) gets multiplied by 8px.

• Color util

.color is the utility to handle the color. It has 1 parameter.

.color-{variable} where {variable} is the color variable defined in the _variables.scss file.
By default there are 5 color variables in Bask: main, alt, off, white and black.

• Background color util

.bg is the utility to handle the background-color. It has 1 parameter.

.bg-{variable} where {variable} is the color variable defined in the _variables.scss file.
By default there are 5 color variables in Bask: main, alt, off, white and black.

• Spacer (padding) util

.spacer is the utility to generate a vertical spacer via padding.

.spacer-{value} where {value} is a number which goes from 0 to 5.
This value will get multiplied by 8px (the $u variable) a number of times. Check the mixin in the assets/css/core/_mixins.scss file for more info.

• Spacer (margin) util

.spacer-margin is the utility to generate a vertical spacer via margin.

.spacer-margin-{value} where {value} is a number which goes from 0 to 5.
This value will get multiplied by 8px (the $u variable) a number of times. Check the mixin in the assets/css/core/_mixins.scss file for more info.

• Display utils

.d is the utility to handle the display property. It can have multiple parameters.

.d-{value} where {value} is the display property.

The display flex utility class has a few modifiers to handle the flexbox.
.d-f-y stands for the Y axis of the flexbox (container), it needs 1 more modifier:

.d-f-x handles the X axis, requiring 1 additional modifier:

• Width util

.w is the utility to handle the width size based on %. It has 1 parameter.

.w-{value} where {value} is the % value of the size, and it ranges from 0 to 100

---

• Height util

.h is the utility to handle the height size based on %. It has 1 parameter.

.h-{value} where {value} is the % value of the size, and it ranges from 0 to 100

Bask's grid system is based on CSS Grid, and it works with just 2 elements (container and column) instead of the typical trio (container, row and column).
Check the mixin in the assets/css/core/_mixins.scss file for more info.

Bask uses SASS (SCSS) variables to handle media query breakpoints, colors, fonts, but most importantly the $u variable.

The whole idea around the $u variable is to keep a good amount of CSS/UI consistency, which is quite useful when it comes to develop and maintain the visual aspect of web projects, aswell for theming and scaling up/down the UI (responsive, accesibility).

• Title

.title is the class which states the default title styles, it supports 6 size modifiers:

• Text

.text is the class which states the default text styles, it supports 6 size modifiers.

• Text utils