Skip to content

Commit

Permalink
Add more flexbox utilities (#391)
Browse files Browse the repository at this point in the history 
This PR introduces a few more flexbox utilities along with order, grow and shrink variables to better control the variant output. New utilities include:

- `flex-direction-[key]` - Applies a flex direction property with the provided key as the value.
- `flex-wrap-reverse` - Applies the flex-wrap property with the value of `wrap-reverse`.
- `flex-order-[key]` - Applies the order property with the provided key as the value.
- `flex-basis-[key]` - Applies the flex-basis property with the provided key (`0` || `auto`) as the value.
- `flex-self-[key]` - Applies the align-self property with the provided key as the value.
  • Loading branch information
@sebnitu
sebnitu committed Sep 12, 2020
1 parent 5a129e4 commit e8dcd5b
Show file tree
Hide file tree
Showing 16 changed files with 805 additions and 196 deletions.
275 changes: 218 additions & 57 deletions docs/_packages/utility.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -814,16 +814,26 @@ $display-properties: (

## flex

The flex utility is a great way to adjust individual flex properties on components that use flex layout. These are some available flex property based utilities:
The flex utility is a great way to adjust individual flex properties on components that use flex layout. Flex utilities fall under two categories: 1) those that are appleid to a flexbox container and 2) those that are applied to flexbox children elements directly. These are some available flex property based utilities:

* `flex-align-[key]`
* `flex-justify-[key]`
* `flex-grow-[key]`
* `flex-shrink-[key]`
* `flex-basis-[key]`
* `flex-wrap`
* `flex-nowrap`
* `flex-items-[key]`
**Applied to flex containers**

- `flex` & `flex-inline` - Sets the display flex or flex-inline property.
- `flex-direction-[key]` - Applies a flex direction property with the provided key as the value.
- `flex-nowrap` - Applies the flex-wrap property with the value of `nowrap`.
- `flex-wrap` - Applies the flex-wrap property with the value of `wrap`.
- `flex-wrap-reverse` - Applies the flex-wrap property with the value of `wrap-reverse`.
- `flex-justify-[key]` - Applies the justify-content property with the provided key as the value.
- `flex-align-[key]` - Applies the align-items property with the provided key as the value.
- `flex-items-[key]` - Gives all direct children the flex property to either share the container space equally (`equal`) or keep their content's width (`auto`).

**Applied to flex children elements**

- `flex-order-[key]` - Applies the order property with the provided key as the value.
- `flex-grow-[key]` - Applies the flex-grow property with the provided key as the value.
- `flex-shrink-[key]` - Applies the flex-shrink property with the provided key as the value.
- `flex-basis-[key]` - Applies the flex-basis property with the provided key (`0` || `auto`) as the value.
- `flex-self-[key]` - Applies the align-self property with the provided key as the value.

<div class="scroll-box">
<table class="table table_style_bordered table_zebra table_hover table_responsive_lg">
Expand All @@ -845,90 +855,140 @@ The flex utility is a great way to adjust individual flex properties on componen
<td data-mobile-label="Default"><code class="code color-secondary text-nowrap">"flex"</code></td>
<td data-mobile-label="Desc">String to use for the class name of the flex utility.</td>
</tr>
<tr>
<td data-mobile-label="Var"><code class="code text-nowrap">$flex-order-count</code></td>
<td data-mobile-label="Default"><code class="code color-secondary text-nowrap">12</code></td>
<td data-mobile-label="Desc">Number of flex order utilities to output starting from 1.</td>
</tr>
<tr>
<td data-mobile-label="Var"><code class="code text-nowrap">$flex-grow-count</code></td>
<td data-mobile-label="Default"><code class="code color-secondary text-nowrap">6</code></td>
<td data-mobile-label="Desc">Number of flex-grow utilities to output starting from 0.</td>
</tr>
<tr>
<td data-mobile-label="Var"><code class="code text-nowrap">$flex-shrink-count</code></td>
<td data-mobile-label="Default"><code class="code color-secondary text-nowrap">6</code></td>
<td data-mobile-label="Desc">Number of flex-shrink utilities to output starting from 0.</td>
</tr>
</tbody>
</table>
</div>

