Opens in a new tab

SÜSTEEM // KTK baasi kontroll-leht

See on diagnostiline leht, mitte valmis kujundus. Baasstiilide omanik on praegu CF; Bricks Theme Style määrab HTML font-size 100%. Leht ei määra fonte, rem-baasi ega globaalseid stiile.

  • Rem-kokkulepe: CF Root Font Size 100% + Bricks Theme Style HTML font-size 100%. Frontendil mõõdetud HTML font-size: 16px.
  • Body kasutab CF --text-m fluid-suurust; 1600px vaates 18,08px. Body tekstisuurus ei ole rem-baas.
  • Loetud CF tokenid kasutavad fluid-väärtusi; 320–1279px on varasem kasutaja märkus, mitte siin loetud CF mooduli seadistus.
  • Body fondi ja H1–H6 baasi omanik: CF. Mõõdetud fondid: Open Sans ja Outfit.
  • Aktiivne Theme Style: KTK base (ktk_base), Entire Web Site.
  • Audit: 07.10.2026; WordPress 7.1.3, Bricks 2.4.2, CF 2.0.2.
  • KONTROLLIDA CF-is: body color viitab puuduvale --body-font-family tokenile; olemas on --text-body.

Tulemuste märkimiseks muuda iga sektsiooni juhise teksti: KORRAS / KONTROLLIDA / EI KASUTA. Märkimine on käsitsi, mitte automaatne.

01 · Baasstiilid: pealkirjad ja põhitekst

Need näidised ei sisalda kohalikke tüpograafiaseadeid ega tekstisuuruse klasse. H1 näidis on lehe pealkiri. Kontrolli fonti, suurust, kaalu, reavahet ja värvi.

H2 — Kõneteraapia toetab suhtlemist

H3 — Kõneteraapia toetab suhtlemist

H4 — Kõneteraapia toetab suhtlemist

H5 — Kõneteraapia toetab suhtlemist
H6 — Kõneteraapia toetab suhtlemist

Basic Text: Kõneteraapia toetab suhtlemist ja eneseväljendust. Õ, Ä, Ö, Ü — õ, ä, ö, ü — 0123456789.

Teine lõik aitab hinnata pikema teksti loetavust. Praegu määrab selle fondi, suuruse ja reavahe CF body-baas; elemendil puudub kohalik tüpograafiaülekirjutus.

Rich Text: Kõneteraapia toetab suhtlemist ja eneseväljendust.

Teine Rich Text lõik kontrollib lõikudevahelist ruumi. Rasvane tekst, kaldkiri ja tekstisisene link.

  • Nummerdamata loendi esimene punkt
  • Nummerdamata loendi teine punkt
  1. Nummerdatud loendi esimene punkt
  2. Nummerdatud loendi teine punkt

Suhtlemise toetamine algab inimese vajaduste mõistmisest.

KORRAS: H1–H6 ning Basic Text ja Rich Text kasutavad CF baasi. KONTROLLIDA: CF body värv viitab puuduvale --body-font-family tokenile. Rich Texti loendite ja tsitaadi erikujundus tuleb praegu Bricksi vaikestiilist; sisurütmi lõplik omanik on valimata.

02 · Baasstiilid: lingid ja nupud

Kontrolli hiirega hover-olekut ning Tab-klahviga nähtavat fookust. Nupud viivad ainult lehe lõpu kontrollpunkti; andmeid ei saadeta.

Bricksi Text Link: liigu kontrollpunktiBaasnupp · kontrollpunktPrimary variant · kontrollpunktSecondary variant · kontrollpunkt

KORRAS: baas- ja primary-nupp kasutavad CF --primary värvi; secondary kasutab --secondary värvi. Tab-fookus rakendub. KONTROLLIDA CF-is: secondary valge teksti kontrast on 2,89 : 1; secondary fookusraami kontrast valge taustaga vajab parandamist. Outline-nuppe selles lehes veel ei ole.

03 · CF: muutuja ja klass eraldi

Igas paaris kasutab A näidis kohalikus Bricksi väljas CF-muutujat; B kasutab ainult klassinime. Klassid peavad olema praeguses CF-is olemas. Puuduvaid klasse see import ei loo.

A · var(--text-s) · Õ, Ä, Ö, Ü — Kõneteraapia toetab suhtlemist.

B · .text-s · Õ, Ä, Ö, Ü — Kõneteraapia toetab suhtlemist.

A · var(--text-m) · Õ, Ä, Ö, Ü — Kõneteraapia toetab suhtlemist.

B · .text-m · Õ, Ä, Ö, Ü — Kõneteraapia toetab suhtlemist.

A · var(--text-l) · Õ, Ä, Ö, Ü — Kõneteraapia toetab suhtlemist.

B · .text-l · Õ, Ä, Ö, Ü — Kõneteraapia toetab suhtlemist.

A · var(--primary) · See tekst kasutab värvimuutujat.

B · .text-primary · See tekst kasutab värviklassi.

Oodatav: kinnitatud vastava klassi ja muutuja paaril on sama arvutatud CSS-väärtus. Kui sinu klassi nimi erineb, asenda ainult B näidise klassinimi. CF-muutujale ei lisata varuväärtust, sest see peidaks puuduva tokeni.

04 · CF: brändivärvide muutujad

Need on otsesed värvimuutuja testid. Tekst jääb proovikastist välja, et test ei eeldaks kindlat kontrastvärvi.

Värviproov: --primary

Värviproov: --secondary

Värviproov: --tertiary

Oodatav: kolm proovi kasutavad sinu tegelikke brändivärve. Puuduv või tühi proov vajab DevToolsis muutuja ja kõrguse kontrolli. Tausta-, tekstivärvi-, alpha-, raadiuse- ja varjuskaalad lisame järgmisele stiilijuhise lehele tegeliku CF-loendi põhjal.

