CSS Utilities
Below is a collection of layout and styling CSS utilities that can be added to HTML, or preferably mixed in with Sass.
Margins and Padding
This leverages BASSCSS margin and
padding utilities. As a result, one can add or remove padding/margin from
HTML elements by simply adding a class. Each class has a postfixed value
based in rem, with available values between 0 and 4, inclusive.
So, in order to add 4rem of padding to the top and bottom of
a div, it will require the class py4. To add 2rem of padding
to all sides of a div requires the p2 class.
The margin classes are also similar. However, rather than having the ability
to distinguish between x and y like the padding utilities, t, r, b,
and l are used for top, right, bottom, and left, respectively.
Colors
Background colors and text colors can be applied to HTML elements with ease. Each color,
for example, $blue-1, has a Sass variable that’s available. Additionally, each color
has a class to modify text-color, and a class to modify background-color. So for
$blue-1, the classes are .blue-1 and .bg-blue-1 respectively.