Struktūros klasės

Relume stiliaus vadovas

Client-First V2.1 • Paskutinį kartą atnaujinta 2024 m. sausio 9 d

Klientas – pirmieji dokumentai

Tipografija

HTML antraštės žymos
HTML žymos apibrėžia numatytuosius antraščių stilius.

Visos H1 antraštės

1 antraštė

Visos H2 antraštės

2 antraštė

Visos H3 antraštės

3 antraštė

Visos H4 antraštės

4 antraštė

Visos H5 antraštės

5 antraštė

Visos H6 antraštės

6 antraštė

Klasių antraštė
Klasių antraštės, kai tipografijos stilius neatitinka numatytosios HTML žymos.

antraštės stilius-h1

Antraštės stilius-h1

antraštės stilius-h2

Antraštės stilius-h2

antraštės stilius-h3

Antraštės stilius-h3

antraštės stilius-h4

Antraštės stilius-h4

antraštės stilius-h5

Antraštės stilius-h5

antraštės stilius-h6

Antraštės stilius-h6

Kitos HTML žymos
HTML žymės apibrėžia numatytuosius teksto stilius.

Visos pastraipos

Visos nuorodos

Visos užblokuotos citatos

Blokuoti citatą

Visi nesutvarkyti sąrašai

Nėra ženklelių sąrašo
Nėra ženklelių sąrašo

Visi nesutvarkyti sąrašai

Nėra ženklelių sąrašo
Nėra ženklelių sąrašo

Visi užsakyti sąrašai

Nėra ženklelių sąrašo
Nėra ženklelių sąrašo
Nėra ženklelių sąrašo

Teksto dydžiai
Tekstas nustato klasių dydžius, kai tipografijos dydis neatitinka numatytosios HTML žymos.

teksto dydis-didelis

teksto dydis-vidutinis

teksto dydis-reguliarus

teksto dydis-mažas

teksto dydžio mažytė

Teksto svoriai
Teksto svorio kategorijos, kai tipografijos svoris neatitinka numatytosios HTML žymos.

text-weight-xbold

text-weight-xbold (800)

tekstas – svoris – paryškintas

text-weight-bold (700)

tekstas-svoris-pusiau paryškintas

text-weight-semibold (600)

tekstas-svoris-vidutinis

tekstas-svoris-vidutinis (500)

tekstas-svoris-normalus

text-weight-normal (400)

tekstas-svoris-lengvas

text-weight-light (300)

Teksto stiliai
Teksto stiliaus klasės, kai tipografijos stilius neatitinka numatytosios HTML žymos.

teksto stilius – kursyvas

teksto stiliaus perbraukimas

teksto stiliaus didžiosios raidės

text-style-nowrap

teksto stiliaus citata

teksto stiliaus nuoroda

teksto stilius-2 eilutės

teksto stilius-3 eilutės

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

teksto stiliaus nutildytas

Teksto lygiavimas
Teksto lygiavimo klasės, kai tipografijos lygiavimas neatitinka numatytosios HTML žymos.

teksto lygiavimas kairėje

teksto lygiavimas centre

teksto lygiavimas dešinėje

Turiningas tekstas

teksto turtingas tekstas

1 antraštė

2 antraštė

3 antraštė

4 antraštė

5 antraštė

6 antraštė

Tai bloko citata

Raiškiojo teksto elementas leidžia kurti ir formatuoti antraštes, pastraipas, citatas, vaizdus ir vaizdo įrašus vienoje vietoje, o ne pridėti ir formatuoti juos atskirai. Tiesiog dukart spustelėkite ir lengvai sukurkite turinį.

Tai nuoroda raiškiajame tekste

Sąrašo elementas
Sąrašo elementas
Sąrašo elementas

Sąrašo elementas
Sąrašo elementas
Sąrašo elementas

Spalvos

Sužinokite, kaip naudoti kintamuosius spalvoms valdyti

Projekto pavyzdys

Fono spalva
Tvarkykite pasikartojančias fono spalvas.

fonas-spalva-juoda

fono spalva-balta

background-color-primary

fonas-spalva-antrinis

fonas-spalva-tretinis

fonas-spalva-alternatyva

Teksto spalva
Tvarkykite pasikartojančias teksto spalvas.

tekstas-spalva-balta

tekstas-spalva-juoda

tekstas-spalva-pirminis

tekstas-spalva-antrinis

tekstas-spalva-alternate

Efektai

Dėžutės šešėliai
‍Šešėliai leidžia suteikti dizainui gylio ir tikroviškumo išdėstant elementus z ašyje.

šešėlis-xxsmall

shadow-xsmall

šešėlis-mažas

šešėlis-medis

šešėlis-didelis

šešėlis-xxdidelis

UI elementai

Mygtukai

mygtuką

Mygtukas

mygtuką

yra mažas

Mygtukas

mygtuką

yra antraeilis

Mygtukas

mygtuką

yra antraeilis

yra mažas

Mygtukas

mygtuką

yra tretinis

Mygtukas

mygtuką

yra tretinis

yra mažas

Mygtukas

mygtuką

is-link

Mygtukas

Jei norite naudoti tamsiame fone, paprasčiausiai naudokite priedų klasę yra alternatyvus

mygtuką

yra alternatyvus

Mygtukas

mygtuką

yra alternatyvus

yra mažas

Mygtukas

mygtuką

yra antraeilis

yra alternatyvus

Mygtukas

