diff options
37 files changed, 350 insertions, 32 deletions
diff --git a/scss/_alert.scss b/scss/_alert.scss index da2a98af9..f8b140413 100644 --- a/scss/_alert.scss +++ b/scss/_alert.scss @@ -1,3 +1,12 @@ +// Dependencies +// +// _variables.scss +// _reboot.scss +// mixins/_alert.scss +// mixins/_border-radius.scss +// mixins/_gradient.scss + + // // Base styles // diff --git a/scss/_badge.scss b/scss/_badge.scss index 42c5d08d7..572c9c664 100644 --- a/scss/_badge.scss +++ b/scss/_badge.scss @@ -1,3 +1,14 @@ +// Dependencies +// +// _variables.scss +// _reboot.scss +// mixins/_badge.scss +// mixins/_border-radius.scss +// mixins/_hover.scss +// mixins/_transition.scss +// vendor/_rfs.scss + + // Base class // // Requires one of the contextual, color modifier classes for `color` and diff --git a/scss/_breadcrumb.scss b/scss/_breadcrumb.scss index a0cf7e29b..25bcb6b6b 100644 --- a/scss/_breadcrumb.scss +++ b/scss/_breadcrumb.scss @@ -1,3 +1,12 @@ +// Dependencies +// +// _variables.scss +// _functions.scss +// _reboot.scss +// mixins/_border-radius.scss +// vendor/_rfs.scss + + .breadcrumb { display: flex; flex-wrap: wrap; diff --git a/scss/_button-group.scss b/scss/_button-group.scss index da02d7931..41c2902e0 100644 --- a/scss/_button-group.scss +++ b/scss/_button-group.scss @@ -1,3 +1,15 @@ +// Dependencies +// +// _variables.scss +// _functions.scss +// _buttons.scss +// _reboot.scss +// mixins/_border-radius.scss +// mixins/_box-shadow.scss +// mixins/_hover.scss +// vendor/_rfs.scss + + // stylelint-disable selector-no-qualifying-type // Make the div behave like a button diff --git a/scss/_buttons.scss b/scss/_buttons.scss index 6ee24ba1f..7ff2ab86d 100644 --- a/scss/_buttons.scss +++ b/scss/_buttons.scss @@ -1,3 +1,18 @@ +// Dependencies +// +// _variables.scss +// _functions.scss +// _buttons.scss +// _reboot.scss +// mixins/_border-radius.scss +// mixins/_box-shadow.scss +// mixins/_buttons.scss +// mixins/_gradients.scss +// mixins/_hover.scss +// mixins/_transition.scss +// vendor/_rfs.scss + + // stylelint-disable selector-no-qualifying-type // diff --git a/scss/_card.scss b/scss/_card.scss index 7c35f7ed8..cdf905fec 100644 --- a/scss/_card.scss +++ b/scss/_card.scss @@ -1,3 +1,13 @@ +// Dependencies +// +// _variables.scss +// _functions.scss +// _reboot.scss +// mixins/_border-radius.scss +// mixins/_breakpoints.scss +// mixins/_hover.scss + + // // Base styles // diff --git a/scss/_carousel.scss b/scss/_carousel.scss index fb5e9f856..4a6008c34 100644 --- a/scss/_carousel.scss +++ b/scss/_carousel.scss @@ -1,3 +1,13 @@ +// Dependencies +// +// _variables.scss +// _functions.scss +// _reboot.scss +// mixins/_clearfix.scss +// mixins/_hover.scss +// mixins/_transition.scss + + // Notes on the classes: // // 1. .carousel.pointer-event should ideally be pan-y (to allow for users to scroll vertically) diff --git a/scss/_close.scss b/scss/_close.scss index 82e9593ef..27e36f536 100644 --- a/scss/_close.scss +++ b/scss/_close.scss @@ -1,3 +1,12 @@ +// Dependencies +// +// _variables.scss +// _functions.scss +// _reboot.scss +// mixins/_hover.scss +// vendor/_rfs.scss + + .close { float: right; @include font-size($close-font-size); diff --git a/scss/_code.scss b/scss/_code.scss index 4bc117a96..49b2a778a 100644 --- a/scss/_code.scss +++ b/scss/_code.scss @@ -1,3 +1,12 @@ +// Dependencies +// +// _variables.scss +// _functions.scss +// _reboot.scss +// mixins/_box-shadow.scss +// vendor/_rfs.scss + + // Inline code code { @include font-size($code-font-size); diff --git a/scss/_custom-forms.scss b/scss/_custom-forms.scss index fa6603d97..b08749124 100644 --- a/scss/_custom-forms.scss +++ b/scss/_custom-forms.scss @@ -1,3 +1,16 @@ +// Dependencies +// +// _variables.scss +// _functions.scss +// _reboot.scss +// mixins/_border-radius.scss +// mixins/_box-shadow.scss +// mixins/_gradients.scss +// mixins/_hover.scss +// mixins/_transition.scss +// vendor/_rfs.scss + + // Embedded icons from Open Iconic. // Released under MIT and copyright 2014 Waybury. // https://useiconic.com/open diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss index 2ab7536e1..cae09792e 100644 --- a/scss/_dropdown.scss +++ b/scss/_dropdown.scss @@ -1,3 +1,17 @@ +// Dependencies +// +// _variables.scss +// _functions.scss +// _reboot.scss +// mixins/_border-radius.scss +// mixins/_box-shadow.scss +// mixins/_breakpoints.scss +// mixins/_caret.scss +// mixins/_gradient.scss +// mixins/_nav-divider.scss +// vendor/_rfs.scss + + // The dropdown wrapper (`<div>`) .dropup, .dropright, diff --git a/scss/_forms.scss b/scss/_forms.scss index 66a4efe1d..4aafdb2c3 100644 --- a/scss/_forms.scss +++ b/scss/_forms.scss @@ -1,3 +1,16 @@ +// Dependencies +// +// _variables.scss +// _functions.scss +// _reboot.scss +// mixins/_border-radius.scss +// mixins/_box-shadow.scss +// mixins/_breakpoints.scss +// mixins/_forms.scss +// mixins/_transition.scss +// vendor/_rfs.scss + + // stylelint-disable selector-no-qualifying-type // diff --git a/scss/_functions.scss b/scss/_functions.scss index 9c0660315..96a257713 100644 --- a/scss/_functions.scss +++ b/scss/_functions.scss @@ -2,6 +2,10 @@ // // Utility mixins and functions for evaluating source code across our variables, maps, and mixins. +// Dependencies +// +// _variables.scss + // Ascending // Used to evaluate Sass maps like our grid breakpoints. @mixin _assert-ascending($map, $map-name) { diff --git a/scss/_grid.scss b/scss/_grid.scss index 0bfe5303b..56da8d4c2 100644 --- a/scss/_grid.scss +++ b/scss/_grid.scss @@ -1,3 +1,13 @@ +// Dependencies +// +// _variables.scss +// _functions.scss +// _reboot.scss +// mixins/_breakpoints.scss +// mixins/_grid.scss +// mixins/_grid-framework.scss + + // Container widths // // Set the container width, and override it for fixed navbars in media queries. diff --git a/scss/_images.scss b/scss/_images.scss index b11b45a37..03c1439dc 100644 --- a/scss/_images.scss +++ b/scss/_images.scss @@ -1,3 +1,14 @@ +// Dependencies +// +// _variables.scss +// _functions.scss +// _reboot.scss +// mixins/_border-radius.scss +// mixins/_box-shadow.scss +// mixins/_image.scss +// vendor/_rfs.scss + + // Responsive images (ensure images don't scale beyond their parents) // // This is purposefully opt-in via an explicit class rather than being the default for all `<img>`s. diff --git a/scss/_input-group.scss b/scss/_input-group.scss index cad8ea367..659de8c25 100644 --- a/scss/_input-group.scss +++ b/scss/_input-group.scss @@ -1,3 +1,16 @@ +// Dependencies +// +// _variables.scss +// _functions.scss +// _reboot.scss +// _buttons.scss +// _forms.scss +// _custom-forms.scss +// mixins/_border-radius.scss +// mixins/_box-shadow.scss +// vendor/_rfs.scss + + // stylelint-disable selector-no-qualifying-type // diff --git a/scss/_jumbotron.scss b/scss/_jumbotron.scss index bcd7dcad9..586b9b5e9 100644 --- a/scss/_jumbotron.scss +++ b/scss/_jumbotron.scss @@ -1,3 +1,12 @@ +// Dependencies +// +// _variables.scss +// _functions.scss +// _reboot.scss +// mixins/_breakpoints.scss +// mixins/_border-radius.scss + + .jumbotron { padding: $jumbotron-padding ($jumbotron-padding / 2); margin-bottom: $jumbotron-padding; diff --git a/scss/_list-group.scss b/scss/_list-group.scss index ec25ba8a1..288d024a9 100644 --- a/scss/_list-group.scss +++ b/scss/_list-group.scss @@ -1,3 +1,14 @@ +// Dependencies +// +// _variables.scss +// _functions.scss +// _reboot.scss +// mixins/_breakpoints.scss +// mixins/_border-radius.scss +// mixins/_hover.scss +// mixins/_list-group.scss + + // Base class // // Easily usable on <ul>, <ol>, or <div>. diff --git a/scss/_media.scss b/scss/_media.scss index b573052c1..518027c4b 100644 --- a/scss/_media.scss +++ b/scss/_media.scss @@ -1,3 +1,10 @@ +// Dependencies +// +// _variables.scss +// _functions.scss +// _reboot.scss + + .media { display: flex; align-items: flex-start; diff --git a/scss/_modal.scss b/scss/_modal.scss index e43c70fbb..cf42c2ef6 100644 --- a/scss/_modal.scss +++ b/scss/_modal.scss @@ -1,3 +1,15 @@ +// Dependencies +// +// _variables.scss +// _functions.scss +// _reboot.scss +// _close.scss +// mixins/_breakpoints.scss +// mixins/_border-radius.scss +// mixins/_box-shadow.scss +// mixins/_transition.scss + + // .modal-open - body class for killing the scroll // .modal - container to scroll within // .modal-dialog - positioning shell for the actual modal diff --git a/scss/_nav.scss b/scss/_nav.scss index d866c9841..90f227467 100644 --- a/scss/_nav.scss +++ b/scss/_nav.scss @@ -1,3 +1,12 @@ +// Dependencies +// +// _variables.scss +// _functions.scss +// _reboot.scss +// mixins/_border-radius.scss +// mixins/_hover.scss + + // Base class // // Kickstart any navigation component with a set of style resets. Works with diff --git a/scss/_navbar.scss b/scss/_navbar.scss index 5f10a62f1..737a93e94 100644 --- a/scss/_navbar.scss +++ b/scss/_navbar.scss @@ -1,3 +1,16 @@ +// Dependencies +// +// _variables.scss +// _functions.scss +// _reboot.scss +// _nav.scss +// _grid.scss +// mixins/_border-radius.scss +// mixins/_breakpoints.scss +// mixins/_hover.scss +// vendor/_rfs.scss + + // Contents // // Navbar diff --git a/scss/_pagination.scss b/scss/_pagination.scss index d7d553cca..df94a8697 100644 --- a/scss/_pagination.scss +++ b/scss/_pagination.scss @@ -1,3 +1,15 @@ +// Dependencies +// +// _variables.scss +// _functions.scss +// _reboot.scss +// mixins/_border-radius.scss +// mixins/_breakpoints.scss +// mixins/_lists.scss +// mixins/_pagination.scss +// vendor/_rfs.scss + + .pagination { display: flex; @include list-unstyled(); diff --git a/scss/_popover.scss b/scss/_popover.scss index 0ad76af3e..a83069b9e 100644 --- a/scss/_popover.scss +++ b/scss/_popover.scss @@ -1,3 +1,14 @@ +// Dependencies +// +// _variables.scss +// _functions.scss +// _reboot.scss +// mixins/_border-radius.scss +// mixins/_box-shadow.scss +// mixins/_reset-text.scss +// vendor/_rfs.scss + + .popover { position: absolute; top: 0; diff --git a/scss/_print.scss b/scss/_print.scss index 8f73024a8..375b3fc70 100644 --- a/scss/_print.scss +++ b/scss/_print.scss @@ -1,3 +1,8 @@ +// Dependencies +// +// _variables.scss + + // stylelint-disable declaration-no-important, selector-no-qualifying-type // Source: https://github.com/h5bp/main.css/blob/master/src/_print.css diff --git a/scss/_progress.scss b/scss/_progress.scss index 1a037045a..a09fd4650 100644 --- a/scss/_progress.scss +++ b/scss/_progress.scss @@ -1,3 +1,14 @@ +// Dependencies +// +// _variables.scss +// mixins/_border-radius.scss +// mixins/_box-shadow.scss +// mixins/_gradients.scss +// mixins/_hover.scss +// mixins/_transition.scss +// vendor/_rfs.scss + + // Disable animation if transitions are disabled @if $enable-transitions { @keyframes progress-bar-stripes { diff --git a/scss/_reboot.scss b/scss/_reboot.scss index 4444ff0f0..1f07c6060 100644 --- a/scss/_reboot.scss +++ b/scss/_reboot.scss @@ -1,3 +1,10 @@ +// Dependencies +// +// _variables.scss +// mixins/_hover.scss +// vendor/_rfs.scss + + // stylelint-disable at-rule-no-vendor-prefix, declaration-no-important, selector-no-qualifying-type, property-no-vendor-prefix // Reboot diff --git a/scss/_root.scss b/scss/_root.scss index 8110030c6..59f42a9c5 100644 --- a/scss/_root.scss +++ b/scss/_root.scss @@ -1,3 +1,8 @@ +// Dependencies +// +// _variables.scss + + // Do not forget to update getting-started/theming.md! :root { // Custom variable values only support SassScript inside `#{}`. diff --git a/scss/_spinners.scss b/scss/_spinners.scss index 27c9241a7..58a88659e 100644 --- a/scss/_spinners.scss +++ b/scss/_spinners.scss @@ -1,3 +1,10 @@ +// Dependencies +// +// _variables.scss +// _functions.scss +// _reboot.scss + + // // Rotating border // diff --git a/scss/_tables.scss b/scss/_tables.scss index 5fd77a4eb..06afbeae5 100644 --- a/scss/_tables.scss +++ b/scss/_tables.scss @@ -1,3 +1,14 @@ +// Dependencies +// +// _variables.scss +// _functions.scss +// _reboot.scss +// mixins/_border-radius.scss +// mixins/_breakpoints.scss +// mixins/_table-row.scss +// vendor/_rfs.scss + + // // Basic Bootstrap table // diff --git a/scss/_toasts.scss b/scss/_toasts.scss index f9ca8d91c..5dfe0dd79 100644 --- a/scss/_toasts.scss +++ b/scss/_toasts.scss @@ -1,3 +1,12 @@ +// Dependencies +// +// _variables.scss +// _functions.scss +// _reboot.scss +// mixins/_border-radius.scss +// vendor/_rfs.scss + + .toast { // Prevents from shrinking in IE11, when in a flex container // See https://github.com/twbs/bootstrap/issues/28341 diff --git a/scss/_tooltip.scss b/scss/_tooltip.scss index 6b3aa62dd..423751921 100644 --- a/scss/_tooltip.scss +++ b/scss/_tooltip.scss @@ -1,4 +1,17 @@ +// Dependencies +// +// _variables.scss +// _functions.scss +// _reboot.scss +// mixins/_reset-text.scss +// mixins/_border-radius.scss +// vendor/_rfs.scss + + +// // Base class +// + .tooltip { position: absolute; z-index: $zindex-tooltip; diff --git a/scss/_transitions.scss b/scss/_transitions.scss index 40be4d918..835a517e4 100644 --- a/scss/_transitions.scss +++ b/scss/_transitions.scss @@ -1,3 +1,9 @@ +// Dependencies +// +// _variables.scss +// mixins/_transition.scss + + .fade { @include transition($transition-fade); diff --git a/scss/_type.scss b/scss/_type.scss index 43dde7d0f..57b4610c0 100644 --- a/scss/_type.scss +++ b/scss/_type.scss @@ -1,3 +1,10 @@ +// Dependencies +// +// _variables.scss +// mixins/_lists.scss +// vendor/_rfs.scss + + // stylelint-disable declaration-no-important, selector-list-comma-newline-after // diff --git a/site/docs/4.5/getting-started/download.md b/site/docs/4.5/getting-started/download.md index 7e0cb4a1e..fc5b93819 100644 --- a/site/docs/4.5/getting-started/download.md +++ b/site/docs/4.5/getting-started/download.md @@ -40,15 +40,14 @@ Skip the download with [BootstrapCDN](https://www.bootstrapcdn.com/) to deliver {% highlight html %} <link rel="stylesheet" href="{{ site.cdn.css }}" integrity="{{ site.cdn.css_hash }}" crossorigin="anonymous"> -<script src="{{ site.cdn.js_bundle }}" integrity="{{ site.cdn.js_bundle_hash }}" crossorigin="anonymous"></script> +<script src="{{ site.cdn.js }}" integrity="{{ site.cdn.js_hash }}" crossorigin="anonymous"></script> {% endhighlight %} -If you're using our compiled JavaScript and prefer to include Popper.js separately, add Popper.js before our JS, via a CDN preferably. +If you're using our compiled JavaScript, don't forget to include jQuery and Popper.js, via a CDN preferably, before our JS. {% highlight html %} <script src="{{ site.cdn.jquery }}" integrity="{{ site.cdn.jquery_hash }}" crossorigin="anonymous"></script> <script src="{{ site.cdn.popper }}" integrity="{{ site.cdn.popper_hash }}" crossorigin="anonymous"></script> -<script src="{{ site.cdn.js }}" integrity="{{ site.cdn.js_hash }}" crossorigin="anonymous"></script> {% endhighlight %} ## Package managers diff --git a/site/docs/4.5/getting-started/introduction.md b/site/docs/4.5/getting-started/introduction.md index 6e83611b1..c5e7ed07e 100644 --- a/site/docs/4.5/getting-started/introduction.md +++ b/site/docs/4.5/getting-started/introduction.md @@ -26,22 +26,9 @@ Copy-paste the stylesheet `<link>` into your `<head>` before all other styleshee ### JS -Many of our components require the use of JavaScript to function. Specifically, they require [jQuery](https://jquery.com/), [Popper.js](https://popper.js.org/), and our own JavaScript plugins. We use [jQuery's slim build](https://blog.jquery.com/2016/06/09/jquery-3-0-final-released/), but the full version is also supported. +Many of our components require the use of JavaScript to function. Specifically, they require [jQuery](https://jquery.com/), [Popper.js](https://popper.js.org/), and our own JavaScript plugins. Place the following `<script>`s near the end of your pages, right before the closing `</body>` tag, to enable them. jQuery must come first, then Popper.js, and then our JavaScript plugins. -Place **one of the following `<script>`s** near the end of your pages, right before the closing `</body>` tag, to enable them. jQuery must come first, then Popper.js, and then our JavaScript plugins. - -#### Bundle - -Include everything you need in one script with our bundle. Our `bootstrap.bundle.js` and `bootstrap.bundle.min.js` include [Popper](https://popper.js.org/), but not [jQuery](https://jquery.com/). For more information about what's included in Bootstrap, please see our [contents]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/contents/#precompiled-bootstrap) section. - -{% highlight html %} -<script src="{{ site.cdn.jquery }}" integrity="{{ site.cdn.jquery_hash }}" crossorigin="anonymous"></script> -<script src="{{ site.cdn.js_bundle }}" integrity="{{ site.cdn.js_bundle_hash }}" crossorigin="anonymous"></script> -{% endhighlight %} - -#### Separate - -If you decide to go with the separate scripts solution, Popper.js must come first, and then our JavaScript plugins. +We use [jQuery's slim build](https://blog.jquery.com/2016/06/09/jquery-3-0-final-released/), but the full version is also supported. {% highlight html %} <script src="{{ site.cdn.jquery }}" integrity="{{ site.cdn.jquery_hash }}" crossorigin="anonymous"></script> @@ -49,9 +36,9 @@ If you decide to go with the separate scripts solution, Popper.js must come firs <script src="{{ site.cdn.js }}" integrity="{{ site.cdn.js_hash }}" crossorigin="anonymous"></script> {% endhighlight %} -#### Components +Curious which components explicitly require jQuery, our JS, and Popper.js? Click the show components link below. If you're at all unsure about the general page structure, keep reading for an example page template. -Curious which components explicitly require jQuery, our JS, and Popper.js? Click the show components link below. If you're unsure about the page structure, keep reading for an example page template. +Our `bootstrap.bundle.js` and `bootstrap.bundle.min.js` include [Popper](https://popper.js.org/), but not [jQuery](https://jquery.com/). For more information about what's included in Bootstrap, please see our [contents]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/contents/#precompiled-bootstrap) section. <details> <summary class="text-primary mb-3">Show components requiring JavaScript</summary> @@ -90,17 +77,11 @@ Be sure to have your pages set up with the latest design and development standar <body> <h1>Hello, world!</h1> - <!-- Optional JavaScript; choose one of the two! --> - - <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) --> - <script src="{{ site.cdn.jquery }}" integrity="{{ site.cdn.jquery_hash }}" crossorigin="anonymous"></script> - <script src="{{ site.cdn.js_bundle }}" integrity="{{ site.cdn.js_bundle_hash }}" crossorigin="anonymous"></script> - - <!-- Option 2: jQuery, Popper.js, and Bootstrap JS + <!-- Optional JavaScript --> + <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="{{ site.cdn.jquery }}" integrity="{{ site.cdn.jquery_hash }}" crossorigin="anonymous"></script> <script src="{{ site.cdn.popper }}" integrity="{{ site.cdn.popper_hash }}" crossorigin="anonymous"></script> <script src="{{ site.cdn.js }}" integrity="{{ site.cdn.js_hash }}" crossorigin="anonymous"></script> - --> </body> </html> {% endhighlight %} diff --git a/site/index.html b/site/index.html index 23850bcf8..a62686429 100644 --- a/site/index.html +++ b/site/index.html @@ -61,18 +61,19 @@ gem install bootstrap -v {{ site.current_ruby_version }} When you only need to include Bootstrap’s compiled CSS or JS, you can use <a href="https://www.bootstrapcdn.com/">BootstrapCDN</a>. </p> <p> - See it in action with our simple <a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/introduction/#starter-template">starter template</a>, or <a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/">browse the examples</a> to jumpstart your next project. You can also choose to include Popper.js and our JS <a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/introduction/#separate">separately</a>. + See it in action with our simple <a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/introduction/#starter-template">starter template</a>, or <a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/">browse the examples</a> to jumpstart your next project. </p> <a class="btn btn-lg btn-outline-primary mb-3" href="{{ site.baseurl }}/docs/{{ site.docs_version }}/layout/overview/">Explore the docs</a> </div> <div class="col-md-7 pl-md-5"> {% highlight html %} -<!-- CSS --> +<!-- CSS only --> <link rel="stylesheet" href="{{ site.cdn.css }}" integrity="{{ site.cdn.css_hash }}" crossorigin="anonymous"> -<!-- jQuery and JS bundle w/ Popper.js --> +<!-- JS, Popper.js, and jQuery --> <script src="{{ site.cdn.jquery }}" integrity="{{ site.cdn.jquery_hash }}" crossorigin="anonymous"></script> -<script src="{{ site.cdn.js_bundle }}" integrity="{{ site.cdn.js_bundle_hash }}" crossorigin="anonymous"></script> +<script src="{{ site.cdn.popper }}" integrity="{{ site.cdn.popper_hash }}" crossorigin="anonymous"></script> +<script src="{{ site.cdn.js }}" integrity="{{ site.cdn.js_hash }}" crossorigin="anonymous"></script> {% endhighlight %} </div> </div> |