05 · CF: padding ja gap

Siin on elemendipõhised mõõduseaded teadlikud testseaded. A kasutab --space-m muutujat, B vastavat olemasolevat CF-klassi. Gap-paari mõlemad vanemad kasutavad flexi ning laste marginid on testi eraldamiseks nullitud. Padding-paari taust kasutab --primary muutujat.

A · padding-m mõõduproov. Värv on ainult kasti piiri eristamiseks.

B · padding-m mõõduproov. Värv on ainult kasti piiri eristamiseks.

A · esimene element

A · teine element

B · esimene element

B · teine element

Padding A/B on mõõdetult võrdne. Gap A kasutab Bricks 2.4.2 tegelikku Gap-välja (_gridGap), B olemasolevat .gap-m klassi; vana _gap võti CSS-i ei loonud. Laste marginid on ainult selles gap-testis nullitud. Mõõda mõlemal row-gap ja column-gap; proovikastide tekstivärvi kontrast ei ole siin seadistatud.

06 · Laius .boxed-s

Siht: max-width var(--container-s), projekti kokkuleppes 760px. See kast asub omaette sektsioonis ega ole kitsama .boxed-* sees.

See lõik aitab märgata sisu laiust, joondust ja teksti murdumist. Mõõda Block-elemendi tegelikku laiust; kitsas viewport ei pea saavutama maksimumlaiust.

Oodatav: üks sisuline laiusekiht, keskjoondus ja .section külgvahed. Kui kõik neli laiust jäävad suurel ekraanil samaks, kontrolli välise Bricksi Containeri max-width piirangut. Ära lahenda seda globaalse .brxe-container ülekirjutusega.

06 · Laius .boxed-m

Siht: max-width var(--container-m), projekti kokkuleppes 1120px. See kast asub omaette sektsioonis ega ole kitsama .boxed-* sees.

See lõik aitab märgata sisu laiust, joondust ja teksti murdumist. Mõõda Block-elemendi tegelikku laiust; kitsas viewport ei pea saavutama maksimumlaiust.

Oodatav: üks sisuline laiusekiht, keskjoondus ja .section külgvahed. Kui kõik neli laiust jäävad suurel ekraanil samaks, kontrolli välise Bricksi Containeri max-width piirangut. Ära lahenda seda globaalse .brxe-container ülekirjutusega.

06 · Laius .boxed-l

Siht: max-width var(--container-l), projekti kokkuleppes 1240px. See kast asub omaette sektsioonis ega ole kitsama .boxed-* sees.

See lõik aitab märgata sisu laiust, joondust ja teksti murdumist. Mõõda Block-elemendi tegelikku laiust; kitsas viewport ei pea saavutama maksimumlaiust.

Oodatav: üks sisuline laiusekiht, keskjoondus ja .section külgvahed. Kui kõik neli laiust jäävad suurel ekraanil samaks, kontrolli välise Bricksi Containeri max-width piirangut. Ära lahenda seda globaalse .brxe-container ülekirjutusega.

06 · Laius .boxed-xl

Siht: max-width var(--container-xl), projekti kokkuleppes 1400px. See kast asub omaette sektsioonis ega ole kitsama .boxed-* sees.

See lõik aitab märgata sisu laiust, joondust ja teksti murdumist. Mõõda Block-elemendi tegelikku laiust; kitsas viewport ei pea saavutama maksimumlaiust.

Oodatav: üks sisuline laiusekiht, keskjoondus ja .section külgvahed. Kui kõik neli laiust jäävad suurel ekraanil samaks, kontrolli välise Bricksi Containeri max-width piirangut. Ära lahenda seda globaalse .brxe-container ülekirjutusega.

07 · Kontrolli tulemus ja järgmised sammud

See on käsitsi täidetav kontrollpunkt. Eesmärk on lukustada baas enne Brixiese ja päris komponentide lisamist.

  1. KORRAS: KTK base rakendub kogu saidile ja HTML font-size on 16px.
  2. KORRAS: H1–H6, Basic Text ja Rich Text baas ning CF teksti- ja värvipaarid on mõõdetud.
  3. KONTROLLIDA CF-is: body color tuleb parandada olemasolevale --text-body tokenile.
  4. KORRAS: lingid ja nupud saavad Tab-fookuse. KONTROLLIDA: secondary teksti ja fookusraami kontrast.
  5. KORRAS: padding A/B kattub. Gap-testi vana _gap võti on parandatud _gridGap väljaks ja testilaste marginid nullitud.
  6. KORRAS: 1600px vaates boxed-s/m/l/xl on 760/1120/1240/1400px; väline Container ei piira neid.
  7. KORRAS: breakpointide 1279/991/767/478 mõlemad pooled ning 320/375/1600px frontend on mõõdetud; horisontaalset ülevoolu ei leitud.
  8. TEGEMATA: editori võrdlus samal viewport’il; brauseris puudub Builderi ligipääs.
  9. TEGEMATA: hoveri tegelik hiirekontroll ning .outline-secondary ja .card näidised; olemasolev CSS on loetud.
  10. Enne stiilijuhist lahenda dokumenteeritud CF vastuolud ja tee puuduvad käsikontrollid.

Kui mõni test ei tööta, märgi siia elemendi nimi, viewport, oodatav tulemus, tegelik tulemus ja DevToolsi leitud rakenduv reegel. Ära muuda korraga rem-baasi, Theme Styles’i ja CF-skaalat.

Vormi- ja pildielementide kontroll lisandub järgmises etapis tegelike seadete ja näidispildi alusel. Selles esimeses failis neid ei ole.