From 7bf868a709d5e278048f7fe5fd62d2fa9365d5bc Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 2 Oct 2016 18:19:47 -0700 Subject: v4: Social meta tags (#20825) * descriptions for getting started pages * descriptions for layout * add content page descriptions * more descriptions, updates to some existing ones * correct site url * add social stuff to config for twitter cards * add twitter meta tags; use large image for homepage and regular card for all others * add the assets * more site config * more social shiz to partial, remove existing meta for the partial, remove page title from homepage for simpler if statements --- docs/layout/overview.md | 1 + 1 file changed, 1 insertion(+) (limited to 'docs/layout/overview.md') diff --git a/docs/layout/overview.md b/docs/layout/overview.md index 81cdecf60..3e6c7e7e0 100644 --- a/docs/layout/overview.md +++ b/docs/layout/overview.md @@ -1,6 +1,7 @@ --- layout: docs title: Overview +description: Components and options for laying out your Bootstrap project, including wrapping containers, a powerful grid system, a flexible media object, and responsive utility classes. group: layout redirect_from: "/layout/" --- -- cgit v1.2.3 From 3cc023990369168aa451bf49a69b7fb4a2dcaa67 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 27 Oct 2016 09:26:23 -0700 Subject: Document our z-index values Fixes #18532 --- docs/layout/overview.md | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) (limited to 'docs/layout/overview.md') diff --git a/docs/layout/overview.md b/docs/layout/overview.md index 3e6c7e7e0..5b5ceb16c 100644 --- a/docs/layout/overview.md +++ b/docs/layout/overview.md @@ -155,3 +155,23 @@ The Sass mixin for the above example look like that shown beneath: {% highlight scss %} @include media-breakpoint-between(md, lg) { ... } {% endhighlight %} + +## Z-index + +Several Bootstrap components utilize `z-index`, the CSS property that helps control layout by providing a third axis to arrange content. We utilize a default z-index scale in Bootstrap that's been designed to properly layer navigation, tooltips and popovers, modals, and more. + +We don't encourage customization of these values; should you change one, you likely need to change them all. + +```scss +$zindex-dropdown-backdrop: 990 !default; +$zindex-navbar: 1000 !default; +$zindex-dropdown: 1000 !default; +$zindex-popover: 1060 !default; +$zindex-tooltip: 1070 !default; +$zindex-navbar-fixed: 1030 !default; +$zindex-navbar-sticky: 1030 !default; +$zindex-modal-bg: 1040 !default; +$zindex-modal: 1050 !default; +``` + +Background elements—like the backdrops that allow click-dismissing—tend to reside on a lower `z-index`s, while navigation and popovers utilize higher `z-index`s to ensure they overlay surrounding content. -- cgit v1.2.3 From 115a37db1a21dd249daf852cbd71cbd5ad1b7c3f Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 27 Oct 2016 09:31:38 -0700 Subject: Change variable for modal backdrop zindex, rearrange to be ordered from lowest to highest --- docs/layout/overview.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'docs/layout/overview.md') diff --git a/docs/layout/overview.md b/docs/layout/overview.md index 5b5ceb16c..c22203fde 100644 --- a/docs/layout/overview.md +++ b/docs/layout/overview.md @@ -166,12 +166,12 @@ We don't encourage customization of these values; should you change one, you lik $zindex-dropdown-backdrop: 990 !default; $zindex-navbar: 1000 !default; $zindex-dropdown: 1000 !default; -$zindex-popover: 1060 !default; -$zindex-tooltip: 1070 !default; $zindex-navbar-fixed: 1030 !default; $zindex-navbar-sticky: 1030 !default; -$zindex-modal-bg: 1040 !default; +$zindex-modal-backdrop: 1040 !default; $zindex-modal: 1050 !default; +$zindex-popover: 1060 !default; +$zindex-tooltip: 1070 !default; ``` Background elements—like the backdrops that allow click-dismissing—tend to reside on a lower `z-index`s, while navigation and popovers utilize higher `z-index`s to ensure they overlay surrounding content. -- cgit v1.2.3 From b4dbc69f0edba28ea1a9be4aacb3e9f68c3604a9 Mon Sep 17 00:00:00 2001 From: Bardi Harborow Date: Tue, 8 Nov 2016 23:36:04 +1100 Subject: Fix broken and redirected links. --- docs/layout/overview.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/layout/overview.md') diff --git a/docs/layout/overview.md b/docs/layout/overview.md index c22203fde..e4d6bc49e 100644 --- a/docs/layout/overview.md +++ b/docs/layout/overview.md @@ -47,7 +47,7 @@ Use `.container-fluid` for a full width container, spanning the entire width of ## Responsive breakpoints -Since Bootstrap is developed to be mobile first, we use a handful of [media queries](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries) to create sensible breakpoints for our layouts and interfaces. These breakpoints are mostly based on minimum viewport widths and allow us to scale up elements as the viewport changes. +Since Bootstrap is developed to be mobile first, we use a handful of [media queries](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries) to create sensible breakpoints for our layouts and interfaces. These breakpoints are mostly based on minimum viewport widths and allow us to scale up elements as the viewport changes. Bootstrap primarily uses the following media query ranges—or breakpoints—in our source Sass files for our layout, grid system, and components. -- cgit v1.2.3 From 83c8bfa30d4d906ff7f2e37314e99e1098eb9bce Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 25 Nov 2016 14:01:06 -0800 Subject: Fixes #21195: Add more table of contents to pages with longer contents --- docs/layout/overview.md | 5 +++++ 1 file changed, 5 insertions(+) (limited to 'docs/layout/overview.md') diff --git a/docs/layout/overview.md b/docs/layout/overview.md index e4d6bc49e..758854b8a 100644 --- a/docs/layout/overview.md +++ b/docs/layout/overview.md @@ -8,6 +8,11 @@ redirect_from: "/layout/" Bootstrap includes several components and options for laying out your project, including wrapping containers, a powerful grid system, a flexible media object, and responsive utility classes. +## Contents + +* Will be replaced with the ToC, excluding the "Contents" header +{:toc} + ## Containers Containers are the most basic layout element in Bootstrap and are **required when using our grid system**. Choose from a responsive, fixed-width container (meaning its `max-width` changes at each breakpoint) or fluid-width (meaning it's `100%` wide all the time). -- cgit v1.2.3 From 050ba7390c9642ac72b0477340f274e40e14ced6 Mon Sep 17 00:00:00 2001 From: Fumito Mizuno Date: Sat, 26 Nov 2016 15:47:40 +0900 Subject: grid-breakpoint fix grid-breakpoint for sm is 576px https://github.com/twbs/bootstrap/blob/v4-dev/scss/_variables.scss#L186 current document shows 544px, but it should be 576px --- docs/layout/overview.md | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) (limited to 'docs/layout/overview.md') diff --git a/docs/layout/overview.md b/docs/layout/overview.md index 758854b8a..8ed7671a9 100644 --- a/docs/layout/overview.md +++ b/docs/layout/overview.md @@ -57,11 +57,11 @@ Since Bootstrap is developed to be mobile first, we use a handful of [media quer Bootstrap primarily uses the following media query ranges—or breakpoints—in our source Sass files for our layout, grid system, and components. {% highlight scss %} -// Extra small devices (portrait phones, less than 544px) +// Extra small devices (portrait phones, less than 576px) // No media query since this is the default in Bootstrap -// Small devices (landscape phones, 544px and up) -@media (min-width: 544px) { ... } +// Small devices (landscape phones, 576px and up) +@media (min-width: 576px) { ... } // Medium devices (tablets, 768px and up) @media (min-width: 768px) { ... } @@ -93,8 +93,8 @@ Since we write our source CSS in Sass, all our media queries are available via S We occasionally use media queries that go in the other direction (the given screen size *or smaller*): {% highlight scss %} -// Extra small devices (portrait phones, less than 544px) -@media (max-width: 543px) { ... } +// Extra small devices (portrait phones, less than 576px) +@media (max-width: 575px) { ... } // Small devices (landscape phones, less than 768px) @media (max-width: 767px) { ... } @@ -121,11 +121,11 @@ Once again, these media queries are also available via Sass mixins: We also have media between the breakpoint's minimum and maximum widths for only the given screen size: {% highlight scss %} -// Extra small devices (portrait phones, less than 544px) -@media (max-width: 543px) { ... } +// Extra small devices (portrait phones, less than 576px) +@media (max-width: 575px) { ... } -// Small devices (landscape phones, 544px and up) -@media (min-width: 544px) and (max-width: 767px) { ... } +// Small devices (landscape phones, 576px and up) +@media (min-width: 576px) and (max-width: 767px) { ... } // Medium devices (tablets, 768px and up) @media (min-width: 768px) and (max-width: 991px) { ... } -- cgit v1.2.3 From d04eb86715ea5842e9032e5c3bc3b70622b15fcd Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 10 Dec 2016 17:03:32 -0800 Subject: clarify that --- docs/layout/overview.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/layout/overview.md') diff --git a/docs/layout/overview.md b/docs/layout/overview.md index 8ed7671a9..4dcb294dc 100644 --- a/docs/layout/overview.md +++ b/docs/layout/overview.md @@ -15,7 +15,7 @@ Bootstrap includes several components and options for laying out your project, i ## Containers -Containers are the most basic layout element in Bootstrap and are **required when using our grid system**. Choose from a responsive, fixed-width container (meaning its `max-width` changes at each breakpoint) or fluid-width (meaning it's `100%` wide all the time). +Containers are the most basic layout element in Bootstrap and are **required when using our default grid system**. Choose from a responsive, fixed-width container (meaning its `max-width` changes at each breakpoint) or fluid-width (meaning it's `100%` wide all the time). While containers *can* be nested, most layouts do not require a nested container. -- cgit v1.2.3 From eb2e1102be0f4641ee3e5c4e7853360d5a04e3d8 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 21 Dec 2016 20:26:17 -0800 Subject: Flexbox all the time (Drop IE9 support and remove $enable-flex option) (#21389) * remove the $enable-flex variable option * remove bootstrap-flex.css dist file and it's grunt task * remove the separate flex css file for docs; it's all the same now * remove flexbox docs (porting some to the main grid docs in next commit) * clean up few grid docs bits to simplify copy, start to mention flexbox * port relevant flexbox-grid.md content to grid.md - clean up mixins - update how it works section - bring over sizing and alignment sections * remove the $enable-flex from the options.md page * update lead paragraph to mention flexbox * update migration to mention loss of ie9 support * remove mention of flexbox dist file * clarify IE support * making a note * remove flexbox variant mentions from component docs - updates docs for media object, navs, list group, and cards to consolidate docs - no more need to callout flexbox variants since it's now the default * remove $enable-flex if/else from sass files * remove flex dist files * update scss lint property order to account for flex properties * linting * change to numberless classes for autosizing, wrap in highlighting div * bump gruntfile and postcss to ie10 * redo intro sections * rearrange * phew, redo hella grid docs - rearrange all the things - consolidate some bits * remove reference to flexbox mode * more border action for demo * Make some changes to the .card's in .card-deck's to ensure footers align to the bottom --- docs/layout/overview.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/layout/overview.md') diff --git a/docs/layout/overview.md b/docs/layout/overview.md index 4dcb294dc..ee21b70f2 100644 --- a/docs/layout/overview.md +++ b/docs/layout/overview.md @@ -6,7 +6,7 @@ group: layout redirect_from: "/layout/" --- -Bootstrap includes several components and options for laying out your project, including wrapping containers, a powerful grid system, a flexible media object, and responsive utility classes. +Bootstrap includes several components and options for laying out your project, including wrapping containers, a powerful flexbox grid system, a flexible media object, and responsive utility classes. ## Contents -- cgit v1.2.3