Fundamenty Linie i ramki
Fundamenty
Linie i ramki
Głębię budujemy płasko: cienkie linie 1 px w kolorze line i kontrast tła, a nie rozmyte cienie. To drukarska precyzja zamiast skeuomorfizmu – i lepsza wydajność renderowania.
Linia 1 px
Domyślny separator i ramka. border-line to #e4e4e4 – widoczna, ale nie krzykliwa.
<div class="border border-line p-6">Ramka 1 px</div>
<hr class="border-line" />
<ul class="divide-y divide-line">…</ul>Separatory list
Listy i siatki rozdzielamy divide-* zamiast marginesów – linie ciągłe trzymają rytm.
- Pierwszy wiersz
- Drugi wiersz
- Trzeci wiersz
<ul class="divide-y divide-line border border-line">
<li class="px-5 py-3">…</li>
</ul>Siatka na liniach
Kafelki z hairline pomiędzy: tło line + gap-px + białe komórki. Tak budujemy siatkę zasad i tematów.
<div class="grid grid-cols-3 gap-px bg-line border border-line">
<div class="bg-paper p-6">…</div>
</div>Lewa obwódka akcentu
Jedyne miejsce, gdzie linia robi się kolorowa – cytaty i wyróżnienia dostają miętową krawędź 3 px.
Cytat z miętową obwódką po lewej stronie.
Cienie? Prawie nie
Domyślnie nie używamy box-shadow. Wyjątek to subtelne uniesienie elementów pływających (np. sticky nav po scrollu) i to ledwie wyczuwalne.
Jeśli sięgasz po cień, najpierw sprawdź, czy linia 1 px albo zmiana tła nie załatwi sprawy czytelniej. W 95% przypadków załatwia.