Układ i gęstość | Skribly UI

Zacznij od 320 pxLink do sekcji Zacznij od 320 px

Najpierw zaprojektuj układ 320 px. Szersze układy dodają kolumny; nigdy nie usuwają treści.
Nic nie przewija się na boki poza tabelami danych, kodem i osiami czasu, a te przewijają się we własnym polu z fokusem.
Długie słowa, linki i nazwy plików się łamią, zamiast poszerzać stronę. Użyj min-w-0 na dzieciach flex i grid, które zawierają tekst.
Utrzymuj boczny margines 16 px na telefonach. Cele dotyku mają co najmniej 24 px, a 44 px dla głównych akcji strony.
W stałych paskach respektuj bezpieczne obszary telefonów z wycięciami.

Odpowiadaj na pole, a nie na oknoLink do sekcji Odpowiadaj na pole, a nie na okno

Komponent nie wie, czy leży na szerokiej stronie, czy w wąskim panelu bocznym, więc komponenty używają zapytań kontenerowych: @container na polu, a w środku @md: i podobne. Przeciągnij suwak, aby zobaczyć, jak układ się zmienia.

Preview width in pixels720

Reports

Quarterly report
Updated 2 days ago
Published
Release notes
Updated 3 days ago
Draft
Team survey
Updated 4 days ago
Draft

The sidebar moves to the side.

tsx

<div className="@container">
  <div className="grid gap-4 @2xl:grid-cols-[12rem_minmax(0,1fr)]">
    <nav>…</nav>
    <ul className="grid gap-3 @md:grid-cols-2 @4xl:grid-cols-3">…</ul>
  </div>
</div>

BreakpointyLink do sekcji Breakpointy

Układy stron używają domyślnych breakpointów Tailwinda, bez zmian, więc kod aplikacji i biblioteka są zgodne.

Breakpointy, ich szerokość i to, co się przy nich zmienia
Prefiks	Od	Użyj do
`base`	0 do 639 px	Telefony. Projektuj najpierw tutaj: jedna kolumna, przyciski na pełną szerokość tam, gdzie pomagają.
`sm`	640 px (40 rem)	Duże telefony i małe tablety. Krótkie pola mogą dzielić rząd.
`md`	768 px (48 rem)	Tablety. Panele boczne aplikacji przestają być arkuszami.
`lg`	1024 px (64 rem)	Laptopy. Stałe panele boczne i strony dwukolumnowe.
`xl`	1280 px (80 rem)	Komputery stacjonarne. Trzecia kolumna, taka jak spis treści strony.
`2xl`	1536 px (96 rem)	Szerokie ekrany. Utrzymuj linie tekstu poniżej około 75 znaków.

Typowe układyLink do sekcji Typowe układy

Stos

Układ domyślny. Odstęp między elementami pochodzi z gap, nigdy z marginesów elementów.

tsx

<div className="flex flex-col gap-4">…</div>

Skupisko

Przyciski, plakietki i filtry w rzędzie, który się zawija, zamiast się przepełniać.

tsx

<div className="flex flex-wrap items-center gap-2">…</div>

Siatka kart

Tyle kolumn, ile się mieści, każda co najmniej 16 rem, a na telefonach jedna kolumna.

tsx

<ul className="grid grid-cols-[repeat(auto-fill,minmax(min(16rem,100%),1fr))] gap-4">…</ul>

Panel boczny i treść

Dla aplikacji robi to AppLayout i zamienia panel boczny w arkusz na wąskich ekranach. Dla stron użyj siatki, która układa się w stos poniżej lg.

tsx

<div className="grid gap-8 lg:grid-cols-[16rem_minmax(0,1fr)]">…</div>

OdstępyLink do sekcji Odstępy

Odstępy podążają za krokami co 4 px: gap-1 to 4 px, a gap-4 to 16 px, tak samo jak tokeny --sk-space-*. Używaj małych kroków wewnątrz komponentu, 16 do 24 px między komponentami i 48 px lub więcej między sekcjami strony. Rzeczy powiązane stoją bliżej niż niepowiązane.

GęstośćLink do sekcji Gęstość

data-density="compact" na elemencie głównym zmniejsza kontrolki dla narzędzi desktopowych, gdzie na jednym ekranie jest dużo rzeczy. Używaj go dla całej aplikacji, a nie dla jednego panelu, aby kontrolki miały jeden rozmiar na ekranie. Wypróbuj przełącznik gęstości na górze tej strony: każda kontrolka na tej stronie za nim podąża.

html

<html data-theme="dark" data-density="compact">