Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add more flexbox utilities #391

Merged
merged 7 commits into from
Sep 12, 2020
Merged

Add more flexbox utilities #391

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
713f774
feat: add flex-direction utilities
sebnitu Sep 11, 2020
3d33398
feat: add wrap-reverse utility
sebnitu Sep 11, 2020
96d29d0
refactor: update the flex order of utilities
sebnitu Sep 11, 2020
2ecfa1e
feat: add flex-self utilities
sebnitu Sep 11, 2020
3d9dde7
feat: add flex order utilities
sebnitu Sep 11, 2020
69e6a31
feat: add more shrink and grow utilities using vars
sebnitu Sep 11, 2020
98bc955
docs: add new flex utilities to docs
sebnitu Sep 12, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
275 changes: 218 additions & 57 deletions docs/_packages/utility.md
View file
Open in desktop
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