User:Lakelimbo/Syntax

To make a better environment for editing, I made a ton of CSS classes for different purposes that can be used on articles. With this we can essentially avoid creation of templates that serve only the purpose of adding some CSS style. This way also allows for variant versions of the classes for different screen sizes (mobile responsivity).

How to use
In most cases, the classes may work on any sort of element, but I'll use only s because it's the only one that is guaranteed to work with everything 100% (at least by default).

Add an element, then add a class to it:

Pretty simple. But you can "stack" multiple classes, so don't hesitate to use them:

I think now you can understand how it works, right? Well, let's see what's available.

Modifiers for mobile
The classes, such as, exists on their own (so it means that the style will apply to all viewports), but as mentioned, there are versions for different screen sizes. On most sections you'll see a label with "Modifier" and the code with an asterisk, like. The asterisk means that you can add one of the following:
 * - Small. For screens with 568px and up.
 * - Medium. For screens with 768px and up.
 * - Large. For screens with 992px and up.

So  can become , meaning that the style will apply only if the viewport is >992px wide.

With this in mind, you can add to an element multiple classes with different view sizes, like, meaning that the text will align to the left if the viewport is small, to the center if the viewport is medium-sized, and to the right if it's large. Got it?

REMEMBER: The classes shown on the table start with a dot because it's how the class is interpreted by the CSS, obviously you do not use the dot when applying the class to an element.

Border radius
Modifier: no modifier.

Text align
Modifier:

Font size
Modifier: no modifier

Display
Modifier:

Padding
Modifier:
 * Change the initial  to
 * to apply the styles only to the left
 * only to the right
 * only to the top
 * only to the bottom

Margin
Modifier:
 * Change the initial  to
 * to apply the styles only to the left
 * only to the right
 * only to the top
 * only to the bottom

Float
Modifier: