Struktūras klases

Relume stila rokasgrāmata

Client-First V2.1 • Pēdējo reizi atjaunināts 2024. gada 9. janvārī

Client-First Docs

Tipogrāfija

HTML virsrakstu tagi
HTML tagi nosaka noklusējuma virsrakstu stilus.

Visi H1 virsraksti

1. virsraksts

Visi H2 virsraksti

2. virsraksts

Visi H3 virsraksti

3. virsraksts

Visi H4 virsraksti

4. virsraksts

Visi H5 virsraksti

5. virsraksts

Visi H6 virsraksti

6. virsraksts

Virsraksts Klases
Virsrakstu klases, ja tipogrāfijas stils neatbilst noklusējuma HTML tagam.

virsraksta stils-h1

Virsraksta stils-h1

virsraksta stils-h2

Virsraksta stils-h2

virsraksta stils-h3

Virsraksta stils-h3

virsraksta stils-h4

Virsraksta stils-h4

virsraksta stils-h5

Virsraksta stils-h5

virsraksta stils-h6

Virsraksta stils-h6

Citi HTML tagi
HTML tagi nosaka noklusējuma teksta stilus.

Visas rindkopas

Visas saites

Visi bloķētie citāti

Bloķēt citātu

Visi nesakārtotie saraksti

Nav aizzīmju saraksta
Nav aizzīmju saraksta

Visi nesakārtotie saraksti

Nav aizzīmju saraksta
Nav aizzīmju saraksta

Visi sakārtotie saraksti

Nav aizzīmju saraksta
Nav aizzīmju saraksta
Nav aizzīmju saraksta

Teksta izmēri
Teksts nosaka klases, ja tipogrāfijas lielums neatbilst noklusējuma HTML tagam.

teksta lielums-liels

teksta lielums-vidējs

teksta lielums-regulārs

teksta izmērs-mazs

teksta lielums-tiny

Teksta svari
Teksta svara kategorijas, ja tipogrāfijas svars neatbilst noklusējuma HTML tagam.

text-weight-xbold

text-weight-xbold (800)

teksts-svars-treknrakstā

text-weight-bold (700)

text-weight-semibold

text-weight-semibold (600)

teksts-svars-vidējs

text-weight-medium (500)

teksts-svars-normāls

text-weight-normal (400)

teksts-svars-gaisma

text-weight-light (300)

Teksta stili
Teksta stila klases, ja tipogrāfijas stils neatbilst noklusējuma HTML tagam.

teksta stils - slīpraksts

teksta stila pārsvītrojums

text-style-allcaps

text-style-nowrap

teksta stila citāts

teksta stila saite

teksta stils-2 rindiņas

teksta stils-3 rindiņas

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.

teksta stila izslēgts

Teksta līdzināšana
Teksta līdzināšanas klases, ja tipogrāfijas līdzinājums neatbilst noklusējuma HTML tagam.

text-align-left

teksta izlīdzināšana centrā

text-align-right

Bagātināts teksts

teksta bagātināts teksts

1. virsraksts

2. virsraksts

3. virsraksts

4. virsraksts

5. virsraksts

6. virsraksts

Šis ir bloka citāts

Bagātināta teksta elements ļauj izveidot un formatēt virsrakstus, rindkopas, citātus, attēlus un video vienuviet, nevis pievienot un formatēt tos atsevišķi. Vienkārši veiciet dubultklikšķi un viegli izveidojiet saturu.

Šī ir saite bagātinātā teksta iekšpusē

Saraksta vienums
Saraksta vienums
Saraksta vienums

Saraksta vienums
Saraksta vienums
Saraksta vienums

Krāsas

Uzziniet, kā izmantot mainīgos, lai pārvaldītu krāsas

Projekta piemērs

Fona krāsa
Pārvaldiet periodiskas fona krāsas.

fona krāsa-melna

fona krāsa-balta

background-color-primary

fona krāsa-sekundāra

background-color-terciary

fona-krāsa-alternatīva

Teksta krāsa
Pārvaldiet atkārtotas teksta krāsas.

teksts-krāsa-balts

teksts-krāsa-melns

text-color-primary

teksts-krāsa-sekundārais

text-color-alternate

Efekti

Kastes ēnas
‍Ēnas ļauj dizainam pievienot dziļumu un reālismu, novietojot elementus uz z ass.

ēna-xxsmall

shadow-xsmall

ēna-maza

ēna-vide

ēna-liela

ēna-xlarge

ēna-xxlarge

UI elementi

Pogas

pogu

Poga

pogu

ir-mazs

Poga

pogu

ir-sekundārais

Poga

pogu

ir-sekundārais

ir-mazs

Poga

pogu

ir terciārais

Poga

pogu

ir terciārais

ir-mazs

Poga

pogu

ir-saite

Poga

Lai izmantotu uz tumša fona, vienkārši izmantojiet pievienojumprogrammu klasi ir-alternatīvs

pogu

ir-alternatīvs

Poga

pogu

ir-alternatīvs

ir-mazs

Poga

pogu

