From 21b28903a461c3458df2993401fd12f4a9b9c7ce Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 2 Jan 2017 11:45:30 -0800 Subject: New position utils, split docs - Renames .pos-f-t to .fixed-top, adds .fixed-bottom and .sticky-top - Updates utilities Sass to be split across more files (one for position, sizing, and spacing) --- docs/utilities/sizing.md | 52 ++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 52 insertions(+) create mode 100644 docs/utilities/sizing.md (limited to 'docs/utilities/sizing.md') diff --git a/docs/utilities/sizing.md b/docs/utilities/sizing.md new file mode 100644 index 000000000..a6de778ca --- /dev/null +++ b/docs/utilities/sizing.md @@ -0,0 +1,52 @@ +--- +layout: docs +title: Sizing and positioning +group: utilities +--- + +## Fixed positioning + +The `.pos-f-t` class can be used to easily position elements at the top of the viewport and make them as wide as the viewport. **Be sure you understand the ramifications of fixed-position elements within your project.** Here's how the class is defined: + +{% highlight scss %} +.pos-f-t { + position: fixed; + top: 0; + right: 0; + left: 0; + z-index: $zindex-navbar-fixed; +} +{% endhighlight %} + + +## Width and height + +Easily make an element as wide or as tall (relative to its parent) with our width and height utilities. Includes support for `25%`, `50%`, `75%`, and `100%`. + +{% 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 From 2239ea6b5346cb9dbc53e0a31f18cd728d62c0a2 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 2 Jan 2017 11:46:06 -0800 Subject: document new utils and change organization to match css --- docs/utilities/sizing.md | 21 +++------------------ 1 file changed, 3 insertions(+), 18 deletions(-) (limited to 'docs/utilities/sizing.md') diff --git a/docs/utilities/sizing.md b/docs/utilities/sizing.md index a6de778ca..eabb4653a 100644 --- a/docs/utilities/sizing.md +++ b/docs/utilities/sizing.md @@ -1,27 +1,12 @@ --- layout: docs -title: Sizing and positioning +title: Sizing group: utilities --- -## Fixed positioning +Easily make an element as wide or as tall (relative to its parent) with our width and height utilities. Includes support for `25%`, `50%`, `75%`, and `100%` by default. -The `.pos-f-t` class can be used to easily position elements at the top of the viewport and make them as wide as the viewport. **Be sure you understand the ramifications of fixed-position elements within your project.** Here's how the class is defined: - -{% highlight scss %} -.pos-f-t { - position: fixed; - top: 0; - right: 0; - left: 0; - z-index: $zindex-navbar-fixed; -} -{% endhighlight %} - - -## Width and height - -Easily make an element as wide or as tall (relative to its parent) with our width and height utilities. Includes support for `25%`, `50%`, `75%`, and `100%`. +Width and height utilities are generated from the `$sizes` Sass map in `_variables.scss`. Modify those values as you need to generate different utilities here. {% example html %}
Width 25%
-- cgit v1.2.3 From 2f21403a933336f7cb01c86bf3c650490bc658a6 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 8 Apr 2017 14:01:38 -0700 Subject: Drop width from sizing utils given .col- classes can do the same thing (follow up to #22376) --- docs/utilities/sizing.md | 13 +++---------- 1 file changed, 3 insertions(+), 10 deletions(-) (limited to 'docs/utilities/sizing.md') diff --git a/docs/utilities/sizing.md b/docs/utilities/sizing.md index eabb4653a..782186c97 100644 --- a/docs/utilities/sizing.md +++ b/docs/utilities/sizing.md @@ -4,16 +4,9 @@ title: Sizing group: utilities --- -Easily make an element as wide or as tall (relative to its parent) with our width and height utilities. Includes support for `25%`, `50%`, `75%`, and `100%` by default. +Easily make an element as tall (relative to its parent) with our height utilities. Includes support for `25%`, `50%`, `75%`, and `100%` by default. Mix and match with our existing grid classes for controlling `width`. -Width and height utilities are generated from the `$sizes` Sass map in `_variables.scss`. Modify those values as you need to generate different utilities here. - -{% example html %} -
Width 25%
-
Width 50%
-
Width 75%
-
Width 100%
-{% endexample %} +Height utilities are generated from the `$sizes` Sass map in `_variables.scss`. Modify those values as you need to generate different utilities here. {% example html %}
@@ -24,7 +17,7 @@ Width and height utilities are generated from the `$sizes` Sass map in `_variabl
{% endexample %} -You can also use `max-width: 100%;` and `max-height: 100%;` utilities as needed. +Use `max-width: 100%;` and `max-height: 100%;` utilities as needed. {% example html %} Max-width 100% -- cgit v1.2.3 From feb35b94a61c4d6016be8d1773a79a6bbe57d856 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 8 Apr 2017 15:14:52 -0700 Subject: Revert "Drop width from sizing utils given .col- classes can do the same thing (follow up to #22376)" This reverts commit 2f21403a933336f7cb01c86bf3c650490bc658a6. --- docs/utilities/sizing.md | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) (limited to 'docs/utilities/sizing.md') diff --git a/docs/utilities/sizing.md b/docs/utilities/sizing.md index 782186c97..eabb4653a 100644 --- a/docs/utilities/sizing.md +++ b/docs/utilities/sizing.md @@ -4,9 +4,16 @@ title: Sizing group: utilities --- -Easily make an element as tall (relative to its parent) with our height utilities. Includes support for `25%`, `50%`, `75%`, and `100%` by default. Mix and match with our existing grid classes for controlling `width`. +Easily make an element as wide or as tall (relative to its parent) with our width and height utilities. Includes support for `25%`, `50%`, `75%`, and `100%` by default. -Height utilities are generated from the `$sizes` Sass map in `_variables.scss`. Modify those values as you need to generate different utilities here. +Width and height utilities are generated from the `$sizes` Sass map in `_variables.scss`. Modify those values as you need to generate different utilities here. + +{% example html %} +
Width 25%
+
Width 50%
+
Width 75%
+
Width 100%
+{% endexample %} {% example html %}
@@ -17,7 +24,7 @@ Height utilities are generated from the `$sizes` Sass map in `_variables.scss`.
{% endexample %} -Use `max-width: 100%;` and `max-height: 100%;` utilities as needed. +You can also use `max-width: 100%;` and `max-height: 100%;` utilities as needed. {% example html %} Max-width 100% -- cgit v1.2.3