44 CSS varijable za izgled

Precizna kontrola izgleda kroz CSS tokene nacrta

Napredni tokeni su katalog od 44 CSS varijable koje upravljaju bojama, fontovima, veličinama teksta, razmacima, zaobljenosti i drugim detaljima izgleda dućana. To je najfiniji sloj uređivanja u builderu. Modul Izgled slaže sadržaj stranice, Tema bira gotovu paletu ili uređuje predloške, a tokeni mijenjaju vrijednosti na kojima taj izgled počiva. Ne služe unosu artikala, teksta stranice ili strukture sekcija.

Većini trgovaca napredni tokeni nisu nužni. Jednostavni način Izgleda pokriva osnovne boje, font, zaobljenost, prozračnost i prekidače za dijelove stranice. Napredni dijalog otvaraš tek kada trebaš vrijednost koju jednostavan izbor ne daje, poput dodatne boje, točne veličine naslova, posebnog razmaka ili zaobljenosti u pikselima. Time se osnovno uređivanje ne zatrpava CSS detaljima, a napredna kontrola ostaje dostupna kada je stvarno potrebna.

Dostupnost ovisi o načinu rada, ulozi i paketu

Gumb Napredni tokeni nalazi se u alatnoj traci buildera samo kada je uključen napredni način. Uređivanje traži ulogu upravitelj ili vlasnik, jednako kao ostatak buildera. Djelatnik ne može mijenjati tokene. Dijalog dodatno provjerava smije li trenutačni dućan mijenjati tokene, pa pravo nije samo pitanje vidljivosti gumba u sučelju nego i provjere na poslužitelju.

Napredni način i dijalog tokena dostupni su na Pro i Enterprise paketu. Na Besplatnom paketu prekidač ostaje zaključan na jednostavnom načinu, pa se vrijednosti tokena ne mogu ni otvoriti ni uređivati. Ako je dućan ranije bio na višem paketu i već je postavio napredne tokene, prelazak na Besplatan ih ne gasi: ostaju aktivni na živom dućanu, ali CMS zaključava pristup. Povratkom na Pro ili Enterprise ponovno vidiš iste spremljene vrijednosti.

Tri razreda tokena određuju način uređivanja

Katalog dijeli tokene na vođene, izvedene i slobodne. Vođenih je sedam i oni su temelj palete: pet boja (glavna, akcent, sekundarna, tekst i pozadina) te dva fonta, naslovni i tekst tijela. U dijalogu su to otvorena, izravno uređiva polja. Akcent i sekundarna boja ostaju izravno postavljeni, dok se samo glavna, pozadina i tekst koriste kao ulaz u izračun izvedenih tonova.

Sedam izvedenih tokena poslužitelj računa iz vođenih boja, primjerice tamnije ili svjetlije tonove glavne boje, tekst na glavnoj, površine, rubove i suptilan tekst. U dijalogu su zatvoreni redci s izračunatom vrijednošću i gumbom Preuzmi ručno. Tek kada ga preuzmeš, izvedeni token prestaje pratiti automatski izvod i možeš mu zadati vlastitu vrijednost. Gumb Vrati na temu zatim ga vraća na automatsko računanje.

Preostalih 30 slobodnih tokena pokriva dodatne boje, sjene, zaglavlje, privolu, tipografsku ljestvicu, razmake, zaobljenosti i tranzicije. Oni su uvijek dostupni kao obična polja u naprednom dijalogu. Podjela ne znači da je jedan razred važniji od drugoga, nego da CMS razlikuje vrijednost koju trgovac postavlja kao temelj, vrijednost koju sustav može izračunati i vrijednost za koju nema automatskog izvoda.

Kontrola se bira prema stvarnoj vrijednosti tokena

Vrsta polja ne određuje se samo imenom tokena. Ako vrijednost teme izgleda kao hex boja, CMS prikazuje birač boje. Broj, calc() ili var() dobivaju polje s provjerom oblika, a složenije vrijednosti poput box-shadow, rgba() ili popisa fontova dobivaju slobodno tekstualno polje bez stroge provjere. Zato token s prefiksom boja koji zapravo nosi sjenu ili rgba vrijednost ne dobiva pogrešan birač boje.

Bazna veličina teksta posebno utječe na cijelu tipografsku ljestvicu. Naslovi h1 do h4, mali tekst i dvije gornje granice za hero naslov i naslov proizvoda u CSS-u se računaju iz te baze. Te gornje granice nisu samo obična veličina slova, nego strop fluidnog teksta; naslov na manjem zaslonu može biti manji od upisane granice. Dijalog uz bazu prikazuje objašnjenje kako promjena ne bi izgledala kao da neočekivano utječe na više elemenata odjednom.

