Regione Toscana Design System

Containers 

<div class="rtds-py-6 rtds-space-y-8">
    <div class="rtds-px-6">
        <h1 class="rtds-text-2xl rtds-font-bold">Containers</h1>
        <p>Demo for used containers: custom utility (with project prefix).</p>
    </div>
    <div class="rtds-grid rtds-gap-6">

        <div class="rtds-container-xxs rtds-bg-neutral-500 rtds-p-3">
            <h2 class="rtds-text-lg"><strong>rtds-container-xxs</strong></h2>
            <p>max-width: 640px</p>
        </div>

        <div class="rtds-container-xs rtds-bg-neutral-500 rtds-p-3">
            <h2 class="rtds-text-lg"><strong>rtds-container-xs</strong></h2>
            <p>max-width: 1024px</p>
        </div>

        <div class="rtds-container-sm rtds-bg-neutral-500 rtds-p-3">
            <h2 class="rtds-text-lg"><strong>rtds-container-sm</strong></h2>
            <p>max-width: 1280px</p>
        </div>

        <div class="rtds-container rtds-bg-neutral-500 rtds-p-3">
            <h2 class="rtds-text-lg"><strong>rtds-container</strong></h2>
            <p>max-width: 1536px</p>
        </div>

    </div>
</div>
 
<div class="rtds-py-6 rtds-space-y-8">
    <div class="rtds-px-6">
        <h1 class="rtds-text-2xl rtds-font-bold">Containers</h1>
        <p>Demo for used containers: custom utility (with project prefix).</p>
    </div>
    <div class="rtds-grid rtds-gap-6">
    {% for container in containers %}
    <div class="{{ container.name }} rtds-bg-neutral-500 rtds-p-3">
        <h2 class="rtds-text-lg"><strong>{{ container.name }}</strong></h2>
        <p>max-width: {{ container.width }}</p>
    </div>
    {% endfor %}
    </div>
</div>
 
{
  "containers": [
    {
      "name": "rtds-container-xxs",
      "width": "640px"
    },
    {
      "name": "rtds-container-xs",
      "width": "1024px"
    },
    {
      "name": "rtds-container-sm",
      "width": "1280px"
    },
    {
      "name": "rtds-container",
      "width": "1536px"
    }
  ]
}
  • Content: 
    /**
 * CONTAINER UTILITIES
 *
*/
@layer utilities {
    /* CONTAINER */
    /* Custom container utility */

    .rtds-container-xxs {
        @apply rtds-max-w-screen-sm rtds-w-[90%] rtds-mx-auto;
    }

    .rtds-container-xs {
        @apply rtds-max-w-screen-lg rtds-w-[90%] rtds-mx-auto;
    }

    .rtds-container-sm {
        @apply rtds-max-w-screen-xl rtds-w-[90%] rtds-mx-auto;
    }

    .rtds-container {
        @apply rtds-max-w-screen-2xl rtds-w-[90%] rtds-mx-auto;
    }

    /* RULE FOR NESTED CONTAINERS - prevent horizontal margin */
    [class*="rtds-container"] [class*="rtds-container"] {
        @apply rtds-mx-0 rtds-w-full;
    }

}
  • URL: /components/raw/containers/containers.css
  • Filesystem Path: components/01-design-system/containers/containers.css
  • Size: 656 Bytes

Containers

I container sono elementi fondamentali per la gestione della larghezza e del layout dei contenuti nel progetto.

Container di Tailwind

È possibile utilizzare l’utility container predefinita di Tailwind, che può essere personalizzata modificando i breakpoint di Tailwind.

Documentazione Tailwind container

Note Importanti

Il container predefinito di Tailwind utilizza larghezze massime diverse per ogni breakpoint, invece di un comportamento fluido sotto il breakpoint di layout massimo. Se usato, si consiglia questa implementazione:

<!-- Larghezza fluida fino al breakpoint `md`, poi bloccata al container -->
<div class="md:container md:mx-auto">

Il breakpoint può essere lg, xl ecc. a seconda del layout desiderato.

Container nel Framework

Container Predefinito

Il container predefinito non è centrato. È possibile:

  • Configurarlo nel file di configurazione di Tailwind (come attualmente utilizzato in questo framework)
  • Impostare margini orizzontali automatici per utility personalizzate
  • Aggiungere padding orizzontale se necessario

Utility Personalizzata

Nel framework viene utilizzata un’utility personalizzata rtds-container che combina:

  • Comportamento del container Tailwind per un determinato breakpoint
  • Stile responsive con larghezza del 90% centrata per il container

Varianti del Container

Per le varianti del container (es. container piccolo o molto piccolo utilizzati in diverse sezioni o per contenuti solo testuali nelle pagine di dettaglio) sono necessarie utility personalizzate. Queste devono essere definite in CSS, gestendo la larghezza massima utilizzando le classi di breakpoint di Tailwind.

Esempio:

.rtds-container-xs {
    @apply max-w-screen-lg w-[90%] mx-auto;
}

La denominazione deve essere impostata in base alle esigenze di design e alle configurazioni del framework di design.

Convenzioni di Denominazione

La denominazione dei container (xs, md…) non riflette necessariamente il breakpoint Tailwind utilizzato in quell’utility (può anche essere una larghezza diversa), ma riflette le esigenze del progetto/l’uso effettivo del container.

Esempi di denominazione:

  • rtds-container-xxs
  • rtds-container-xs
  • rtds-container-md