Layout & Spacing

Vissza
A BÜCHL design system térköz és elrendezési rendszere

Grid rendszer

A BÜCHL weboldal rugalmas, reszponzív 12 oszlopos grid rendszert használ, amely a Tailwind CSS-re épül.

12 oszlopos grid

1
2
3
4
5
6
7
8
9
10
11
12

Gyakori elrendezések

6 oszlop
6 oszlop
4 oszlop
4 oszlop
4 oszlop
3 oszlop
9 oszlop

Reszponzív viselkedés

Mobil: teljes szél.
Tablet: 2 oszlop
Desktop: 4 oszlop
Rugalmas elrendezés

Térköz rendszer

A következetesen alkalmazott térközök biztosítják a tiszta és rendezett megjelenést. A BÜCHL design system meghatározott térköz skálát használ.

2xs
0.25rem
xs
0.5rem
sm
1rem
md
1.5rem
lg
2rem
xl
3rem
2xl
4rem
3xl
6rem

Használati példák

p-2xsKis padding kisebb elemekhez
m-smStandard margin elemek között
gap-mdKözepes távolság grid elemek között
py-xlNagy függőleges padding szekciókhoz

Container méretezés

A tartalom maximális szélességének korlátozása biztosítja az optimális olvashatóságot különböző képernyőméreteken.

Small (640px)

Container minta tartalom

Medium (768px)

Container minta tartalom

Large (1024px)

Container minta tartalom

X-Large (1280px)

Container minta tartalom

Breakpoints

A reszponzív design érdekében különböző töréspontokat használunk.

Névtér Min. szélesség Használat
sm640pxKis tabletek
md768pxTabletek
lg1024pxKis laptokok
xl1280pxDesktop
2xl1536pxNagy monitorok

Használati példa

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
  <!-- Reszponzív grid elemek -->
</div>

Best Practices

Ajánlott

  • • Következetes térközök használata
  • • Mobile-first megközelítés
  • • Rugalmas elrendezések preferálása
  • • Container használata tartalomhoz
  • • Skálázható térköz rendszer

Kerülendő

  • • Fix szélességek mobil eszközökön
  • • Inline stílusok térközökhöz
  • • Inkonzisztens padding/margin
  • • Túl sok különböző térköz
  • • Desktop-first tervezés