### flex-align-[value] <!-- omit in toc -->
### flex-direction-[value] <!-- omit in toc -->

Adjust the `align-items` property of grid columns using the `flex-align-[value]` utility. Available values are:
Applies a flex direction property with the provided key value.

* `flex-align-start`
* `flex-align-center`
* `flex-align-end`
* `flex-align-stretch`
* `flex-align-baseline`
- `flex-direction-row`
- `flex-direction-row-reverse`
- `flex-direction-column`
- `flex-direction-column-reverse`

{% include demo_open.html %}
<div class="grid flex-align-start">
<div class="grid__item">
<div class="box" style="height: 100px;">...</div>
</div>
<div class="grid__item">
<div class="box">
...
</div>
</div>
<div class="level flex-direction-row">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
{% include demo_switch.html %}
```html
<div class="grid flex-align-start">
<div class="grid__item" style="height: 100px;">...</div>
<div class="grid__item">...</div>
<div class="flex-direction-row">...</div>
```
{% include demo_close.html %}

{% include demo_open.html %}
<div class="level flex-direction-row-reverse">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
{% include demo_switch.html %}
```html
<div class="flex-direction-row-reverse">...</div>
```
{% include demo_close.html %}

{% include demo_open.html %}
<div class="grid flex-align-center">
<div class="grid__item">
<div class="box" style="height: 100px;">...</div>
</div>
<div class="grid__item">
<div class="box">
...
</div>
</div>
<div class="flex flex-gap-sm flex-direction-column">
<div class="box">1</div>
<div class="box">2</div>
</div>
{% include demo_switch.html %}
```html
<div class="grid flex-align-center">
<div class="grid__item" style="height: 100px;">...</div>
<div class="grid__item">...</div>
<div class="flex-direction-column">...</div>
```
{% include demo_close.html %}

{% include demo_open.html %}
<div class="flex flex-gap-sm flex-direction-column-reverse">
<div class="box">1</div>
<div class="box">2</div>
</div>
{% include demo_switch.html %}
```html
<div class="flex-direction-column-reverse">...</div>
```
{% include demo_close.html %}

### flex-wrap <!-- omit in toc -->

Applies various flex-wrap property values.

- `flex-nowrap` - Applies the flex-wrap property with the value of `nowrap`.
- `flex-wrap` - Applies the flex-wrap property with the value of `wrap`.
- `flex-wrap-reverse` - Applies the flex-wrap property with the value of `wrap-reverse`.

{% include demo_open.html %}
<div class="grid flex-align-end">
<div class="grid__item">
<div class="box" style="height: 100px;">...</div>
<div class="scroll-box">
<div class="flex flex-gap-sm flex-nowrap">
{% for i in (1..10) %}
<div class="box">{{ i }}</div>
{% endfor %}
</div>
<div class="grid__item">
<div class="box">
...
</div>
</div>
{% include demo_switch.html %}
```html
<div class="flex-nowrap">...</div>
```
{% include demo_close.html %}

{% include demo_open.html %}
<div class="scroll-box">
<div class="flex flex-gap-sm flex-wrap">
{% for i in (1..10) %}
<div class="box">{{ i }}</div>
{% endfor %}
</div>
</div>
{% include demo_switch.html %}
```html
<div class="grid flex-align-end">
<div class="grid__item" style="height: 100px;">...</div>
<div class="grid__item">...</div>
<div class="flex-wrap">...</div>
```
{% include demo_close.html %}

{% include demo_open.html %}
<div class="scroll-box">
<div class="flex flex-gap-sm flex-wrap-reverse">
{% for i in (1..10) %}
<div class="box">{{ i }}</div>
{% endfor %}
</div>
</div>
{% include demo_switch.html %}
```html
<div class="flex-wrap-reverse">...</div>
```
{% include demo_close.html %}

