Utilities

Ready

HTML
View
Context
Assets
Info
Notes


        
        <div class="rtds-grid rtds-gap-6">

    <div class="rtds-grid rtds-gap-2">

        <h2 class="rtds-text-lg"><strong>Utility padding top 12 md</strong></h2>

        <p>class: <strong>rtds-pt-12 md:rtds-pt-12</strong></p>
        <div class="rtds-pt-12 md:rtds-pt-12">
            <p>example (for css codebase)</p>
        </div>

        <p>usecase: Padding top 12 md</p>

    </div>

    <div class="rtds-grid rtds-gap-2">

        <h2 class="rtds-text-lg"><strong>utility grid template columns 1 - 2 fr</strong></h2>

        <p>class: <strong>rtds-grid-cols-1-2 md:rtds-grid-cols-1-2 lg:rtds-grid-cols-1-2 xl:rtds-grid-cols-1-2</strong></p>
        <div class="rtds-grid-cols-1-2 md:rtds-grid-cols-1-2 lg:rtds-grid-cols-1-2 xl:rtds-grid-cols-1-2">
            <p>example (for css codebase)</p>
        </div>

    </div>

    <div class="rtds-grid rtds-gap-2">

        <h2 class="rtds-text-lg"><strong>utility grid template columns 2 - 1 fr</strong></h2>

        <p>class: <strong>rtds-grid-cols-2-1 md:rtds-grid-cols-2-1 lg:rtds-grid-cols-2-1 xl:rtds-grid-cols-2-1</strong></p>
        <div class="rtds-grid-cols-2-1 md:rtds-grid-cols-2-1 lg:rtds-grid-cols-2-1 xl:rtds-grid-cols-2-1">
            <p>example (for css codebase)</p>
        </div>

    </div>

    <div class="rtds-grid rtds-gap-2">

        <h2 class="rtds-text-lg"><strong>utility grid template columns 1 - 3 fr</strong></h2>

        <p>class: <strong>rtds-grid-cols-1-3 md:rtds-grid-cols-1-3 lg:rtds-grid-cols-1-3 xl:rtds-grid-cols-1-3</strong></p>
        <div class="rtds-grid-cols-1-3 md:rtds-grid-cols-1-3 lg:rtds-grid-cols-1-3 xl:rtds-grid-cols-1-3">
            <p>example (for css codebase)</p>
        </div>

    </div>

    <div class="rtds-grid rtds-gap-2">

        <h2 class="rtds-text-lg"><strong>utility grid template columns 1 - 4 fr</strong></h2>

        <p>class: <strong>rtds-grid-cols-1-4 md:rtds-grid-cols-1-4 lg:rtds-grid-cols-1-4 xl:rtds-grid-cols-1-4</strong></p>
        <div class="rtds-grid-cols-1-4 md:rtds-grid-cols-1-4 lg:rtds-grid-cols-1-4 xl:rtds-grid-cols-1-4">
            <p>example (for css codebase)</p>
        </div>

    </div>

    <div class="rtds-grid rtds-gap-2">

        <h2 class="rtds-text-lg"><strong>Aspect ratio 3/2</strong></h2>

        <p>class: <strong>rtds-aspect-3-2</strong></p>
        <div class="rtds-aspect-3-2">
            <p>example (for css codebase)</p>
        </div>

        <p>usecase: 3/2 aspect ratio</p>

    </div>

    <div class="rtds-grid rtds-gap-2">

        <h2 class="rtds-text-lg"><strong>Aspect ratio video</strong></h2>

        <p>class: <strong>rtds-aspect-video</strong></p>
        <div class="rtds-aspect-video">
            <p>example (for css codebase)</p>
        </div>

        <p>usecase: 16/9 aspect ratio</p>

    </div>

    <div class="rtds-grid rtds-gap-2">

        <h2 class="rtds-text-lg"><strong>Aspect ratio horizontal</strong></h2>

        <p>class: <strong>rtds-aspect-horizontal</strong></p>
        <div class="rtds-aspect-horizontal">
            <p>example (for css codebase)</p>
        </div>

        <p>usecase: 6.8/2.5 aspect ratio</p>

    </div>

    <div class="rtds-grid rtds-gap-2">

        <h2 class="rtds-text-lg"><strong>Aspect ratio wide</strong></h2>

        <p>class: <strong>rtds-aspect-wide</strong></p>
        <div class="rtds-aspect-wide">
            <p>example (for css codebase)</p>
        </div>

        <p>usecase: 3/1 aspect ratio</p>

    </div>

    <div class="rtds-grid rtds-gap-2">

        <h2 class="rtds-text-lg"><strong>Aspect ratio 2/1</strong></h2>

        <p>class: <strong>rtds-aspect-2-1</strong></p>
        <div class="rtds-aspect-2-1">
            <p>example (for css codebase)</p>
        </div>

        <p>usecase: 2/1 aspect ratio</p>

    </div>

    <div class="rtds-grid rtds-gap-2">

        <h2 class="rtds-text-lg"><strong>Aspect ratio 4/3</strong></h2>

        <p>class: <strong>rtds-aspect-4-3</strong></p>
        <div class="rtds-aspect-4-3">
            <p>example (for css codebase)</p>
        </div>

        <p>usecase: 4/3 aspect ratio</p>

    </div>

    <div class="rtds-grid rtds-gap-2">

        <h2 class="rtds-text-lg"><strong>Aspect ratio 5/2</strong></h2>

        <p>class: <strong>rtds-aspect-5-2</strong></p>
        <div class="rtds-aspect-5-2">
            <p>example (for css codebase)</p>
        </div>

        <p>usecase: 5/2 aspect ratio</p>

    </div>

    <div class="rtds-grid rtds-gap-2">

        <h2 class="rtds-text-lg"><strong>Aspect ratio 5/3</strong></h2>

        <p>class: <strong>rtds-aspect-5-3</strong></p>
        <div class="rtds-aspect-5-3">
            <p>example (for css codebase)</p>
        </div>

        <p>usecase: 5/3 aspect ratio</p>

    </div>

    <div class="rtds-grid rtds-gap-2">

        <h2 class="rtds-text-lg"><strong>Square</strong></h2>

        <p>class: <strong>rtds-aspect-square</strong></p>
        <div class="rtds-aspect-square">
            <p>example (for css codebase)</p>
        </div>

        <p>usecase: 1/1 aspect ratio</p>

    </div>

