Responsive Utilities - Dokumentáció

Mi az a Responsive Utilities rendszer?

A PDS responsive utilities rendszer egy Tailwind-szerű, mobile-first breakpoint rendszer, amely lehetővé teszi a töréspontok alapján változó stílusozást utility osztályok segítségével.

A rendszer két fő funkcióval rendelkezik:

• Media Query Support - Viewport mérete alapján (✅ AKTÍV - minden utility támogatja)
• Container Query Support - Container mérete alapján (⚙️ Infrastruktúra kész, referencia implementáció)

Mobile-First Megközelítés

KRITIKUS SZEMLÉLET: A rendszer min-width media query-ket használ, ami azt jelenti, hogy alapból mobilra tervezünk, majd nagyobb töréspontoknál írunk felül.

Breakpoint Rendszer

Mobile-first töréspontok (min-width media queries):

Használati Szintaxis

Breakpoint prefix a kettőspont (:) karakterrel:

<div class="[base-class] [breakpoint]:[class-name]">

Példák:

• class="ds-flex md:ds-flex-row lg:ds-flex-column"
• class="ds-p-sm md:ds-p-lg xl:ds-p-xl"
• class="ds-none md:ds-block"
• class="ds-text-left md:ds-text-center lg:ds-text-right"

Display Osztályok Strukturúrája

Az alapvető display értékek utility osztályokká konvertálva, teljes breakpoint támogatással.

Conditional Visibility - Interaktív Példák

Az egyik leggyakoribb használati mód: elemek megjelenítése vagy elrejtése különböző töréspontokon.

Display Type Váltás

A display típus változtatása különböző töréspontokon:

class="ds-inline md:ds-block"

class="ds-block md:ds-inline-block"

Használati Minták és Best Practices

1. Mobile Navigation Toggle

<!-- Hamburger ikon - csak mobilon -->
<button class="ds-block md:ds-none">☰</button>

<!-- Desktop navigation - csak desktop-on -->
<nav class="ds-none md:ds-block">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
</nav>

2. Responsive Content Sections

<!-- Sidebar - csak desktop-on -->
<aside class="ds-none lg:ds-block">
    Sidebar tartalom
</aside>

<!-- Main content - mindig látszik -->
<main class="ds-block">
    Fő tartalom
</main>

3. Tooltip vs. Permanent Label

<!-- Tooltip mobilon rejtett, desktop-on látszik -->
<span class="ds-none md:ds-inline">
    További információ
</span>

TODO: Grid Display Utilities

A következő osztályok későbbi implementálásra várnak:

• ds-grid - CSS Grid display
• ds-inline-grid - Inline grid display
• Grid-specifikus utility osztályok (grid-cols, grid-rows, stb.)

Flex Osztályok Strukturúrája

Teljes Flexbox támogatás breakpoint-alapú responsive viselkedéssel.

Flex Direction - Interaktív Példák

class="ds-flex-column md:ds-flex-row ds-gap-sm"

class="ds-flex-row xxs:ds-flex-column xs:ds-flex-row md:ds-flex-column lg:ds-flex-row xl:ds-flex-column xxl:ds-flex-row"

Flex Properties - Wrap, Grow, Shrink

Flex Wrap Példa

class="ds-flex-row ds-flex-nowrap md:ds-flex-wrap"

Flex Grow Példa

class="ds-flex-no-grow lg:ds-flex-grow"

Flex Alignment - Justify és Align

Justify Content Példák

Align Items Példa

class="ds-flex-row ds-flex-align-center lg:ds-flex-align-start xxl:ds-flex-align-end"

Flex Basis - Breakpoint-First Generálás

A ds-basis-* osztályok is breakpoint-first módon generálódnak, így a magasabb breakpoint mindig felülírja az alacsonyabbat, függetlenül a százalék értékek sorrendjétől.

Elérhető Flex-Basis Értékek

Példa: Responsive Flex-Basis

<!-- Mobilon 100%, tablet-on 50%, desktop-on 30% -->
<div class="ds-flex ds-gap-sm">
    <div class="ds-basis-100 md:ds-basis-50 lg:ds-basis-30">Item 1</div>
    <div class="ds-basis-100 md:ds-basis-50 lg:ds-basis-30">Item 2</div>
</div>

