From 8a3540803015cf9e1a9406ad7ffbfb264ac72ec9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20D=C3=A9ramond?= Date: Wed, 4 Jan 2023 22:38:45 +0100 Subject: [PATCH] Docs: replace `twbs/bootstrap-npm-starter` by `twbs/examples/tree/main/icons-font` (#37671) * Docs: replace twbs/bootstrap-npm-starter by twbs/examples/tree/main/icons-font * Revamp starter template to use new .icon-link, fix Bootstrap icon and text at top * Remove extra CSS file * Change links to twbs/examples * Fix icon name * Adjust icon link offset to more reasonable and scaling distance Co-authored-by: Mark Otto --- scss/helpers/_icon-link.scss | 2 +- .../5.3/examples/starter-template/index.html | 87 +++++++++++++++---- .../starter-template/starter-template.css | 9 -- .../partials/callouts/info-npm-starter.md | 2 +- site/layouts/partials/footer.html | 2 +- site/layouts/partials/home/get-started.html | 2 +- 6 files changed, 75 insertions(+), 29 deletions(-) delete mode 100644 site/content/docs/5.3/examples/starter-template/starter-template.css diff --git a/scss/helpers/_icon-link.scss b/scss/helpers/_icon-link.scss index 712dd02c72..501184e78f 100644 --- a/scss/helpers/_icon-link.scss +++ b/scss/helpers/_icon-link.scss @@ -3,7 +3,7 @@ gap: .375rem; align-items: center; text-decoration-color: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-opacity, .5)); - text-underline-offset: .5rem; + text-underline-offset: .25em; backface-visibility: hidden; > .bi { diff --git a/site/content/docs/5.3/examples/starter-template/index.html b/site/content/docs/5.3/examples/starter-template/index.html index 5a898a44d8..9af5a02fd8 100644 --- a/site/content/docs/5.3/examples/starter-template/index.html +++ b/site/content/docs/5.3/examples/starter-template/index.html @@ -1,20 +1,28 @@ --- layout: examples title: Starter Template -extra_css: - - "starter-template.css" --- + + + + + + Bootstrap + + + +
- - Bootstrap + + Starter template
-

Get started with Bootstrap

+

Get started with Bootstrap

Quickly and easily get started with Bootstrap's compiled, production-ready files with this barebones example featuring some basic HTML and helpful links. Download all our examples to get started.

@@ -25,23 +33,70 @@ extra_css:
-

Starter projects

+

Starter projects

Ready to beyond the starter template? Check out these open source projects that you can quickly duplicate to a new GitHub repository.

-
-

Guides

+

Guides

Read more detailed instructions and documentation on using or contributing to Bootstrap.

-
diff --git a/site/content/docs/5.3/examples/starter-template/starter-template.css b/site/content/docs/5.3/examples/starter-template/starter-template.css deleted file mode 100644 index 582dcbe4f6..0000000000 --- a/site/content/docs/5.3/examples/starter-template/starter-template.css +++ /dev/null @@ -1,9 +0,0 @@ -.icon-list li::before { - display: block; - flex-shrink: 0; - width: 1.5em; - height: 1.5em; - margin-right: .5rem; - content: ""; - background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23212529' viewBox='0 0 16 16'%3E%3Cpath d='M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0zM4.5 7.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H4.5z'/%3E%3C/svg%3E") no-repeat center center / 100% auto; -} diff --git a/site/layouts/partials/callouts/info-npm-starter.md b/site/layouts/partials/callouts/info-npm-starter.md index bbd3897b57..cc4a50e68f 100644 --- a/site/layouts/partials/callouts/info-npm-starter.md +++ b/site/layouts/partials/callouts/info-npm-starter.md @@ -1 +1 @@ -**Get started with Bootstrap via npm with our starter project!** Head to the [twbs/bootstrap-npm-starter](https://github.com/twbs/bootstrap-npm-starter) template repository to see how to build and customize Bootstrap in your own npm project. Includes Sass compiler, Autoprefixer, Stylelint, PurgeCSS, and Bootstrap Icons. +**Get started with Bootstrap via npm with our starter project!** Head to the [Sass & JS example](https://github.com/twbs/examples/tree/main/sass-js) template repository to see how to build and customize Bootstrap in your own npm project. Includes Sass compiler, Autoprefixer, Stylelint, PurgeCSS, and Bootstrap Icons. diff --git a/site/layouts/partials/footer.html b/site/layouts/partials/footer.html index d371883753..819c6256dd 100644 --- a/site/layouts/partials/footer.html +++ b/site/layouts/partials/footer.html @@ -41,7 +41,7 @@
  • Bootstrap 4
  • Icons
  • RFS
    • -
  • npm starter
    • +
  • Examples repo
    • diff --git a/site/layouts/partials/home/get-started.html b/site/layouts/partials/home/get-started.html index 58ddb99961..bd0ea3f2ad 100644 --- a/site/layouts/partials/home/get-started.html +++ b/site/layouts/partials/home/get-started.html @@ -19,7 +19,7 @@

    Install via package manager

    - Install Bootstrap’s source Sass and JavaScript files via npm, RubyGems, Composer, or Meteor. Package managed installs don’t include documentation or our full build scripts. You can also use our npm template repo to quickly generate a Bootstrap project via npm. + Install Bootstrap’s source Sass and JavaScript files via npm, RubyGems, Composer, or Meteor. Package managed installs don’t include documentation or our full build scripts. You can also use any demo from our Examples repo to quickly jumpstart Bootstrap projects.

    {{ highlight (printf ("npm install bootstrap@%s") .Site.Params.current_version) "sh" "" }} {{ highlight (printf ("gem install bootstrap -v %s") .Site.Params.current_ruby_version) "sh" "" }}