### flex-justify-[value] <!-- omit in toc -->

Change the `justify-content` property of grid columns using the `flex-justify-[value]` utility. Best used along with the `grid_auto` modifier. Avaliable values are:
Applies the justify-content property with the provided key as the value.

* `flex-justify-start`
* `flex-justify-center`
* `flex-justify-end`
* `flex-justify-between`
* `flex-justify-around`
* `flex-justify-evenly`
- `flex-justify-start`
- `flex-justify-center`
- `flex-justify-end`
- `flex-justify-between`
- `flex-justify-around`
- `flex-justify-evenly`

{% include demo_open.html %}
<div class="grid grid_auto flex-justify-start">
Expand Down Expand Up @@ -990,6 +1050,107 @@ Change the `justify-content` property of grid columns using the `flex-justify-[v
```
{% include demo_close.html %}

### flex-align-[value] <!-- omit in toc -->

Applies the align-items property with the provided key as the value.

- `flex-align-start`
- `flex-align-center`
- `flex-align-end`
- `flex-align-stretch`
- `flex-align-baseline`

{% include demo_open.html %}
<div class="grid flex-align-start">
<div class="grid__item">
<div class="box" style="height: 100px;">...</div>
</div>
<div class="grid__item">
<div class="box">
...
</div>
</div>
</div>
{% include demo_switch.html %}
```html
<div class="grid flex-align-start">
<div class="grid__item" style="height: 100px;">...</div>
<div class="grid__item">...</div>
</div>
```
{% include demo_close.html %}

{% include demo_open.html %}
<div class="grid flex-align-center">
<div class="grid__item">
<div class="box" style="height: 100px;">...</div>
</div>
<div class="grid__item">
<div class="box">
...
</div>
</div>
</div>
{% include demo_switch.html %}
```html
<div class="grid flex-align-center">
<div class="grid__item" style="height: 100px;">...</div>
<div class="grid__item">...</div>
</div>
```
{% include demo_close.html %}

{% include demo_open.html %}
<div class="grid flex-align-end">
<div class="grid__item">
<div class="box" style="height: 100px;">...</div>
</div>
<div class="grid__item">
<div class="box">
...
</div>
</div>
</div>
{% include demo_switch.html %}
```html
<div class="grid flex-align-end">
<div class="grid__item" style="height: 100px;">...</div>
<div class="grid__item">...</div>
</div>
```
{% include demo_close.html %}

### flex-items-[key] <!-- omit in toc -->

Gives all direct children the flex property to either share the container space equally (`equal`) or keep their content's width (`auto`).

- `flex-items-equal` - Applies the flex property children elements with the value of `1 1 0` to share the container space equally.
- `flex-items-auto` - Applies the flex property children elements with the value of `0 0 auto` to keep their content's width.

{% include demo_open.html %}
<div class="flex flex-gap-sm flex-items-equal">
<div class="box">...</div>
<div class="box">...</div>
<div class="box">...</div>
</div>
{% include demo_switch.html %}
```html
<div class="flex-items-equal">...</div>
```
{% include demo_close.html %}

{% include demo_open.html %}
<div class="flex flex-gap-sm flex-items-auto">
<div class="box">...</div>
<div class="box">...</div>
<div class="box">...</div>
</div>
{% include demo_switch.html %}
```html
<div class="flex-items-auto">...</div>
```
{% include demo_close.html %}

## flex-gap-[key]

The flex-gap module adds both horizontal and vertical spacing between an element's children. It also adds negative top and left margins to the element it's applied to which may require an anonymous `<div>` if additional margins are needed. Flex-gap keys and their values are generated from the [`$gap-map`](#gap-map) variable map.
Expand Down

0 comments on commit e8dcd5b

Please sign in to comment.