User:Lakelimbo/Syntax: Difference between revisions
- Page tools
- What links here
- Related changes
- Printable version
- Permanent link
- Page information
- User tools
- User contributions
- Logs
- View user groups
(Created page with "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 <code>div</code>s because it's the only...") |
mNo edit summary |
||
Line 174: | Line 174: | ||
| <div class="m-1" style="background: #ffa3a3">0.25rem</div> | | <div class="m-1" style="background: #ffa3a3">0.25rem</div> | ||
|- | |- | ||
| <code>. | | <code>.m-2</code> | ||
| <div class=" | | <div class="m-2" style="background: #ffa3a3">0.5rem</div> | ||
|- | |- | ||
| <code>.m-3</code> | | <code>.m-3</code> | ||
Line 186: | Line 186: | ||
<div class="col-12 col-lg-6 p-1"> | <div class="col-12 col-lg-6 p-1"> | ||
==Float== | ==Float== | ||
Modifier: <code>.f-*-(alignment here)</code> | Modifier: <code>.f-*-(alignment here)</code> |
Latest revision as of 15:11, 8 May 2022
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 div
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:
<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
topl
to apply the styles only to the leftpr
only to the rightpt
only to the toppb
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
toml
to apply the styles only to the leftmr
only to the rightmt
only to the topmb
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
|