</div>


        <div class="rtds-grid rtds-gap-6">
{% for util in utils %}
    <div class="rtds-grid rtds-gap-2">
        {% if util.name %}
            <h2 class="rtds-text-lg"><strong>{{ util.name }}</strong></h2>
        {% endif %}
        {% if util.class %}
            <p>class: <strong>{{ util.class }}</strong></p>
            <div class="{{ util.class }}"><p>example (for css codebase)</p></div>
        {% endif %}
        {% if util.usecase %}
            <p>usecase: {{ util.usecase }}</p>
        {% endif %}
    </div>
{% endfor %}
</div>


        
            
            {
  "utils": [
    {
      "name": "Utility padding top 12 md",
      "class": "rtds-pt-12 md:rtds-pt-12",
      "usecase": "Padding top 12 md"
    },
    {
      "name": "utility grid template columns 1 - 2 fr",
      "class": "rtds-grid-cols-1-2 md:rtds-grid-cols-1-2 lg:rtds-grid-cols-1-2 xl:rtds-grid-cols-1-2"
    },
    {
      "name": "utility grid template columns 2 - 1 fr",
      "class": "rtds-grid-cols-2-1 md:rtds-grid-cols-2-1 lg:rtds-grid-cols-2-1 xl:rtds-grid-cols-2-1"
    },
    {
      "name": "utility grid template columns 1 - 3 fr",
      "class": "rtds-grid-cols-1-3 md:rtds-grid-cols-1-3 lg:rtds-grid-cols-1-3 xl:rtds-grid-cols-1-3"
    },
    {
      "name": "utility grid template columns 1 - 4 fr",
      "class": "rtds-grid-cols-1-4 md:rtds-grid-cols-1-4 lg:rtds-grid-cols-1-4 xl:rtds-grid-cols-1-4"
    },
    {
      "name": "Aspect ratio 3/2",
      "class": "rtds-aspect-3-2",
      "usecase": "3/2 aspect ratio"
    },
    {
      "name": "Aspect ratio video",
      "class": "rtds-aspect-video",
      "usecase": "16/9 aspect ratio"
    },
    {
      "name": "Aspect ratio horizontal",
      "class": "rtds-aspect-horizontal",
      "usecase": "6.8/2.5 aspect ratio"
    },
    {
      "name": "Aspect ratio wide",
      "class": "rtds-aspect-wide",
      "usecase": "3/1 aspect ratio"
    },
    {
      "name": "Aspect ratio 2/1",
      "class": "rtds-aspect-2-1",
      "usecase": "2/1 aspect ratio"
    },
    {
      "name": "Aspect ratio 4/3",
      "class": "rtds-aspect-4-3",
      "usecase": "4/3 aspect ratio"
    },
    {
      "name": "Aspect ratio 5/2",
      "class": "rtds-aspect-5-2",
      "usecase": "5/2 aspect ratio"
    },
    {
      "name": "Aspect ratio 5/3",
      "class": "rtds-aspect-5-3",
      "usecase": "5/3 aspect ratio"
    },
    {
      "name": "Square",
      "class": "rtds-aspect-square",
      "usecase": "1/1 aspect ratio"
    }
  ]
}

