UTILITY TŘÍDY (PDF, 1.03 MB) přehled používaných tříd pro front-end MENDELU.
Text
Font size 1 (.fz-1)
Font size 2 (.fz-2)
Font size 3 (.fz-3)
Font size 4 (.fz-4)
Font size 5 (.fz-5)
Font size 6 (.fz-6)
Bold text (.fw-b)
Relative bolder weight text (.fw-br)
Light weight text (.fw-l)
Relative lighter weight text (.fw-lr).
Italic text (.fs-i)
Text align left (.tal-l)
Text align center (.tal-c)
Text align right (.tal-r)
Text decoration underline (.td-u)
Uppercased text (.tt-u)
Lowercased text (.tt-l)
Capitalized text (.tt-c)
Display
.d-b
.d-ib
.d-i
Flexbox
A
B
C
A
B
C
A
B
C
A
B
C
A
B
C
.w-15 .w-30-md .w-100-sm
.w-25 .w-30-md .w-100-sm
.fxg-1 .w-100-sm
.as-fs
.as-fe
.as-c
.as-b
.as-s
A
B
C
D
A
B
C
A
B
Grid
column 1
column 2
column 3
Float
.fl-l
.fl-r
.fl-n
Width
em
.w1
.w2
.w3
.w4
.w5
%
.w-10
.w-25
.w-50
.w-75
.w-100
Height
em
.h1
.h2
.h3
.h4
%
.h-10
.h-25
.h-50
.h-75
.h-100
Padding
.p-1
.p-2
.p-3
.p-4
.p-5
.px-1
.px-2
.px-3
.px-4
.px-5
.pt-1
.pr-2
.pb-3
.pl-4
Margin
.m-1
.m-2
.m-3
.m-4
.m-5
.mx-1
.mx-2
.mx-3
.mx-4
.mx-5
.mt-1
.mr-2
.mb-3
.ml-4
Borders
.b-a
.b-a .bs-ds
.bl
.b-r .bw-2
.b-t .bw-3
.b-b
.b-a .br-pill
.b-a .br-100
.b-a .btw-0 .brw-0 .blw-0
Opacity
.o-1
.o-5
.o-7
.o-10
Position
.pos-r
.pos-a .top-50 .left-50
.pos-r
.pos-a .top-0 .left-100
Vertical Align
| .va-bl baseline |
.va-t top |
.va-m middle |
.va-b bottom |
.va-tt text-top |
.va-tb text-bottom |
Overflow
.ov-h
Hidden loremipsumdolorsitamet
Hidden loremipsumdolorsitamet
.ov-s
Scroll
Scroll
.ov-a
Auto
Auto
.ov-v
Visible loremipsumdolorsitamet
Visible loremipsumdolorsitamet
Ratio
.ratio-1x1
.ratio-4x3
.ratio-3x2
.ratio-16x9
.ratio-21x9
Rotation
.rotate-45
.rotate-90
.rotate-180
Stretched link
Title
Lorem ipsum...
Stretched link