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-and-positioning.md | 52 -------------------------------- docs/utilities/sizing.md | 52 ++++++++++++++++++++++++++++++++ 2 files changed, 52 insertions(+), 52 deletions(-) delete mode 100644 docs/utilities/sizing-and-positioning.md create mode 100644 docs/utilities/sizing.md (limited to 'docs/utilities') diff --git a/docs/utilities/sizing-and-positioning.md b/docs/utilities/sizing-and-positioning.md deleted file mode 100644 index a6de778ca..000000000 --- a/docs/utilities/sizing-and-positioning.md +++ /dev/null @@ -1,52 +0,0 @@ ---- -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 %} 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/position.md | 31 +++++++++++++++++++++++++++++++ docs/utilities/sizing.md | 21 +++------------------ 2 files changed, 34 insertions(+), 18 deletions(-) create mode 100644 docs/utilities/position.md (limited to 'docs/utilities') diff --git a/docs/utilities/position.md b/docs/utilities/position.md new file mode 100644 index 000000000..6b8268c48 --- /dev/null +++ b/docs/utilities/position.md @@ -0,0 +1,31 @@ +--- +layout: docs +title: Position +group: utilities +--- + +Position utilities are helpful for quickly placing a component outside the normal document flow. Choose from a handful of fixed or sticky position classes as needed. + +### Fixed top + +Position an element at the top of the viewport, from edge to edge. Be sure you understand the ramifications of fixed position in your project; you may need to add aditional CSS. + +{% highlight html %} +
...
+{% endhighlight %} + +### Fixed bottom + +Position an element at the bottom of the viewport, from edge to edge. Be sure you understand the ramifications of fixed position in your project; you may need to add aditional CSS. + +{% highlight html %} +
...
+{% endhighlight %} + +### Sticky top + +Position an element at the top of the viewport, from edge to edge, but only after you scroll past it. The `.sticky-top` utility uses CSS's `position: sticky`, which isn't fully supported in all browsers. + +{% highlight html %} +
...
+{% endhighlight %} 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