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 ++++++++++++++++++++++++++++++++ scss/_utilities.scss | 2 ++ scss/utilities/_position.scss | 23 ++++++++++++++ scss/utilities/_sizing.scss | 10 ++++++ scss/utilities/_spacing.scss | 21 ------------- 6 files changed, 87 insertions(+), 73 deletions(-) delete mode 100644 docs/utilities/sizing-and-positioning.md create mode 100644 docs/utilities/sizing.md create mode 100644 scss/utilities/_position.scss create mode 100644 scss/utilities/_sizing.scss 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 %} diff --git a/scss/_utilities.scss b/scss/_utilities.scss index c63e50600..7d08ff2f8 100644 --- a/scss/_utilities.scss +++ b/scss/_utilities.scss @@ -5,7 +5,9 @@ @import "utilities/display"; @import "utilities/flex"; @import "utilities/float"; +@import "utilities/position"; @import "utilities/screenreaders"; +@import "utilities/sizing"; @import "utilities/spacing"; @import "utilities/text"; @import "utilities/visibility"; diff --git a/scss/utilities/_position.scss b/scss/utilities/_position.scss new file mode 100644 index 000000000..2cf08bfa0 --- /dev/null +++ b/scss/utilities/_position.scss @@ -0,0 +1,23 @@ +// Positioning + +.fixed-top { + position: fixed; + top: 0; + right: 0; + left: 0; + z-index: $zindex-fixed; +} + +.fixed-bottom { + position: fixed; + right: 0; + bottom: 0; + left: 0; + z-index: $zindex-fixed; +} + +.sticky-top { + position: sticky; + top: 0; + z-index: $zindex-sticky; +} diff --git a/scss/utilities/_sizing.scss b/scss/utilities/_sizing.scss new file mode 100644 index 000000000..a7dc3e49b --- /dev/null +++ b/scss/utilities/_sizing.scss @@ -0,0 +1,10 @@ +// Width and height + +@each $prop, $abbrev in (width: w, height: h) { + @each $size, $length in $sizes { + .#{$abbrev}-#{$size} { #{$prop}: $length !important; } + } +} + +.mw-100 { max-width: 100% !important; } +.mh-100 { max-height: 100% !important; } diff --git a/scss/utilities/_spacing.scss b/scss/utilities/_spacing.scss index 208212d52..6056e2b7e 100644 --- a/scss/utilities/_spacing.scss +++ b/scss/utilities/_spacing.scss @@ -1,14 +1,3 @@ -// Width and height - -@each $prop, $abbrev in (width: w, height: h) { - @each $size, $length in $sizes { - .#{$abbrev}-#{$size} { #{$prop}: $length !important; } - } -} - -.mw-100 { max-width: 100% !important; } -.mh-100 { max-height: 100% !important; } - // Margin and Padding @each $breakpoint in map-keys($grid-breakpoints) { @@ -52,13 +41,3 @@ } } } - -// Positioning - -.pos-f-t { - position: fixed; - top: 0; - right: 0; - left: 0; - z-index: $zindex-navbar-fixed; -} -- cgit v1.2.3