Skip to content

Commit

Permalink
Proposal
Browse files Browse the repository at this point in the history
  • Loading branch information
louismaximepiton committed Oct 9, 2024
1 parent 0aeceda commit bcb4ce7
Showing 1 changed file with 13 additions and 18 deletions.
31 changes: 13 additions & 18 deletions site/content/docs/5.3/layout/columns.md
Original file line number Diff line number Diff line change
Expand Up @@ -239,29 +239,24 @@ There are also responsive `.order-first` and `.order-last` classes that change t
</div>
{{< /example >}}

If you need more `.order-*` classes, you can add new ones by modifying our `$utilities` Sass map. [Read our Sass maps and loops docs]({{< docsref "/customize/sass#maps-and-loops" >}}) for details.
If you need more `.order-*` classes, you can add new ones by modifying our `$utilities` Sass map. [Read our Sass maps and loops docs]({{< docsref "/customize/sass#maps-and-loops" >}}) or [our modify utilities docs]({{< docsref "/utilities/api#modify-utilities" >}}) for details.

```scss
$utilities: map-merge(
$utilities,
(
"order":
(
responsive: true,
property: order,
// Keep the existing `.order-*` utilities
values: (
first: -1,
0: 0,
1: 1
2: 2,
3: 3,
4: 4,
5: 5,
6: 6, // Add a new `.order-{breakpoint}-6` utility
last: 7 // Change the `.order-{breakpoint}-last` utility to use the next number
)
)
"order": map-merge(
map-get($utilities, "order"),
(
values: map-merge(
map-get(map-get($utilities, "order"), "values"),
(
6: 6, // Add a new `.order-{breakpoint}-6` utility
last: 7 // Change the `.order-{breakpoint}-last` utility to use the next number
)
),
),
),
)
);
```
Expand Down

0 comments on commit bcb4ce7

Please sign in to comment.