PaperCSS v2.1

Typografia redakcyjna

Kompletny zestaw elementów do tekstu długiego, artykułów, dokumentacji i wszystkiego, co wymaga rytmu.

Patryk Szkudlarek 17 września 2026 6 min czytania
1. Skala typografii
h1 · 2.1rem

Nagłówek pierwszego stopnia

h2 · 1.6rem

Nagłówek drugiego stopnia

h3 · 1.15rem

Nagłówek trzeciego stopnia

h4 · 1rem

Nagłówek czwartego stopnia

h5 · .88rem uppercase
Nagłówek piątego stopnia
2. Drop cap + prose

Papier jest medium, które pamięta. Każde zagięcie, każda plama atramentu to ślad zdarzenia. Ta strona próbuje przywrócić to wrażenie w cyfrowym świecie — rytm, spokój i szacunek do czytelnika.

Drugi akapit jest wcięty, jak w klasycznej książce. Rytm linii bazowej wynosi 1.6em — wszystko do niego wraca: nagłówki, listy, cytaty, obrazy. Dzięki temu tekst oddycha.

Trzeci akapit dla równowagi. Możesz dodać zwykły link, przypis1, termin albo kod inline.

  1. Treść pierwszego przypisu. ↩ wróć
3. Pull quote + epigraph
Prostota jest szczytem wyrafinowania. — Leonardo da Vinci
Nie ma nic bardziej praktycznego niż dobrze postawiona teoria. — Kurt Lewin

W tekście możesz też użyć cytatu w linii bez wybijania akapitu.

4. Callout, aside, marginalia

Notatka

Domyślny callout — informacja, do której warto wrócić.

✓

Wskazówka

Zielony pas po lewej oznacza dobry pomysł lub trik.

Uwaga

Ta operacja jest nieodwracalna. Zrób kopię zapasową.

Marginalium — dopisek na marginesie

5. Listy redakcyjne
  1. Zainstaluj framework — dwa pliki, zero buildów.
  2. Dodaj paper.css i paper.js.
  3. Pisz HTML. Reszta dzieje się sama.
PaperCSS
Framework CSS w stylu „papier / redakcja”.
PaperJS
Mikro-framework JS — toasty, modale, mirror, komendy.
6. Kod i dane

Zmienna --accent, wynik OK, klawisz Ctrl + K, rezultat zapisano. 

const app = {
  name: 'Paper',
  version: 2.1,
};

export default app;
--- a/style.css - color: #333; + color: var(--ink-soft);
7. Tabele redakcyjne
Wyniki kwartalne
ProjektQ1Q2Δ
TaskFlow1 2401 890+52%
Inkwell8901 120+26%
Ledger2 1001 980−6%

Źródło: dane wewnętrzne, wrzesień 2026.

8. Definicje, terminy, glossary
paper.css
Framework CSS, ~11 kB po minifikacji.
paper.js
Mikro-framework JS — toasty, modale, palette.
mirror
Auto-dokumentacja z <template>.
Papier
Medium, które pamięta. Wspólny motyw całego frameworku.
Rytm
Linia bazowa 1.6em — wszystkie elementy się do niej wyrównują.

Możesz też użyć terminu z dymkiem w środku akapitu.

9. Table of contents, timeline, stats

  1. Początek

    Pierwsza wersja paper.css — tylko kartka i przyciski.

  2. PaperJS

    Mikro-framework JS: toasty, modale, sortable.

  3. v2.1

    Code Mirror, paper-live, command palette, typografia redakcyjna.

11 kB CSS
18 kB JS
0 zależności
10. Progress steps
  1. Zamówienie
  2. Płatność
  3. Wysyłka
  4. Dostawa
11. Footnote popover + link-anchor

Akapit z 2 Treść drugiego przypisu w dymku. Kliknij ponownie, żeby zamknąć. rozwijanym przypisem.

Sekcja z kotwicą

Kliknij ¶ — skopiuje URL z kotwicą.

12. Ruler + figure + zoom
Góry
Ryc. 1 Pejzaż górski o świcie. fot. Unsplash
13. Znaki specjalne

& znak ampersand, → strzałka, ↗ link zewnętrzny, — pauza, półpauza –, wielokropek.

„Interpunkcja wisząca” — cudzysłowy i kropki wystają poza kolumnę.

14. Skróty
Ctrl+Kcommand palette Alt+Bblueprint Ctrl+/kod najbliższego demo dblclicktoggle drop cap