diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json
index 83f6c16f30..e4bc1fc9a1 100644
--- a/.bundlewatch.config.json
+++ b/.bundlewatch.config.json
@@ -30,7 +30,7 @@
},
{
"path": "./dist/js/boosted.bundle.min.js",
- "maxSize": "26.5 kB"
+ "maxSize": "26.75 kB"
},
{
"path": "./dist/js/boosted.js",
diff --git a/.eslintignore b/.eslintignore
index 12cf50529b..393abcf555 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -3,7 +3,7 @@
**/vendor/
/_gh_pages/
/js/coverage/
-/site/sw.js
+/site/static/sw.js
**/docs/**/demo/*
**/docs/**/rtl-*/**/
**/docs/**/examples/orange-*
diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md
index e6f8dc782e..8dd778470e 100644
--- a/.github/CONTRIBUTING.md
+++ b/.github/CONTRIBUTING.md
@@ -142,7 +142,7 @@ and/or [`/boosted/js/`](https://github.com/Orange-OpenSource/Orange-Boosted-Boot
Similarly, when contributing to Boosted's documentation, you should edit the
documentation source files in
-[the `/boosted/docs/` directory of the `v4-dev` branch](https://github.com/Orange-OpenSource/Orange-Boosted-Bootstrap/tree/v4-dev/docs).
+[the `/boosted/site/content/docs/` directory of the `v4-dev` branch](https://github.com/Orange-OpenSource/Orange-Boosted-Bootstrap/tree/v4-dev/site/content/docs).
**Do not edit the `gh-pages` branch.** That branch is generated from the
documentation source files and is managed separately by the Bootstrap Core Team.
diff --git a/.github/workflows/browserstack.yml b/.github/workflows/browserstack.yml
index 7adcc30321..3419782752 100644
--- a/.github/workflows/browserstack.yml
+++ b/.github/workflows/browserstack.yml
@@ -3,6 +3,7 @@ on:
push:
env:
CI: true
+ FORCE_COLOR: 2
NODE: 14.x
jobs:
diff --git a/.github/workflows/bundlewatch.yml b/.github/workflows/bundlewatch.yml
index 7765847ef2..aafd62d4fd 100644
--- a/.github/workflows/bundlewatch.yml
+++ b/.github/workflows/bundlewatch.yml
@@ -8,6 +8,7 @@ on:
env:
CI: true
+ FORCE_COLOR: 2
NODE: 14.x
jobs:
diff --git a/.github/workflows/css.yml b/.github/workflows/css.yml
index 065f7a9379..a75f018c5e 100644
--- a/.github/workflows/css.yml
+++ b/.github/workflows/css.yml
@@ -8,6 +8,7 @@ on:
env:
CI: true
+ FORCE_COLOR: 2
NODE: 14.x
jobs:
diff --git a/.github/workflows/dart-sass.yml b/.github/workflows/dart-sass.yml
index 82896663c9..5ac4371e3f 100644
--- a/.github/workflows/dart-sass.yml
+++ b/.github/workflows/dart-sass.yml
@@ -8,6 +8,7 @@ on:
env:
CI: true
+ FORCE_COLOR: 2
NODE: 14.x
jobs:
diff --git a/.github/workflows/docs.yml b/.github/workflows/docs.yml
index 5f2e3b9622..58b55fc7ca 100644
--- a/.github/workflows/docs.yml
+++ b/.github/workflows/docs.yml
@@ -8,8 +8,8 @@ on:
env:
CI: true
+ FORCE_COLOR: 2
NODE: 14.x
- RUBY: 2.7.x
jobs:
docs:
@@ -24,25 +24,7 @@ jobs:
with:
node-version: "${{ env.NODE }}"
- - name: Set up Ruby
- uses: actions/setup-ruby@v1
- with:
- ruby-version: ${{ env.RUBY }}
-
- - name: Set up Ruby env
- run: |
- echo "gem: --no-document" > ~/.gemrc # Disable gem docs
- bundle config set clean 'true'
- bundle config set deployment 'true'
-
- - name: Set up Ruby cache
- uses: actions/cache@v2
- with:
- path: vendor/bundle
- key: ${{ runner.os }}-ruby-v${{ env.RUBY }}-${{ hashFiles('Gemfile') }}-${{ hashFiles('Gemfile.lock') }}
- restore-keys: |
- ${{ runner.os }}-ruby-v${{ env.RUBY }}-${{ hashFiles('Gemfile') }}-${{ hashFiles('Gemfile.lock') }}
- ${{ runner.os }}-ruby-v${{ env.RUBY }}-
+ - run: java -version
- name: Set up npm cache
uses: actions/cache@v2
@@ -53,19 +35,8 @@ jobs:
${{ runner.OS }}-node-v${{ env.NODE }}-${{ hashFiles('package.json') }}-${{ hashFiles('package-lock.json') }}
${{ runner.OS }}-node-v${{ env.NODE }}-
- - run: ruby --version
- - run: gem --version
- - run: bundle --version
- - run: java -version
-
- name: Install npm dependencies
run: npm ci
- - name: Install bundler dependencies
- run: bundle install --deployment --jobs=4 --retry=3 --clean
-
- - name: Copy CSS and JS
- run: npm run css-copy && npm run js-copy
-
- name: Test docs
run: npm run docs
diff --git a/.github/workflows/js.yml b/.github/workflows/js.yml
index d14588965b..1ec0d69098 100644
--- a/.github/workflows/js.yml
+++ b/.github/workflows/js.yml
@@ -8,6 +8,7 @@ on:
env:
CI: true
+ FORCE_COLOR: 2
jobs:
run:
diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml
index b5035c1ef1..e850a1f1b8 100644
--- a/.github/workflows/lint.yml
+++ b/.github/workflows/lint.yml
@@ -8,6 +8,7 @@ on:
env:
CI: true
+ FORCE_COLOR: 2
NODE: 14.x
jobs:
diff --git a/.github/workflows/release-notes.yml b/.github/workflows/release-notes.yml
deleted file mode 100644
index f9dc0c7cdb..0000000000
--- a/.github/workflows/release-notes.yml
+++ /dev/null
@@ -1,14 +0,0 @@
-name: Release notes
-
-on:
- push:
- branches:
- - v5-dev
-
-jobs:
- update_release_draft:
- runs-on: ubuntu-latest
- steps:
- - uses: release-drafter/release-drafter@v5
- env:
- GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
diff --git a/.gitignore b/.gitignore
index 1025f37d56..1a90dde65c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,18 +1,9 @@
# Ignore docs files
/_gh_pages/
-/site/.jekyll-cache
-/site/.jekyll-metadata
-site/docs/**/dist
-docs/4.0/examples/rtl-*
# Hugo folders
/resources/
-# Ignore ruby/bundler files
-/.bundle/
-/vendor/
-/.ruby-version
-
# Numerous always-ignore extensions
*.diff
*.err
@@ -56,3 +47,6 @@ Thumbs.db
/node_modules/
.pa11y/
pa11y-ci-results.json
+
+# Boosted mod
+docs/4.0/examples/rtl-*
diff --git a/.stylelintignore b/.stylelintignore
index 0d8f9baba2..6de0e6c290 100644
--- a/.stylelintignore
+++ b/.stylelintignore
@@ -2,6 +2,9 @@
**/dist/
**/vendor/
/_gh_pages/
+/js/coverage/
+
+
site/docs/4.5/examples/demo/**
site/docs/4.5/examples/rtl-*/**
site/docs/4.5/assets/css/tarteaucitronboosted.css
diff --git a/Gemfile b/Gemfile
deleted file mode 100644
index 952b9dc777..0000000000
--- a/Gemfile
+++ /dev/null
@@ -1,9 +0,0 @@
-source 'https://rubygems.org'
-
-group :development, :test do
- gem 'jekyll', '~> 4.1.1'
- gem 'jekyll-redirect-from', '~> 0.16.0'
- gem 'jekyll-sitemap', '~> 1.4.0'
- gem 'jekyll-toc', '~> 0.15.0'
- gem 'wdm', '~> 0.1.1', :install_if => Gem.win_platform?
-end
diff --git a/Gemfile.lock b/Gemfile.lock
deleted file mode 100644
index bf40b7c82a..0000000000
--- a/Gemfile.lock
+++ /dev/null
@@ -1,82 +0,0 @@
-GEM
- remote: https://rubygems.org/
- specs:
- addressable (2.7.0)
- public_suffix (>= 2.0.2, < 5.0)
- colorator (1.1.0)
- concurrent-ruby (1.1.7)
- em-websocket (0.5.2)
- eventmachine (>= 0.12.9)
- http_parser.rb (~> 0.6.0)
- eventmachine (1.2.7)
- ffi (1.13.1)
- forwardable-extended (2.6.0)
- http_parser.rb (0.6.0)
- i18n (1.8.5)
- concurrent-ruby (~> 1.0)
- jekyll (4.1.1)
- addressable (~> 2.4)
- colorator (~> 1.0)
- em-websocket (~> 0.5)
- i18n (~> 1.0)
- jekyll-sass-converter (~> 2.0)
- jekyll-watch (~> 2.0)
- kramdown (~> 2.1)
- kramdown-parser-gfm (~> 1.0)
- liquid (~> 4.0)
- mercenary (~> 0.4.0)
- pathutil (~> 0.9)
- rouge (~> 3.0)
- safe_yaml (~> 1.0)
- terminal-table (~> 1.8)
- jekyll-redirect-from (0.16.0)
- jekyll (>= 3.3, < 5.0)
- jekyll-sass-converter (2.1.0)
- sassc (> 2.0.1, < 3.0)
- jekyll-sitemap (1.4.0)
- jekyll (>= 3.7, < 5.0)
- jekyll-toc (0.15.0)
- jekyll (>= 3.8)
- nokogiri (~> 1.10)
- jekyll-watch (2.2.1)
- listen (~> 3.0)
- kramdown (2.3.0)
- rexml
- kramdown-parser-gfm (1.1.0)
- kramdown (~> 2.0)
- liquid (4.0.3)
- listen (3.3.0)
- rb-fsevent (~> 0.10, >= 0.10.3)
- rb-inotify (~> 0.9, >= 0.9.10)
- mercenary (0.4.0)
- mini_portile2 (2.4.0)
- nokogiri (1.10.10)
- mini_portile2 (~> 2.4.0)
- pathutil (0.16.2)
- forwardable-extended (~> 2.6)
- public_suffix (4.0.6)
- rb-fsevent (0.10.4)
- rb-inotify (0.10.1)
- ffi (~> 1.0)
- rexml (3.2.4)
- rouge (3.25.0)
- safe_yaml (1.0.5)
- sassc (2.4.0)
- ffi (~> 1.9)
- terminal-table (1.8.0)
- unicode-display_width (~> 1.1, >= 1.1.1)
- unicode-display_width (1.7.0)
- wdm (0.1.1)
-
-PLATFORMS
- ruby
-
-DEPENDENCIES
- jekyll (~> 4.1.1)
- jekyll-redirect-from (~> 0.16.0)
- jekyll-sitemap (~> 1.4.0)
- jekyll-toc (~> 0.15.0)
- wdm (~> 0.1.1)
-
-BUNDLED WITH
- 2.1.4
diff --git a/README.md b/README.md
index 1d47ed93e4..617b345530 100644
--- a/README.md
+++ b/README.md
@@ -110,18 +110,18 @@ Have a bug or a feature request? Please first read the [issue guidelines](https:
## Documentation
-Boosted documentation, included in this repo in the root directory, is built with [Jekyll](https://jekyllrb.com/) and publicly hosted on GitHub Pages at . The docs may also be run locally.
+Boosted documentation, included in this repo in the root directory, is built with [Hugo](https://gohugo.io/) and publicly hosted on GitHub Pages at . The docs may also be run locally.
-Documentation search is powered by [Algolia's DocSearch](https://community.algolia.com/docsearch/). Working on our search? Be sure to set `debug: true` in `site/docs/4.5/assets/js/src/search.js` file.
+Documentation search is powered by [Algolia's DocSearch](https://community.algolia.com/docsearch/). Working on our search? Be sure to set `debug: true` in `site/assets/js/src/search.js` file.
### Running documentation locally
-1. Run through the [tooling setup](https://boosted.orange.com/docs/4.5/getting-started/build-tools/#tooling-setup) to install Jekyll (the site builder) and other Ruby dependencies with `bundle install`.
-2. Run `npm install` to install Node.js dependencies.
+1. Run `npm install` to install the Node.js dependencies, including Hugo (the site builder).
+2. Run `npm run test` (or a specific npm script) to rebuild distributed CSS and JavaScript files, as well as our docs assets.
3. Run `npm start` to compile CSS and JavaScript files, generate our docs, and watch for changes.
-4. Open `http://localhost:9001` in your browser, and voilà.
+4. Open http://localhost:9001/ in your browser, and voilà.
-Learn more about using Jekyll by reading its [documentation](https://jekyllrb.com/docs/).
+Learn more about using Hugo by reading its [documentation](https://gohugo.io/documentation/).
### Documentation for previous releases
diff --git a/_config.yml b/_config.yml
deleted file mode 100644
index 8a86e0e966..0000000000
--- a/_config.yml
+++ /dev/null
@@ -1,131 +0,0 @@
-# Dependencies
-markdown: kramdown
-highlighter: rouge
-
-kramdown:
- auto_ids: true
-
-# Permalinks
-permalink: pretty
-
-# Server
-source: "site"
-destination: ./_gh_pages
-host: "localhost"
-port: 9001
-baseurl: ""
-# boosted mod
-url: "https://boosted.orange.com"
-# end boosted mod
-encoding: UTF-8
-exclude:
- - docs/4.5/assets/scss/
-
-liquid:
- error_mode: strict
-
-plugins:
- - jekyll-redirect-from
- - jekyll-sitemap
- - jekyll-toc
-
-redirect_from:
- json: false
-
-# boosted mod
-grid:
- xs:
- breakpoint: 0
- width: 302
- gutter: 10
- desc: Extra small devices
- subdesc: Portrait phone (<480px) (target 320 screen resolutions)
- sm:
- breakpoint: 480
- width: 458
- gutter: 10
- desc: Small devices
- subdesc: Landscape phones (≥480px - <768px) (target 480 screen resolutions)
- md:
- breakpoint: 768
- width: 724
- gutter: 20
- desc: Medium devices
- subdesc: Tablet (≥768px - <960px) (target 768 screen resolutions)
- lg:
- breakpoint: 980
- width: 960
- gutter: 20
- desc: Large devices
- subdesc: Desktop (≥960px - <1120px) (target 1024 screen resolutions)
- xl:
- breakpoint: 1220
- width: 1180
- gutter: 20
- desc: Extra large devices
- subdesc: Desktop (≥1220px - <1380px) (target 1280 screen resolutions)
- xxl:
- breakpoint: 1380
- width: 1300
- gutter: 20
- desc: Extra extra large devices
- subdesc: Desktop (≥1380px) (target 1440 screen resolutions)
-# end boosted mod
-
-# Social
-title: Boosted
-description: "Orange HTML, CSS and JS library — based on Bootstrap, the most popular library."
-twitter: orange
-authors: "Orange and Boosted contributors"
-social_image_path: /docs/4.5/assets/brand/orange-social.png
-social_logo_path: /docs/4.5/assets/brand/orange-logo.png
-
-# Custom variables
-current_version: 4.5.3
-bootstrap_current_version: v4.5.3
-current_ruby_version: 4.5.3
-docs_version: 4.5
-github_org: "https://github.com/Orange-OpenSource"
-repo: "https://github.com/Orange-OpenSource/Orange-Boosted-Bootstrap"
-slack: "https://bootstrap-slack.herokuapp.com"
-opencollective: "https://opencollective.com/bootstrap"
-blog: "https://blog.getbootstrap.com"
-expo: "https://expo.getbootstrap.com"
-themes: "https://themes.getbootstrap.com"
-icons: "https://icons.getbootstrap.com"
-
-download:
- source: "https://github.com/Orange-OpenSource/Orange-Boosted-Bootstrap/archive/v4.5.3.zip"
- dist: "https://github.com/Orange-OpenSource/Orange-Boosted-Bootstrap/releases/download/v4.5.3/boosted-4.5.3-dist.zip"
- dist_examples: "https://github.com/Orange-OpenSource/Orange-Boosted-Bootstrap/releases/download/v4.5.3/boosted-4.5.3-examples.zip"
-cdn:
- # See https://www.srihash.org for info on how to generate the hashes
- css: "https://cdn.jsdelivr.net/npm/boosted@4.5.3/dist/css/boosted.min.css"
- css_hash: "sha384-2x94UsUfEIjfJm4eAvt3wXrWUC/pAef/uLL2Q6KkHM9bgnm7fHaLTVOfjHlijBJS"
- iconcss: "https://cdn.jsdelivr.net/npm/boosted@4.5.3/dist/css/orangeIcons.min.css"
- iconcss_hash: "sha384-R6GN9ea/4pryAfJqIKDPT52rqJuxaMkZndUr7tl6YQmESyczsGyDgIbpuXvebpF5"
- helveticacss: "https://cdn.jsdelivr.net/npm/boosted@4.5.3/dist/css/orangeHelvetica.min.css"
- helveticacss_hash: "sha384-ZWV5rANfkZIt/7HDFToWXT+5LfpEbtDN22vw9WhARiDc+o6zJ4qxwdTwskCbe8NK"
- js: "https://cdn.jsdelivr.net/npm/boosted@4.5.3/dist/js/boosted.min.js"
- js_hash: "sha384-dZ5yFPu4JLOG6APRar263bUkZl+uDJl2LWBDXvSyVocYb4g2FJrT0BxpETyjdqtj"
- js_bundle: "https://cdn.jsdelivr.net/npm/boosted@4.5.3/dist/js/boosted.bundle.min.js"
- js_bundle_hash: "sha384-hQFBUEXKv1tPjGNFpCctXthNheXFWEyT+cKHsR5+8VYwGoe2L0SIaDNXDpE1LlTK"
- jquery: "https://code.jquery.com/jquery-3.5.1.slim.min.js"
- jquery_hash: "sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
- css_swiper: "https://cdn.jsdelivr.net/npm/swiper@4.5.1/dist/css/swiper.min.css"
- css_swiper_hash: "sha384-3ycIs75n6btZktoCV/zcWo54Eq+bnjaJ9iwOISgNPQIXRSmrkf4XP1iHsWNq0jPB"
- js_swiper: "https://cdn.jsdelivr.net/npm/swiper@4.5.1/dist/js/swiper.min.js"
- js_swiper_hash: "sha384-llVNZVxgabZyf5ZeGs3m2QcNbEE0UK1PBKM6ZoJmWK5BuBpqZUXpN1nWXd0SrAC5"
- popper: "https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
- popper_hash: "sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
- tablesorter: "https://cdn.jsdelivr.net/npm/tablesorter@2.31.3/dist/js/jquery.tablesorter.min.js"
- tablesorter_hash: "sha384-+PEWXCk8F17zxsQsEjkuHjUN4yFMHv03eKxKLrqwDql8FJQM0NeSvHRZFVLfXyn7"
- js_docsearch: "https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"
- js_docsearch_hash: "sha384-8uEk67aWSZHvjtAX9hf2AB+KzYcssy31vRRTi9oP81zHtyIj7PQGAykGbQpB1L2J"
-
-toc:
- min_level: 2
- max_level: 4
- no_toc_section_class:
- - "bd-callout"
- - "bd-example"
diff --git a/build/docs-rtl.js b/build/docs-rtl.js
index 91f6656649..670a3a032d 100644
--- a/build/docs-rtl.js
+++ b/build/docs-rtl.js
@@ -25,19 +25,19 @@ if (os.platform() === 'linux') {
console.log('Exit code:', code)
console.log('Program output:', stdout)
console.log('Program stderr:', stderr)
- sh.exec('find _gh_pages/docs/4.5/examples/rtl-* -type f -name "*.html" -exec sed -i \'s/\\.min.css/-rtl\\.min.css/gi\' {} \\;', (code, stdout, stderr) => {
+ sh.exec('find _gh_pages/docs/4.5/examples/rtl-* -type f -name "*.html" -exec sed -i \'s/\\/boosted\\.css/\\/boosted-rtl\\.css/gi\' {} \\;', (code, stdout, stderr) => {
console.log('Exit code:', code)
console.log('Program output:', stdout)
console.log('Program stderr:', stderr)
- sh.exec('find _gh_pages/docs/4.5/examples/rtl-* -type f -name "*.html" -exec sed -i \'s/orangeIcons-rtl/orangeIcons/gi\' {} \\;', (code, stdout, stderr) => {
+ sh.exec('find _gh_pages/docs/4.5/examples/rtl-* -type f -name "*.html" -exec sed -i \'s/\\/boosted\\.min.css/\\/boosted-rtl\\.min.css/gi\' {} \\;', (code, stdout, stderr) => {
console.log('Exit code:', code)
console.log('Program output:', stdout)
console.log('Program stderr:', stderr)
- sh.exec('find _gh_pages/docs/4.5/examples/rtl-* -type f -name "*.html" -exec sed -i \'s/orangeHelvetica-rtl/orangeHelvetica/gi\' {} \\;', (code, stdout, stderr) => {
+ sh.exec('find _gh_pages/docs/4.5/examples/rtl-* -type f -name "*.html" -exec sed -i \'s/HelvNeue55_W1G/HelveticaNeueW20-55Roman/gi\' {} \\;', (code, stdout, stderr) => {
console.log('Exit code:', code)
console.log('Program output:', stdout)
console.log('Program stderr:', stderr)
- sh.exec('find _gh_pages/docs/4.5/examples/rtl-* -type f -name "*.html" -exec sed -i \'s/swiper\\.min-rtl/swiper\\.min/gi\' {} \\;', (code, stdout, stderr) => {
+ sh.exec('find _gh_pages/docs/4.5/examples/rtl-* -type f -name "*.html" -exec sed -i \'s/HelvNeue75_W1G/HelveticaNeueW20-75Bold/gi\' {} \\;', (code, stdout, stderr) => {
console.log('Exit code:', code)
console.log('Program output:', stdout)
console.log('Program stderr:', stderr)
@@ -63,19 +63,19 @@ if (os.platform() === 'linux') {
console.log('Exit code:', code)
console.log('Program output:', stdout)
console.log('Program stderr:', stderr)
- sh.exec('find _gh_pages/docs/4.5/examples/rtl-* -type f -name "*.html" -exec sed -i \'s/\\.min.css/-rtl\\.min.css/gi\' {} ;', (code, stdout, stderr) => {
+ sh.exec('find _gh_pages/docs/4.5/examples/rtl-* -type f -name "*.html" -exec sed -i \'s/\\/boosted\\.css/\\/boosted-rtl\\.css/gi\' {} ;', (code, stdout, stderr) => {
console.log('Exit code:', code)
console.log('Program output:', stdout)
console.log('Program stderr:', stderr)
- sh.exec('find _gh_pages/docs/4.5/examples/rtl-* -type f -name "*.html" -exec sed -i \'s/orangeIcons-rtl/orangeIcons/gi\' {} ;', (code, stdout, stderr) => {
+ sh.exec('find _gh_pages/docs/4.5/examples/rtl-* -type f -name "*.html" -exec sed -i \'s/\\/boosted\\.min.css/\\/boosted-rtl\\.min.css/gi\' {} ;', (code, stdout, stderr) => {
console.log('Exit code:', code)
console.log('Program output:', stdout)
console.log('Program stderr:', stderr)
- sh.exec('find _gh_pages/docs/4.5/examples/rtl-* -type f -name "*.html" -exec sed -i \'s/orangeHelvetica-rtl/orangeHelvetica/gi\' {} ;', (code, stdout, stderr) => {
+ sh.exec('find _gh_pages/docs/4.5/examples/rtl-* -type f -name "*.html" -exec sed -i \'s/HelvNeue55_W1G/HelveticaNeueW20-55Roman/gi\' {} ;', (code, stdout, stderr) => {
console.log('Exit code:', code)
console.log('Program output:', stdout)
console.log('Program stderr:', stderr)
- sh.exec('find _gh_pages/docs/4.5/examples/rtl-* -type f -name "*.html" -exec sed -i \'s/swiper\\.min-rtl/swiper\\.min/gi\' {} ;', (code, stdout, stderr) => {
+ sh.exec('find _gh_pages/docs/4.5/examples/rtl-* -type f -name "*.html" -exec sed -i \'s/HelvNeue75_W1G/HelveticaNeueW20-75Bold/gi\' {} ;', (code, stdout, stderr) => {
console.log('Exit code:', code)
console.log('Program output:', stdout)
console.log('Program stderr:', stderr)
@@ -104,10 +104,20 @@ sh.exec('cp -av _gh_pages/docs/4.5/boostwatch/index.html _gh_pages/docs/4.5/boos
console.log('Exit code:', code)
console.log('Program output:', stdout)
console.log('Program stderr:', stderr)
- sh.exec('sed -i \'s/html lang="en"/html lang="en" dir="rtl"/gi\' _gh_pages/docs/4.5/boostwatch/rtl-index.html', (code, stdout, stderr) => {
+ sh.exec('find _gh_pages/docs/4.5/examples/rtl-* -type f -name "*.html" -exec sed -i \'s/HelvNeue55_W1G/HelveticaNeueW20-55Roman/gi\' {} ;', (code, stdout, stderr) => {
console.log('Exit code:', code)
console.log('Program output:', stdout)
console.log('Program stderr:', stderr)
+ sh.exec('find _gh_pages/docs/4.5/examples/rtl-* -type f -name "*.html" -exec sed -i \'s/HelvNeue75_W1G/HelveticaNeueW20-75Bold/gi\' {} ;', (code, stdout, stderr) => {
+ console.log('Exit code:', code)
+ console.log('Program output:', stdout)
+ console.log('Program stderr:', stderr)
+ sh.exec('sed -i \'s/html lang="en"/html lang="en" dir="rtl"/gi\' _gh_pages/docs/4.5/boostwatch/rtl-index.html', (code, stdout, stderr) => {
+ console.log('Exit code:', code)
+ console.log('Program output:', stdout)
+ console.log('Program stderr:', stderr)
+ })
+ })
})
})
})
diff --git a/build/generate-sri.js b/build/generate-sri.js
index 249b21bdce..cf9183e92b 100644
--- a/build/generate-sri.js
+++ b/build/generate-sri.js
@@ -21,11 +21,11 @@ const pkg = require('../package.json')
sh.config.fatal = true
-const configFile = path.join(__dirname, '../_config.yml')
+const configFile = path.join(__dirname, '../config.yml')
// Array of objects which holds the files to generate SRI hashes for.
// `file` is the path from the root folder
-// `configPropertyName` is the _config.yml variable's name of the file
+// `configPropertyName` is the config.yml variable's name of the file
const files = [
{
file: 'dist/css/boosted.min.css',
@@ -48,7 +48,7 @@ const files = [
configPropertyName: 'js_bundle_hash'
},
{
- file: `site/docs/${pkg.version_short}/assets/js/vendor/jquery-slim.min.js`,
+ file: `site/static/docs/${pkg.version_short}/assets/js/vendor/jquery.slim.min.js`,
configPropertyName: 'jquery_hash'
},
{
@@ -69,6 +69,6 @@ files.forEach(file => {
console.log(`${file.configPropertyName}: ${integrity}`)
- sh.sed('-i', new RegExp(`(\\s${file.configPropertyName}:\\s+"|')(\\S+)("|')`), `$1${integrity}$3`, configFile)
+ sh.sed('-i', new RegExp(`^(\\s+${file.configPropertyName}:\\s+["'])\\S*(["'])`), `$1${integrity}$2`, configFile)
})
})
diff --git a/build/postcss.config.js b/build/postcss.config.js
index 937cda45e5..4f01f0f0fd 100644
--- a/build/postcss.config.js
+++ b/build/postcss.config.js
@@ -1,14 +1,18 @@
'use strict'
-module.exports = ctx => ({
- map: ctx.file.dirname.includes('examples') || ctx.file.dirname.includes('essentials') ? false : {
- inline: false,
- annotation: true,
- sourcesContent: true
- },
- plugins: {
- autoprefixer: {
- cascade: false
+module.exports = ctx => {
+ return {
+ map: ctx.file.dirname.includes('examples') || ctx.file.dirname.includes('essentials') ?
+ false :
+ {
+ inline: false,
+ annotation: true,
+ sourcesContent: true
+ },
+ plugins: {
+ autoprefixer: {
+ cascade: false
+ }
}
}
-})
+}
diff --git a/build/vnu-jar.js b/build/vnu-jar.js
index a733e231e1..d13b6cd659 100644
--- a/build/vnu-jar.js
+++ b/build/vnu-jar.js
@@ -37,8 +37,6 @@ childProcess.exec('java -version', (error, stdout, stderr) => {
// IE11 doesn't recognise / give the element an implicit "main" landmark.
// Explicit role="main" is redundant for other modern browsers, but still valid.
'The “main” role is unnecessary for element “main”.',
- // For some reason, the validator thinks the dashboard example is written in Danish
- 'This document appears to be written in .*',
// Redundant ARIA landmarks role
'The “banner” role is unnecessary for element “header”.',
'The “contentinfo” role is unnecessary for element “footer”.',
diff --git a/composer.json b/composer.json
index aa9b169976..cc5db512bd 100644
--- a/composer.json
+++ b/composer.json
@@ -14,18 +14,6 @@
],
"homepage": "https://boosted.orange.com",
"authors": [
- {
- "name": "Mark Otto",
- "email": "markdotto@gmail.com"
- },
- {
- "name": "Jacob Thornton",
- "email": "jacobthornton@gmail.com"
- },
- {
- "name": "Yves Gatesoupe",
- "email": "yves1.gatesoupe@orange.com"
- },
{
"name": "Loïc Laussel",
"email": "loic.laussel@orange.com"
diff --git a/config.yml b/config.yml
new file mode 100644
index 0000000000..efc3ca585f
--- /dev/null
+++ b/config.yml
@@ -0,0 +1,89 @@
+languageCode: "en"
+title: "Boosted"
+baseURL: "https://boosted.orange.com"
+enableInlineShortcodes: true
+
+markup:
+ goldmark:
+ renderer:
+ unsafe: true
+ highlight:
+ noClasses: false
+ tableOfContents:
+ startLevel: 2
+ endLevel: 6
+
+buildDrafts: true
+buildFuture: true
+
+enableRobotsTXT: true
+metaDataFormat: "yaml"
+disableKinds: ["404", "taxonomy", "taxonomyTerm", "RSS"]
+
+publishDir: "_gh_pages"
+
+module:
+ mounts:
+ - source: dist
+ target: static/docs/4.5/dist
+ - source: site/assets
+ target: assets
+ - source: site/content
+ target: content
+ - source: site/data
+ target: data
+ - source: site/layouts
+ target: layouts
+ - source: site/static
+ target: static
+ - source: site/static/docs/4.5/assets/img/favicons/apple-touch-icon.png
+ target: static/apple-touch-icon.png
+ - source: site/static/docs/4.5/assets/img/favicons/favicon.ico
+ target: static/favicon.ico
+
+params:
+ description: "Orange HTML, CSS and JS library — based on Bootstrap, the most popular HTML, CSS, and JS library in the world."
+ authors: "Orange and Boosted contributors"
+ social_image_path: /docs/4.5/assets/brand/orange-social.png
+ social_logo_path: /docs/4.5/assets/brand/orange-logo.png
+
+ current_version: "4.5.3"
+ current_ruby_version: "4.5.3"
+ docs_version: "4.5"
+ github_org: "https://github.com/Orange-OpenSource"
+ repo: "https://github.com/Orange-OpenSource/Orange-Boosted-Bootstrap"
+ twitter: "orange"
+ bootstrap: "https://getbootstrap.com"
+ slack: "https://bootstrap-slack.herokuapp.com/"
+ blog: "https://blog.getbootstrap.com/"
+
+ download:
+ source: "https://github.com/Orange-OpenSource/Orange-Boosted-Bootstrap/archive/v4.5.3.zip"
+ dist: "https://github.com/Orange-OpenSource/Orange-Boosted-Bootstrap/releases/download/v4.5.3/boosted-4.5.3-dist.zip"
+ dist_examples: "https://github.com/Orange-OpenSource/Orange-Boosted-Bootstrap/releases/download/v4.5.3/boosted-4.5.3-examples.zip"
+ cdn:
+ # See https://www.srihash.org for info on how to generate the hashes
+ css: "https://cdn.jsdelivr.net/npm/boosted@4.5.3/dist/css/boosted.min.css"
+ css_hash: "sha384-2x94UsUfEIjfJm4eAvt3wXrWUC/pAef/uLL2Q6KkHM9bgnm7fHaLTVOfjHlijBJS"
+ rtlcss: "https://cdn.jsdelivr.net/npm/boosted@4.5.3/dist/css/boosted-rtl.min.css"
+ rtlcss_hash: "sha384-hJxq6SSxAKmw1m05Nn88CYZPfEVrgnLSYPW4/qrFYe5kT+Z2p/mpjaaoMUyvGXtk"
+ iconcss: "https://cdn.jsdelivr.net/npm/boosted@4.5.3/dist/css/orangeIcons.min.css"
+ iconcss_hash: "sha384-R6GN9ea/4pryAfJqIKDPT52rqJuxaMkZndUr7tl6YQmESyczsGyDgIbpuXvebpF5"
+ helveticacss: "https://cdn.jsdelivr.net/npm/boosted@4.5.3/dist/css/orangeHelvetica.min.css"
+ helveticacss_hash: "sha384-ZWV5rANfkZIt/7HDFToWXT+5LfpEbtDN22vw9WhARiDc+o6zJ4qxwdTwskCbe8NK"
+ js: "https://cdn.jsdelivr.net/npm/boosted@4.5.3/dist/js/boosted.min.js"
+ js_hash: "sha384-dZ5yFPu4JLOG6APRar263bUkZl+uDJl2LWBDXvSyVocYb4g2FJrT0BxpETyjdqtj"
+ js_bundle: "https://cdn.jsdelivr.net/npm/boosted@4.5.3/dist/js/boosted.bundle.min.js"
+ js_bundle_hash: "sha384-hQFBUEXKv1tPjGNFpCctXthNheXFWEyT+cKHsR5+8VYwGoe2L0SIaDNXDpE1LlTK"
+ jquery: "https://code.jquery.com/jquery-3.5.1.slim.min.js"
+ jquery_hash: "sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
+ css_swiper: "https://cdn.jsdelivr.net/npm/swiper@4.5.1/dist/css/swiper.min.css"
+ css_swiper_hash: "sha384-3ycIs75n6btZktoCV/zcWo54Eq+bnjaJ9iwOISgNPQIXRSmrkf4XP1iHsWNq0jPB"
+ js_swiper: "https://cdn.jsdelivr.net/npm/swiper@4.5.1/dist/js/swiper.min.js"
+ js_swiper_hash: "sha384-llVNZVxgabZyf5ZeGs3m2QcNbEE0UK1PBKM6ZoJmWK5BuBpqZUXpN1nWXd0SrAC5"
+ popper: "https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
+ popper_hash: "sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
+ tablesorter: "https://cdn.jsdelivr.net/npm/tablesorter@2.31.3/dist/js/jquery.tablesorter.min.js"
+ tablesorter_hash: "sha384-+PEWXCk8F17zxsQsEjkuHjUN4yFMHv03eKxKLrqwDql8FJQM0NeSvHRZFVLfXyn7"
+ js_docsearch: "https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"
+ js_docsearch_hash: "sha384-8uEk67aWSZHvjtAX9hf2AB+KzYcssy31vRRTi9oP81zHtyIj7PQGAykGbQpB1L2J"
diff --git a/js/index.js b/js/index.js
index b079ccb3ff..4bfafe5994 100644
--- a/js/index.js
+++ b/js/index.js
@@ -22,7 +22,7 @@ import Otab from './src/o-tab'
import PriorityNav from './src/o-priority-nav'
import ScrollUp from './src/o-scroll-up'
import Util from './src/util'
-import '../node_modules/focus-visible/dist/focus-visible.js'
+import 'focus-visible'
export {
Util,
@@ -41,5 +41,5 @@ export {
Navbar,
Otab,
PriorityNav,
- ScrollUp,
+ ScrollUp
}
diff --git a/js/src/dropdown.js b/js/src/dropdown.js
index ebbf08a547..3535f5f2d9 100644
--- a/js/src/dropdown.js
+++ b/js/src/dropdown.js
@@ -144,14 +144,14 @@ class Dropdown {
return
}
- // Disable totally Popper.js for Dropdown in Navbar
+ // Totally disable Popper for Dropdowns in Navbar
if (!this._inNavbar && usePopper) {
/**
* Check for Popper dependency
* Popper - https://popper.js.org
*/
if (typeof Popper === 'undefined') {
- throw new TypeError('Bootstrap\'s dropdowns require Popper.js (https://popper.js.org/)')
+ throw new TypeError('Bootstrap\'s dropdowns require Popper (https://popper.js.org)')
}
let referenceElement = this._element
@@ -338,7 +338,7 @@ class Dropdown {
}
}
- // Disable Popper.js if we have a static display
+ // Disable Popper if we have a static display
if (this._config.display === 'static') {
popperConfig.modifiers.applyStyle = {
enabled: false
diff --git a/js/src/modal.js b/js/src/modal.js
index d0e4de9857..d440a27aee 100644
--- a/js/src/modal.js
+++ b/js/src/modal.js
@@ -234,39 +234,35 @@ class Modal {
}
_triggerBackdropTransition() {
- if (this._config.backdrop === 'static') {
- const hideEventPrevented = $.Event(EVENT_HIDE_PREVENTED)
+ const hideEventPrevented = $.Event(EVENT_HIDE_PREVENTED)
- $(this._element).trigger(hideEventPrevented)
- if (hideEventPrevented.isDefaultPrevented()) {
- return
- }
+ $(this._element).trigger(hideEventPrevented)
+ if (hideEventPrevented.isDefaultPrevented()) {
+ return
+ }
- const isModalOverflowing = this._element.scrollHeight > document.documentElement.clientHeight
+ const isModalOverflowing = this._element.scrollHeight > document.documentElement.clientHeight
- if (!isModalOverflowing) {
- this._element.style.overflowY = 'hidden'
- }
+ if (!isModalOverflowing) {
+ this._element.style.overflowY = 'hidden'
+ }
- this._element.classList.add(CLASS_NAME_STATIC)
+ this._element.classList.add(CLASS_NAME_STATIC)
- const modalTransitionDuration = Util.getTransitionDurationFromElement(this._dialog)
- $(this._element).off(Util.TRANSITION_END)
+ const modalTransitionDuration = Util.getTransitionDurationFromElement(this._dialog)
+ $(this._element).off(Util.TRANSITION_END)
- $(this._element).one(Util.TRANSITION_END, () => {
- this._element.classList.remove(CLASS_NAME_STATIC)
- if (!isModalOverflowing) {
- $(this._element).one(Util.TRANSITION_END, () => {
- this._element.style.overflowY = ''
- })
- .emulateTransitionEnd(this._element, modalTransitionDuration)
- }
- })
- .emulateTransitionEnd(modalTransitionDuration)
- this._element.focus()
- } else {
- this.hide()
- }
+ $(this._element).one(Util.TRANSITION_END, () => {
+ this._element.classList.remove(CLASS_NAME_STATIC)
+ if (!isModalOverflowing) {
+ $(this._element).one(Util.TRANSITION_END, () => {
+ this._element.style.overflowY = ''
+ })
+ .emulateTransitionEnd(this._element, modalTransitionDuration)
+ }
+ })
+ .emulateTransitionEnd(modalTransitionDuration)
+ this._element.focus()
}
_showElement(relatedTarget) {
@@ -404,7 +400,11 @@ class Modal {
return
}
- this._triggerBackdropTransition()
+ if (this._config.backdrop === 'static') {
+ this._triggerBackdropTransition()
+ } else {
+ this.hide()
+ }
})
if (animate) {
diff --git a/js/src/tooltip.js b/js/src/tooltip.js
index 2f21925d26..b39aa56122 100644
--- a/js/src/tooltip.js
+++ b/js/src/tooltip.js
@@ -41,6 +41,7 @@ const DefaultType = {
container: '(string|element|boolean)',
fallbackPlacement: '(string|array)',
boundary: '(string|element)',
+ customClass: '(string|function)',
sanitize: 'boolean',
sanitizeFn: '(null|function)',
whiteList: 'object',
@@ -70,6 +71,7 @@ const Default = {
container: false,
fallbackPlacement: 'flip',
boundary: 'scrollParent',
+ customClass: '',
sanitize: true,
sanitizeFn: null,
whiteList: DefaultWhitelist,
@@ -112,7 +114,7 @@ const TRIGGER_MANUAL = 'manual'
class Tooltip {
constructor(element, config) {
if (typeof Popper === 'undefined') {
- throw new TypeError('Bootstrap\'s tooltips require Popper.js (https://popper.js.org/)')
+ throw new TypeError('Bootstrap\'s tooltips require Popper (https://popper.js.org)')
}
// private
@@ -296,6 +298,7 @@ class Tooltip {
this._popper = new Popper(this.element, tip, this._getPopperConfig(attachment))
$(tip).addClass(CLASS_NAME_SHOW)
+ $(tip).addClass(this.config.customClass)
// If this is a touch-enabled device we add extra
// empty mouseover listeners to the body's immediate children;
diff --git a/js/tests/karma.conf.js b/js/tests/karma.conf.js
index 9d4c1c1cea..bac02f66e4 100644
--- a/js/tests/karma.conf.js
+++ b/js/tests/karma.conf.js
@@ -30,6 +30,10 @@ const detectBrowsers = {
return ['ChromeHeadless']
}
+ if (availableBrowser.includes('Chromium')) {
+ return ['ChromiumHeadless']
+ }
+
if (availableBrowser.includes('Firefox')) {
return ['FirefoxHeadless']
}
@@ -38,11 +42,7 @@ const detectBrowsers = {
return ['FirefoxNightlyHeadless']
}
- if (availableBrowser.includes('Chromium')) {
- return ['ChromiumHeadless']
- }
-
- throw new Error('Please install Firefox or Chrome')
+ throw new Error('Please install Chrome, Chromium, Firefox or Firefox Nightly')
}
}
diff --git a/js/tests/unit/dropdown.js b/js/tests/unit/dropdown.js
index 62b7993339..e4b959ea18 100644
--- a/js/tests/unit/dropdown.js
+++ b/js/tests/unit/dropdown.js
@@ -747,7 +747,7 @@ $(function () {
$dropdown.trigger('click')
})
- QUnit.test('Dropdown should not use Popper.js in navbar', function (assert) {
+ QUnit.test('Dropdown should not use Popper in navbar', function (assert) {
assert.expect(1)
var done = assert.async()
var html = '
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
And because we use classes for our navs, you can avoid the list-based approach entirely if you like.
-{% capture example %}
+{{< example >}}
Navbar
@@ -182,12 +178,11 @@ And because we use classes for our navs, you can avoid the list-based approach e
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
You can also use dropdowns in your navbar. Dropdown menus require a wrapping element for positioning, so be sure to use separate and nested elements for `.nav-item` and `.nav-link` as shown below.
-{% capture example %}
+{{< example >}}
Navbar
@@ -218,26 +213,24 @@ You can also use dropdowns in your navbar. Dropdown menus require a wrapping ele
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
### Forms
Place various form controls and components within a navbar with `.form-inline`.
-{% capture example %}
+{{< example >}}
Search
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
-Immediate child elements of `.navbar` use flex layout and will default to `justify-content: space-between`. Use additional [flex utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/flex/) as needed to adjust this behavior.
+Immediate child elements of `.navbar` use flex layout and will default to `justify-content: space-between`. Use additional [flex utilities]({{< docsref "/utilities/flex" >}}) as needed to adjust this behavior.
-{% capture example %}
+{{< example >}}
Navbar
@@ -245,12 +238,11 @@ Immediate child elements of `.navbar` use flex layout and will default to `justi
Search
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
Input groups work, too:
-{% capture example %}
+{{< example >}}
@@ -261,37 +253,34 @@ Input groups work, too:
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
Various buttons are supported as part of these navbar forms, too. This is also a great reminder that vertical alignment utilities can be used to align different sized elements.
-{% capture example %}
+{{< example >}}
Main buttonSmaller button
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
### Text
Navbars may contain bits of text with the help of `.navbar-text`. This class adjusts vertical alignment and horizontal spacing for strings of text.
-{% capture example %}
+{{< example >}}
Navbar text with an inline element
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
Mix and match with other components and utilities as needed.
-{% capture example %}
+{{< example >}}
Navbar w/ text
@@ -315,19 +304,17 @@ Mix and match with other components and utilities as needed.
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
## Color schemes
Theming the navbar has never been easier thanks to the combination of theming classes and `background-color` utilities. Choose from `.navbar-light` for use with light background colors, or `.navbar-dark` for dark background colors.
-{% capture callout %}
+{{< callout warning >}}
### Deprecation notice
`.navbar-light` will be absent in the next major release (v5).
-{% endcapture %}
-{% include callout.html content=callout type='warning' %}
+{{< /callout >}}
@@ -357,9 +344,7 @@ Theming the navbar has never been easier thanks to the combination of theming cl
-
-
Navbar
@@ -389,7 +374,7 @@ Theming the navbar has never been easier thanks to the combination of theming cl
-{% highlight html %}
+```html
@@ -399,65 +384,59 @@ Theming the navbar has never been easier thanks to the combination of theming cl
-{% endhighlight %}
+```
## Containers
Although it's not required, you can wrap a navbar in a `.container` to center it on a page. Or you can add a container inside the `.navbar` to only center the contents of a [fixed or static top navbar](#placement).
-{% capture example %}
+{{< example >}}
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
When the container is within your navbar, its horizontal padding is removed at breakpoints lower than your specified `.navbar-expand{-sm|-md|-lg|-xl}` class. This ensures we're not doubling up on padding unnecessarily on lower viewports when your navbar is collapsed.
-{% capture example %}
+{{< example >}}
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
## Placement
-Use our [position utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/position/) to place navbars in non-static positions. Choose from fixed to the top, fixed to the bottom, or stickied to the top (scrolls with the page until it reaches the top, then stays there). Fixed navbars use `position: fixed`, meaning they're pulled from the normal flow of the DOM and may require custom CSS (e.g., `padding-top` on the ``) to prevent overlap with other elements.
+Use our [position utilities]({{< docsref "/utilities/position" >}}) to place navbars in non-static positions. Choose from fixed to the top, fixed to the bottom, or stickied to the top (scrolls with the page until it reaches the top, then stays there). Fixed navbars use `position: fixed`, meaning they're pulled from the normal flow of the DOM and may require custom CSS (e.g., `padding-top` on the ``) to prevent overlap with other elements.
Also note that **`.sticky-top` uses `position: sticky`, which [isn't fully supported in every browser](https://caniuse.com/css-sticky)**.
-{% capture example %}
+{{< example >}}
Default
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
-{% capture example %}
+{{< example >}}
Fixed top
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
-{% capture example %}
+{{< example >}}
Fixed bottom
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
-{% capture example %}
+{{< example >}}
Sticky top
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
## Responsive behaviors
@@ -471,7 +450,7 @@ Navbar togglers are left-aligned by default, but should they follow a sibling el
With no `.navbar-brand` shown at the smallest breakpoint:
-{% capture example %}
+{{< example >}}
@@ -496,12 +475,11 @@ With no `.navbar-brand` shown at the smallest breakpoint:
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
With a brand name shown on the left and toggler on the right:
-{% capture example %}
+{{< example >}}
Navbar
@@ -527,12 +505,11 @@ With a brand name shown on the left and toggler on the right:
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
With a toggler on the left and brand name on the right:
-{% capture example %}
+{{< example >}}
@@ -558,14 +535,13 @@ With a toggler on the left and brand name on the right:
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
### External content
Sometimes you want to use the collapse plugin to trigger a container element for content that structurally sits outside of the `.navbar` . Because our plugin works on the `id` and `data-target` matching, that's easily done!
-{% capture example %}
+{{< example >}}
@@ -579,7 +555,6 @@ Sometimes you want to use the collapse plugin to trigger a container element for
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
When you do this, we recommend including additional JavaScript to move the focus programmatically to the container when it is opened. Otherwise, keyboard users and users of assistive technologies will likely have a hard time finding the newly revealed content - particularly if the container that was opened comes *before* the toggler in the document's structure. We also recommend making sure that the toggler has the `aria-controls` attribute, pointing to the `id` of the content container. In theory, this allows assistive technology users to jump directly from the toggler to the container it controls–but support for this is currently quite patchy.
diff --git a/site/docs/4.5/components/navs.md b/site/content/docs/4.5/components/navs.md
similarity index 92%
rename from site/docs/4.5/components/navs.md
rename to site/content/docs/4.5/components/navs.md
index 7d55c32915..6f35bc54cb 100644
--- a/site/docs/4.5/components/navs.md
+++ b/site/content/docs/4.5/components/navs.md
@@ -12,12 +12,11 @@ Navigation available in Boosted share general markup and styles, from the base `
The base `.nav` component is built with flexbox and provide a strong foundation for building all types of navigation components. It includes some style overrides (for working with lists), some link padding for larger hit areas, and basic disabled styling.
-{% capture callout %}
+{{< callout info >}}
The base `.nav` component does not include any `.active` state. The following examples include the class, mainly to demonstrate that this particular class does not trigger any special styling.
-{% endcapture %}
-{% include callout.html content=callout type="info" %}
+ {{< /callout >}}
-{% capture example %}
+{{< example >}}
Active
@@ -32,31 +31,28 @@ The base `.nav` component does not include any `.active` state. The following ex
Disabled
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
Classes are used throughout, so your markup can be super flexible. Use `
`s like above, `` if the order of your items is important, or roll your own with a `` element. Because the `.nav` uses `display: flex`, the nav links behave the same as nav items would, but without the extra markup.
-[comment]: # Boosted mod
+
-{% capture callout %}
+{{< callout >}}
#### Accessibility
In addition to the `.active` class, you must use `aria-current="page"` state to represent the current location within the navbar — except for tabpanels where `aria-selected` must be used. This is to ensure a better accessibility to assistive technologies (as screenreaders , screen magnifiers...) that can support it by warning the user of the current element position and type, here it's the current page.
-{% endcapture %}
-{% include callout.html content=callout %}
+{{< /callout >}}
-[comment]: # End mod
+
-{% capture example %}
+{{< example >}}
ActiveLinkLinkDisabled
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
## Available styles
@@ -64,11 +60,11 @@ Change the style of `.nav`s component with modifiers and utilities. Mix and matc
### Horizontal alignment
-Change the horizontal alignment of your nav with [flexbox utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/layout/grid/#horizontal-alignment). By default, navs are left-aligned, but you can easily change them to center or right aligned.
+Change the horizontal alignment of your nav with [flexbox utilities]({{< docsref "/layout/grid#horizontal-alignment" >}}). By default, navs are left-aligned, but you can easily change them to center or right aligned.
Centered with `.justify-content-center`:
-{% capture example %}
+{{< example >}}
Active
@@ -83,12 +79,11 @@ Centered with `.justify-content-center`:
Disabled
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
Right-aligned with `.justify-content-end`:
-{% capture example %}
+{{< example >}}
Active
@@ -103,14 +98,13 @@ Right-aligned with `.justify-content-end`:
Disabled
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
### Vertical
Stack your navigation by changing the flex item direction with the `.flex-column` utility. Need to stack them on some viewports but not others? Use the responsive versions (e.g., `.flex-sm-column`).
-{% capture example %}
+{{< example >}}
Active
@@ -125,26 +119,24 @@ Stack your navigation by changing the flex item direction with the `.flex-column
Disabled
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
As always, vertical navigation is possible without `
`s, too.
-{% capture example %}
+{{< example >}}
ActiveLinkLinkDisabled
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
### Tabs
Takes the basic nav from above and adds the `.nav-tabs` class to generate a tabbed interface. Use them to create tabbable regions with our [tab JavaScript plugin](#javascript-behavior).
-{% capture example %}
+{{< example >}}
Active
@@ -159,15 +151,14 @@ Takes the basic nav from above and adds the `.nav-tabs` class to generate a tabb
Disabled
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
-[comment]: # Boosted mod
+
### Nav tabs light
Nav tabs light differs only visually, with a full width bottom border and a different active state.
-{% capture example %}
+{{< example >}}
Active
@@ -182,16 +173,15 @@ Nav tabs light differs only visually, with a full width bottom border and a diff
Disabled
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
-[comment]: # End mod
+
### Pills
Take that same HTML, but use `.nav-pills` instead:
-{% capture example %}
+{{< example >}}
Active
@@ -206,14 +196,13 @@ Take that same HTML, but use `.nav-pills` instead:
Disabled
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
### Fill and justify
Force your `.nav`'s contents to extend the full available width one of two modifier classes. To proportionately fill all available space with your `.nav-item`s, use `.nav-fill`. Notice that all horizontal space is occupied, but not every nav item has the same width.
-{% capture example %}
+{{< example >}}
Active
@@ -228,24 +217,22 @@ Force your `.nav`'s contents to extend the full available width one of two modif
Disabled
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
When using a ``-based navigation, you can safely omit `.nav-item` as only `.nav-link` is required for styling `` elements.
-{% capture example %}
+{{< example >}}
ActiveMuch longer nav linkLinkDisabled
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
For equal-width elements, use `.nav-justified`. All horizontal space will be occupied by nav links, but unlike the `.nav-fill` above, every nav item will be the same width.
-{% capture example %}
+{{< example >}}
Active
@@ -260,34 +247,31 @@ For equal-width elements, use `.nav-justified`. All horizontal space will be occ
Disabled
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
Similar to the `.nav-fill` example using a ``-based navigation.
-{% capture example %}
+{{< example >}}
ActiveMuch longer nav linkLinkDisabled
+{{< /example >}}
-{% endcapture %}
-{% include example.html content=example %}
## Working with flex utilities
-If you need responsive nav variations, consider using a series of [flexbox utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/flex/). While more verbose, these utilities offer greater customization across responsive breakpoints. In the example below, our nav will be stacked on the lowest breakpoint, then adapt to a horizontal layout that fills the available width starting from the small breakpoint.
+If you need responsive nav variations, consider using a series of [flexbox utilities]({{< docsref "/utilities/flex" >}}). While more verbose, these utilities offer greater customization across responsive breakpoints. In the example below, our nav will be stacked on the lowest breakpoint, then adapt to a horizontal layout that fills the available width starting from the small breakpoint.
-{% capture example %}
+{{< example >}}
ActiveLonger nav linkLinkDisabled
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
## Regarding accessibility
@@ -297,11 +281,11 @@ Note that navigation bars, even if visually styled as tabs with the `.nav-tabs`
## Using dropdowns
-Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin]({{ site.baseurl }}/docs/{{ site.docs_version }}/components/dropdowns/#usage).
+Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin]({{< docsref "/components/dropdowns#usage" >}}).
### Tabs with dropdowns
-{% capture example %}
+{{< example >}}
Active
@@ -323,12 +307,11 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin
Disabled
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
### Pills with dropdowns
-{% capture example %}
+{{< example >}}
Active
@@ -350,14 +333,13 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin
Disabled
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
## JavaScript behavior
Use the tab JavaScript plugin—include it individually or through the compiled `boosted.js` file—to extend our navigational tabs and pills to create tabbable panes of local content, even via dropdown menus.
-If you're building our JavaScript from source, it [requires `util.js`]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/javascript/#util).
+If you're building our JavaScript from source, it [requires `util.js`]({{< docsref "/getting-started/javascript#util" >}}).
Dynamic tabbed interfaces, as described in the [WAI ARIA Authoring Practices](https://www.w3.org/TR/wai-aria-practices/#tabpanel), require `role="tablist"`, `role="tab"`, `role="tabpanel"`, and additional `aria-` attributes in order to convey their structure, functionality and current state to users of assistive technologies (such as screen readers).
@@ -388,7 +370,7 @@ Note that dynamic tabbed interfaces should not contain dropdown menus,
-{% highlight html %}
+```html
Home
@@ -405,7 +387,7 @@ Note that dynamic tabbed interfaces should not contain dropdown menus,
...
...
-{% endhighlight %}
+```
To help fit your needs, this works with `
`-based markup, as shown above, or with any arbitrary "roll your own" markup. Note that if you're using ``, you shouldn't add `role="tablist"` directly to it, as this would override the element's native role as a navigation landmark. Instead, switch to an alternative element (in the example below, a simple `
`) and wrap the `` around it.
@@ -430,7 +412,7 @@ To help fit your needs, this works with `
`-based markup, as shown above, or
-{% highlight html %}
+```html
Home
@@ -443,7 +425,7 @@ To help fit your needs, this works with `
`-based markup, as shown above, or
...
...
-{% endhighlight %}
+```
The tabs plugin also works with pills.
@@ -472,7 +454,7 @@ The tabs plugin also works with pills.
-{% highlight html %}
+```html
Home
@@ -489,7 +471,7 @@ The tabs plugin also works with pills.
...
...
-{% endhighlight %}
+```
And with vertical pills.
@@ -522,7 +504,7 @@ And with vertical pills.
-{% highlight html %}
+```html
@@ -541,14 +523,14 @@ And with vertical pills.
-{% endhighlight %}
+```
-[comment]: # Boosted mod
+
### Responsive Tabs
Responsive tabs allow tab layouts to be displayed as accordions on a mobile browser if the number of tabs exceeds 2. No configuration or javascript method call needed. Here is the markup:
-{% capture example %}
+{{< example >}}
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch
@@ -557,15 +539,15 @@ Responsive tabs allow tab layouts to be displayed as accordions on a mobile brow
Tab 3
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
-{% endcapture %} {% include example.html content=example %}
+{{< /example >}}
-[comment]: # End mod
+
### Using data attributes
You can activate a tab or pill navigation without writing any JavaScript by simply specifying `data-toggle="tab"` or `data-toggle="pill"` on an element. Use these data attributes on `.nav-tabs` or `.nav-pills`.
-{% highlight html %}
+```html
@@ -589,50 +571,52 @@ You can activate a tab or pill navigation without writing any JavaScript by simp
...
...
-{% endhighlight %}
+```
### Via JavaScript
Enable tabbable tabs via JavaScript (each tab needs to be activated individually):
-{% highlight js %}
-$('#myTab a').on('click', function (e) {
- e.preventDefault()
+```js
+$('#myTab a').on('click', function (event) {
+ event.preventDefault()
$(this).tab('show')
})
-{% endhighlight %}
+```
You can activate individual tabs in several ways:
-{% highlight js %}
+```js
$('#myTab a[href="#profile"]').tab('show') // Select tab by name
$('#myTab li:first-child a').tab('show') // Select first tab
$('#myTab li:last-child a').tab('show') // Select last tab
$('#myTab li:nth-child(3) a').tab('show') // Select third tab
-{% endhighlight %}
+```
### Fade effect
To make tabs fade in, add `.fade` to each `.tab-pane`. The first tab pane must also have `.show` to make the initial content visible.
-{% highlight html %}
+```html
...
...
...
...
-{% endhighlight %}
+```
### Methods
-{% include callout-danger-async-methods.md %}
+{{< callout danger >}}
+{{< partial "callout-danger-async-methods.md" >}}
+{{< /callout >}}
#### $().tab
Activates a tab element and content container. Tab should have either a `data-target` or an `href` targeting a container node in the DOM.
-{% highlight html %}
+```html
Home
@@ -660,15 +644,15 @@ Activates a tab element and content container. Tab should have either a `data-ta
$('#myTab li:last-child a').tab('show')
})
-{% endhighlight %}
+```
#### .tab('show')
Selects the given tab and shows its associated pane. Any other tab that was previously selected becomes unselected and its associated pane is hidden. **Returns to the caller before the tab pane has actually been shown** (i.e. before the `shown.bs.tab` event occurs).
-{% highlight js %}
+```js
$('#someTab').tab('show')
-{% endhighlight %}
+```
#### .tab('dispose')
@@ -712,9 +696,9 @@ If no tab was already active, then the `hide.bs.tab` and `hidden.bs.tab` events
-{% highlight js %}
-$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
- e.target // newly activated tab
- e.relatedTarget // previous active tab
+```js
+$('a[data-toggle="tab"]').on('shown.bs.tab', function (event) {
+ event.target // newly activated tab
+ event.relatedTarget // previous active tab
})
-{% endhighlight %}
+```
diff --git a/site/content/docs/4.5/components/orange-footer.md b/site/content/docs/4.5/components/orange-footer.md
new file mode 100644
index 0000000000..50082eaa20
--- /dev/null
+++ b/site/content/docs/4.5/components/orange-footer.md
@@ -0,0 +1,120 @@
+---
+layout: docs
+title: Orange footer
+description: Standardised Orange footer
+group: components
+toc: true
+---
+
+## Usage
+
+Footer can be divided in three parts using `.o-footer-top`, `.o-footer-body` and `.o-footer-bottom` classes.
+Each footer part must use a `.container-fluid` or `.container` depending on page layout.
+
+Use `.nav` for lists. Use `.flex-column` for column layout. Use appropriate `.col-*` classes to fit all screen resolutions.
+
+According to the brand, Orange footer has black background and white text color.
+
+{{< example >}}
+
+{{< /example >}}
diff --git a/site/content/docs/4.5/components/orange-megamenu.md b/site/content/docs/4.5/components/orange-megamenu.md
new file mode 100644
index 0000000000..756554b325
--- /dev/null
+++ b/site/content/docs/4.5/components/orange-megamenu.md
@@ -0,0 +1,139 @@
+---
+layout: docs
+title: Orange megamenu
+description: Boosted mega-menu is use for landing page with many cross-link
+group: components
+toc: true
+---
+
+## Usage
+
+The plugin is initialised via javascript. Make sure to target the element containing the `.mega-menu` class.
+
+```js
+$('#megamenu').megamenu();
+```
+
+HTML markup and especially `
` menu structure must follow this example:
+
+{{< example >}}
+
+
+
+
+
+{{< /example >}}
+
+## Options
+
+Megamenu can be initialised to point to a specific menu item when main menu is opened. Call the init method with wanted item id.
+
+```js
+$('#megamenu').megamenu({ target: '#testLink' });
+```
+
+You might as well keep control on focus when page is loaded, thus disabling focus on targeted item.
+
+```js
+$('#megamenu').megamenu({ target: '#testLink', noFocus: true });
+```
+
+Default value for parameter `noFocus` is `false`.
+
+See a full implementation in the [Orange News example template]({{< docsref "/examples/news-template" >}}).
diff --git a/site/docs/4.5/components/pagination.md b/site/content/docs/4.5/components/pagination.md
similarity index 87%
rename from site/docs/4.5/components/pagination.md
rename to site/content/docs/4.5/components/pagination.md
index 7ed433c7d9..0b6ed9e732 100644
--- a/site/docs/4.5/components/pagination.md
+++ b/site/content/docs/4.5/components/pagination.md
@@ -15,7 +15,7 @@ In addition, as pages likely have more than one such navigation section, it's ad
[comment]: boosted mod
Make sure to use class `.has-label` on previous and next links as shown in the example below to use chevron + label layout.
-{% capture example %}
+{{< example >}}
@@ -24,15 +24,14 @@ Make sure to use class `.has-label` on previous and next links as shown in the e
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
## Working with icons
[comment]: boosted mod
Looking to use an icon or symbol in place of text for some pagination links? Be sure to provide proper screen reader support with **visually hidden text** and a `title` attribute.
-{% capture example %}
+{{< example >}}
@@ -47,8 +46,7 @@ Looking to use an icon or symbol in place of text for some pagination links? Be
@@ -231,7 +227,7 @@ Note that for security reasons the `sanitize`, `sanitizeFn` and `whiteList` opti
selector
string | false
false
-
If a selector is provided, popover objects will be delegated to the specified targets. In practice, this is used to enable dynamic HTML content to have popovers added. See this and an informative example.
+
If a selector is provided, popover objects will be delegated to the specified targets. In practice, this is used to enable dynamic HTML content to have popovers added. See this and an informative example.
template
@@ -264,20 +260,29 @@ Note that for security reasons the `sanitize`, `sanitizeFn` and `whiteList` opti
offset
number | string
0
-
Offset of the popover relative to its target. For more information refer to Popper.js's offset docs.
+
Offset of the popover relative to its target. For more information refer to Popper's offset docs.
fallbackPlacement
string | array
'flip'
Allow to specify which position Popper will use on fallback. For more information refer to
- Popper.js's behavior docs
Add classes to the popover when it is shown. Note that these classes will be added in addition to any classes specified in the template. To add multiple classes, separate them with spaces: 'a b'.
+
You can also pass a function that should return a single string containing additional class names.
+
boundary
string | element
'scrollParent'
-
Overflow constraint boundary of the popover. Accepts the values of 'viewport', 'window', 'scrollParent', or an HTMLElement reference (JavaScript only). For more information refer to Popper.js's preventOverflow docs.
+
Overflow constraint boundary of the popover. Accepts the values of 'viewport', 'window', 'scrollParent', or an HTMLElement reference (JavaScript only). For more information refer to Popper's preventOverflow docs.
sanitize
@@ -288,7 +293,7 @@ Note that for security reasons the `sanitize`, `sanitizeFn` and `whiteList` opti
-{% capture callout %}
+{{< callout info >}}
#### Data attributes for individual popovers
Options for individual popovers can alternatively be specified through the use of data attributes, as explained above.
-{% endcapture %}
-{% include callout.html content=callout type="info" %}
+{{< /callout >}}
### Methods
-{% include callout-danger-async-methods.md %}
+{{< callout danger >}}
+{{< partial "callout-danger-async-methods.md" >}}
+{{< /callout >}}
#### `$().popover(options)`
@@ -325,49 +331,65 @@ Initializes popovers for an element collection.
Reveals an element's popover. **Returns to the caller before the popover has actually been shown** (i.e. before the `shown.bs.popover` event occurs). This is considered a "manual" triggering of the popover. Popovers whose title and content are both zero-length are never displayed.
-{% highlight js %}$('#element').popover('show'){% endhighlight %}
+```js
+$('#element').popover('show')
+```
#### `.popover('hide')`
Hides an element's popover. **Returns to the caller before the popover has actually been hidden** (i.e. before the `hidden.bs.popover` event occurs). This is considered a "manual" triggering of the popover.
-{% highlight js %}$('#element').popover('hide'){% endhighlight %}
+```js
+$('#element').popover('hide')
+```
#### `.popover('toggle')`
Toggles an element's popover. **Returns to the caller before the popover has actually been shown or hidden** (i.e. before the `shown.bs.popover` or `hidden.bs.popover` event occurs). This is considered a "manual" triggering of the popover.
-{% highlight js %}$('#element').popover('toggle'){% endhighlight %}
+```js
+$('#element').popover('toggle')
+```
#### `.popover('dispose')`
Hides and destroys an element's popover. Popovers that use delegation (which are created using [the `selector` option](#options)) cannot be individually destroyed on descendant trigger elements.
-{% highlight js %}$('#element').popover('dispose'){% endhighlight %}
+```js
+$('#element').popover('dispose')
+```
#### `.popover('enable')`
Gives an element's popover the ability to be shown. **Popovers are enabled by default.**
-{% highlight js %}$('#element').popover('enable'){% endhighlight %}
+```js
+$('#element').popover('enable')
+```
#### `.popover('disable')`
Removes the ability for an element's popover to be shown. The popover will only be able to be shown if it is re-enabled.
-{% highlight js %}$('#element').popover('disable'){% endhighlight %}
+```js
+$('#element').popover('disable')
+```
#### `.popover('toggleEnabled')`
Toggles the ability for an element's popover to be shown or hidden.
-{% highlight js %}$('#element').popover('toggleEnabled'){% endhighlight %}
+```js
+$('#element').popover('toggleEnabled')
+```
#### `.popover('update')`
Updates the position of an element's popover.
-{% highlight js %}$('#element').popover('update'){% endhighlight %}
+```js
+$('#element').popover('update')
+```
### Events
@@ -402,8 +424,8 @@ Updates the position of an element's popover.
-{% highlight js %}
+```js
$('#myPopover').on('hidden.bs.popover', function () {
// do something...
})
-{% endhighlight %}
+```
diff --git a/site/content/docs/4.5/components/priority-nav.md b/site/content/docs/4.5/components/priority-nav.md
new file mode 100644
index 0000000000..9b7d7edafd
--- /dev/null
+++ b/site/content/docs/4.5/components/priority-nav.md
@@ -0,0 +1,46 @@
+---
+layout: docs
+title: Orange priority nav
+description: Add a "more" button when space for navigation items runs short
+group: components
+toc: true
+---
+
+## Scope
+
+The priority nav plugin can be used on [local navigation]({{< docsref "/components/local-navigation" >}}), [navigation tabs]({{< docsref "/components/navs#tabs" >}}) and [navigation pills]({{< docsref "/components/navs#pills" >}}).
+
+## Usage
+
+The plugin is initialised via Javascript.
+
+```js
+$('.o-nav-local').prioritynav();
+```
+
+## Example
+
+Reduce the width of your browser to see overflowing navigation items moved into a nice dropdown menu.
+
+{{< example >}}
+
+
+
+{{< /example >}}
+
+## Options
+
+Used with no parameter, the label 'More' is used as default. For custom labeling use the following:
+
+```js
+$('.o-nav-local').prioritynav('Custom label');
+```
diff --git a/site/docs/4.5/components/progress.md b/site/content/docs/4.5/components/progress.md
similarity index 86%
rename from site/docs/4.5/components/progress.md
rename to site/content/docs/4.5/components/progress.md
index 6cbe1f48cd..1526dc2c39 100644
--- a/site/docs/4.5/components/progress.md
+++ b/site/content/docs/4.5/components/progress.md
@@ -17,7 +17,7 @@ Progress components are built with two HTML elements, some CSS to set the width,
Put that all together, and you have the following examples.
-{% capture example %}
+{{< example >}}
@@ -33,53 +33,49 @@ Put that all together, and you have the following examples.
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
-Boosted provides a handful of [utilities for setting width]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/sizing/). Depending on your needs, these may help with quickly configuring progress.
+Boosted provides a handful of [utilities for setting width]({{< docsref "/utilities/sizing" >}}). Depending on your needs, these may help with quickly configuring progress.
-{% capture example %}
+{{< example >}}
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
## Labels
Add labels to your progress bars by placing text within the `.progress-bar`.
-{% capture example %}
+{{< example >}}
25%
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
-[comment]: # Boosted mod: sizes variants
+
### Sizes
Boosted also provides size variants for progress bar: simply add `.progress-xs` or `.progress-sm`.
-{% capture example %}
+{{< example >}}
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
-[comment]: # End mod
+
## Backgrounds
Use background utility classes to change the appearance of individual progress bars.
-{% capture example %}
+{{< example >}}
@@ -92,27 +88,25 @@ Use background utility classes to change the appearance of individual progress b
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
## Multiple bars
Include multiple progress bars in a progress component if you need.
-{% capture example %}
+{{< example >}}
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
## Striped
Add `.progress-bar-striped` to any `.progress-bar` to apply a stripe via CSS gradient over the progress bar's background color.
-{% capture example %}
+{{< example >}}
@@ -128,8 +122,7 @@ Add `.progress-bar-striped` to any `.progress-bar` to apply a stripe via CSS gra
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
## Animated stripes
@@ -144,8 +137,8 @@ The striped gradient can also be animated. Add `.progress-bar-animated` to `.pro
-{% highlight html %}
+```html
-{% endhighlight %}
+```
diff --git a/site/docs/4.5/components/scroll-up.md b/site/content/docs/4.5/components/scroll-up.md
similarity index 74%
rename from site/docs/4.5/components/scroll-up.md
rename to site/content/docs/4.5/components/scroll-up.md
index 2888ebb8b2..fc03162f05 100644
--- a/site/docs/4.5/components/scroll-up.md
+++ b/site/content/docs/4.5/components/scroll-up.md
@@ -9,22 +9,24 @@ toc: true
## Scroll up auto display
Displays a link at the bottom right of the page after scrolling down one page height.
-Adds a link at the end of the page with the `o-scroll-up` class. The “Back to top” text is only shown on desktop display — but you can change the breakpoint in [the `d-{breakpoint}-inline-block` utility]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/display/). The arrow up icon is added via CSS.
+Adds a link at the end of the page with the `o-scroll-up` class. The "Back to top" text is only shown on desktop display — but you can change the breakpoint in [the `d-{breakpoint}-inline-block` utility]({{< docsref "/utilities/display" >}}). The arrow up icon is added via CSS.
For accessibility reasons, add a `title` to the link that's **consistent** with text content.
-{% highlight html %}
+```html
Back to top
-{% endhighlight %}
+```
## Scroll up static
-Displays a static “Back to top” link, by adding it in the page with the `o-scroll-up` and `static` class.
-{% capture example %}
+
+Displays a static "Back to top" link, by adding it in the page with the `o-scroll-up` and `static` class.
+
+{{< example >}}
Back to top
-{% endcapture %} {% include example.html content=example %}
+{{< /example >}}
## Options
diff --git a/site/docs/4.5/components/scrollspy.md b/site/content/docs/4.5/components/scrollspy.md
similarity index 50%
rename from site/docs/4.5/components/scrollspy.md
rename to site/content/docs/4.5/components/scrollspy.md
index 2958ea25a9..5528bbbcaa 100644
--- a/site/docs/4.5/components/scrollspy.md
+++ b/site/content/docs/4.5/components/scrollspy.md
@@ -10,8 +10,8 @@ toc: true
Scrollspy has a few requirements to function properly:
-- If you're building our JavaScript from source, it [requires `util.js`]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/javascript/#util).
-- It must be used on a Boosted [nav component]({{ site.baseurl }}/docs/{{ site.docs_version }}/components/navs/) or [list group]({{ site.baseurl }}/docs/{{ site.docs_version }}/components/list-group/).
+- If you're building our JavaScript from source, it [requires `util.js`]({{< docsref "/getting-started/javascript#util" >}}).
+- It must be used on a Boosted [nav component]({{< docsref "/components/navs" >}}) or [list group]({{< docsref "/components/list-group" >}}).
- Scrollspy requires `position: relative;` on the element you're spying on, usually the ``.
- When spying on elements other than the ``, be sure to have a `height` set and `overflow-y: scroll;` applied.
- Anchors (``) are required and must point to an element with that `id`.
@@ -24,7 +24,7 @@ Scroll the area below the navbar and watch the active class change. The dropdown
@fat
@@ -45,23 +45,23 @@ Scroll the area below the navbar and watch the active class change. The dropdown
@fat
-
Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.
+
Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.
@mdo
-
Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tattooed cosby sweater food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.
+
Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tattooed cosby sweater food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.
one
-
Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in, sustainable delectus consectetur fanny pack iphone.
+
Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in, sustainable delectus consectetur fanny pack iphone.
two
-
In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.
+
In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.
three
-
Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.
-
Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats you probably haven't heard of them consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat before they sold out, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.
+
Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.
+
Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats you probably haven't heard of them consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat before they sold out, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.
-{% highlight html %}
+```html
-
+
@fat
@@ -92,7 +92,7 @@ Scroll the area below the navbar and watch the active class change. The dropdown
three
...
-{% endhighlight %}
+```
## Example with nested nav
@@ -102,7 +102,7 @@ Scrollspy also works with nested `.nav`s. If a nested `.nav` is `.active`, its p
-
+ Item 1
@@ -121,27 +121,27 @@ Scrollspy also works with nested `.nav`s. If a nested `.nav` is `.active`, its p
Item 1
-
Ex consequat commodo adipisicing exercitation aute excepteur occaecat ullamco duis aliqua id magna ullamco eu. Do aute ipsum ipsum ullamco cillum consectetur ut et aute consectetur labore. Fugiat laborum incididunt tempor eu consequat enim dolore proident. Qui laborum do non excepteur nulla magna eiusmod consectetur in. Aliqua et aliqua officia quis et incididunt voluptate non anim reprehenderit adipisicing dolore ut consequat deserunt mollit dolore. Aliquip nulla enim veniam non fugiat id cupidatat nulla elit cupidatat commodo velit ut eiusmod cupidatat elit dolore.
+
Ex consequat commodo adipisicing exercitation aute excepteur occaecat ullamco duis aliqua id magna ullamco eu. Do aute ipsum ipsum ullamco cillum consectetur ut et aute consectetur labore. Fugiat laborum incididunt tempor eu consequat enim dolore proident. Qui laborum do non excepteur nulla magna eiusmod consectetur in. Aliqua et aliqua officia quis et incididunt voluptate non anim reprehenderit adipisicing dolore ut consequat deserunt mollit dolore. Aliquip nulla enim veniam non fugiat id cupidatat nulla elit cupidatat commodo velit ut eiusmod cupidatat elit dolore.
Item 1-1
-
Amet tempor mollit aliquip pariatur excepteur commodo do ea cillum commodo Lorem et occaecat elit qui et. Aliquip labore ex ex esse voluptate occaecat Lorem ullamco deserunt. Aliqua cillum excepteur irure consequat id quis ea. Sit proident ullamco aute magna pariatur nostrud labore. Reprehenderit aliqua commodo eiusmod aliquip est do duis amet proident magna consectetur consequat eu commodo fugiat non quis. Enim aliquip exercitation ullamco adipisicing voluptate excepteur minim exercitation minim minim commodo adipisicing exercitation officia nisi adipisicing. Anim id duis qui consequat labore adipisicing sint dolor elit cillum anim et fugiat.
+
Amet tempor mollit aliquip pariatur excepteur commodo do ea cillum commodo Lorem et occaecat elit qui et. Aliquip labore ex ex esse voluptate occaecat Lorem ullamco deserunt. Aliqua cillum excepteur irure consequat id quis ea. Sit proident ullamco aute magna pariatur nostrud labore. Reprehenderit aliqua commodo eiusmod aliquip est do duis amet proident magna consectetur consequat eu commodo fugiat non quis. Enim aliquip exercitation ullamco adipisicing voluptate excepteur minim exercitation minim minim commodo adipisicing exercitation officia nisi adipisicing. Anim id duis qui consequat labore adipisicing sint dolor elit cillum anim et fugiat.
Item 1-2
-
Cillum nisi deserunt magna eiusmod qui eiusmod velit voluptate pariatur laborum sunt enim. Irure laboris mollit consequat incididunt sint et culpa culpa incididunt adipisicing magna magna occaecat. Nulla ipsum cillum eiusmod sint elit excepteur ea labore enim consectetur in labore anim. Proident ullamco ipsum esse elit ut Lorem eiusmod dolor et eiusmod. Anim occaecat nulla in non consequat eiusmod velit incididunt.
+
Cillum nisi deserunt magna eiusmod qui eiusmod velit voluptate pariatur laborum sunt enim. Irure laboris mollit consequat incididunt sint et culpa culpa incididunt adipisicing magna magna occaecat. Nulla ipsum cillum eiusmod sint elit excepteur ea labore enim consectetur in labore anim. Proident ullamco ipsum esse elit ut Lorem eiusmod dolor et eiusmod. Anim occaecat nulla in non consequat eiusmod velit incididunt.
Item 2
-
Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris ad sit ipsum anim Lorem. Incididunt veniam velit elit elit veniam Lorem aliqua quis ullamco deserunt sit enim elit aliqua esse irure. Laborum nisi sit est tempor laborum mollit labore officia laborum excepteur commodo non commodo dolor excepteur commodo. Ipsum fugiat ex est consectetur ipsum commodo tempor sunt in proident.
+
Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris ad sit ipsum anim Lorem. Incididunt veniam velit elit elit veniam Lorem aliqua quis ullamco deserunt sit enim elit aliqua esse irure. Laborum nisi sit est tempor laborum mollit labore officia laborum excepteur commodo non commodo dolor excepteur commodo. Ipsum fugiat ex est consectetur ipsum commodo tempor sunt in proident.
Item 3
-
Quis anim sit do amet fugiat dolor velit sit ea ea do reprehenderit culpa duis. Nostrud aliqua ipsum fugiat minim proident occaecat excepteur aliquip culpa aute tempor reprehenderit. Deserunt tempor mollit elit ex pariatur dolore velit fugiat mollit culpa irure ullamco est ex ullamco excepteur.
+
Quis anim sit do amet fugiat dolor velit sit ea ea do reprehenderit culpa duis. Nostrud aliqua ipsum fugiat minim proident occaecat excepteur aliquip culpa aute tempor reprehenderit. Deserunt tempor mollit elit ex pariatur dolore velit fugiat mollit culpa irure ullamco est ex ullamco excepteur.
Item 3-1
-
Deserunt quis elit Lorem eiusmod amet enim enim amet minim Lorem proident nostrud. Ea id dolore anim exercitation aute fugiat labore voluptate cillum do laboris labore. Ex velit exercitation nisi enim labore reprehenderit labore nostrud ut ut. Esse officia sunt duis aliquip ullamco tempor eiusmod deserunt irure nostrud irure. Ullamco proident veniam laboris ea consectetur magna sunt ex exercitation aliquip minim enim culpa occaecat exercitation. Est tempor excepteur aliquip laborum consequat do deserunt laborum esse eiusmod irure proident ipsum esse qui.
+
Deserunt quis elit Lorem eiusmod amet enim enim amet minim Lorem proident nostrud. Ea id dolore anim exercitation aute fugiat labore voluptate cillum do laboris labore. Ex velit exercitation nisi enim labore reprehenderit labore nostrud ut ut. Esse officia sunt duis aliquip ullamco tempor eiusmod deserunt irure nostrud irure. Ullamco proident veniam laboris ea consectetur magna sunt ex exercitation aliquip minim enim culpa occaecat exercitation. Est tempor excepteur aliquip laborum consequat do deserunt laborum esse eiusmod irure proident ipsum esse qui.
Item 3-2
-
Labore sit culpa commodo elit adipisicing sit aliquip elit proident voluptate minim mollit nostrud aute reprehenderit do. Mollit excepteur eu Lorem ipsum anim commodo sint labore Lorem in exercitation velit incididunt. Occaecat consectetur nisi in occaecat proident minim enim sunt reprehenderit exercitation cupidatat et do officia. Aliquip consequat ad labore labore mollit ut amet. Sit pariatur tempor proident in veniam culpa aliqua excepteur elit magna fugiat eiusmod amet officia.
+
Labore sit culpa commodo elit adipisicing sit aliquip elit proident voluptate minim mollit nostrud aute reprehenderit do. Mollit excepteur eu Lorem ipsum anim commodo sint labore Lorem in exercitation velit incididunt. Occaecat consectetur nisi in occaecat proident minim enim sunt reprehenderit exercitation cupidatat et do officia. Aliquip consequat ad labore labore mollit ut amet. Sit pariatur tempor proident in veniam culpa aliqua excepteur elit magna fugiat eiusmod amet officia.
-{% highlight html %}
+```html
-
+ Item 1
@@ -173,7 +173,7 @@ Scrollspy also works with nested `.nav`s. If a nested `.nav` is `.active`, its p
Item 3-2
...
-{% endhighlight %}
+```
## Example with list-group
@@ -192,19 +192,19 @@ Scrollspy also works with `.list-group`s. Scroll the area next to the list group
Item 1
-
Ex consequat commodo adipisicing exercitation aute excepteur occaecat ullamco duis aliqua id magna ullamco eu. Do aute ipsum ipsum ullamco cillum consectetur ut et aute consectetur labore. Fugiat laborum incididunt tempor eu consequat enim dolore proident. Qui laborum do non excepteur nulla magna eiusmod consectetur in. Aliqua et aliqua officia quis et incididunt voluptate non anim reprehenderit adipisicing dolore ut consequat deserunt mollit dolore. Aliquip nulla enim veniam non fugiat id cupidatat nulla elit cupidatat commodo velit ut eiusmod cupidatat elit dolore.
+
Ex consequat commodo adipisicing exercitation aute excepteur occaecat ullamco duis aliqua id magna ullamco eu. Do aute ipsum ipsum ullamco cillum consectetur ut et aute consectetur labore. Fugiat laborum incididunt tempor eu consequat enim dolore proident. Qui laborum do non excepteur nulla magna eiusmod consectetur in. Aliqua et aliqua officia quis et incididunt voluptate non anim reprehenderit adipisicing dolore ut consequat deserunt mollit dolore. Aliquip nulla enim veniam non fugiat id cupidatat nulla elit cupidatat commodo velit ut eiusmod cupidatat elit dolore.
Item 2
-
Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris ad sit ipsum anim Lorem. Incididunt veniam velit elit elit veniam Lorem aliqua quis ullamco deserunt sit enim elit aliqua esse irure. Laborum nisi sit est tempor laborum mollit labore officia laborum excepteur commodo non commodo dolor excepteur commodo. Ipsum fugiat ex est consectetur ipsum commodo tempor sunt in proident.
+
Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris ad sit ipsum anim Lorem. Incididunt veniam velit elit elit veniam Lorem aliqua quis ullamco deserunt sit enim elit aliqua esse irure. Laborum nisi sit est tempor laborum mollit labore officia laborum excepteur commodo non commodo dolor excepteur commodo. Ipsum fugiat ex est consectetur ipsum commodo tempor sunt in proident.
Item 3
-
Quis anim sit do amet fugiat dolor velit sit ea ea do reprehenderit culpa duis. Nostrud aliqua ipsum fugiat minim proident occaecat excepteur aliquip culpa aute tempor reprehenderit. Deserunt tempor mollit elit ex pariatur dolore velit fugiat mollit culpa irure ullamco est ex ullamco excepteur.
+
Quis anim sit do amet fugiat dolor velit sit ea ea do reprehenderit culpa duis. Nostrud aliqua ipsum fugiat minim proident occaecat excepteur aliquip culpa aute tempor reprehenderit. Deserunt tempor mollit elit ex pariatur dolore velit fugiat mollit culpa irure ullamco est ex ullamco excepteur.
Item 4
-
Quis anim sit do amet fugiat dolor velit sit ea ea do reprehenderit culpa duis. Nostrud aliqua ipsum fugiat minim proident occaecat excepteur aliquip culpa aute tempor reprehenderit. Deserunt tempor mollit elit ex pariatur dolore velit fugiat mollit culpa irure ullamco est ex ullamco excepteur.
+
Quis anim sit do amet fugiat dolor velit sit ea ea do reprehenderit culpa duis. Nostrud aliqua ipsum fugiat minim proident occaecat excepteur aliquip culpa aute tempor reprehenderit. Deserunt tempor mollit elit ex pariatur dolore velit fugiat mollit culpa irure ullamco est ex ullamco excepteur.
-{% highlight html %}
+```html
Item 1Item 2
@@ -221,7 +221,7 @@ Scrollspy also works with `.list-group`s. Scroll the area next to the list group
Item 4
...
-{% endhighlight %}
+```
## Usage
@@ -230,13 +230,13 @@ Scrollspy also works with `.list-group`s. Scroll the area next to the list group
To easily add scrollspy behavior to your topbar navigation, add `data-spy="scroll"` to the element you want to spy on (most typically this would be the ``). Then add the `data-target` attribute with the ID or class of the parent element of any Boosted `.nav` component.
-{% highlight css %}
+```css
body {
position: relative;
}
-{% endhighlight %}
+```
-{% highlight html %}
+```html
...
@@ -246,29 +246,27 @@ body {
...
-{% endhighlight %}
+```
### Via JavaScript
After adding `position: relative;` in your CSS, call the scrollspy via JavaScript:
-{% highlight js %}
+```js
$('body').scrollspy({ target: '#navbar-example' })
-{% endhighlight %}
+```
-{% capture callout %}
+{{< callout danger >}}
#### Resolvable ID targets required
Navbar links must have resolvable id targets. For example, a `home` must correspond to something in the DOM like ``.
-{% endcapture %}
-{% include callout.html content=callout type="danger" %}
+{{< /callout >}}
-{% capture callout %}
+{{< callout info >}}
#### Non-`:visible` target elements ignored
Target elements that are not [`:visible` according to jQuery](https://api.jquery.com/visible-selector/) will be ignored and their corresponding nav items will never be highlighted.
-{% endcapture %}
-{% include callout.html content=callout type="info" %}
+{{< /callout >}}
### Methods
@@ -276,11 +274,11 @@ Target elements that are not [`:visible` according to jQuery](https://api.jquery
When using scrollspy in conjunction with adding or removing of elements from the DOM, you'll need to call the refresh method like so:
-{% highlight js %}
+```js
$('[data-spy="scroll"]').each(function () {
var $spy = $(this).scrollspy('refresh')
})
-{% endhighlight %}
+```
#### `.scrollspy('dispose')`
@@ -338,8 +336,8 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
-{% highlight js %}
+```js
$('[data-spy="scroll"]').on('activate.bs.scrollspy', function () {
// do something...
})
-{% endhighlight %}
+```
diff --git a/site/docs/4.5/components/spinners.md b/site/content/docs/4.5/components/spinners.md
similarity index 69%
rename from site/docs/4.5/components/spinners.md
rename to site/content/docs/4.5/components/spinners.md
index 18b80e1b13..f81849189f 100644
--- a/site/docs/4.5/components/spinners.md
+++ b/site/content/docs/4.5/components/spinners.md
@@ -12,24 +12,25 @@ Boosted "spinners" can be used to show the loading state in your projects. They'
For accessibility purposes, each loader here includes `role="status"` and a nested `Loading...`.
-{% include callout-info-prefersreducedmotion.md %}
+{{< callout info >}}
+{{< partial "callout-info-prefersreducedmotion.md" >}}
+{{< /callout >}}
## Border spinner
Use the border spinners for a lightweight loading indicator.
-{% capture example %}
+{{< example >}}
Loading...
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
### Colors
The border spinner uses `currentColor` for its `border-color`, meaning you can customize the color with [text color utilities][color]. You can use any of our text color utilities on the standard spinner.
-{% capture example %}
+{{< example >}}
Loading...
@@ -39,28 +40,25 @@ The border spinner uses `currentColor` for its `border-color`, meaning you can c
Loading...
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
-{% capture callout %}
+{{< callout info >}}
**Why not use `border-color` utilities?** Each border spinner specifies a `transparent` border for at least one side, so `.border-{color}` utilities would override that.
-{% endcapture %}
-{% include callout.html content=callout type="info" %}
+{{< /callout >}}
## Growing spinner
If you don't fancy a border spinner, switch to the grow spinner. While it doesn't technically spin, it does repeatedly grow!
-{% capture example %}
+{{< example >}}
Loading...
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
-Once again, this spinner is built with `currentColor`, so you can easily change its appearance with [text color utilities][color].
+Once again, this spinner is built with `currentColor`, so you can easily change its appearance with [text color utilities]({{< docsref "/utilities/colors" >}}).
-{% capture example %}
+{{< example >}}
Loading...
@@ -70,8 +68,7 @@ Once again, this spinner is built with `currentColor`, so you can easily change
Loading...
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
## Alignment
@@ -79,93 +76,84 @@ Spinners in Boosted are built with `rem`s, `currentColor`, and `display: inline-
### Margin
-Use [margin utilities][margin] like `.m-5` for easy spacing.
+Use [margin utilities]({{< docsref "/utilities/spacing" >}}) like `.m-5` for easy spacing.
-{% capture example %}
+{{< example >}}
Loading...
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
### Placement
-Use [flexbox utilities][flex], [float utilities][float], or [text alignment][text] utilities to place spinners exactly where you need them in any situation.
+Use [flexbox utilities]({{< docsref "/utilities/flex" >}}), [float utilities]({{< docsref "/utilities/float" >}}), or [text alignment]({{< docsref "/utilities/text" >}}) utilities to place spinners exactly where you need them in any situation.
#### Flex
-{% capture example %}
+{{< example >}}
Loading...
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
-{% capture example %}
+{{< example >}}
Loading...
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
#### Floats
-{% capture example %}
+{{< example >}}
Loading...
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
#### Text align
-{% capture example %}
+{{< example >}}
Loading...
-{% endcapture %}
-{% include example.html content=example %}
-
-[comment]: # Boosted mod: `.spinner-*-lg`
+{{< /example >}}
## Size
Add `.spinner-border-sm` and `.spinner-grow-sm` to make a smaller spinner that can quickly be used within other components.
-{% capture example %}
+{{< example >}}
Loading...
Loading...
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
Add `.spinner-border-lg` and `.spinner-grow-lg` to make a taller spinner, too.
-{% capture example %}
+{{< example >}}
Loading...
Loading...
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
## Buttons
Use spinners within buttons to indicate an action is currently processing or taking place. You may also swap the text out of the spinner element and utilize button text as needed.
-{% capture example %}
+{{< example >}}
Loading...
@@ -174,10 +162,9 @@ Use spinners within buttons to indicate an action is currently processing or tak
Loading...
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
-{% capture example %}
+{{< example >}}
Loading...
@@ -186,14 +173,12 @@ Use spinners within buttons to indicate an action is currently processing or tak
Loading...
-{% endcapture %}
-{% include example.html content=example %}
-
-
-[color]: {{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/colors/
-[display]: {{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/display/
-[flex]: {{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/flex/
-[float]: {{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/float/
-[margin]: {{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/spacing/
-[sizing]: {{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/sizing/
-[text]: {{ site.baseurl }}/docs/{{ site.docs_version }}/content/typography/
+{{< /example >}}
+
+[color]: {{< docsref "/utilities/colors" >}}
+[display]: {{< docsref "/utilities/display" >}}
+[flex]: {{< docsref "/utilities/flex" >}}
+[float]: {{< docsref "/utilities/float" >}}
+[margin]: {{< docsref "/utilities/spacing" >}}
+[sizing]: {{< docsref "/utilities/sizing" >}}
+[text]: {{< docsref "/content/typography" >}}
diff --git a/site/content/docs/4.5/components/stepbar.md b/site/content/docs/4.5/components/stepbar.md
new file mode 100644
index 0000000000..57e41ca549
--- /dev/null
+++ b/site/content/docs/4.5/components/stepbar.md
@@ -0,0 +1,40 @@
+---
+layout: docs
+title: Stepped process
+description: Stepped process bar used for multiple steps forms process
+group: components
+toc: true
+---
+
+## How to use
+
+Use a `nav` element with `.o-stepbar` class, containing an ordered list `` with `.stepbar-item` class on list items.
+
+Be careful to choose short labels when using multiple steps process, otherwise label will be cut to preserve inline layout. More information can be carried on the `title` attribute of the `.stepbar-link`.
+
+Use `.current` class to define current step, alongwith with `aria-current="step"`.
+
+## Example
+
+{{< example >}}
+
+
+
+
+{{< /example >}}
diff --git a/site/docs/4.5/components/toasts.md b/site/content/docs/4.5/components/toasts.md
similarity index 81%
rename from site/docs/4.5/components/toasts.md
rename to site/content/docs/4.5/components/toasts.md
index e2e942e484..014085785c 100644
--- a/site/docs/4.5/components/toasts.md
+++ b/site/content/docs/4.5/components/toasts.md
@@ -12,12 +12,14 @@ Toasts are lightweight notifications designed to mimic the push notifications th
Things to know when using the toast plugin:
-- If you're building our JavaScript from source, it [requires `util.js`]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/javascript/#util).
+- If you're building our JavaScript from source, it [requires `util.js`]({{< docsref "/getting-started/javascript#util" >}}).
- Toasts are opt-in for performance reasons, so **you must initialize them yourself**.
- **Please note that you are responsible for positioning toasts.**
- Toasts will automatically hide if you do not specify `autohide: false`.
-{% include callout-info-prefersreducedmotion.md %}
+{{< callout info >}}
+{{< partial "callout-info-prefersreducedmotion.md" >}}
+{{< /callout >}}
## Examples
@@ -27,10 +29,10 @@ To encourage extensible and predictable toasts, we recommend a header and body.
Toasts are as flexible as you need and have very little required markup. At a minimum, we require a single element to contain your "toasted" content and strongly encourage a dismiss button.
-{% capture example %}
+{{< example class="bg-light" >}}
- {% include icons/placeholder.svg width="20" height="20" background="#f16e00" class="rounded mr-2" text=" " title=" " %}
+ {{< placeholder width="20" height="20" background="#f16e00" class="mr-2" text=" " title=" " >}}
Boosted
11 mins ago
@@ -43,17 +45,16 @@ Toasts are as flexible as you need and have very little required markup. At a mi
Hello, world! This is a toast message.
-{% endcapture %}
-{% include example.html content=example class="bg-light" %}
+{{< /example >}}
### Translucent
Toasts are slightly translucent, too, so they blend over whatever they might appear over. For browsers that support the `backdrop-filter` CSS property, we'll also attempt to blur the elements under a toast.
-{% capture example %}
+{{< example class="bg-light" >}}
- {% include icons/placeholder.svg width="20" height="20" background="#f16e00" class="rounded mr-2" text=" " title=" " %}
+ {{< placeholder width="20" height="20" background="#f16e00" class="mr-2" text=" " title=" " >}}
Boosted
11 mins ago
@@ -66,17 +67,16 @@ Toasts are slightly translucent, too, so they blend over whatever they might app
Hello, world! This is a toast message.
-{% endcapture %}
-{% include example.html content=example class="bg-dark" %}
+{{< /example >}}
### Stacking
When you have multiple toasts, we default to vertically stacking them in a readable manner.
-{% capture example %}
+{{< example class="bg-light" >}}
- {% include icons/placeholder.svg width="20" height="20" background="#f16e00" class="rounded mr-2" text=" " title=" " %}
+ {{< placeholder width="20" height="20" background="#f16e00" class="mr-2" text=" " title=" " >}}
Boosted
just now
@@ -92,8 +92,8 @@ When you have multiple toasts, we default to vertically stacking them in a reada
- {% include icons/placeholder.svg width="20" height="20" background="#007aff" class="rounded mr-2" text=" " title=" " %}
- Bootstrap
+ {{< placeholder width="20" height="20" background="#007aff" class="mr-2" text=" " title=" " >}}
+ Boosted
2 seconds ago
@@ -105,18 +105,17 @@ When you have multiple toasts, we default to vertically stacking them in a reada
Heads up, toasts will stack automatically
-{% endcapture %}
-{% include example.html content=example class="bg-light" %}
+{{< /example >}}
## Placement
Place toasts with custom CSS as you need them. The top right is often used for notifications, as is the top middle. If you're only ever going to show one toast at a time, put the positioning styles right on the `.toast`.
-{% capture example %}
+{{< example class="bg-light" >}}
- {% include icons/placeholder.svg width="20" height="20" background="#f16e00" class="rounded mr-2" text=" " title=" " %}
+ {{< placeholder width="20" height="20" background="#f16e00" class="mr-2" text=" " title=" " >}}
Boosted
11 mins ago
@@ -130,12 +129,11 @@ Place toasts with custom CSS as you need them. The top right is often used for n
-{% endcapture %}
-{% include example.html content=example class="bg-dark" %}
+{{< /example >}}
For systems that generate more notifications, consider using a wrapping element so they can easily stack.
-{% capture example %}
+{{< example class="bg-light" >}}
@@ -143,7 +141,7 @@ For systems that generate more notifications, consider using a wrapping element
- {% include icons/placeholder.svg width="20" height="20" background="#f16e00" class="rounded mr-2" text=" " title=" " %}
+ {{< placeholder width="20" height="20" background="#f16e00" class="mr-2" text=" " title=" " >}}
Boosted
just now
@@ -159,7 +157,7 @@ For systems that generate more notifications, consider using a wrapping element
- {% include icons/placeholder.svg width="20" height="20" background="#f16e00" class="rounded mr-2" text=" " title=" " %}
+ {{< placeholder width="20" height="20" background="#f16e00" class="mr-2" text=" " title=" " >}}
Boosted
2 seconds ago
@@ -174,19 +172,18 @@ For systems that generate more notifications, consider using a wrapping element
-{% endcapture %}
-{% include example.html content=example class="bg-dark" %}
+{{< /example >}}
You can also get fancy with flexbox utilities to align toasts horizontally and/or vertically.
-{% capture example %}
+{{< example class="bg-light" >}}
- {% include icons/placeholder.svg width="20" height="20" background="#f16e00" class="rounded mr-2" text=" " title=" " %}
+ {{< placeholder width="20" height="20" background="#f16e00" class="mr-2" text=" " title=" " >}}
Boosted
11 mins ago
@@ -200,12 +197,11 @@ You can also get fancy with flexbox utilities to align toasts horizontally and/o
-{% endcapture %}
-{% include example.html content=example class="bg-dark" %}
+{{< /example >}}
## Accessibility
-Toasts are intended to be small interruptions to your visitors or users, so to help those with screen readers and similar assistive technologies, you should wrap your toasts in an [`aria-live` region](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions). Changes to live regions (such as injecting/updating a toast component) are automatically announced by screen readers without needing to move the user's focus or otherwise interrupt the user. Additionally, include `aria-atomic="true"` to ensure that the entire toast is always announced as a single (atomic) unit, rather than announcing what was changed (which could lead to problems if you only update part of the toast's content, or if displaying the same toast content at a later point in time). If the information needed is important for the process, e.g. for a list of errors in a form, then use the [alert component]({{ site.baseurl }}/docs/{{ site.docs_version }}/components/alerts/) instead of toast.
+Toasts are intended to be small interruptions to your visitors or users, so to help those with screen readers and similar assistive technologies, you should wrap your toasts in an [`aria-live` region](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions). Changes to live regions (such as injecting/updating a toast component) are automatically announced by screen readers without needing to move the user's focus or otherwise interrupt the user. Additionally, include `aria-atomic="true"` to ensure that the entire toast is always announced as a single (atomic) unit, rather than announcing what was changed (which could lead to problems if you only update part of the toast's content, or if displaying the same toast content at a later point in time). If the information needed is important for the process, e.g. for a list of errors in a form, then use the [alert component]({{< docsref "/components/alerts" >}}) instead of toast.
Note that the live region needs to be present in the markup *before* the toast is generated or updated. If you dynamically generate both at the same time and inject them into the page, they will generally not be announced by assistive technologies.
@@ -213,18 +209,18 @@ You also need to adapt the `role` and `aria-live` level depending on the content
As the content you're displaying changes, be sure to update the [`delay` timeout](#options) to ensure people have enough time to read the toast.
-{% highlight html %}
+```html
...
-{% endhighlight %}
+```
When using `autohide: false`, you must add a close button to allow users to dismiss the toast.
-{% capture example %}
+{{< example class="bg-light" >}}
- {% include icons/placeholder.svg width="20" height="20" background="#f16e00" class="rounded mr-2" text=" " title=" " %}
+ {{< placeholder width="20" height="20" background="#f16e00" class="mr-2" text=" " title=" " >}}
Boosted
11 mins ago
@@ -237,8 +233,7 @@ When using `autohide: false`, you must add a close button to allow users to dism
Hello, world! This is a toast message.
-{% endcapture %}
-{% include example.html content=example class="bg-light" %}
+{{< /example >}}
## JavaScript behavior
@@ -246,9 +241,9 @@ When using `autohide: false`, you must add a close button to allow users to dism
Initialize toasts via JavaScript:
-{% highlight js %}
+```js
$('.toast').toast(option)
-{% endhighlight %}
+```
### Options
@@ -289,7 +284,9 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
### Methods
-{% include callout-danger-async-methods.md %}
+{{< callout danger >}}
+{{< partial "callout-danger-async-methods.md" >}}
+{{< /callout >}}
#### `$().toast(options)`
@@ -300,19 +297,25 @@ Attaches a toast handler to an element collection.
Reveals an element's toast. **Returns to the caller before the toast has actually been shown** (i.e. before the `shown.bs.toast` event occurs).
You have to manually call this method, instead your toast won't show.
-{% highlight js %}$('#element').toast('show'){% endhighlight %}
+```js
+$('#element').toast('show')
+```
#### `.toast('hide')`
Hides an element's toast. **Returns to the caller before the toast has actually been hidden** (i.e. before the `hidden.bs.toast` event occurs). You have to manually call this method if you made `autohide` to `false`.
-{% highlight js %}$('#element').toast('hide'){% endhighlight %}
+```js
+$('#element').toast('hide')
+```
#### `.toast('dispose')`
Hides an element's toast. Your toast will remain on the DOM but won't show anymore.
-{% highlight js %}$('#element').toast('dispose'){% endhighlight %}
+```js
+$('#element').toast('dispose')
+```
### Events
@@ -343,8 +346,8 @@ Hides an element's toast. Your toast will remain on the DOM but won't show anymo
-{% highlight js %}
+```js
$('#myToast').on('hidden.bs.toast', function () {
// do something...
})
-{% endhighlight %}
+```
diff --git a/site/docs/4.5/components/tooltips.md b/site/content/docs/4.5/components/tooltips.md
similarity index 85%
rename from site/docs/4.5/components/tooltips.md
rename to site/content/docs/4.5/components/tooltips.md
index 68d58b0117..b2b70bfe5d 100644
--- a/site/docs/4.5/components/tooltips.md
+++ b/site/content/docs/4.5/components/tooltips.md
@@ -10,8 +10,8 @@ toc: true
Things to know when using the tooltip plugin:
-- Tooltips rely on the 3rd party library [Popper.js](https://popper.js.org/) for positioning. You must include [popper.min.js]({{ site.cdn.popper }}) before boosted.js or use `boosted.bundle.min.js` / `boosted.bundle.js` which contains Popper.js in order for tooltips to work!
-- If you're building our JavaScript from source, it [requires `util.js`]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/javascript/#util).
+- Tooltips rely on the 3rd party library [Popper](https://popper.js.org/) for positioning. You must include [popper.min.js]({{< param "cdn.popper" >}}) before boosted.js or use `boosted.bundle.min.js` / `boosted.bundle.js` which contains Popper.js in order for tooltips to work!
+- If you're building our JavaScript from source, it [requires `util.js`]({{< docsref "/getting-started/javascript#util" >}}).
- Tooltips are opt-in for performance reasons, so **you must initialize them yourself**.
- Tooltips with zero-length titles are never displayed.
- Specify `container: 'body'` to avoid rendering problems in more complex components (like our input groups, button groups, etc).
@@ -21,7 +21,9 @@ Things to know when using the tooltip plugin:
- Tooltips must be hidden before their corresponding elements have been removed from the DOM.
- Tooltips can be triggered thanks to an element inside a shadow DOM.
-{% include callout-info-prefersreducedmotion.md %}
+{{< callout info >}}
+{{< partial "callout-info-prefersreducedmotion.md" >}}
+{{< /callout >}}
Got all that? Great, let's see how they work with some examples.
@@ -29,11 +31,11 @@ Got all that? Great, let's see how they work with some examples.
One way to initialize all tooltips on a page would be to select them by their `data-toggle` attribute:
-{% highlight js %}
+```js
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
-{% endhighlight %}
+```
## Examples
@@ -56,7 +58,7 @@ Hover over the buttons below to see the four tooltips directions: top, right, bo
-{% highlight html %}
+```html
Tooltip on top
@@ -69,15 +71,15 @@ Hover over the buttons below to see the four tooltips directions: top, right, bo
Tooltip on left
-{% endhighlight %}
+```
And with custom HTML added:
-{% highlight html %}
+```html
Tooltip with HTML
-{% endhighlight %}
+```
## Usage
@@ -85,33 +87,31 @@ The tooltip plugin generates content and markup on demand, and by default places
Trigger the tooltip via JavaScript:
-{% highlight js %}
+```js
$('#example').tooltip(options)
-{% endhighlight %}
+```
-{% capture callout %}
+{{< callout warning >}}
##### Overflow `auto` and `scroll`
Tooltip position attempts to automatically change when a parent container has `overflow: auto` or `overflow: scroll` like our `.table-responsive`, but still keeps the original placement's positioning. To resolve, set the `boundary` option to anything other than default value, `'scrollParent'`, such as `'window'`:
-{% highlight js %}
+```js
$('#example').tooltip({ boundary: 'window' })
-{% endhighlight %}
-{% endcapture %}
-{% include callout.html content=callout type="warning" %}
+```
+{{< /callout >}}
### Markup
The required markup for a tooltip is only a `data` attribute and `title` on the HTML element you wish to have a tooltip. The generated markup of a tooltip is rather simple, though it does require a position (by default, set to `top` by the plugin).
-{% capture callout %}
+{{< callout warning >}}
##### Making tooltips work for keyboard and assistive technology users
You should only add tooltips to HTML elements that are traditionally keyboard-focusable and interactive (such as links or form controls). Although arbitrary HTML elements (such as ``s) can be made focusable by adding the `tabindex="0"` attribute, this will add potentially annoying and confusing tab stops on non-interactive elements for keyboard users, and most assistive technologies currently do not announce the tooltip in this situation. Additionally, do not rely solely on `hover` as the trigger for your tooltip, as this will make your tooltips impossible to trigger for keyboard users.
-{% endcapture %}
-{% include callout.html content=callout type="warning" %}
+{{< /callout >}}
-{% highlight html %}
+```html
Hover over me
@@ -122,29 +122,27 @@ You should only add tooltips to HTML elements that are traditionally keyboard-fo
Some tooltip text!
-{% endhighlight %}
+```
### Disabled elements
Elements with the `disabled` attribute aren't interactive, meaning users cannot focus, hover, or click them to trigger a tooltip (or popover). As a workaround, you'll want to trigger the tooltip from a wrapper `
` or ``, ideally made keyboard-focusable using `tabindex="0"`, and override the `pointer-events` on the disabled element.
-{% capture example %}
+{{< example >}}
Disabled button
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
### Options
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-`, as in `data-animation=""`.
-{% capture callout %}
+{{< callout warning >}}
Note that for security reasons the `sanitize`, `sanitizeFn` and `whiteList` options cannot be supplied using data attributes.
-{% endcapture %}
-{% include callout.html content=callout type="warning" %}
+{{< /callout >}}
@@ -203,7 +201,7 @@ Note that for security reasons the `sanitize`, `sanitizeFn` and `whiteList` opti
selector
string | false
false
-
If a selector is provided, tooltip objects will be delegated to the specified targets. In practice, this is used to also apply tooltips to dynamically added DOM elements (jQuery.on support). See this and an informative example.
+
If a selector is provided, tooltip objects will be delegated to the specified targets. In practice, this is used to also apply tooltips to dynamically added DOM elements (jQuery.on support). See this and an informative example.
template
@@ -242,7 +240,7 @@ Note that for security reasons the `sanitize`, `sanitizeFn` and `whiteList` opti
Offset of the tooltip relative to its target.
When a function is used to determine the offset, it is called with an object containing the offset data as its first argument. The function must return an object with the same structure. The triggering element DOM node is passed as the second argument.
-
For more information refer to Popper.js's offset docs.
+
For more information refer to Popper's offset docs.
@@ -250,13 +248,22 @@ Note that for security reasons the `sanitize`, `sanitizeFn` and `whiteList` opti
string | array
'flip'
Allow to specify which position Popper will use on fallback. For more information refer to
- Popper.js's behavior docs
Add classes to the tooltip when it is shown. Note that these classes will be added in addition to any classes specified in the template. To add multiple classes, separate them with spaces: 'a b'.
+
You can also pass a function that should return a single string containing additional class names.
+
boundary
string | element
'scrollParent'
-
Overflow constraint boundary of the tooltip. Accepts the values of 'viewport', 'window', 'scrollParent', or an HTMLElement reference (JavaScript only). For more information refer to Popper.js's preventOverflow docs.
+
Overflow constraint boundary of the tooltip. Accepts the values of 'viewport', 'window', 'scrollParent', or an HTMLElement reference (JavaScript only). For more information refer to Popper's preventOverflow docs.
sanitize
@@ -267,7 +274,7 @@ Note that for security reasons the `sanitize`, `sanitizeFn` and `whiteList` opti
-{% capture callout %}
+{{< callout info >}}
#### Data attributes for individual tooltips
Options for individual tooltips can alternatively be specified through the use of data attributes, as explained above.
-{% endcapture %}
-{% include callout.html content=callout type="info" %}
+{{< /callout >}}
### Methods
-{% include callout-danger-async-methods.md %}
+{{< callout danger >}}
+{{< partial "callout-danger-async-methods.md" >}}
+{{< /callout >}}
#### `$().tooltip(options)`
@@ -304,49 +312,65 @@ Attaches a tooltip handler to an element collection.
Reveals an element's tooltip. **Returns to the caller before the tooltip has actually been shown** (i.e. before the `shown.bs.tooltip` event occurs). This is considered a "manual" triggering of the tooltip. Tooltips with zero-length titles are never displayed.
-{% highlight js %}$('#element').tooltip('show'){% endhighlight %}
+```js
+$('#element').tooltip('show')
+```
#### `.tooltip('hide')`
Hides an element's tooltip. **Returns to the caller before the tooltip has actually been hidden** (i.e. before the `hidden.bs.tooltip` event occurs). This is considered a "manual" triggering of the tooltip.
-{% highlight js %}$('#element').tooltip('hide'){% endhighlight %}
+```js
+$('#element').tooltip('hide')
+```
#### `.tooltip('toggle')`
Toggles an element's tooltip. **Returns to the caller before the tooltip has actually been shown or hidden** (i.e. before the `shown.bs.tooltip` or `hidden.bs.tooltip` event occurs). This is considered a "manual" triggering of the tooltip.
-{% highlight js %}$('#element').tooltip('toggle'){% endhighlight %}
+```js
+$('#element').tooltip('toggle')
+```
#### `.tooltip('dispose')`
Hides and destroys an element's tooltip. Tooltips that use delegation (which are created using [the `selector` option](#options)) cannot be individually destroyed on descendant trigger elements.
-{% highlight js %}$('#element').tooltip('dispose'){% endhighlight %}
+```js
+$('#element').tooltip('dispose')
+```
#### `.tooltip('enable')`
Gives an element's tooltip the ability to be shown. **Tooltips are enabled by default.**
-{% highlight js %}$('#element').tooltip('enable'){% endhighlight %}
+```js
+$('#element').tooltip('enable')
+```
#### `.tooltip('disable')`
Removes the ability for an element's tooltip to be shown. The tooltip will only be able to be shown if it is re-enabled.
-{% highlight js %}$('#element').tooltip('disable'){% endhighlight %}
+```js
+$('#element').tooltip('disable')
+```
#### `.tooltip('toggleEnabled')`
Toggles the ability for an element's tooltip to be shown or hidden.
-{% highlight js %}$('#element').tooltip('toggleEnabled'){% endhighlight %}
+```js
+$('#element').tooltip('toggleEnabled')
+```
#### `.tooltip('update')`
Updates the position of an element's tooltip.
-{% highlight js %}$('#element').tooltip('update'){% endhighlight %}
+```js
+$('#element').tooltip('update')
+```
### Events
@@ -381,8 +405,8 @@ Updates the position of an element's tooltip.
-{% highlight js %}
+```js
$('#myTooltip').on('hidden.bs.tooltip', function () {
// do something...
})
-{% endhighlight %}
+```
diff --git a/site/docs/4.5/content/code.md b/site/content/docs/4.5/content/code.md
similarity index 75%
rename from site/docs/4.5/content/code.md
rename to site/content/docs/4.5/content/code.md
index d8c7ec6fa3..4be4c9705f 100644
--- a/site/docs/4.5/content/code.md
+++ b/site/content/docs/4.5/content/code.md
@@ -10,46 +10,41 @@ toc: true
Wrap inline snippets of code with ``. Be sure to escape HTML angle brackets.
-{% capture example %}
+{{< example >}}
For example, <section> should be wrapped as inline.
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
## Code blocks
Use `
`s for multiple lines of code. Once again, be sure to escape any angle brackets in the code for proper rendering. You may optionally add the `.pre-scrollable` class, which will set a max-height of 340px and provide a y-axis scrollbar.
-{% capture example %}
+{{< example >}}
<p>Sample text here...</p>
<p>And another line of sample text here...</p>
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
## Variables
For indicating variables use the `` tag.
-{% capture example %}
+{{< example >}}
y = mx + b
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
## User input
Use the `` to indicate input that is typically entered via keyboard.
-{% capture example %}
+{{< example >}}
To switch directories, type cd followed by the name of the directory.
To edit settings, press ctrl + ,
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
## Sample output
For indicating sample output from a program use the `` tag.
-{% capture example %}
+{{< example >}}
This text is meant to be treated as sample output from a computer program.
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
diff --git a/site/docs/4.5/content/figures.md b/site/content/docs/4.5/content/figures.md
similarity index 66%
rename from site/docs/4.5/content/figures.md
rename to site/content/docs/4.5/content/figures.md
index 0d0aadc084..821f18cf8f 100644
--- a/site/docs/4.5/content/figures.md
+++ b/site/content/docs/4.5/content/figures.md
@@ -9,20 +9,18 @@ Anytime you need to display a piece of content—like an image with an optional
Use the included `.figure` , `.figure-img` and `.figure-caption` classes to provide some baseline styles for the HTML5 `
` and `` elements. Images in figures have no explicit size, so be sure to add the `.img-fluid` class to your `` to make it responsive.
-{% capture example %}
+{{< example >}}
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
-Aligning the figure's caption is easy with our [text utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/text/#text-alignment).
+Aligning the figure's caption is easy with our [text utilities]({{< docsref "/utilities/text#text-alignment" >}}).
-{% capture example %}
+{{< example >}}
-{% endcapture %}
-{% include example.html content=example %}
+{{< /example >}}
diff --git a/site/content/docs/4.5/content/images.md b/site/content/docs/4.5/content/images.md
new file mode 100644
index 0000000000..7eb852af55
--- /dev/null
+++ b/site/content/docs/4.5/content/images.md
@@ -0,0 +1,60 @@
+---
+layout: docs
+title: Images
+description: Documentation and examples for opting images into responsive behavior (so they never become larger than their parent elements) and add lightweight styles to them—all via classes.
+group: content
+toc: true
+---
+
+## Responsive images
+
+Images in Boosted are made responsive with `.img-fluid`. `max-width: 100%;` and `height: auto;` are applied to the image so that it scales with the parent element.
+
+{{< example >}}
+{{< placeholder width="100%" height="250" class="bd-placeholder-img-lg img-fluid" text="Responsive image" >}}
+{{< /example >}}
+
+{{< callout warning >}}
+##### SVG images and Internet Explorer
+
+In Internet Explorer 10 and 11, SVG images with `.img-fluid` are disproportionately sized. To fix this, add `width: 100%;` or `.w-100` where necessary. This fix improperly sizes other image formats, so Boosted doesn't apply it automatically.
+{{< /callout >}}
+
+## Image thumbnails
+
+In addition to our [border-radius utilities]({{< docsref "/utilities/borders" >}}), you can use `.img-thumbnail` to give an image a rounded 1px border appearance.
+
+{{< example >}}
+{{< placeholder width="200" height="200" class="img-thumbnail" title="A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera" >}}
+{{< /example >}}
+
+## Aligning images
+
+Align images with the [helper float classes]({{< docsref "/utilities/float" >}}) or [text alignment classes]({{< docsref "/utilities/text#text-alignment" >}}). `block`-level images can be centered using [the `.mx-auto` margin utility class]({{< docsref "/utilities/spacing#horizontal-centering" >}}).
+
+{{< example >}}
+{{< placeholder width="200" height="200" class="rounded float-left" >}}
+{{< placeholder width="200" height="200" class="rounded float-right" >}}
+{{< /example >}}
+
+{{< example >}}
+{{< placeholder width="200" height="200" class="rounded mx-auto d-block" >}}
+{{< /example >}}
+
+{{< example >}}
+