Přeskočit na obsah Přejít na navigaci

Používáme soubory cookies

Soubory cookies využíváme k analýze návštěvnosti, zapamatování preferencí a zlepšování použitelnosti webu. Souhlas udělíte kliknutím na tlačítko "Souhlasím".

Nastavení Souhlasím

Souhlas můžete také odmítnout.

Utility třídy

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


.ov-s

Scroll


.ov-a

Auto


.ov-v

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