Responsive Paddings
Responsiveness of elements is mostly achieved through paddings. The xs- utilty classes are set up specifically to handle
responsiveness based on 5 steps. Once any of the xs- class is applied, there is always a slight modification to content
padding within the range of these steps. The five steps are screen sizes with minimum widths 500px, 800px, 950px and 1025px
respectively. Media queries are set in pixels to prevent modifications that may occur when the font size of the html body is modified which
may redefine the response of the content. There are only three utility classes based on these 5 steps which are xs-1, xs-2 and
xs-3 respectively although there is a slight ending utility class built upon the xs- utility classes.
and this is achieved by placing an "s" after the aforementioned classes. Hence, we have xs-1s,
xs-2s and xs-3s classes. The utility classes are discussed based on their responses on screen sizes.
| Class | <500px | >=500px | >=800px | >=950px | >=1025px |
| xs-1 | 0% padding | 0% padding | 5% padding | 10% padding | 10% padding |
|---|
| xs-2 | 0% padding | 0% padding | 10% padding | 10% padding | 10% padding |
|---|
| xs-3 | 0% padding | 0% padding | 10% padding | 10% padding | 20% padding |
|---|
| xs-1s | 2% padding | 0% padding | 5% padding | 10% padding | 10% padding |
|---|
| xs-2s | 2% padding | 0% padding | 10% padding | 10% padding | 10% padding |
|---|
| xs-3s | 2% padding | 0% padding | 10% padding | 10% padding | 20% padding |
|---|
From the above, we can see that for any "xs-" utility class, the minimum padding is set at 0% unless the
class ends with an "s" which sets the minimum padding at 2% of the current screen size.
Container Box Items
The box utilty class has the property of inline-block display type. It is is mostly used to achieve
fluid responsive paddings. Box items are naturally built to have responsive feature although they are not the main responsive classes.
While the xs- classes may have a swift response, the box classes have a smoother transition
that reflect an elasticity when page width is expanded. While box sets an inline-block element, box-full sets an inline-block element
at 100% width. The responsive nature is based on the xs- responsive utility classes which is discussed earlier.
A box element can be integerated with the responsive class by combining the box class with the xs- class
to give a boxs- utilty class in which any of the "screen" steps (i.e 1, 2 or 3) mentioned earlier can be applied on it.
For example, an element with a utility class boxs-1 will have its display type as inline-block while its responsive feature
is maintained. Hence the following box utility classes are allowed
boxs-1, boxs-2,
boxs-3, boxs-1s,
boxs-2s, boxs-3s. By default, all responsive utility classes boxs- have an 100% width.