Sprema se nacrt, a kupci vide tek objavljenu verziju

Svaka izmjena tokena odmah se sprema u nacrt buildera. To nije trenutačna promjena na javnoj trgovini: kupci i dalje vide zadnje objavljeno stanje dok ne objaviš nacrt. Pojedini token možeš vratiti na temu slanjem prazne nadogradnje za taj token, odnosno brisanjem njegovog overridea. Dostupna je i radnja vraćanja svih overridea prije primjene novih promjena, pa se možeš vratiti na vrijednosti koje daje odabrana tema.

Nacrt se štiti od istodobnog uređivanja. CMS pri spremanju koristi podatak o zadnjoj izmjeni nacrta; ako se stanje promijenilo u međuvremenu, poslužitelj vraća sukob umjesto da tiho prepiše tuđu promjenu. Povrat pojedinog tokena na temu nije isto što i odbacivanje cijelog nacrta. Odbacivanje builder nacrta vraća tokene i sekcije na objavljeno stanje, pa se prije takve radnje treba razlikovati želiš li ukloniti samo jedan override ili izgubiti sve neobjavljene izmjene.

Kontrast se procjenjuje pri objavi, ne pri svakom unosu

Spremanje tokena ne odbija vrijednost zbog kontrasta. Provjera se radi kada objavljuješ nacrt i mjeri osam parova boja: osnovni tekst, kartice i footer, tekst gumba, linkove i cijene, suptilan tekst, poruke greške, glavnu boju na svjetlijoj varijanti i poruke uspjeha. Tako možeš pripremati izgled u nacrtu, ali objava provjerava hoće li kombinacije koje kupci vide biti dovoljno čitljive.

Omjer kontrasta 3:1 ili slabiji zaustavlja objavu. CMS tada može ponuditi Objavi svejedno, a takvo gaženje ostaje zabilježeno u tragu radnji. Omjer između 3:1 i praga konkretnog para, najčešće 4,5:1, ostavlja trajno upozorenje, ali ne blokira objavu. Ista pravila vrijede za boje promijenjene u naprednom dijalogu i za boje promijenjene kroz jednostavni način, jer oba puta mijenjaju isti nacrt tokena.

Spremljen token ne mora još imati vidljiv učinak

Neki tokeni u katalogu trenutačno nisu povezani ni s jednim CSS pravilom. CMS ih ipak dopušta spremiti kao valjanu vrijednost i uz njih prikazuje napomenu da se postavka sprema, ali trenutno nema učinka. To nije greška spremanja niti dokaz da je trgovina slomljena; jednostavno još nema pravila koje bi taj token pročitalo pri prikazu javne stranice. Kada kasnije pravilo počne koristiti taj token, spremljena vrijednost može postati relevantna.

Takvu napomenu ne treba zaobići nasumičnim mijenjanjem drugih tokena u potrazi za trenutačnim efektom. Dobar postupak je prvo razlikovati element koji želiš promijeniti, token koji ga doista kontrolira i činjenicu da se rezultat na kupčevom dućanu vidi tek nakon objave. Napredni tokeni nude veliku preciznost, ali namjerno ne izmišljaju vezu između vrijednosti i elementa ako je tema još nema.

Kako ih koristiti bez gubitka kontrole

Najsigurnije je mijenjati mali broj povezanih tokena, otvoriti pregled nacrta i tek onda objaviti. Ako želiš samo osnovnu paletu ili razmak, jednostavni način često je pregledniji. Napredni dijalog služi kada svjesno trebaš preuzeti izvedeni ton ručno, promijeniti slobodan detalj ili podesiti tipografiju koju jednostavni izbor ne nudi. Tema i sadržajne sekcije ostaju zasebni slojevi, pa promjena tokena ne dodaje novu sekciju niti uređuje izvorni kod predloška.

Napredni tokeni stoga nisu obična galerija boja, nego uređivanje nacrta koji se objavljuje zajedno s izgledom trgovine. Pro i Enterprise korisnicima daju 44 kontrolirane CSS vrijednosti, dok zaštite čuvaju razliku između izvedenog i ručnog, nacrta i javne verzije, upozorenja i blokirane objave. Kada treba povratak, možeš vratiti pojedini token na temu ili odbaciti nacrt, ali te dvije radnje imaju različit opseg i ne treba ih zamijeniti.