<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"
}
]
}
/**
* 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;
}*/
}
Custom Tailwind utilities - TO BE DONE