Styleguide

Această pagină este pentru verificarea stilurilor disponibile în Markdown, Kramdown, Bootstrap și tema Chirpy, fără CSS personalizat.

Scopul ei este practic: verifici cum arată paragrafele, titlurile, blockquote-urile, callout-urile, coloanele, butoanele, listele, tabelele, codul și acordeoanele în contextul real al site-ului.

Paragrafe și text inline

Acesta este un paragraf normal. Trebuie să fie ușor de citit, cu spațiere suficientă între rânduri și fără ca lățimea textului să obosească lectura.

Acesta este un paragraf mai lung, folosit pentru a testa citirea pe mobil și desktop. Textul trebuie să rămână clar, chiar dacă propozițiile sunt mai multe. În paginile de ofertă, paragrafele lungi ar trebui folosite rar, iar informația importantă ar trebui spartă în liste, pași sau callout-uri.

Text cu bold, italic, bold italic, cod inline, link intern și link extern.

Text cu termeni tehnici explicați scurt: scope = ce intră și ce nu intră; review = verificare și ajustări în limita lucrărilor agreate; stack = setul de instrumente folosite.

Titluri H1-H6

H1 — Titlu principal de test

Text scurt sub H1. În mod normal, pagina are deja titlul principal generat de layout, deci H1 în conținut trebuie folosit rar.

H2 — Secțiune principală

Text scurt sub H2. Acesta este nivelul recomandat pentru secțiunile majore din pagină.

H3 — Subsecțiune

Text scurt sub H3. Acest nivel este potrivit pentru grupuri din interiorul unei secțiuni.

H4 — Detaliu operațional

Text scurt sub H4. Acest nivel poate fi folosit pentru criterii, reguli sau item-uri explicate.

H5 — Label secundar

Text scurt sub H5. Folosește rar acest nivel, doar pentru structură densă.

H6 — Label fin

Text scurt sub H6. Folosește foarte rar acest nivel, pentru meta sau delimitări secundare.

Liste

Listă simplă

pagină de prezentare;
pagină de contact;
formular funcțional;
email profesional;
backup înainte de schimbări;
update-uri controlate.

Listă numerotată

Clarifici obiectivul.
Pregătești materialele.
Blochezi direcția în brief.
Construiești pe structura agreată.
Verifici și ajustezi.
Publici și predai operabil.

Listă cu item-uri explicate

Brief
Fixează obiectivul site-ului, paginile și materialele disponibile.
Build
Construiește website-ul pe structura agreată, fără schimbări improvizate de direcție.
Review
Verifică rezultatul și permite ajustări în limita lucrărilor stabilite.

Checklist vizual simplu

Domeniu clarificat
Hosting disponibil
Textele paginilor pregătite
Imaginile selectate
Formular verificat

Blockquote și callout-uri Chirpy

Blockquote normal

Acesta este un blockquote simplu. Poate fi folosit pentru citate, observații editoriale sau extrase scurte.

Prompt info

INFO — Context util
Folosește acest tip de callout pentru clarificări neutre, explicații și informații care ajută cititorul să înțeleagă contextul.

Prompt tip

TIP — Recomandare practică
Folosește acest tip de callout pentru recomandări, variante potrivite, exemple bune sau direcții preferate.

Prompt warning

WARNING — Risc controlabil
Condiție: faci update fără backup.
Consecință: site-ul poate deveni instabil.
În loc: faci backup înainte și verifici site-ul după schimbare.

Prompt danger

DANGER — Oprire / risc major
Condiție: ștergi fișiere sau setări fără backup.
Consecință: poți pierde date sau poți opri funcționarea site-ului.
În loc: verifici backup-ul și lucrezi doar după ce ai o variantă de revenire.

Callout-uri pe două coloane

Două coloane: potrivire / nepotrivire

Este potrivit dacă
vrei structură clară;
accepți pași și verificări;
vrei să reduci improvizația;
poți furniza materiale și decizii.

