Skip to content

Commit

Permalink
Add documentation about viewport sizing utilities (#27688)
Browse files Browse the repository at this point in the history
  • Loading branch information
ysds authored and MartijnCuppens committed Nov 19, 2018
1 parent 38ca58b commit 1fe5635
Showing 1 changed file with 14 additions and 1 deletion.
15 changes: 14 additions & 1 deletion site/docs/4.1/utilities/sizing.md
Original file line number Diff line number Diff line change
@@ -1,11 +1,13 @@
---
layout: docs
title: Sizing
description: Easily make an element as wide or as tall (relative to its parent) with our width and height utilities.
description: Easily make an element as wide or as tall with our width and height utilities.
group: utilities
toc: true
---

## Relative to the parent

Width and height utilities are generated from the `$sizes` Sass map in `_variables.scss`. Includes support for `25%`, `50%`, `75%`, `100%`, and `auto` by default. Modify those values as you need to generate different utilities here.

{% capture example %}
Expand Down Expand Up @@ -41,3 +43,14 @@ You can also use `max-width: 100%;` and `max-height: 100%;` utilities as needed.
</div>
{% endcapture %}
{% include example.html content=example %}

## Relative to the viewport

You can also use utilities to set the width and height relative to the viewport.

{% highlight html %}
<div class="min-vw-100">Min-width 100vw</div>
<div class="min-vh-100">Min-height 100vh</div>
<div class="vw-100">Width 100vw</div>
<div class="vh-100">Height 100vh</div>
{% endhighlight %}

0 comments on commit 1fe5635

Please sign in to comment.