<!-- Komplex kombináció: még a fordított sorrend is helyesen működik -->
<div class="sm:ds-basis-75 lg:ds-basis-25">
    <!-- sm: 75%, lg: 25% (lg felülírja az sm-t) -->
</div>

Használati Best Practices

1. Responsive Card Layout

<div class="ds-flex-column md:ds-flex-row ds-gap-md">
    <div class="ds-flex-grow">Kártya 1</div>
    <div class="ds-flex-grow">Kártya 2</div>
    <div class="ds-flex-grow">Kártya 3</div>
</div>

2. Sidebar Layout

<div class="ds-flex-column lg:ds-flex-row ds-gap-lg">
    <aside class="lg:ds-basis-30">Sidebar (30%)</aside>
    <main class="ds-flex-grow">Main Content</main>
</div>

3. Centered Content

<div class="ds-flex-row ds-flex-justify-center ds-flex-align-center">
    <div>Horizontálisan és vertikálisan centrált</div>
</div>

Position Osztályok Strukturúrája

Position értékek, text alignment és overflow kezelés breakpoint támogatással.

Position Értékek - Interaktív Példák

1. Relative Positioning

class="ds-relative"

2. Absolute Positioning

class="ds-absolute"

3. Sticky Positioning

Text Alignment - Responsive Példák

class="ds-text-left xl:ds-text-center"

class="ds-text-center xl:ds-text-right"

class="ds-text-left lg:ds-text-center xl:ds-text-right"

Overflow Kezelés

1. Overflow Hidden

class="ds-overflow-hidden"

2. Overflow Auto (scroll ha szükséges)

class="ds-overflow-auto"

3. Responsive Overflow

class="ds-overflow-hidden md:ds-overflow-auto"

Használati Best Practices

1. Responsive Text Alignment

<!-- Mobil heading balra, desktop központozva -->
<h1 class="ds-text-left md:ds-text-center">
    Főcím
</h1>

2. Sticky Header (csak desktop-on)

<header class="ds-relative md:ds-sticky" style="top: 0;">
    Navigation
</header>

3. Modal Overlay

<div class="ds-fixed" style="inset: 0;">
    <div class="ds-absolute" style="top: 50%; left: 50%; transform: translate(-50%, -50%);">
        Modal Content
    </div>
</div>

4. Responsive Card Overflow

<!-- Mobilon rejtett overflow, desktop-on scroll -->
<div class="ds-overflow-hidden md:ds-overflow-auto">
    Long content...
</div>

Size Osztályok Strukturúrája

Width, height és max-width utilities breakpoint támogatással.

Width Utilities - Interaktív Példák

class="ds-w-full lg:ds-w-auto"

class="ds-w-auto lg:ds-w-full"

Height Utilities - Példák

class="ds-h-full"

class="ds-h-auto md:ds-h-full"

Max-Width Utilities - Breakpoint-First Generálás

A ds-mw-* osztályok breakpoint-first módon generálódnak, így a magasabb breakpoint mindig felülírja az alacsonyabbat, függetlenül a max-width értékek sorrendjétől.

Elérhető Max-Width Értékek (Container Sizes)

Miért fontos a breakpoint-first generálás?

<!-- Mobilon szélesebb (lg: 960px), desktop-on keskenyebb (md: 740px) -->
<div class="ds-mw-lg md:ds-mw-md">
    <!-- md: 740px felülírja az lg: 960px-t desktop-on -->
</div>

<!-- Komplex kombináció: még a fordított sorrend is helyesen működik -->
<div class="sm:ds-mw-xl lg:ds-mw-xs">
    <!-- sm: 1200px, lg: 540px (lg felülírja az sm-t) -->
</div>

Max-Width Utilities - Interaktív Példák

Max-width utilities gyakran használatosak centered content layout-okhoz:

class="ds-mw-xs"

class="ds-mw-md"

class="ds-mw-sm md:ds-mw-lg xl:ds-mw-xl"

Használati Best Practices

1. Centered Content Container

<!-- Tipikus centered layout max-width-tel -->
<div class="ds-mw-lg" style="margin: 0 auto;">
    Article vagy main content
</div>

2. Responsive Cards

<!-- Card full-width mobilon, auto desktop-on -->
<div class="ds-w-full md:ds-w-auto">
    Card content
</div>

3. Hero Section

<!-- Hero full width, de belső content korlátozva -->
<section class="ds-w-full">
    <div class="ds-mw-2xl" style="margin: 0 auto;">
        Hero content (max 1536px)
    </div>