File:

Content:


                                /**
 * CUSTOM UTILITIES
 *
*/
/* Override generic styles for text field */
/*  .rtds-article-body h2 {
        @apply rtds-heading-2 rtds-mb-8;
    }

    .rtds-article-body * + h2 {
        @apply rtds-mt-16;
    }

    .rtds-article-body h3 {
        @apply rtds-heading-3 rtds-mb-6;
    }

    .rtds-article-body * + h3 {
        @apply rtds-mt-12;
    }

    .rtds-article-body h4 {
        @apply rtds-heading-4 rtds-mb-4;
    }

    .rtds-article-body * + h4 {
        @apply rtds-mt-8;
    }

    .rtds-article-body h5 {
        @apply rtds-heading-5;
    }

    .rtds-article-body * + h5 {
        @apply rtds-mt-7;
    }

    .rtds-article-body h6 {
        @apply rtds-heading-6;
    }

    .rtds-article-body * + h6 {
        @apply rtds-mt-6;
    }

    .rtds-article-body ol,
    .rtds-article-body ul,
    .rtds-article-body p {
        @apply rtds-text-base lg:rtds-text-lg xl:rtds-text-lg 2xl:rtds-text-lg rtds-leading-relaxed md:rtds-leading-relaxed lg:rtds-leading-relaxed;
    }

    .rtds-article-body p + p,
    .rtds-article-body ul + p,
    .rtds-article-body ol + p,
    .rtds-article-body * + ol,
    .rtds-article-body * + ul
        {
        @apply rtds-mt-7 md:rtds-mt-8 lg:rtds-mt-9;
    }

    .rtds-article-body ol {
        @apply rtds-list-decimal;
    }

    .rtds-article-body ul {
        @apply rtds-list-disc;
    }

    .rtds-article-body ol,
    .rtds-article-body ul
    {
        @apply rtds-ml-[1em];
    }

    .rtds-article-body ol li + li,
    .rtds-article-body ul li + li {
        @apply rtds-mt-3;
    }

    .rtds-article-body a {
        @apply rtds-content-03 rtds-underline hover:rtds-link-primary-hover;
    }*/

URL: /components/raw/utilities/utilities.built.css
Filesystem Path: components/01-design-system/utilities/utilities.built.css
Size: 1.7 KB

Content:


                                /**
 * CUSTOM UTILITIES
 *
*/
@layer utilities {
     /* Override generic styles for text field */
   /*  .rtds-article-body h2 {
        @apply rtds-heading-2 rtds-mb-8;
    }

    .rtds-article-body * + h2 {
        @apply rtds-mt-16;
    }

    .rtds-article-body h3 {
        @apply rtds-heading-3 rtds-mb-6;
    }

    .rtds-article-body * + h3 {
        @apply rtds-mt-12;
    }

    .rtds-article-body h4 {
        @apply rtds-heading-4 rtds-mb-4;
    }

    .rtds-article-body * + h4 {
        @apply rtds-mt-8;
    }

    .rtds-article-body h5 {
        @apply rtds-heading-5;
    }

    .rtds-article-body * + h5 {
        @apply rtds-mt-7;
    }

    .rtds-article-body h6 {
        @apply rtds-heading-6;
    }

    .rtds-article-body * + h6 {
        @apply rtds-mt-6;
    }

    .rtds-article-body ol,
    .rtds-article-body ul,
    .rtds-article-body p {
        @apply rtds-text-base lg:rtds-text-lg xl:rtds-text-lg 2xl:rtds-text-lg rtds-leading-relaxed md:rtds-leading-relaxed lg:rtds-leading-relaxed;
    }

    .rtds-article-body p + p,
    .rtds-article-body ul + p,
    .rtds-article-body ol + p,
    .rtds-article-body * + ol,
    .rtds-article-body * + ul
        {
        @apply rtds-mt-7 md:rtds-mt-8 lg:rtds-mt-9;
    }

    .rtds-article-body ol {
        @apply rtds-list-decimal;
    }

    .rtds-article-body ul {
        @apply rtds-list-disc;
    }

    .rtds-article-body ol,
    .rtds-article-body ul
    {
        @apply rtds-ml-[1em];
    }

    .rtds-article-body ol li + li,
    .rtds-article-body ul li + li {
        @apply rtds-mt-3;
    }

    .rtds-article-body a {
        @apply rtds-content-03 rtds-underline hover:rtds-link-primary-hover;
    }*/
}

