2
0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-17 19:21:23 +03:00

docs(examples): new cheatsheet and RTL examples

This commit is contained in:
Gaël Poupard
2020-06-09 16:44:20 +03:00
committed by XhmikosR
parent 9488978fb5
commit aaff11a0b3
95 changed files with 5206 additions and 298 deletions
+30 -1
View File
@@ -11,7 +11,7 @@ Bootstrap utilities are generated with our utility API and can be used to modify
The `$utilities` map contains all our utilities and is later merged with your custom `$utilities` map, if present. The utility map contains a keyed list of utility groups which accept the following options:
{{< bs-table "table text-left" >}}
{{< bs-table "table text-start" >}}
| Option | Type | Description |
| --- | --- | --- |
| `property` | **Required** | Name of the property, this can be a string or an array of strings (e.g., horizontal paddings or margins). |
@@ -21,6 +21,7 @@ The `$utilities` map contains all our utilities and is later merged with your cu
| `responsive` | Optional | Boolean indicating if responsive classes need to be generated. `false` by default. |
| `rfs` | Optional | Boolean to enable fluid rescaling. Have a look at the [RFS]({{< docsref "/getting-started/rfs" >}}) page to find out how this works. `false` by default. |
| `print` | Optional | Boolean indicating if print classes need to be generated. `false` by default. |
| `rtl` | Optional | Boolean indicating if utility should be kept in RTL. `true` by default. |
{{< /bs-table >}}
## API explained
@@ -298,3 +299,31 @@ $utilities: map-merge(
)
);
```
#### Remove utility in RTL
Some edge cases make [RTL styling difficult](https://rtlstyling.com/posts/rtl-styling#common-things-that-might-not-work-for-rtl), such as line breaks in Arabic. Thus utilities can be dropped from RTL output by setting the `rtl` option to `false`:
```scss
$utilities: (
"word-wrap": (
property: word-wrap word-break,
class: text,
values: (break: break-word),
rtl: false
),
);
```
Output:
```css
/* rtl:begin:remove */
.text-break {
word-wrap: break-word !important;
word-break: break-word !important;
}
/* rtl:end:remove */
```
This doesn't output anything in RTL, thanks to [the RTLCSS `remove` control directive](https://rtlcss.com/learn/usage-guide/control-directives/#remove).