ir-sekundārais

ir-alternatīvs

Poga

pogu

ir-sekundārais

ir-mazs

ir-alternatīvs

Poga

pogu

ir-saite

ir-alternatīvs

Poga

Pogas ar ikonām

pogu

ir-ikona

Poga

pogu

ir-mazs

ir-ikona

Poga

pogu

ir-sekundārais

ir-ikona

Poga

pogu

ir-sekundārais

ir-mazs

ir-ikona

Poga

pogu

ir-saite

ir-ikona

Poga

pogu

ir tikai ikona

pogu

ir-mazs

ir tikai ikona

pogu

ir-sekundārais

ir tikai ikona

pogu

ir-sekundārais

ir-mazs

ir tikai ikona

pogu

ir terciārais

ir tikai ikona

pogu

ir terciārais

ir-mazs

ir tikai ikona

pogu

ir-saite

ir tikai ikona

Veidlapas elementi

E-pasts

form_field-label

form_input

.form_field-label

form_input

ir-teksta apgabals

.form_field-label

form_input

ir-select-input

form_checkbox

Izvēles rūtiņa

forma_radio

Radio

pogu

Paldies! Jūsu iesniegums ir saņemts!

Ikonas (attēls)

ikona-augstums-xxsmall

icon-height-xsmall

ikona-augstums-mazs

ikona-augstums-vidējs

ikona-augstums-liela

ikona-augstums-xlarge

ikonas augstums-pielāgots1

ikona-1x1-xxsmall

ikona-1x1-xsmall

ikona-1x1-maza

ikona-1x1-vidēja

ikona — 1 x 1 liela

ikona-1x1-xlarge

ikona-1x1-pielāgots1

Ikonas (HTML iegulšana)
HTML iegulšanas ikonas ļauj kontrolēt ikonas krāsu, virzot kursoru.

icon-embed-xxsmall

icon-embed-xsmall

ikona-embed-small

ikona-iegult-vide

ikona-iegult-liela

ikona-embed-xlarge

icon-embed-custom1

Struktūras klases

Noteikta un elastīga pamatstruktūra, ko varam izmantot visās vai lielākajā daļā lapu.

lapas iesaiņotājs

galvenais iesaiņojums

konteiners-mazs

konteiners-vide

konteiners-liels

polsterējums-globāls

polsterējums-sekcija-maza

polsterējums-sekcija-vidēja

polsterējums-sekcija-liels

pogu grupa

Maksimālie platumi

Izmantojiet max-width CSS rekvizītu, lai ietvertu iekšējo saturu līdz maksimālajam platumam.

max-platums-pilns

max-platums-pilna-tablete

max-width-full-mobile-ainava

max-width-full-mobile-portrets

max-platums-xxliels

max-platums-xlarge

max-platums-liels

max-platums-vidējs

max-platums-mazs

max-platums-xmazs

max-platums-xxmazs

Polsterējumi

Virzienu klases

polsterējums-apakšā

polsterējums-top

polsterējums-vertikāls

polsterējums-horizontāls

polsterējums-pa kreisi

polsterējums-pa labi

Izmēru klases

polsterējums-0

polsterējums-niecīgs

polsterējums-xxsmall

polsterējums-xsmall

polsterējums-mazs

polsterējums-vidējs

polsterējums-liels

polsterējums-xxlarge

polsterējums-milzīgs

polsterējums-xhuge

polsterējums-xxmilzīgs

polsterējums-pielāgots1

polsterējums-pielāgots2

polsterējums-pielāgots3

Piemales

Virzienu klases

piemale-apakšā

margin-top

margin-vertikāls

piemale-horizontāla

piemale-kreisais

mala-labais

Izmēru klases

margin-0

mala-niecīga

margin-xxsmall

margin-xsmall

starpība-maza

starpība-vidēja

margin-liels

margin-xlarge

margin-xxlarge

margin-milzīgs

margin-xhuge

margin-xxmilzīgs

margin-custom1

margin-custom2

margin-custom3

Starplikas

Vienota starpliku sistēma projektam.

starplikas-mazs

spacer-xxsmall

spacer-xsmall

starplika-maza

starplika-vide

starplika-liels

spacer-xlarge

spacer-xxlarge

starplika-milzīgs

spacer-xhuge

spacer-xxhuge

Lietderības klases

Noderīgas lietderības klases, kuras mums patīk izmantot lielākajā daļā mūsu projektu, lai ātrāk izveidotu.

paslēpties

Šis elements ir paslēpts

slēpt-tablete

slēpt-mobilais-portrets

slēpt-mobilā-ainava

pārplūde-redzams

pārpildīts-slēpts

pārplūdes-auto

pārpildīšana-ritināšana

pointer-events-auto

rādītājs-notikumi-nav

slānis

atstarpes-tīrs

izlīdzināt centrā

z-indekss-1

z-indekss-2

displejs-inlineflex

margin-top-auto

malu attiecība-kvadrāts

malu attiecība-portrets

malu attiecība-ainava

malu attiecība-platekrāna

mantot-krāsu