</section>

4. Sidebar vs Main

<div class="ds-flex-row">
    <aside class="ds-w-full lg:ds-w-auto">Sidebar</aside>
    <main class="ds-flex-grow">Main Content</main>
</div>

Spacing Osztályok Strukturúrája

Teljes padding és margin rendszer breakpoint támogatással, minden irányra és méretre.

Spacing Skála

Irány Jelölések

Hierarchikus Generálás + Breakpoint-First

A padding és margin utilities hierarchikus sorrendben generálódnak, így a specifikusabb class-ok mindig felülírják az általánosabbakat:

Hierarchia (CSS generálási sorrend)

1. All sides (ds-p-*, ds-m-*) - Legáltalánosabb, minden oldalra vonatkozik
2. Tengely (ds-px-*, ds-py-*, ds-mx-*, ds-my-*) - Két oldal (horizontal/vertical)
3. Egyedi irányok (ds-pt-*, ds-pb-*, ds-pl-*, ds-pr-*, stb.) - Legspecifikusabb, egy oldal

Miért fontos ez?

Példák

<!-- Általános padding XL, de felül SM -->
<div class="ds-p-xl ds-pt-sm">
    <!-- ds-pt-sm felülírja a ds-p-xl top értékét -->
</div>

<!-- Responsive + hierarchia kombináció -->
<div class="ds-p-sm md:ds-p-lg ds-pt-xs">
    <!-- Base: sm padding, md+-on: lg padding, DE mindig xs top padding -->
</div>

<!-- Helyes cascade: nagyobb breakpoint felülírja -->
<div class="sm:ds-mx-xl lg:ds-mx-sm">
    <!-- sm: XL margin-x, lg: SM margin-x (lg felülírja az xl-t) -->
</div>

Responsive Padding - Interaktív Példák

class="ds-p-sm md:ds-p-lg xl:ds-p-xl"

Belső padding class="ds-p-xl lg:ds-p-md xxl:ds-p-xs"

class="ds-py-xs md:ds-py-md xl:ds-py-xl ds-px-md"

class="ds-pt-sm md:ds-pt-lg xl:ds-pt-2xl ds-pb-md ds-px-md"

Responsive Margin - Interaktív Példák

class="ds-m-xs md:ds-m-md xl:ds-m-lg"

class="ds-mb-sm md:ds-mb-lg"

class="ds-mx-md md:ds-mx-xl"

Kombinált Példák - Responsive Layouts

1. Card Grid Spacing

class="ds-p-sm md:ds-p-lg" + gap class="ds-gap-sm md:ds-gap-lg"

2. Section Spacing

<section class="ds-py-md md:ds-py-xl xl:ds-py-3xl ds-px-sm md:ds-px-lg">
    Vertical spacing jelentősen növekszik nagy kijelzőkön
</section>

3. Responsive Article Margins

<article class="ds-my-md md:ds-my-lg xl:ds-my-2xl">
    Article vertikális marginja növekszik
</article>

Használati Best Practices

1. Container Padding

<!-- Kisebb padding mobilon, nagyobb desktop-on -->
<div class="ds-p-sm md:ds-p-lg xl:ds-p-2xl">
    Container content
</div>

2. Section Vertical Rhythm

<section class="ds-py-md md:ds-py-xl">
    Section 1
</section>
<section class="ds-py-md md:ds-py-xl">
    Section 2
</section>

3. Heading Margins

<h2 class="ds-mb-sm md:ds-mb-md xl:ds-mb-lg">
    Heading
</h2>
<p>Paragraph</p>

4. Centered Content

<!-- Centered horizontálisan, növekvő margin -->
<div class="ds-mx-md md:ds-mx-xl" style="margin-left: auto; margin-right: auto;">
    Content
</div>

Gap Osztályok Strukturúrája

CSS Gap property Flexbox és Grid layout-okhoz, teljes breakpoint támogatással.

Gap Skála (ugyanaz, mint a spacing)

Gap Típusok

Flexbox Gap - Interaktív Példák

class="ds-flex-row ds-flex-wrap ds-gap-xs md:ds-gap-md xl:ds-gap-xl"

class="ds-flex-column ds-gap-sm md:ds-gap-lg"

Row Gap vs Column Gap

Külön kontroll a horizontális és vertikális távolsághoz:

