Regione Toscana Design System — Servizi Design System Core

Breakpoints 

<div class="rtds-p-6">
    <div>
        <h1 class="rtds-text-2xl rtds-font-bold">Project breakpoints</h1>
    </div>
    <div class="rtds-grid rtds-gap-6">

        <div class="rtds-grid rtds-gap-2">
            <h2 class="rtds-text-lg"><strong>xs</strong></h2>
            <p>class: <strong>xs:</strong></p>
            <p>min-width: 360px</p>
        </div>

        <div class="rtds-grid rtds-gap-2">
            <h2 class="rtds-text-lg"><strong>sm</strong></h2>
            <p>class: <strong>sm:</strong></p>
            <p>min-width: 640px</p>
        </div>

        <div class="rtds-grid rtds-gap-2">
            <h2 class="rtds-text-lg"><strong>md</strong></h2>
            <p>class: <strong>md:</strong></p>
            <p>min-width: 768px</p>
        </div>

        <div class="rtds-grid rtds-gap-2">
            <h2 class="rtds-text-lg"><strong>lg</strong></h2>
            <p>class: <strong>lg:</strong></p>
            <p>min-width: 1024px</p>
        </div>

        <div class="rtds-grid rtds-gap-2">
            <h2 class="rtds-text-lg"><strong>xl</strong></h2>
            <p>class: <strong>xl:</strong></p>
            <p>min-width: 1280px</p>
        </div>

        <div class="rtds-grid rtds-gap-2">
            <h2 class="rtds-text-lg"><strong>1.5xl</strong></h2>
            <p>class: <strong>1.5xl:</strong></p>
            <p>min-width: 1440px</p>
        </div>

        <div class="rtds-grid rtds-gap-2">
            <h2 class="rtds-text-lg"><strong>2xl</strong></h2>
            <p>class: <strong>2xl:</strong></p>
            <p>min-width: 1536px</p>
        </div>

    </div>
</div>
 
<div class="rtds-p-6">
    <div>
    <h1 class="rtds-text-2xl rtds-font-bold">Project breakpoints</h1>
    </div>
    <div class="rtds-grid rtds-gap-6">
    {% for breakpoint in breakpoints %}
    <div class="rtds-grid rtds-gap-2">
        <h2 class="rtds-text-lg"><strong>{{ breakpoint.name }}</strong></h2>
        <p>class: <strong>{{ breakpoint.class }}:</strong></p>
        <p>min-width: {{ breakpoint.width }}</p>
    </div>
    {% endfor %}
    </div>
</div>
 
{
  "breakpoints": [
    {
      "name": "xs",
      "width": "360px",
      "class": "xs"
    },
    {
      "name": "sm",
      "width": "640px",
      "class": "sm"
    },
    {
      "name": "md",
      "width": "768px",
      "class": "md"
    },
    {
      "name": "lg",
      "width": "1024px",
      "class": "lg"
    },
    {
      "name": "xl",
      "width": "1280px",
      "class": "xl"
    },
    {
      "name": "1.5xl",
      "width": "1440px",
      "class": "1.5xl"
    },
    {
      "name": "2xl",
      "width": "1536px",
      "class": "2xl"
    }
  ]
}
  • Handle: @breakpoints
  • Preview:
  • Filesystem Path: components/01-design-system/primitives/breakpoints/breakpoints.njk

Breakpoints

Breakpoint responsive del Design System RTDS, basati sulla scala Tailwind v3 con prefisso rtds-.

Il sistema è mobile-first: le classi base si applicano a tutti i breakpoint, i prefissi responsive sovrascrivono da quella dimensione in su.

Tabella breakpoint

Prefisso Larghezza minima Dispositivo tipico
(nessuno) 0px Mobile portrait
xs: 360px Mobile piccolo
sm: 640px Mobile landscape, tablet piccolo
md: 768px Tablet
lg: 1024px Laptop, tablet orizzontale
xl: 1280px Desktop
1.5xl: 1440px Desktop medio
2xl: 1536px Desktop grande

Utilizzo

<!-- Testo base su mobile, più grande da md -->
<p class="rtds-text-base md:rtds-text-lg lg:rtds-text-xl">Testo responsive</p>

<!-- Layout a colonna su mobile, griglia da md -->
<div class="rtds-grid rtds-grid-cols-1 md:rtds-grid-cols-2 lg:rtds-grid-cols-3">
  ...
</div>

<!-- Nascosto su mobile, visibile da lg -->
<div class="rtds-hidden lg:rtds-block">Solo desktop</div>

<!-- Visibile solo su mobile -->
<div class="rtds-block lg:rtds-hidden">Solo mobile</div>

<!-- Spaziatura che cresce con lo schermo -->
<section class="rtds-py-8 md:rtds-py-12 lg:rtds-py-16">...</section>

Pattern comuni nel DS

Pattern Uso nel DS
md:rtds-grid-cols-2 Griglia card: 1 col mobile → 2 col tablet
lg:rtds-grid-cols-3 Griglia card: → 3 col laptop
md:rtds-hidden Versione mobile di un elemento (nascosta da tablet)
rtds-hidden md:rtds-flex Elemento solo tablet/desktop
lg:rtds-col-span-{n} Layout a 12 colonne da laptop

Breakpoint compositi (height-based)

Breakpoint speciali definiti in Tailwind come raw media queries, usati per layout che dipendono sia dalla larghezza che dall’altezza dello schermo (es. hero con viewport height, modal fullscreen):

Prefisso Media query
min-h-480: (min-height: 480px)
md-max-w-480-min-h: (max-width: 1023px) and (min-height: 480px)
lg-min-w-480-min-h: (min-width: 1024px) and (min-height: 480px)
xl-min-w-480-min-h: (min-width: 1280px) and (min-height: 480px) 
<!-- Altezza piena solo su schermi con min-height 480px -->
<div class="rtds-h-auto min-h-480:rtds-h-screen">...</div>

Note

  • I breakpoint usano min-width (mobile-first)
  • Per targeting di un singolo breakpoint usare combinazione di prefissi: md:rtds-block lg:rtds-hidden
  • Il container rtds-container ha già max-width scalari per breakpoint (vedi containers)