mygtuką

yra antraeilis

yra mažas

yra alternatyvus

Mygtukas

mygtuką

is-link

yra alternatyvus

Mygtukas

Mygtukai su piktogramomis

mygtuką

yra piktograma

Mygtukas

mygtuką

yra mažas

yra piktograma

Mygtukas

mygtuką

yra antraeilis

yra piktograma

Mygtukas

mygtuką

yra antraeilis

yra mažas

yra piktograma

Mygtukas

mygtuką

is-link

yra piktograma

Mygtukas

mygtuką

yra tik piktograma

mygtuką

yra mažas

yra tik piktograma

mygtuką

yra antraeilis

yra tik piktograma

mygtuką

yra antraeilis

yra mažas

yra tik piktograma

mygtuką

yra tretinis

yra tik piktograma

mygtuką

yra tretinis

yra mažas

yra tik piktograma

mygtuką

is-link

yra tik piktograma

Formos elementai

El. paštas

form_field-label

form_input

.form_field-label

form_input

yra teksto sritis

.form_field-label

form_input

is-select-input

form_checkbox

Žymimasis langelis

forma_radio

Radijas

mygtuką

Ačiū! Jūsų pasiūlymas gautas!

Piktogramos (vaizdas)

piktograma-aukštis-xxsmall

piktograma-aukštis-xsmall

piktograma-aukštis-mažas

piktograma-aukštis-vidutinis

piktograma-aukštis-didelė

piktograma-aukštis-xlarge

icon-height-custom1

piktograma-1x1-xxsmall

piktograma-1x1-xsmall

piktograma-1x1-maža

piktograma-1x1-vidutinė

piktograma-1x1-didelė

piktograma-1x1-xlarge

piktograma-1x1-custom1

Piktogramos (HTML įterpimas)
HTML įterpimo piktogramos leidžia valdyti piktogramos spalvą užvedus pelės žymeklį.

icon-embed-xxsmall

icon-embed-xsmall

piktograma-įterpti-small

piktograma-įterpti-terpė

piktograma-įterpti-didelė

piktograma-įterpti-xlarge

icon-embed-custom1

Struktūros klasės

Apibrėžta ir lanksti pagrindinė struktūra, kurią galime naudoti visuose arba daugumoje puslapių.

puslapio įvynioklis

pagrindinis įvynioklis

konteineris-mažas

konteineris - terpė

konteineris-didelis

padding-global

pamušalas-sekcija-maža

paminkštinimas-sekcija-vidutinė

kamšalas-sekcija-didelis

mygtukų grupė

Maksimalus plotis

Naudokite maksimalaus pločio CSS ypatybę, kad vidinis turinys būtų maksimalaus pločio.

maksimalus plotis-pilnas

maksimalus plotis-pilnas planšetinis kompiuteris

maksimalus plotis-visas-mobilusis-kraštovaizdis

maksimalus plotis-visas-mobilusis-portretas

maksimalus plotis-xxdidelis

maksimalus plotis-xdidelis

maksimalus plotis-didelis

maksimalus plotis-vidutinis

max-plotis-mažas

max-plotis-xmall

maksimalus plotis-xxmažas

Paminkštinimai

Krypties klasės

paminkštinimas-dugnas

kamšalas-viršus

pamušalas-vertikalus

pamušalas-horizontalus

kamšalas-kairėje

pamušalas-dešinė

Dydžių klasės

pamušalas-0

kamšalas-mažytis

padding-xxsmall

padding-xsmall

kamšalas-mažas

paminkštinimas-vidutinis

kamšalas-didelis

kamšalas-xxdidelis

kamšalas-didžiulis

kamšalas-xdidžiulis

padding-xxdidžiulis

padding-custom1

padding-custom2

padding-custom3

Paraštės

Krypties klasės

paraštė-apačia

paraštė-viršus

paraštė-vertikali

paraštė-horizontali

paraštė-kairė

paraštė-dešinė

Dydžių klasės

marža-0

marža-mažytė

margin-xxmall

margin-xsmall

marža-maža

marža-vidutinė

marža-didelė

marža-xdidelė

marža-xxdidelė

marža-didžiulė

marža-xdidžiulė

marža-xxdidžiulė

margin-custom1

margin-custom2

marža-custom3

Tarpinės

Vieninga tarpiklių sistema projektui.

tarpiklis-mažas

spacer-xxsmall

spacer-xsmall

tarpiklis-mažas

tarpiklis-vidutinis

tarpiklis-didelis

tarpiklis-xxlarge

tarpiklis-didžiulis

spacer-xhuge

spacer-xxhuge

Naudingumo klasės

Naudingos komunalinių paslaugų klasės, kurias mėgstame naudoti daugumoje savo projektų, kad galėtume greičiau kurti.

paslėpti

Šis elementas yra paslėptas

slėptuvė-tabletė

slėpti-mobilusis-portretas

slėpti-mobilusis-kraštovaizdis

perpildymas-matomas

perteklius paslėptas

perpildymas-auto

perpildymas-slinkimas

pointer-events-auto

rodyklė-įvykiai-nėra

sluoksnis

tarpai-švarus

lygiuoti-centras

z indeksas-1

z indeksas-2

display-inlineflex

margin-top-auto

kraštinių santykis-kvadratas

kraštinių santykis-portretas

kraštinių santykis-kraštovaizdis

kraštinių santykis-plačiaekranis

paveldėti spalvą