Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2026-08-29 21:31:28 +04:00
Code Issues Projects Releases Wiki Activity

Revert "Enhance background patterns documentation with new transparent utility and updated examples. Consolidate pattern descriptions and improve layout clarity."

Browse Source 
This reverts commit 39c4f7589b.
This commit is contained in:
Bartek
2026-07-07 18:02:36 +02:00
parent 39c4f7589b
commit 55efbee248
1 changed files with 24 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/content/ui/utilities/background-patterns.md
+24 -28
View File
@@ -2,15 +2,16 @@
title: Background patterns
summary: Use background pattern utilities to add subtle textures to elements. Combine pattern type, color, and size modifiers for different visual effects.
description: Add decorative background patterns with utility classes.
added-in: '1.4.0'
source-css: 'ui/_patterns.scss'
added-in: "1.4.0"
source-css: "ui/_patterns.scss"
---
{% assign patterns = "diagonal,diagonal-2,dots,rectangles,lines,lines-vertical,grid,grid-diagonal,blueprint,cross-dots,circles,diagonal-stripes,diagonal-stripes-2,zigzag,vertical-stripes,horizontal-stripes" | split: "," %}
{% assign patterns = "diagonal,diagonal-2,dots,rectangles,lines,lines-vertical,grid,grid-diagonal,blueprint,circles,diagonal-stripes,diagonal-stripes-2,zigzag,vertical-stripes,horizontal-stripes" | split: "," %}
## Overview
Background pattern utilities let you apply decorative, repeatable textures to elements like cards, sections, and placeholders. Start with a pattern type class, then optionally combine it with color and size modifiers.
Background pattern utilities let you apply decorative, repeatable textures to elements like cards, sections, and placeholders.
Start with a pattern type class, then optionally combine it with color and size modifiers.
```html
<div class="bg-pattern-diagonal"></div>
@@ -24,12 +25,11 @@ Use one of the available pattern classes to define the shape and direction of th
{% for pattern in patterns %}
- `.bg-pattern-{{ pattern }}`
{% endfor %}
{%- endfor %}
Here are the available pattern types:
{% capture html -%}
<div class="row row-cols-1 row-cols-sm-2 row-cols-lg-3 row-cols-xl-4 g-3">
{% for pattern in patterns %}
<div class="col">
@@ -48,10 +48,10 @@ Here are the available pattern types:
## Pattern colors
Combine any pattern with color modifiers using `.bg-pattern-{color}`. See the [full list of available colors](/ui/base/colors) for all color names.
Combine any pattern with color modifiers using `.bg-pattern-{color}`.
See the [full list of available colors](/ui/base/colors) for all color names.
{% capture html -%}
<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">
@@ -68,21 +68,6 @@ Combine any pattern with color modifiers using `.bg-pattern-{color}`. See the [f
{% endcapture %}
{% include "docs/example.html" html=html code=code bg="surface-primary" %}
## Transparent pattern utility
Use `.bg-pattern-transparent` when you need a checkerboard-style transparent background.
This utility comes from the generic background utilities and can be combined with spacing and border classes.
{% capture html -%}
{% include "ui/illustration.html" image="boy-with-key.svg" class="d-block mx-auto mw-100" height=200 %}
{%- endcapture %}
{% capture code %}
<div class="bg-pattern-transparent p-4">
<!-- Illustration code here -->
</div>
{% endcapture %}
{% include "docs/example.html" html=html code=code bg="pattern-rectangles" column %}
## Pattern sizes
Use size utilities to control pattern density:
@@ -90,12 +75,10 @@ Use size utilities to control pattern density:
- `.bg-pattern-sm`
- `.bg-pattern-md`
- `.bg-pattern-lg`
- `.bg-pattern-xl`
Look at the following examples to see how the pattern sizes work:
{% capture html -%}
<div class="row row-cols-1 row-cols-sm-2 row-cols-lg-4 g-3">
<div class="col">
<div class="bg-pattern-circles bg-pattern-sm rounded mb-2" style="height: 6rem;"></div>
@@ -125,14 +108,13 @@ Look at the following examples to see how the pattern sizes work:
## Examples
Look at the following examples to see how background patterns can be used in real layouts.
Look at the following examples to see how the pattern sizes work
### Card with background pattern
Card with a background pattern in the body can be used to add a decorative touch to the card. This is useful when you want to add a subtle pattern to the card without affecting the readability of the content.
{% capture html -%}
<div class="card">
<div class="card-body">
Here is example of a card with a background pattern.
@@ -148,6 +130,20 @@ Card with a background pattern in the body can be used to add a decorative touch
{% endcapture %}
{% include "docs/example.html" html=html code=code bg="pattern-diagonal" column %}
### Pattern of transparent background
If you want to use a pattern as a background for a transparent element, you can use the `bg-pattern-transparent` class. It can simulate a transparent background.
{% capture html -%}
{% include "ui/illustration.html" image="boy-with-key.svg" class="d-block mx-auto mw-100" height=200 %}
{%- endcapture %}
{% capture code %}
<div class="bg-pattern-rectangles p-4">
<!-- Illustration code here -->
</div>
{% endcapture %}
{% include "docs/example.html" html=html code=code bg="pattern-rectangles" column %}
## Accessibility
Background patterns are decorative and should never reduce content readability:
@@ -160,4 +156,4 @@ Background patterns are decorative and should never reduce content readability:
- Start with `.bg-pattern-sm` for dense UIs and increase size only when needed.
- Avoid stacking multiple decorative backgrounds in the same section.
- Use strong pattern colors on small surfaces (headers, badges, callouts), and subtler combinations on large sections.
- Use strong pattern colors on small surfaces (headers, badges, callouts), and subtler combinations on large sections.