class="ds-gap-row-md ds-gap-column-xs"

class="ds-gap-row-sm md:ds-gap-row-lg ds-gap-column-xs md:ds-gap-column-md"

Grid Layout Gap

A gap utility-k CSS Grid-del is tökéletesen működnek:

style="display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));"
class="ds-gap-sm md:ds-gap-lg"

Gap vs Margin/Padding - Mikor mit használj?

Használati Best Practices

1. Card Grid Layout

<div class="ds-flex-row ds-flex-wrap ds-gap-sm md:ds-gap-lg">
    <div class="card">Card 1</div>
    <div class="card">Card 2</div>
    <div class="card">Card 3</div>
</div>

2. Vertical Stacking

<div class="ds-flex-column ds-gap-md md:ds-gap-xl">
    <section>Section 1</section>
    <section>Section 2</section>
    <section>Section 3</section>
</div>

3. Button Group

<div class="ds-flex-row ds-gap-xs md:ds-gap-sm">
    <button>Button 1</button>
    <button>Button 2</button>
    <button>Button 3</button>
</div>

4. Aszimmetrikus Gap (Grid)

<div class="ds-gap-row-lg ds-gap-column-sm" style="display: grid; ...">
    <!-- Grid items -->
</div>

Migrációs Útmutató - Részletes Példákkal

1. Flex Mobile → Új rendszer

<!-- Régi -->
<div class="ds-flex-mobile">...</div>

<!-- Új (MOBILE-FIRST) -->
<div class="ds-flex md:ds-block">...</div>

2. Flex Desktop → Új rendszer

<!-- Régi -->
<div class="ds-flex-desktop">...</div>

<!-- Új (MOBILE-FIRST) -->
<div class="ds-block md:ds-flex">...</div>

3. Width 100% Mobile → Új rendszer

<!-- Régi -->
<div class="ds-w100-mobile">...</div>

<!-- Új (MOBILE-FIRST) -->
<div class="ds-w-full md:ds-w-auto">...</div>

Vizuális Összehasonlítás

Példa: Flex Mobile (régi) vs. Új rendszer

Migrációs Checklist

Gyakori Hibák és Megoldások

❌ Hiba 1: Csak breakpoint osztály, nincs base class

<!-- ROSSZ -->
<div class="md:ds-flex-row">...</div>

<!-- HELYES -->
<div class="ds-flex-column md:ds-flex-row">...</div>

❌ Hiba 2: Desktop-first gondolkodás

<!-- ROSSZ (desktop-first) -->
<div class="ds-flex lg:ds-block">...</div>
<!-- Ez azt jelenti: flex mindenhol, block csak nagy kijelzőn -->

<!-- HELYES (mobile-first) -->
<div class="ds-block md:ds-flex">...</div>
<!-- Ez azt jelenti: block mobilon, flex tablet-től -->

❌ Hiba 3: Deprecated osztály egyszerű cseréje

<!-- ROSSZ -->
.ds-flex-mobile → ds-flex  (nem ugyanaz!)

<!-- HELYES -->
.ds-flex-mobile → ds-flex md:ds-block  (mobil flex, desktop block)

Mire valók a Mixin-ek?

Ha egyedi responsive utility osztályokat szeretnél létrehozni, használhatod a PDS mixin API-ját. Két fő mixin rendszer áll rendelkezésre: Media Query (viewport alapú) és Container Query (szülő container alapú) alapú generáláshoz.

Media Query Mixin-ek

1. ds-responsive-class

Egyetlen utility osztály generálása base + összes breakpoint variánssal.

@use 'pds/foundation/abstracts/mixins/responsive-media' as resp;

@include resp.ds-responsive-class('ds-my-utility') {
    padding: 1rem;
    background: blue;
}

Generál: .ds-my-utility, .md:ds-my-utility, .lg:ds-my-utility, stb.

2. ds-responsive-class-group

Több ütköző utility osztály generálása breakpoint-first sorrendben. Használd akkor, ha ugyanazt a CSS property-t állítod különböző értékekre.

@use 'pds/foundation/abstracts/mixins/responsive-media' as resp;

@include resp.ds-responsive-class-group((
    'ds-text-small': (font-size: 0.875rem),
    'ds-text-base': (font-size: 1rem),
    'ds-text-large': (font-size: 1.25rem)
));

3. ds-responsive-only-class

