diff --git a/site/layouts/partials/home/components-utilities.html b/site/layouts/partials/home/components-utilities.html index 6806a24b7b5e30295e6cc37fd65f8a334a95bc3a..fbd866988dc726120dac528765b97a91c5d2c20b 100644 --- a/site/layouts/partials/home/components-utilities.html +++ b/site/layouts/partials/home/components-utilities.html @@ -1,59 +1,196 @@ <section class="pb-md-5 mb-5"> <div class="col-lg-8 mb-5"> - <div class="masthead-followup-icon d-inline-block mb-3 me-2" style="--bg-rgb: var(--bs-danger-rgb);"> + <div + class="masthead-followup-icon d-inline-block mb-3 me-2" + style="--bg-rgb: var(--bs-danger-rgb)" + > <svg class="bi fs-1"><use xlink:href="#menu-button-wide-fill"></use></svg> </div> <svg class="bi me-2 fs-2 text-muted"><use xlink:href="#plus"></use></svg> - <div class="masthead-followup-icon d-inline-block mb-3" style="--bg-rgb: var(--bs-info-rgb);"> + <div + class="masthead-followup-icon d-inline-block mb-3" + style="--bg-rgb: var(--bs-info-rgb)" + > <svg class="bi fs-1"><use xlink:href="#braces-asterisk"></use></svg> </div> - <h2 class="display-5 mb-3 fw-semibold lh-sm">Components, meet the Utility API</h2> + <h2 class="display-5 mb-3 fw-semibold lh-sm"> + Components, meet the Utility API + </h2> <p class="lead fw-normal"> - New in Bootstrap 5, our utilities are now generated by our <a href="/docs/{{ .Site.Params.docs_version }}/utilities/api/">Utility API</a>. We built it as a feature-packed Sass map that can be quickly and easily customized. It's never been easier to add, remove, or modify any utility classes. Make utilities responsive, add pseudo-class variants, and give them custom names. + What's new in Bootstrap 5 : Our utilities are now generated using our + <a href="/docs/{{ .Site.Params.docs_version }}/utilities/api/" + >Utility API</a + >. We created it as a Sass map with lots of features that can be rapidly + and easily modified. No utility class has ever been simpler to add, + remove, or change. Make utilities responsive, give them unique names, and + include pseudo-class versions. </p> </div> <div class="row gx-md-5"> <div class="col-lg-6"> <h3 class="fw-semibold">Quickly customize components</h3> - <p>Apply any of our included utility classes to our components to customize their appearance, like the navigation example below. There are hundreds of classes available—from <a href="/docs/{{ .Site.Params.docs_version }}/utilities/position/">positioning</a> and <a href="/docs/{{ .Site.Params.docs_version }}/utilities/sizing/">sizing</a> to <a href="/docs/{{ .Site.Params.docs_version }}/utilities/colors/">colors</a> and <a href="/docs/{{ .Site.Params.docs_version }}/utilities/shadows/">effects</a>. Mix them with CSS variable overrides for even more control.</p> + <p> + Apply any of our included utility classes to our components to customize + their appearance, like the navigation example below. There are hundreds + of classes available—from + <a href="/docs/{{ .Site.Params.docs_version }}/utilities/position/" + >positioning</a + > + and + <a href="/docs/{{ .Site.Params.docs_version }}/utilities/sizing/" + >sizing</a + > + to + <a href="/docs/{{ .Site.Params.docs_version }}/utilities/colors/" + >colors</a + > + and + <a href="/docs/{{ .Site.Params.docs_version }}/utilities/shadows/" + >effects</a + >. Mix them with CSS variable overrides for even more control. + </p> <div class="p-4 border rounded-3 mb-4"> <ul class="nav nav-pills mb-4" id="pillNav" role="tablist"> <li class="nav-item" role="presentation"> - <button class="nav-link active" id="home-tab" data-bs-toggle="tab" type="button" role="tab" aria-selected="true">Home</button> + <button + class="nav-link active" + id="home-tab" + data-bs-toggle="tab" + type="button" + role="tab" + aria-selected="true" + > + Home + </button> </li> <li class="nav-item" role="presentation"> - <button class="nav-link" id="profile-tab" data-bs-toggle="tab" type="button" role="tab" aria-selected="false">Profile</button> + <button + class="nav-link" + id="profile-tab" + data-bs-toggle="tab" + type="button" + role="tab" + aria-selected="false" + > + Profile + </button> </li> <li class="nav-item" role="presentation"> - <button class="nav-link" id="contact-tab" data-bs-toggle="tab" type="button" role="tab" aria-selected="false">Contact</button> + <button + class="nav-link" + id="contact-tab" + data-bs-toggle="tab" + type="button" + role="tab" + aria-selected="false" + > + Contact + </button> </li> </ul> - <ul class="nav nav-pills nav-fill gap-2 p-1 small bg-primary rounded-5 shadow-sm" id="pillNav2" role="tablist" style="--bs-nav-link-color: rgba(255, 255, 255, .75); --bs-nav-link-hover-color: #fff; --bs-nav-pills-link-active-color: var(--bs-primary); --bs-nav-pills-link-active-bg: var(--bs-white);"> + <ul + class="nav nav-pills nav-fill gap-2 p-1 small bg-primary rounded-5 shadow-sm" + id="pillNav2" + role="tablist" + style=" + --bs-nav-link-color: rgba(255, 255, 255, 0.75); + --bs-nav-link-hover-color: #fff; + --bs-nav-pills-link-active-color: var(--bs-primary); + --bs-nav-pills-link-active-bg: var(--bs-white); + " + > <li class="nav-item" role="presentation"> - <button class="nav-link active rounded-5" id="home-tab2" data-bs-toggle="tab" type="button" role="tab" aria-selected="true">Home</button> + <button + class="nav-link active rounded-5" + id="home-tab2" + data-bs-toggle="tab" + type="button" + role="tab" + aria-selected="true" + > + Home + </button> </li> <li class="nav-item" role="presentation"> - <button class="nav-link rounded-5" id="profile-tab2" data-bs-toggle="tab" type="button" role="tab" aria-selected="false">Profile</button> + <button + class="nav-link rounded-5" + id="profile-tab2" + data-bs-toggle="tab" + type="button" + role="tab" + aria-selected="false" + > + Profile + </button> </li> <li class="nav-item" role="presentation"> - <button class="nav-link rounded-5" id="contact-tab2" data-bs-toggle="tab" type="button" role="tab" aria-selected="false">Contact</button> + <button + class="nav-link rounded-5" + id="contact-tab2" + data-bs-toggle="tab" + type="button" + role="tab" + aria-selected="false" + > + Contact + </button> </li> </ul> </div> -{{ highlight (printf `<ul class="nav nav-pills nav-fill gap-2 p-1 small bg-primary rounded-5 shadow-sm" id="pillNav2" role="tablist" style="--bs-nav-link-color: var(--bs-white); --bs-nav-pills-link-active-color: var(--bs-primary); --bs-nav-pills-link-active-bg: var(--bs-white);"> - <li class="nav-item" role="presentation"> - <button class="nav-link active rounded-5" id="home-tab2" data-bs-toggle="tab" type="button" role="tab" aria-selected="true">Home</button> - </li> - <li class="nav-item" role="presentation"> - <button class="nav-link rounded-5" id="profile-tab2" data-bs-toggle="tab" type="button" role="tab" aria-selected="false">Profile</button> - </li> - <li class="nav-item" role="presentation"> - <button class="nav-link rounded-5" id="contact-tab2" data-bs-toggle="tab" type="button" role="tab" aria-selected="false">Contact</button> - </li> -</ul> -`) "html" "" }} + {{ highlight (printf ` + <ul + class="nav nav-pills nav-fill gap-2 p-1 small bg-primary rounded-5 shadow-sm" + id="pillNav2" + role="tablist" + style=" + --bs-nav-link-color: var(--bs-white); + --bs-nav-pills-link-active-color: var(--bs-primary); + --bs-nav-pills-link-active-bg: var(--bs-white); + " + > + <li class="nav-item" role="presentation"> + <button + class="nav-link active rounded-5" + id="home-tab2" + data-bs-toggle="tab" + type="button" + role="tab" + aria-selected="true" + > + Home + </button> + </li> + <li class="nav-item" role="presentation"> + <button + class="nav-link rounded-5" + id="profile-tab2" + data-bs-toggle="tab" + type="button" + role="tab" + aria-selected="false" + > + Profile + </button> + </li> + <li class="nav-item" role="presentation"> + <button + class="nav-link rounded-5" + id="contact-tab2" + data-bs-toggle="tab" + type="button" + role="tab" + aria-selected="false" + > + Contact + </button> + </li> + </ul> + `) "html" "" }} <p class="d-flex justify-content-start mb-md-0"> - <a href="/docs/{{ .Site.Params.docs_version }}/examples#snippets" class="icon-link fw-semibold"> + <a + href="/docs/{{ .Site.Params.docs_version }}/examples#snippets" + class="icon-link fw-semibold" + > Explore customized components <svg class="bi"><use xlink:href="#arrow-right-short"></use></svg> </a> @@ -61,24 +198,20 @@ </div> <div class="col-lg-6"> <h3 class="fw-semibold">Create and extend utilities</h3> - <p>Use Bootstrap's utility API to modify any of our included utilities or create your own custom utilities for any project. Import Bootstrap first, then use Sass map functions to modify, add, or remove utilities.</p> -{{ highlight (printf `@import "bootstrap/scss/bootstrap"; - -$utilities: map-merge( - $utilities, - ( - "cursor": ( - property: cursor, - class: cursor, - responsive: true, - values: auto pointer grab, - ) - ) -); -`) "scss" "" }} + <p> + Use Bootstrap's utility API to modify any of our included utilities or + create your own custom utilities for any project. Import Bootstrap + first, then use Sass map functions to modify, add, or remove utilities. + </p> + {{ highlight (printf `@import "bootstrap/scss/bootstrap"; $utilities: + map-merge( $utilities, ( "cursor": ( property: cursor, class: cursor, + responsive: true, values: auto pointer grab, ) ) ); `) "scss" "" }} <p class="d-flex justify-content-start mb-md-0"> - <a href="/docs/{{ .Site.Params.docs_version }}/utilities/api/" class="icon-link fw-semibold mb-3"> + <a + href="/docs/{{ .Site.Params.docs_version }}/utilities/api/" + class="icon-link fw-semibold mb-3" + > Explore the utility API <svg class="bi"><use xlink:href="#arrow-right-short"></use></svg> </a> diff --git a/site/layouts/partials/home/plugins.html b/site/layouts/partials/home/plugins.html index b76fe6539906d79ec404eb039bf2f1dd03b5dcaf..180c133884cd088041c70f8b415c1bd146effa88 100644 --- a/site/layouts/partials/home/plugins.html +++ b/site/layouts/partials/home/plugins.html @@ -1,14 +1,26 @@ <section class="pb-md-5 mb-5"> <div class="col-lg-8 mb-5"> - <div class="masthead-followup-icon d-inline-block mb-3" style="--bg-rgb: var(--bs-warning-rgb);"> + <div + class="masthead-followup-icon d-inline-block mb-3" + style="--bg-rgb: var(--bs-warning-rgb)" + > <svg class="bi fs-1"><use xlink:href="#plugin"></use></svg> </div> - <h2 class="display-5 mb-3 fw-semibold lh-sm">Powerful JavaScript plugins without jQuery</h2> + <h2 class="display-5 mb-3 fw-semibold lh-sm"> + Powerful JavaScript plugins without jQuery + </h2> <p class="lead fw-normal"> - Add toggleable hidden elements, modals and offcanvas menus, popovers and tooltips, and so much more—all without jQuery. Bootstrap's JavaScript is HTML-first, meaning most plugins are added with <code>data</code> attributes in your HTML. Need more control? Include individual plugins programmatically. + Toggleable hidden components, modals, off-canvas menus, popovers, + tooltips, and a tonne more may be easily added without the use of jQuery. + As HTML comes first with Bootstrap, installing plugins is as simple as + adding <code>data</code> attributes. You want more power. Programmatically + include specific plugins. </p> <p class="d-flex justify-content-start lead fw-normal mb-md-0"> - <a href="/docs/{{ .Site.Params.docs_version }}/getting-started/javascript/" class="icon-link fw-semibold"> + <a + href="/docs/{{ .Site.Params.docs_version }}/getting-started/javascript/" + class="icon-link fw-semibold" + > Learn more about Bootstrap JavaScript <svg class="bi"><use xlink:href="#arrow-right-short"></use></svg> </a> @@ -17,49 +29,92 @@ <div class="row gx-md-5"> <div class="col-lg-6 mb-3"> <h3 class="fw-semibold">Data attribute API</h3> - <p>Why write more JavaScript when you can write HTML? Nearly all of Bootstrap's JavaScript plugins feature a first-class data API, allowing you to use JavaScript just by adding <code>data</code> attributes.</p> + <p> + Why write more JavaScript when you can write HTML? Nearly all of + Bootstrap's JavaScript plugins feature a first-class data API, allowing + you to use JavaScript just by adding <code>data</code> attributes. + </p> <div class="p-4 mb-3 border rounded-3"> <div class="dropdown"> - <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"> + <button + class="btn btn-primary dropdown-toggle" + type="button" + data-bs-toggle="dropdown" + aria-expanded="false" + > Dropdown </button> <ul class="dropdown-menu"> - <li><button class="dropdown-item" type="button">Dropdown item</button></li> - <li><button class="dropdown-item" type="button">Dropdown item</button></li> - <li><button class="dropdown-item" type="button">Dropdown item</button></li> + <li> + <button class="dropdown-item" type="button">Dropdown item</button> + </li> + <li> + <button class="dropdown-item" type="button">Dropdown item</button> + </li> + <li> + <button class="dropdown-item" type="button">Dropdown item</button> + </li> </ul> </div> </div> - {{ highlight (printf `<div class="dropdown"> -<button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"> - Dropdown -</button> -<ul class="dropdown-menu"> - <li><button class="dropdown-item" type="button">Dropdown item</button></li> - <li><button class="dropdown-item" type="button">Dropdown item</button></li> - <li><button class="dropdown-item" type="button">Dropdown item</button></li> -</ul> -</div> -`) "html" "" }} - <p>Learn more about <a href="/docs/{{ .Site.Params.docs_version }}/getting-started/javascript/#using-bootstrap-as-a-module">our JavaScript as modules</a> and <a href="/docs/{{ .Site.Params.docs_version }}/getting-started/javascript/#programmatic-api">using the programmatic API</a>.</p> + {{ highlight (printf ` + <div class="dropdown"> + <button + class="btn btn-primary dropdown-toggle" + type="button" + data-bs-toggle="dropdown" + aria-expanded="false" + > + Dropdown + </button> + <ul class="dropdown-menu"> + <li> + <button class="dropdown-item" type="button">Dropdown item</button> + </li> + <li> + <button class="dropdown-item" type="button">Dropdown item</button> + </li> + <li> + <button class="dropdown-item" type="button">Dropdown item</button> + </li> + </ul> + </div> + `) "html" "" }} + <p> + Learn more about + <a + href="/docs/{{ .Site.Params.docs_version }}/getting-started/javascript/#using-bootstrap-as-a-module" + >our JavaScript as modules</a + > + and + <a + href="/docs/{{ .Site.Params.docs_version }}/getting-started/javascript/#programmatic-api" + >using the programmatic API</a + >. + </p> </div> <div class="col-lg-6 mb-3"> <h3 class="fw-semibold">Comprehensive set of plugins</h3> - <p>Bootstrap features a dozen plugins that you can drop into any project. Drop them in all at once, or choose just the ones you need.</p> - <hr class="my-4"> + <p> + Bootstrap features a dozen plugins that you can drop into any project. + Drop them in all at once, or choose just the ones you need. + </p> + <hr class="my-4" /> <div class="row g-3"> - {{- range $plugin := .Site.Data.plugins -}} - {{- $href := printf "/docs/%s/%s" $.Site.Params.docs_version $plugin.link }} - <div class="col-sm-6 mb-2"> - <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="{{ $href }}"> - <h4 class="mb-0 fs-5 fw-semibold">{{ $plugin.name }}</h4> - <small class="text-muted">{{ $plugin.description }}</small> - </a> - </div> + {{- range $plugin := .Site.Data.plugins -}} {{- $href := printf + "/docs/%s/%s" $.Site.Params.docs_version $plugin.link }} + <div class="col-sm-6 mb-2"> + <a + class="d-block pe-lg-4 text-decoration-none lh-sm" + href="{{ $href }}" + > + <h4 class="mb-0 fs-5 fw-semibold">{{ $plugin.name }}</h4> + <small class="text-muted">{{ $plugin.description }}</small> + </a> + </div> {{- end }} </div> </div> </div> - </section>