CSS

The default system has its own set of CSS libraries for data formatting.
Since version 5, the decision was made to divide the large file containing all the style-related information into smaller files tailored to the intended purpose.

Currently, the system is designed to handle three types of CSS files, to which external libraries will be added as a fourth option.
Likewise, these can be replaced by the CSS framework of your choice or in conjunction with it.

Files

siteup-base

This file contains basic information about the behavior of siteup styles. It is divided into several sections according to the nature of the data.

siteup-t, siteup-s, siteup-m, siteup-l, siteup-w

These five files provide responsive changes according to the dimensions used, which can be mini, small, medium, large, or wide. If you're not so interested in the fine detail of sizes, you can use the practical versions instead: practical-s for mobile; practical-m for tablets and practical-l for desktop versions.

Notation

The following notation has been established:

type - dimension modifier

type or group

Refers to the group or concept on which the modifier acts. Colors, borders, transparencies.

dimension

Optional; whether or not it affects a particular dimension (rwd). Small, large, medium.

modifier

Optional; how it affects the selected type. Number of units, flexible, bordered.

Thus, something like .text-mred would indicate that it is a text modifier, which acts when using a medium-sized screen, coloring the text red.

It is suggested that if new classes are added, they comply with this nomenclature.

Responsiveness

As you can guess, CSS is designed to be responsive, so it is suggested that when designing and adding class attributes to tags, you work from the smallest format to the largest.

The elements listed below explain how the elements that have been modified work.

Note

I include the style attribute on some elements to display the elements. I should note that I don't recommend using it in regular programming; that's what a style sheet is for, to avoid this type of bad practice. It's only being used for demonstration purposes.