From 39c4f7589bfd11f1b27577d795faa2ffc7485a2f Mon Sep 17 00:00:00 2001 From: Bartek Date: Tue, 7 Jul 2026 18:00:52 +0200 Subject: [PATCH] Enhance background patterns documentation with new transparent utility and updated examples. Consolidate pattern descriptions and improve layout clarity. --- .../ui/utilities/background-patterns.md | 52 ++++++++++--------- 1 file changed, 28 insertions(+), 24 deletions(-) diff --git a/docs/content/ui/utilities/background-patterns.md b/docs/content/ui/utilities/background-patterns.md index e71ecae81..3356977c4 100644 --- a/docs/content/ui/utilities/background-patterns.md +++ b/docs/content/ui/utilities/background-patterns.md @@ -2,16 +2,15 @@ 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,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,cross-dots,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
@@ -25,11 +24,12 @@ 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 -%} +
{% for pattern in patterns %}
@@ -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 -%} +
{% for color in site.colors %}
@@ -68,6 +68,21 @@ See the [full list of available colors](/ui/base/colors) for all color names. {% 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 %} +
+ +
+{% endcapture %} +{% include "docs/example.html" html=html code=code bg="pattern-rectangles" column %} + ## Pattern sizes Use size utilities to control pattern density: @@ -75,10 +90,12 @@ 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 -%} +
@@ -108,13 +125,14 @@ Look at the following examples to see how the pattern sizes work: ## Examples -Look at the following examples to see how the pattern sizes work +Look at the following examples to see how background patterns can be used in real layouts. ### 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 -%} +
Here is example of a card with a background pattern. @@ -130,20 +148,6 @@ 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 %} -
- -
-{% endcapture %} -{% include "docs/example.html" html=html code=code bg="pattern-rectangles" column %} - ## Accessibility Background patterns are decorative and should never reduce content readability: @@ -156,4 +160,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. \ No newline at end of file +- Use strong pattern colors on small surfaces (headers, badges, callouts), and subtler combinations on large sections.