Skip to content

Commit

Permalink
update docs & example
Browse files Browse the repository at this point in the history
  • Loading branch information
@zhengchun
zhengchun committed Oct 22, 2023
1 parent a2efd05 commit 798a68f
Show file tree
Hide file tree
Showing 41 changed files with 5,813 additions and 1,904 deletions.
3,489 changes: 2,761 additions & 728 deletions dist/css/fastbootstrap.css
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/css/fastbootstrap.css.map
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/css/fastbootstrap.min.css
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/css/fastbootstrap.min.css.map
View file

Large diffs are not rendered by default.

3,168 changes: 2,417 additions & 751 deletions dist/css/fastbootstrap.rtl.css
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/css/fastbootstrap.rtl.css.map
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/css/fastbootstrap.rtl.min.css
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/css/fastbootstrap.rtl.min.css.map
View file

Large diffs are not rendered by default.

9 changes: 9 additions & 0 deletions site/assets/scss/_docs.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -253,3 +253,12 @@ code {
.bg-blue-subtle {
background-color: var(--ds-background-accent-blue-subtle);
}

.bg-checkered {
background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23F0F0F0' d='M0 0h8v8H0zm8 8h8v8H8z'/%3E%3C/svg%3E");
background-size: 16px 16px;
}

.bd-bg-light {
background-color: var(--ds-background-accent-gray-subtlest);
}
35 changes: 14 additions & 21 deletions site/content/docs/animation/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,12 +19,12 @@ menu:

Add the `animate-spin` utility to add a linear spin animation to elements like loading indicators.

<div class="bd-example d-flex justify-content-center">
{{< example class="bg-neutral-subtler bg-grid-slate-100 text-center" show_source="false" >}}
<button type="button" class="btn btn-secondary fw-semibold pe-none">
<i class="animate-spin fas fa-spinner"></i>
Processing...
</button>
</div>
{{</ example >}}

```html
<button type="button" class="btn btn-secondary ...">
Expand All @@ -37,29 +37,22 @@ Add the `animate-spin` utility to add a linear spin animation to elements like l

Add the `animate-ping` utility to make an element scale and fade like a radar ping or ripple of water — useful for things like notification [badges]({{< docsref "badge" >}}).

<div class="bd-example d-flex justify-content-center">
{{< example class="bg-neutral-subtler bg-grid-slate-100 text-center" >}}
<div class="position-relative d-inline-flex">
<button type="button" class="btn btn-default text-blue-400 pe-none fw-semibold border">Transactions</button>
<div class="position-absolute bd-h-3 bd-w-3 top-0 end-0 mt-n1 me-n1">
<span class="animate-ping position-absolute h-100 w-100 rounded-circle bg-teal-200"></span>
<span class="d-flex rounded-circle bd-h-3 bd-w-3 bg-teal-300"></span>
</div>
<button type="button" class="btn btn-outline-secondary pe-none fw-semibold ">Transactions</button>
<span class="d-flex position-absolute bd-h-3 bd-w-3 top-0 end-0 mt-n1 me-n1">
<span class="animate-ping position-absolute h-100 w-100 rounded-circle bg-secondary bg-opacity-75"></span>
<span class="rounded-circle bd-h-3 bd-w-3 bg-secondary"></span>
</span>
</div>
</div>

```html
<div class="position-absolute bd-h-3 bd-w-3 top-0 end-0 mt-n1 me-n1">
<span class="animate-ping position-absolute h-100 w-100 rounded-circle bg-teal-200"></span>
<span class="rounded-circle bd-h-3 bd-w-3 bg-teal-300"></span>
</div>
```
{{</ example >}}

### Pulse

Add the `animate-pulse` utility to make an element gently fade in and out — useful for things like [skeleton loaders]({{< docsref "placeholders" >}}).

{{< example >}}
<div class="col-md-5 mx-auto">
{{< example class="bg-neutral-subtler bg-grid-slate-100 text-center" >}}
<div class="max-w-sm mx-auto bg-body rounded">
<div class="animate-pulse d-flex align-items-start shadow p-3">
<span class="placeholder rounded-circle bd-h-10 bd-w-10"></span>
<div class="ms-3 flex-grow-1">
Expand All @@ -76,11 +69,11 @@ Add the `animate-pulse` utility to make an element gently fade in and out — us

Add the `animate-bounce` utility to make an element bounce up and down — useful for things like “scroll down” indicators.

<div class="bd-example d-flex justify-content-center">
<div class="animate-bounce bd-w-10 bd-h-10 d-flex justify-content-center align-items-center rounded-circle shadow text-blue-300">
{{< example class="bg-neutral-subtler bg-grid-slate-100 text-center" show_source="false" >}}
<div class="animate-bounce bd-w-10 bd-h-10 d-inline-flex justify-content-center align-items-center rounded-circle shadow text-bg-primary">
<i class="fas fa-arrow-down fa-lg"></i>
</div>
</div>
{{</ example>}}

```html
<div class="animate-bounce ...">
Expand Down
130 changes: 82 additions & 48 deletions site/content/docs/background-color/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ layout: docs
title: Background Color
description: "Utilities for controlling the background color of an element."
toc: true
status: new
group: backgrounds
menu:
docs:
Expand All @@ -12,74 +11,109 @@ menu:
When selecting a background color, make sure the foreground color contrast passes a minimum WCAG accessibility rating of [level AA](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html).


## Color & background

The below background color with contrasting foreground color. See Bootstrap's [Color & background](https://getbootstrap.com/docs/5.2/helpers/color-background/) for more information.

{{< colors.inline >}}
<table class="table">
<thead>
<tr>
<th>Class</th>
<th class="d-none d-md-table-cell">Properties</th>
<th></th>
</tr>
</thead>
<tbody>
{{ range (index $.Site.Data "theme-colors") }}
<tr>
<td class="text-green-400">.text-bg-{{ .name }}</td>
<td class="text-purple-300 d-none d-md-table-cell">background-color: rgb({{ .rgb }})</td>
<td class="col-2 col-md-3 border-0 text-bg-{{ .name }}">.text-bg-{{ .name }}</td>
</tr>
{{ end }}
</tbody>
</table>
{{< / colors.inline >}}

## Quick reference

{{< colors.inline >}}
<table class="table">
{{< callout "secondary">}}
Similar to the contextual text color classes, set the background of an element to any contextual class. Background utilities **do not set** `color`, so in some cases you’ll want to use `.text-bg-*` color utilities.
{{</ callout >}}

{{< bg-colors.inline >}}
<table class="table api-class-table ">
<thead>
<tr>
<th>Class</th>
<th class="d-none d-md-table-cell">Properties</th>
<th></th>
<th class="bd-w-36">Color</th>
</tr>
</thead>
<tbody>
{{ range $name,$colors := (index $.Site.Data "colors") }}
{{ $keys := slice }}
{{ range $key, $_ := $colors }}
{{ $keys = $keys | append $key }}
{{ end }}
{{ range $key := sort $keys }}
{{ with index $colors $key }}
<tr>
<td class="text-green-400">.bg-{{ $name }}-{{ $key }}</td>
<td class="text-purple-300 d-none d-md-table-cell">background-color: rgb({{ .rgb }});</td>
<td class="fw-semibold col-2 col-md-3 border-0" style="background-color: rgb({{ .rgb }})"></td>
</tr>
{{ range (index $.Site.Data.css "bg-color" ) }}
{{ $prefix := .class }}
{{ range .values }}
{{ $key := . }}
{{ $value := . }}
{{ if reflect.IsMap . }}
{{ range $key, $value = . }}
{{ end }}
{{ end }}
<tr>
<td><code>{{ printf "%s-%s" $prefix $key }}</code></td>
<td class="{{ $value }}"><span class="visually-hidden">{{ $value }}</span></td>
</tr>
{{ end }}
{{ end }}
</tbody>
</table>
{{< / colors.inline >}}
{{< / bg-colors.inline >}}

## Basic usage
​

### Setting the background color

Control the background color of an element using the `bg-{color}` utilities.

<div class="bd-example text-center">
<button class="btn bg-teal-200 border border-teal-200 text-white fw-semibold">Save changes</button>
</div>
{{< example class="text-center bg-grid-slate-100 bg-neutral-subtler" show_source="false" >}}
<button class="btn text-bg-warning">Save changes</button>
{{</ example >}}

```html
<button class="btn bg-teal-200 ...">
<button class="btn text-bg-warning ...">
Save changes
</button>
```

### Setting the background gradient

By adding a `.bg-gradient` class, a linear gradient is added as background image to the backgrounds. This gradient starts with a semi-transparent white which fades out to the bottom.

{{< example class="text-center bg-grid-slate-100 bg-neutral-subtler" show_source="false" >}}
<div class="d-flex gap-4 justify-content-center">
<button class="btn text-bg-primary bg-gradient">.bg-gradient</button>
<button class="btn text-bg-primary">no bg-gradient</button>
</div>
{{</ example >}}

```html
<button class="btn text-bg-primary bg-gradient ...">
.bg-gradient
</button>
```

### Changing the opacity

Control the opacity of an element’s background color using the color opacity `.bg-opacity-*` utilities.

{{< example class="bg-grid-slate-100 bg-neutral-subtler" show_source="false" >}}
<div class="d-flex flex-column gap-4">
<div>
<span class="text-body-tertiary fw-semibold fs-sm mb-3">bg-opacity-100</span>
<div class="p-5 bg-secondary rounded"></div>
</div>
<div>
<span class="text-body-tertiary fw-semibold fs-sm mb-3">bg-opacity-100</span>
<div class="p-5 bg-secondary rounded bg-opacity-100"></div>
</div>
<div>
<span class="text-body-tertiary fw-semibold fs-sm mb-3">bg-opacity-75</span>
<div class="p-5 bg-secondary rounded bg-opacity-75"></div>
</div>
<div>
<span class="text-body-tertiary fw-semibold fs-sm mb-3">bg-opacity-50</span>
<div class="p-5 bg-secondary rounded bg-opacity-50"></div>
</div>
<div>
<span class="text-body-tertiary fw-semibold fs-sm mb-3">bg-opacity-25</span>
<div class="p-5 bg-secondary rounded bg-opacity-25"></div>
</div>
<div>
<span class="text-body-tertiary fw-semibold fs-sm mb-3">bg-opacity-10</span>
<div class="p-5 bg-secondary rounded bg-opacity-10"></div>
</div>
</div>
{{</ example >}}

```html
<div class="bg-secondary bg-opacity-100"></div>
<div class="bg-secondary bg-opacity-75"></div>
<div class="bg-secondary bg-opacity-50"></div>
...
```
Loading

0 comments on commit 798a68f

Please sign in to comment.