URL: /components/raw/utilities/utilities.css
Filesystem Path: components/01-design-system/utilities/utilities.css
Size: 1.7 KB

Handle: @utilities
Preview:
- With layout
- Component only
Filesystem Path: components/01-design-system/utilities/utilities.njk

Utility personalizzate

Classi Tailwind custom del Design System RTDS per griglie a proporzioni variabili e rapporti d’aspetto. Usano il prefisso rtds-.

Griglie a proporzioni variabili

Griglie a 2 colonne con larghezze asimmetriche, basate su frazioni (fr).

Classe	Proporzione	Utilizzo tipico
`rtds-grid-cols-1-2`	1fr + 2fr	Sidebar stretta + contenuto
`rtds-grid-cols-2-1`	2fr + 1fr	Contenuto + sidebar stretta
`rtds-grid-cols-1-3`	1fr + 3fr	Sidebar molto stretta + contenuto
`rtds-grid-cols-1-4`	1fr + 4fr	Sidebar minima + contenuto ampio

<!-- Layout sidebar + contenuto (1/3 e 2/3) -->
<div class="rtds-grid rtds-grid-cols-1-2 rtds-gap-6">
  <aside>Sidebar</aside>
  <main>Contenuto principale</main>
</div>

<!-- Layout contenuto + sidebar (2/3 e 1/3) -->
<div class="rtds-grid rtds-grid-cols-2-1 rtds-gap-6">
  <article>Articolo</article>
  <aside>Widget</aside>
</div>

Rapporti d’aspetto (Aspect Ratio)

Classi per mantenere proporzioni fisse in contenitori responsive.

Classe	Rapporto	Utilizzo tipico
`rtds-aspect-square`	1:1	Avatar, thumbnail quadrate, icone
`rtds-aspect-video`	16:9	Video, iframe YouTube/Vimeo
`rtds-aspect-3-2`	3:2	Foto fotografica standard
`rtds-aspect-4-3`	4:3	Immagini tradizionali, presentazioni
`rtds-aspect-2-1`	2:1	Banner rettangolare orizzontale
`rtds-aspect-wide`	3:1	Cover image panoramica, hero
`rtds-aspect-horizontal`	≈6.8:2.5	Banner molto panoramico
`rtds-aspect-5-2`	5:2	Banner largo
`rtds-aspect-5-3`	5:3	Immagine orizzontale

<!-- Immagine video responsive -->
<div class="rtds-aspect-video rtds-w-full">
  <iframe class="rtds-w-full rtds-h-full" src="..."></iframe>
</div>

<!-- Cover image panoramica -->
<div class="rtds-aspect-wide rtds-w-full rtds-overflow-hidden">
  <img class="rtds-w-full rtds-h-full rtds-object-cover" src="..." alt="">
</div>

<!-- Thumbnail quadrata -->
<div class="rtds-aspect-square rtds-w-32">
  <img class="rtds-w-full rtds-h-full rtds-object-cover rtds-rounded" src="..." alt="">
</div>

Note

Le utility di griglia richiedono che il contenitore padre usi rtds-grid
Le utility di aspect ratio funzionano con qualsiasi contenuto interno (img, iframe, div)
Combinare rtds-aspect-* con rtds-overflow-hidden per mascherare il contenuto eccedente