User:Lakelimbo/Syntax

From Fanon Wiki

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 divs 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:

<div class="THE CLASS HERE">

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

<div class="CLASS1 CLASS2 CLASS3 CLASS4">

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

Modifiers for mobile

The classes, such as .text-center, 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 .text-*-center. The asterisk means that you can add one of the following:

  • sm - Small. For screens with 568px and up.
  • md - Medium. For screens with 768px and up.
  • lg - Large. For screens with 992px and up.

So .text-center can become .text-lg-center, 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 class="text-sm-left text-md-center text-lg-right", 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.

Class Result
.br-0
No radius
.br-1
0.25rem
.br-2
0.5rem
.br-3
1rem
.br-4
50px
.br-5
100%

Text align

Modifier: .text-*-(alignment here)

Class Result
.text-start or .text-center
Text at the start
.text-center
Text at the center
.text-end or .text-right
Text at the end

Font size

Modifier: no modifier

Class Result
.fs-1 or .fs-normal
13pt
.fs-2
14pt
.fs-3
16pt
.fs-4 or .fs-big
20pt
.fs-5 or .fs-double
200%

Display

Modifier: .display-*-(display here)

Class Result
.d-inline
inline
.d-block
block
.d-flex
flex
.d-grid
grid
.d-table
table
.d-none
none

Padding

Modifier: .p-*-(value)

  • Change the initial p to
    • pl to apply the styles only to the left
    • pr only to the right
    • pt only to the top
    • pb only to the bottom
Class Result
.p-0
No padding
.p-1
0.25rem
.p-2
0.5rem
.p-3
1rem
.p-4
2rem

Margin

Modifier: .m-*-(value)

  • Change the initial m to
    • ml to apply the styles only to the left
    • mr only to the right
    • mt only to the top
    • mb only to the bottom
Class Result
.m-0
No margin
.m-1
0.25rem
.m-2
0.5rem
.m-3
1rem
.m-4
2rem

Float

Modifier: .f-*-(alignment here)

Class Result
.f-none
No float
.f-left
Float left
.f-right
Float right