From 3e76d6565603fafa2c85ad81d7b6345c4e279c72 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 28 May 2017 22:50:57 -0700 Subject: Rearrange all the docs to allow for a docs/major.minor/ setup --- docs/4.0/utilities/sizing.md | 37 +++++++++++++++++++++++++++++++++++++ 1 file changed, 37 insertions(+) create mode 100644 docs/4.0/utilities/sizing.md (limited to 'docs/4.0/utilities/sizing.md') diff --git a/docs/4.0/utilities/sizing.md b/docs/4.0/utilities/sizing.md new file mode 100644 index 000000000..e2a5ed197 --- /dev/null +++ b/docs/4.0/utilities/sizing.md @@ -0,0 +1,37 @@ +--- +layout: docs +title: Sizing +description: Easily make an element as wide or as tall (relative to its parent) with our width and height utilities. +group: utilities +toc: true +--- + +Width and height utilities are generated from the `$sizes` Sass map in `_variables.scss`. Includes support for `25%`, `50%`, `75%`, and `100%` by default. Modify those values as you need to generate different utilities here. + +{% example html %} +
Width 25%
+
Width 50%
+
Width 75%
+
Width 100%
+{% endexample %} + +{% example html %} +
+
Height 25%
+
Height 50%
+
Height 75%
+
Height 100%
+
+{% endexample %} + +You can also use `max-width: 100%;` and `max-height: 100%;` utilities as needed. + +{% example html %} +Max-width 100% +{% endexample %} + +{% example html %} +
+
Max-height 100%
+
+{% endexample %} -- cgit v1.2.3