Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2026-07-14 09:34:19 +04:00
Code Issues Projects Releases Wiki Activity

Add background pattern utilities and patterns demo page (#2615)

Browse Source
This commit is contained in:
Paweł Kuna
2026-02-15 14:47:40 +01:00
committed by GitHub
parent c430cfe547
commit 100a37b38e
9 changed files with 489 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
preview/pages/patterns.html
+58
View File
@@ -0,0 +1,58 @@
---
layout: default
title: Patterns
page-header: Patterns
page-menu: base.patterns
permalink: patterns.html
---
{% assign patterns = "bg-pattern-diagonal,bg-pattern-diagonal-2,bg-pattern-dots,bg-pattern-rectangles,bg-pattern-lines,bg-pattern-lines-vertical,bg-pattern-grid,bg-pattern-grid-diagonal,bg-pattern-blueprint,bg-pattern-circles,bg-pattern-diagonal-stripes,bg-pattern-diagonal-stripes-2,bg-pattern-zigzag,bg-pattern-vertical-stripes,bg-pattern-horizontal-stripes" | split: "," %}
{% assign pattern-sizes = "sm,md,lg,xl" | split: "," %}
<div class="row row-cards">
<div class="col-12">
<div class="card">
<div class="card-body">
<h3 class="card-title">Pattern types</h3>
<div class="row row-cols-1 row-cols-sm-2 row-cols-lg-3 row-cols-xl-6 g-3">
{% for pattern in patterns %}
<div class="col">
<div class="{{ pattern }} rounded mb-3" style="height: 8rem;"></div>
<code>.{{ pattern }}</code>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
<div class="col-12">
<div class="card">
<div class="card-body">
<h3 class="card-title">Pattern colors</h3>
<div class="row row-cols-1 row-cols-sm-2 row-cols-lg-3 row-cols-xl-6 g-3">
{% for color in site.colors %}
<div class="col">
<div class="bg-pattern-rectangles bg-pattern-{{ color[0] }} rounded mb-3" style="height: 8rem;"></div>
<code>.bg-pattern-{{ color[0] }}</code>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
<div class="col-12">
<div class="card">
<div class="card-body">
<h3 class="card-title">Pattern sizes</h3>
<div class="row row-cols-1 row-cols-sm-2 row-cols-lg-3 row-cols-xl-6 g-3">
{% for size in pattern-sizes %}
<div class="col">
<div class="bg-pattern-diagonal bg-pattern-{{ size }} rounded mb-3" style="height: 8rem;"></div>
<code>.bg-pattern-{{ size }}</code>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
</div>