Nu este potrivit dacă
vrei schimbări nelimitate;
nu ai materiale minime;
nu poți lua decizii;
cauți doar o instalare rapidă.

Două coloane: INFO / WARNING

Ce clarificăm înainte
Obiectivul site-ului, paginile, materialele disponibile, direcția vizuală și pașii de review.

Ce poate bloca proiectul
Materiale lipsă, accesuri neclare, decizii întârziate sau schimbări mari după brief.

Butoane

Această secțiune testează clasele Bootstrap / Chirpy disponibile pentru linkuri afișate ca butoane.

Recomandare pentru problema de hover

Test pentru hover pe butoane
Dacă {: .btn .btn-primary } afișează text portocaliu la hover, testează varianta {: .btn .btn-primary .text-white }.
Dacă {: .btn .btn-outline-primary } are hover neplăcut, folosește pentru CTA-uri intermediare {: .btn .btn-outline-secondary } sau păstrează CTA-ul ca link într-un callout.
Pentru CTA final spre checkout, folosește prima dată varianta: [Rezervă](link){: .btn .btn-primary .text-white }.

CTA final de test

Rezervă implementarea website-ului

După click, utilizatorul ajunge în checkout. Textul de sub buton trebuie să explice ce se întâmplă după plată.

Acordeon

Ce se întâmplă după plată?

Primești confirmarea, checklist-ul de pregătire și linkul pentru programarea primei ședințe.

Pot cere modificări după review?

Da, dacă modificările țin de direcția și limitele stabilite în brief. Schimbările mari de direcție, paginile noi sau funcțiile noi se tratează separat.

Ce se întâmplă dacă nu am textele pregătite?

Proiectul poate începe doar dacă există conținut minim sau dacă stabilim clar ce poate fi folosit temporar. Fără obiectiv, pagini și mesaje de bază, implementarea riscă să devină improvizată.

Tabele

Element	Rol	Observație
Hero	Orientare	Spune rapid ce este oferta.
Proof	Evaluare	Susține încrederea prin exemple reale.
Risc	Evaluare	Arată ce poate merge prost și cum se previne.
Scope	Evaluare	Clarifică ce intră și ce nu intră.
CTA	Decizie	Trimite spre acțiunea principală.

Cod și evidențiere

Cod inline

Folosește backup, update, scope, review sau checkout doar când termenul este clar în context.

Bloc de cod Markdown

  
[Rezervă implementarea website-ului](https://pro.ionutojica.ro/checkout-link/?products=785:1){: .btn .btn-primary .text-white }

Bloc de cod HTML permis în Markdown

  
<div class="row gx-3 gy-3" markdown="1">
  <div class="col-11 col-md-6 me-auto" markdown="1">
    Conținut coloana 1
  </div>
  <div class="col-11 col-md-6 ms-auto" markdown="1">
    Conținut coloana 2
  </div>
</div>

Imagini

Imagine simplă

Imagine aliniată la dreapta

Acest paragraf testează cum curge textul lângă o imagine aliniată la dreapta. Dacă imaginea ocupă prea mult pe mobil sau creează spațiere ciudată, verifică dacă are sens să fie eliminată, redusă sau mutată între secțiuni.

Separatoare și ritm

Text înainte de separator.

Text după separator. Separatorul trebuie folosit pentru delimitări majore, nu după fiecare paragraf.

Mini-secțiune CTA fără callout

Această variantă este utilă când nu vrei încă un prompt-tip după o serie de testimoniale.

Continuă spre rezervare

Concluzie de test

Această pagină trebuie verificată pe desktop și mobil. În special, verifică:

hover pe .btn-primary;
hover pe .btn-outline-primary;
lizibilitatea .prompt-tip, .prompt-info, .prompt-warning, .prompt-danger;
afișarea coloanelor pe desktop;
rearanjarea coloanelor pe mobil;
spațierea înainte și după details;
imaginile aliniate stânga/dreapta;
contrastul linkurilor în butoane.