# Dimensions Utility

Applies a fluid width that is equal to the chosen ratio, relative to its parent container. Can be applied to components and sub-components.


## Installation

Refer to the main [installation instructions for Stencil](https://github.com/mobify/stencil#installation).

Use the following to import the utility into your project with Sass:

```
@import '../bower_components/stencil/dist/utils/dimension';
```


## Using the Dimension Utility


### Example Markup

```html
<!-- Goes from u-width-1of6 up to u-width-5of6, then lastly u-width-full -->
<div class="u-width-1of6">
</div>
```


## Demo

Visual examples of the [Dimension Utility](https://mobify.github.io/stencil/visual/utils/dimension/index.html)


## Attribution

- https://github.com/suitcss/utils-size

# Dimensions Utility

Applies a fluid width that is equal to the chosen ratio, relative to its parent container. Can be applied to components and sub-components.


## Installation

Refer to the main [installation instructions for Stencil](https://github.com/mobify/stencil#installation).

Use the following to import the utility into your project with Sass:

```
@import '../bower_components/stencil/dist/utils/dimension';
```


## Using the Dimension Utility


### Example Markup

```html
<div class="u-width-1of6">
</div>
```


### Options

`.u-width-1of3` or `.u-width-2of6`

`.u-width-2of3` or `.u-width-4of6`

`.u-width-1of4`

`.u-width-1of2` or `.u-width-2of4` or `.u-width-3of6`

`.u-width-3of4`

`.u-width-1of6`

`.u-width-5of6`

`.u-width-full`


## Demo

Visual examples of the [Dimension Utility](https://mobify.github.io/stencil/visual/utils/dimension/index.html)


## Attribution

- https://github.com/suitcss/utils-size

Add list of dimensions options
Add list of dimensions options