Csak breakpoint variánsok generálása, base osztály nélkül.

@use 'pds/foundation/abstracts/mixins/responsive-media' as resp;

@include resp.ds-responsive-only-class('ds-desktop-only') {
    display: block;
}

Generál: .md:ds-desktop-only, .lg:ds-desktop-only, stb. (nincs .ds-desktop-only)

Container Query Mixin-ek

1. ds-container-class

Egyetlen utility osztály generálása container query variánsokkal (generic és/vagy named).

@use 'pds/foundation/abstracts/mixins/responsive-container' as container;

@include container.ds-container-class('ds-product-card', $containers: 'all') {
    display: grid;
    gap: 1rem;
}

Generál: .@container:md:ds-product-card, .@cn-1:lg:ds-product-card, stb.

2. ds-container-class-group

Több ütköző utility osztály generálása container query-vel, breakpoint-first sorrendben.

@use 'pds/foundation/abstracts/mixins/responsive-container' as container;

@include container.ds-container-class-group((
    'ds-grid-1col': (display: grid, grid-template-columns: 1fr),
    'ds-grid-2col': (display: grid, grid-template-columns: repeat(2, 1fr)),
    'ds-grid-3col': (display: grid, grid-template-columns: repeat(3, 1fr))
), $containers: (cn-1, cn-2));

Használat: @cn-1:md:ds-grid-2col @cn-1:xl:ds-grid-3col

Használt Breakpoint-ok

A mixin-ek automatikusan használják a $ds-bps (media query) és $ds-container-bps (container query) változókat a töréspontokhoz:

$ds-bps: (
    xxs: 320px,
    xs: 400px,
    sm: 600px,
    md: 768px,
    lg: 960px,
    xl: 1280px,
    xxl: 1440px
);

Saját breakpoint lista is megadható a $breakpoints paraméterrel.

Mi az a Container Query?

A Container Query egy modern CSS funkció, amely lehetővé teszi, hogy egy elem stílusa a tartalmazó container mérete alapján változzon, nem pedig a teljes viewport mérete alapján.

Media Query vs Container Query összehasonlítás:

Mikor használjunk Container Query-t?

• Reusable komponensek - Card, widget, stb. amit különböző kontextusokban használsz
• Nested layout-ok - Sidebar-ban, modal-ban, vagy egyéb containerekben
• Sidebar/main layout - Amikor a sidebar mérete alapján kell változnia a tartalomnak
• Dashboard widget-ek - Amikor a grid cell mérete változó

Generic Container Használat

Egyszerű esetekben használd a generic (névtelen) containereket:

1. Elérhető Container Osztályok

A PDS automatikusan generálja az alábbi container definíciókat:

• .ds-container - Generic (névtelen) container
• .ds-container-cn-1 ... .ds-container-cn-6 - Named containerek (nested használatra)

2. HTML Használat

<div class="ds-container">
    <div class="@container:md:ds-flex-row @container:lg:ds-flex-column">
        <div>Item 1</div>
        <div>Item 2</div>
    </div>
</div>

Működés:

• A .ds-container definiálja a container context-et
• A @container:md: prefix azt jelenti: "ha a container eléri az md töréspontot (768px)"
• A gyerek elem a container mérete alapján változik, nem a viewport alapján

3. Példa: Reusable Card Component

<!-- Kis container (pl. sidebar) -->
<div class="ds-container" style="width: 320px;">
    <div class="card @container:md:ds-flex-row">
        <!-- Card tartalma stack-elt marad, mert container < 768px -->
    </div>
</div>

<!-- Nagy container (pl. main content) -->
<div class="ds-container" style="width: 960px;">
    <div class="card @container:md:ds-flex-row">
        <!-- Card tartalma horizontal lesz, mert container >= 768px -->
    </div>
</div>

Named Container Használat (Nested Layouts)

Ha többszintű nested layout-od van, használj named containereket a megkülönböztetéshez:

PDS Core Named Containerek

Alapértelmezetten elérhető named containerek általános nesting-hez:

• cn-1, cn-2, cn-3, cn-4, cn-5, cn-6

Példa: Nested Layout

<!-- Külső container (Level 1) -->
<div class="ds-container-cn-1">
    <div class="@cn-1:md:ds-flex-row @cn-1:lg:ds-gap-xl">
        Külső tartalom
        
        <!-- Belső nested container (Level 2) -->
        <div class="ds-container-cn-2">
            <div class="@cn-2:sm:ds-flex-column @cn-2:md:ds-p-lg">
                Belső tartalom - független a külsőtől!
            </div>
        </div>
    </div>
</div>

Előnyök:

• A cn-1 és cn-2 containerek függetlenül működnek
• A belső container töréspontjai nem befolyásolják a külsőt
• Tiszta, olvasható kód nested layout-oknál

Mikor használjunk Named Containereket?

• Sidebar + Main layout - Mindkettő container, függetlenül reagálnak
• Card grid nested layout - Külső grid, belső card-ok
• Dashboard komponensek - Widget-ek saját container context-tel
• Modal/Drawer tartalom - Modal maga egy container, tartalma másik

Referencia Implementáció: ds-flex-row és ds-flex-column

Ezek az osztályok referencia implementációként támogatják a container query-t. A _flex.scss fájlban implementálva vannak mindhárom típus számára:

1. Media Query használat (AKTÍV):

<div class="ds-flex md:ds-flex-row lg:ds-flex-column">
    Viewport mérete alapján változik
</div>

2. Generic Container Query (AKTÍV - használatra kész):

<!-- Container definíció -->
<div class="ds-container">
    <div class="@container:md:ds-flex-row">
        Container mérete alapján változik
    </div>
</div>

3. Named Container Query (AKTÍV - használatra kész):

<!-- Named container definíció -->
<div class="ds-container-cn-1">
    <div class="@cn-1:md:ds-flex-row @cn-1:lg:ds-flex-column">
        Named container mérete alapján változik
    </div>
</div>

Projekt-specifikus Containerek

Projekt-szintű SCSS-ben regisztrálhatók egyedi containerek scope-pal, hogy ne ütközzenek más projektekkel:

1. Containerek Regisztrálása

// myproject/styles/main.scss
@use 'pds/foundation/abstracts/mixins/responsive-container' as container;

// Projekt-specifikus containerek regisztrálása
@include container.ds-register-containers(
    (product-grid, user-card, dashboard),
    $scope: 'myproject'
);

// Containerek generálása (PDS core + projekt-specifikus)
@include container.ds-generate-container-definitions();

Ez létrehozza a következő projekt-specifikus container osztályokat:

• .ds-container-myproject-product-grid
• .ds-container-myproject-user-card
• .ds-container-myproject-dashboard

2. HTML Használat

<div class="ds-container-myproject-product-grid">
    <div class="@myproject-product-grid:md:ds-flex-row">
        Projekt-specifikus container query
    </div>
</div>

3. Előnyök

• Beszédes nevek - product-grid egyértelmű
• Nincs ütközés - Scope prefix védi a nevet
• Projekt-specifikus - Nem szennyezi a PDS core-t
• Karbantartható - Könnyen azonosítható a használat

Container Query Breakpointok

Alapértelmezetten a container query-k ugyanazokat a breakpoint-okat használják, mint a media query-k ($ds-bps):

Browser Támogatás

Container Query támogatás modern böngészőkben:

Fallback Stratégia

A container query-k automatikusan ignorálódnak régebbi böngészőkben:

• A base class-ok (pl. ds-flex) továbbra is működnek
• A @container: prefix-es osztályok egyszerűen nem kerülnek alkalmazásra
• Nincs szükség polyfill-re vagy feature detection-re
• Progressive enhancement: modern böngészőkben jobb UX

Aktiválási Útmutató

Amikor készen állsz a container query funkció projekt-szintű használatára:

1. Projekt SCSS Fájl

// myproject/styles/main.scss
@use 'pds/foundation/abstracts/mixins/responsive-container' as container;

// Opcionálisan: Projekt-specifikus containerek
@include container.ds-register-containers(
    (sidebar, main-content, widget),
    $scope: 'myapp'
);

// Container definíciók generálása
@include container.ds-generate-container-definitions();

2. HTML-ben Használd a Container Osztályokat

<div class="ds-container-cn-1">
    <div class="@cn-1:md:ds-flex-row">
        Tartalom
    </div>
</div>

3. Tesztelés

• Ellenőrizd modern böngészőkben (Chrome 105+, Firefox 110+, Safari 16+)
• Teszteld különböző container méretekkel
• Vizsgáld meg a fallback viselkedést régebbi böngészőkben