Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix .fw utilities #32031

Merged
merged 2 commits into from Oct 31, 2020
Merged

Fix .fw utilities #32031

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d2e3286
Add class name so the utility generates
mdo Oct 31, 2020
9f002f2
Update instances of .font-weight to .fw
mdo Oct 31, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
1 change: 1 addition & 0 deletions scss/_utilities.scss
View file
Open in desktop
Expand Up @@ -400,6 +400,7 @@ $utilities: map-merge(
),
"font-weight": (
property: font-weight,
class: fw,
values: (
light: $font-weight-light,
lighter: $font-weight-lighter,
Expand Down
2 changes: 1 addition & 1 deletion site/content/docs/5.0/examples/album/index.html
View file
Open in desktop
Expand Up @@ -40,7 +40,7 @@ <h4 class="text-white">Contact</h4>
<section class="py-5 text-center container">
<div class="row py-lg-5">
<div class="col-lg-6 col-md-8 mx-auto">
<h1 class="font-weight-light">Album example</h1>
<h1 class="fw-light">Album example</h1>
<p class="lead text-muted">Something short and leading about the collection below鈥攊ts contents, the creator, etc. Make it short and sweet, but not too short so folks don鈥檛 simply skip over it entirely.</p>
<p>
<a href="#" class="btn btn-primary my-2">Main call to action</a>
Expand Down
2 changes: 1 addition & 1 deletion site/content/docs/5.0/examples/blog/index.html
View file
Open in desktop
Expand Up @@ -48,7 +48,7 @@
<div class="col-md-6 px-0">
<h1 class="display-4 font-italic">Title of a longer featured blog post</h1>
<p class="lead my-3">Multiple lines of text that form the lede, informing new readers quickly and efficiently about what鈥檚 most interesting in this post鈥檚 contents.</p>
<p class="lead mb-0"><a href="#" class="text-white font-weight-bold">Continue reading...</a></p>
<p class="lead mb-0"><a href="#" class="text-white fw-bold">Continue reading...</a></p>
</div>
</div>

Expand Down
2 changes: 1 addition & 1 deletion site/content/docs/5.0/examples/cover/index.html
View file
Open in desktop
Expand Up @@ -24,7 +24,7 @@ <h3 class="float-md-left mb-0">Cover</h3>
<h1>Cover your page.</h1>
<p class="lead">Cover is a one-page template for building simple and beautiful home pages. Download, edit the text, and add your own fullscreen background photo to make it your own.</p>
<p class="lead">
<a href="#" class="btn btn-lg btn-secondary font-weight-bold border-white bg-white">Learn more</a>
<a href="#" class="btn btn-lg btn-secondary fw-bold border-white bg-white">Learn more</a>
</p>
</main>

Expand Down
8 changes: 4 additions & 4 deletions site/content/docs/5.0/examples/pricing/index.html
View file
Open in desktop
Expand Up @@ -7,7 +7,7 @@
---

<header class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom shadow-sm">
<p class="h5 my-0 mr-md-auto font-weight-normal">Company name</p>
<p class="h5 my-0 mr-md-auto fw-normal">Company name</p>
<nav class="my-2 my-md-0 mr-md-3">
<a class="p-2 text-dark" href="#">Features</a>
<a class="p-2 text-dark" href="#">Enterprise</a>
Expand All @@ -27,7 +27,7 @@ <h1 class="display-4">Pricing</h1>
<div class="col">
<div class="card mb-4 shadow-sm">
<div class="card-header">
<h4 class="my-0 font-weight-normal">Free</h4>
<h4 class="my-0 fw-normal">Free</h4>
</div>
<div class="card-body">
<h1 class="card-title pricing-card-title">$0 <small class="text-muted">/ mo</small></h1>
Expand All @@ -44,7 +44,7 @@ <h1 class="card-title pricing-card-title">$0 <small class="text-muted">/ mo</sma
<div class="col">
<div class="card mb-4 shadow-sm">
<div class="card-header">
<h4 class="my-0 font-weight-normal">Pro</h4>
<h4 class="my-0 fw-normal">Pro</h4>
</div>
<div class="card-body">
<h1 class="card-title pricing-card-title">$15 <small class="text-muted">/ mo</small></h1>
Expand All @@ -61,7 +61,7 @@ <h1 class="card-title pricing-card-title">$15 <small class="text-muted">/ mo</sm
<div class="col">
<div class="card mb-4 shadow-sm">
<div class="card-header">
<h4 class="my-0 font-weight-normal">Enterprise</h4>
<h4 class="my-0 fw-normal">Enterprise</h4>
</div>
<div class="card-body">
<h1 class="card-title pricing-card-title">$29 <small class="text-muted">/ mo</small></h1>
Expand Down
4 changes: 2 additions & 2 deletions site/content/docs/5.0/examples/product/index.html
View file
Open in desktop
Expand Up @@ -23,8 +23,8 @@
<main>
<div class="position-relative overflow-hidden p-3 p-md-5 m-md-3 text-center bg-light">
<div class="col-md-5 p-lg-5 mx-auto my-5">
<h1 class="display-4 font-weight-normal">Punny headline</h1>
<p class="lead font-weight-normal">And an even wittier subheading to boot. Jumpstart your marketing efforts with this example based on Apple鈥檚 marketing pages.</p>
<h1 class="display-4 fw-normal">Punny headline</h1>
<p class="lead fw-normal">And an even wittier subheading to boot. Jumpstart your marketing efforts with this example based on Apple鈥檚 marketing pages.</p>
<a class="btn btn-outline-secondary" href="#">Coming soon</a>
</div>
<div class="product-device shadow-sm d-none d-md-block"></div>
Expand Down
2 changes: 1 addition & 1 deletion site/content/docs/5.0/examples/sign-in/index.html
View file
Open in desktop
Expand Up @@ -10,7 +10,7 @@
<main class="form-signin">
<form>
<img class="mb-4" src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo.svg" alt="" width="72" height="57">
<h1 class="h3 mb-3 font-weight-normal">Please sign in</h1>
<h1 class="h3 mb-3 fw-normal">Please sign in</h1>
<label for="inputEmail" class="visually-hidden">Email address</label>
<input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
<label for="inputPassword" class="visually-hidden">Password</label>
Expand Down
24 changes: 12 additions & 12 deletions site/content/docs/5.0/getting-started/contents.md
View file
Open in desktop
Expand Up @@ -65,8 +65,8 @@ Bootstrap includes a handful of options for including some or all of our compile
<tbody>
<tr>
<th scope="row">
<div><code class="font-weight-normal text-nowrap">bootstrap.css</code></div>
<div><code class="font-weight-normal text-nowrap">bootstrap.min.css</code></div>
<div><code class="fw-normal text-nowrap">bootstrap.css</code></div>
<div><code class="fw-normal text-nowrap">bootstrap.min.css</code></div>
</th>
<td>Included</td>
<td>Included</td>
Expand All @@ -75,8 +75,8 @@ Bootstrap includes a handful of options for including some or all of our compile
</tr>
<tr>
<th scope="row">
<div><code class="font-weight-normal text-nowrap">bootstrap-grid.css</code></div>
<div><code class="font-weight-normal text-nowrap">bootstrap-grid.min.css</code></div>
<div><code class="fw-normal text-nowrap">bootstrap-grid.css</code></div>
<div><code class="fw-normal text-nowrap">bootstrap-grid.min.css</code></div>
</th>
<td><a class="link-secondary" href="{{< docsref "/layout/grid" >}}">Only grid system</a></td>
<td class="text-muted">&mdash;</td>
Expand All @@ -85,8 +85,8 @@ Bootstrap includes a handful of options for including some or all of our compile
</tr>
<tr>
<th scope="row">
<div><code class="font-weight-normal text-nowrap">bootstrap-utilities.css</code></div>
<div><code class="font-weight-normal text-nowrap">bootstrap-utilities.min.css</code></div>
<div><code class="fw-normal text-nowrap">bootstrap-utilities.css</code></div>
<div><code class="fw-normal text-nowrap">bootstrap-utilities.min.css</code></div>
</th>
<td class="text-muted">&mdash;</td>
<td class="text-muted">&mdash;</td>
Expand All @@ -95,8 +95,8 @@ Bootstrap includes a handful of options for including some or all of our compile
</tr>
<tr>
<th scope="row">
<div><code class="font-weight-normal text-nowrap">bootstrap-reboot.css</code></div>
<div><code class="font-weight-normal text-nowrap">bootstrap-reboot.min.css</code></div>
<div><code class="fw-normal text-nowrap">bootstrap-reboot.css</code></div>
<div><code class="fw-normal text-nowrap">bootstrap-reboot.min.css</code></div>
</th>
<td class="text-muted">&mdash;</td>
<td><a class="link-secondary" href="{{< docsref "/content/reboot" >}}">Only Reboot</a></td>
Expand All @@ -120,15 +120,15 @@ Similarly, we have options for including some or all of our compiled JavaScript.
<tbody>
<tr>
<th scope="row">
<div><code class="font-weight-normal text-nowrap">bootstrap.bundle.js</code></div>
<div><code class="font-weight-normal text-nowrap">bootstrap.bundle.min.js</code></div>
<div><code class="fw-normal text-nowrap">bootstrap.bundle.js</code></div>
<div><code class="fw-normal text-nowrap">bootstrap.bundle.min.js</code></div>
</th>
<td>Included</td>
</tr>
<tr>
<th scope="row">
<div><code class="font-weight-normal text-nowrap">bootstrap.js</code></div>
<div><code class="font-weight-normal text-nowrap">bootstrap.min.js</code></div>
<div><code class="fw-normal text-nowrap">bootstrap.js</code></div>
<div><code class="fw-normal text-nowrap">bootstrap.min.js</code></div>
</th>
<td class="text-muted">&mdash;</td>
</tr>
Expand Down
26 changes: 13 additions & 13 deletions site/content/docs/5.0/layout/containers.md
View file
Open in desktop
Expand Up @@ -26,33 +26,33 @@ See them in action and compare them in our [Grid example]({{< docsref "/examples
<td class="border-dark"></td>
<th scope="col">
Extra small<br>
<span class="font-weight-normal">&lt;576px</span>
<span class="fw-normal">&lt;576px</span>
</th>
<th scope="col">
Small<br>
<span class="font-weight-normal">&ge;576px</span>
<span class="fw-normal">&ge;576px</span>
</th>
<th scope="col">
Medium<br>
<span class="font-weight-normal">&ge;768px</span>
<span class="fw-normal">&ge;768px</span>
</th>
<th scope="col">
Large<br>
<span class="font-weight-normal">&ge;992px</span>
<span class="fw-normal">&ge;992px</span>
</th>
<th scope="col">
X-Large<br>
<span class="font-weight-normal">&ge;1200px</span>
<span class="fw-normal">&ge;1200px</span>
</th>
<th scope="col">
XX-Large<br>
<span class="font-weight-normal">&ge;1400px</span>
<span class="fw-normal">&ge;1400px</span>
</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row" class="font-weight-normal"><code>.container</code></th>
<th scope="row" class="fw-normal"><code>.container</code></th>
<td class="text-muted">100%</td>
<td>540px</td>
<td>720px</td>
Expand All @@ -61,7 +61,7 @@ See them in action and compare them in our [Grid example]({{< docsref "/examples
<td>1320px</td>
</tr>
<tr>
<th scope="row" class="font-weight-normal"><code>.container-sm</code></th>
<th scope="row" class="fw-normal"><code>.container-sm</code></th>
<td class="text-muted">100%</td>
<td>540px</td>
<td>720px</td>
Expand All @@ -70,7 +70,7 @@ See them in action and compare them in our [Grid example]({{< docsref "/examples
<td>1320px</td>
</tr>
<tr>
<th scope="row" class="font-weight-normal"><code>.container-md</code></th>
<th scope="row" class="fw-normal"><code>.container-md</code></th>
<td class="text-muted">100%</td>
<td class="text-muted">100%</td>
<td>720px</td>
Expand All @@ -79,7 +79,7 @@ See them in action and compare them in our [Grid example]({{< docsref "/examples
<td>1320px</td>
</tr>
<tr>
<th scope="row" class="font-weight-normal"><code>.container-lg</code></th>
<th scope="row" class="fw-normal"><code>.container-lg</code></th>
<td class="text-muted">100%</td>
<td class="text-muted">100%</td>
<td class="text-muted">100%</td>
Expand All @@ -88,7 +88,7 @@ See them in action and compare them in our [Grid example]({{< docsref "/examples
<td>1320px</td>
</tr>
<tr>
<th scope="row" class="font-weight-normal"><code>.container-xl</code></th>
<th scope="row" class="fw-normal"><code>.container-xl</code></th>
<td class="text-muted">100%</td>
<td class="text-muted">100%</td>
<td class="text-muted">100%</td>
Expand All @@ -97,7 +97,7 @@ See them in action and compare them in our [Grid example]({{< docsref "/examples
<td>1320px</td>
</tr>
<tr>
<th scope="row" class="font-weight-normal"><code>.container-xxl</code></th>
<th scope="row" class="fw-normal"><code>.container-xxl</code></th>
<td class="text-muted">100%</td>
<td class="text-muted">100%</td>
<td class="text-muted">100%</td>
Expand All @@ -106,7 +106,7 @@ See them in action and compare them in our [Grid example]({{< docsref "/examples
<td>1320px</td>
</tr>
<tr>
<th scope="row" class="font-weight-normal"><code>.container-fluid</code></th>
<th scope="row" class="fw-normal"><code>.container-fluid</code></th>
<td class="text-muted">100%</td>
<td class="text-muted">100%</td>
<td class="text-muted">100%</td>
Expand Down
14 changes: 7 additions & 7 deletions site/content/docs/5.0/layout/grid.md
View file
Open in desktop
Expand Up @@ -69,33 +69,33 @@ As noted above, each of these breakpoints have their own container, unique class
<th scope="col"></th>
<th scope="col">
xs<br>
<span class="font-weight-normal">&lt;576px</span>
<span class="fw-normal">&lt;576px</span>
</th>
<th scope="col">
sm<br>
<span class="font-weight-normal">&ge;576px</span>
<span class="fw-normal">&ge;576px</span>
</th>
<th scope="col">
md<br>
<span class="font-weight-normal">&ge;768px</span>
<span class="fw-normal">&ge;768px</span>
</th>
<th scope="col">
lg<br>
<span class="font-weight-normal">&ge;992px</span>
<span class="fw-normal">&ge;992px</span>
</th>
<th scope="col">
xl<br>
<span class="font-weight-normal">&ge;1200px</span>
<span class="fw-normal">&ge;1200px</span>
</th>
<th scope="col">
xxl<br>
<span class="font-weight-normal">&ge;1400px</span>
<span class="fw-normal">&ge;1400px</span>
</th>
</tr>
</thead>
<tbody>
<tr>
<th class="text-nowrap" scope="row">Container <code class="font-weight-normal">max-width</code></th>
<th class="text-nowrap" scope="row">Container <code class="fw-normal">max-width</code></th>
<td>None (auto)</td>
<td>540px</td>
<td>720px</td>
Expand Down
2 changes: 1 addition & 1 deletion site/layouts/_default/single.html
View file
Open in desktop
Expand Up @@ -33,7 +33,7 @@ <h1 class="bd-title mt-0">{{ .Title | markdownify }}</h1>
<div class="masthead-followup-icon d-inline-block mb-2 text-white bg-danger">
{{ partial "icons/droplet-fill.svg" (dict "width" "32" "height" "32") }}
</div>
<h2 class="display-6 font-weight-normal">Go further with Bootstrap Themes</h2>
<h2 class="display-6 fw-normal">Go further with Bootstrap Themes</h2>
<p class="col-md-10 col-lg-8 mx-auto lead">
Need something more than these examples? Take Bootstrap to the next level with premium themes from the <a href="{{ .Site.Params.themes }}">official Bootstrap Themes marketplace</a>. They鈥檙e built as their own extended frameworks, rich with new components and plugins, documentation, and powerful build tools.
</p>
Expand Down
2 changes: 1 addition & 1 deletion site/layouts/partials/docs-sidebar.html
View file
Open in desktop
Expand Up @@ -22,7 +22,7 @@

{{- if $group.pages }}
<div class="collapse{{ if $is_active_group }} show{{ end }}" id="{{ $group_slug }}-collapse">
<ul class="list-unstyled font-weight-normal pb-1 small">
<ul class="list-unstyled fw-normal pb-1 small">
{{- range $doc := $group.pages -}}
{{- $doc_slug := $doc.title | urlize -}}
{{- $is_active := and $is_active_group (eq $page_slug $doc_slug) -}}
Expand Down
16 changes: 8 additions & 8 deletions site/layouts/partials/home/masthead-followup.html
View file
Open in desktop
Expand Up @@ -4,8 +4,8 @@
<div class="masthead-followup-icon d-inline-block mb-2 text-white bg-success">
{{ partial "icons/code.svg" (dict "width" "32" "height" "32") }}
</div>
<h2 class="display-5 font-weight-normal">Installation</h2>
<p class="lead font-weight-normal">
<h2 class="display-5 fw-normal">Installation</h2>
<p class="lead fw-normal">
Install Bootstrap鈥檚 source Sass and JavaScript files via npm, Composer, or Meteor.
</p>
<p>Package managed installs don鈥檛 include documentation or our full build scripts. You can also <a href="https://github.com/twbs/bootstrap-npm-starter">use our npm template repo</a> to quickly generate a Bootstrap project via npm.</p>
Expand All @@ -22,8 +22,8 @@ <h2 class="display-5 font-weight-normal">Installation</h2>
<div class="masthead-followup-icon d-inline-block mb-2 text-white bg-primary">
{{ partial "icons/cloud-fill.svg" (dict "width" "32" "height" "32") }}
</div>
<h2 class="display-5 font-weight-normal">jsDelivr</h2>
<p class="lead font-weight-normal">
<h2 class="display-5 fw-normal">jsDelivr</h2>
<p class="lead fw-normal">
When you only need to include Bootstrap鈥檚 compiled CSS or JS, you can use <a href="https://www.jsdelivr.com/">jsDelivr</a>.
</p>
<p>
Expand All @@ -44,8 +44,8 @@ <h2 class="display-5 font-weight-normal">jsDelivr</h2>
<div class="masthead-followup-icon d-inline-block mb-2 text-white bd-bg-purple-bright">
{{ partial "icons/circle-square.svg" (dict "width" "32" "height" "32") }}
</div>
<h2 class="display-5 font-weight-normal">Bootstrap Icons</h2>
<p class="lead font-weight-normal">
<h2 class="display-5 fw-normal">Bootstrap Icons</h2>
<p class="lead fw-normal">
For the first time ever, Bootstrap has its own open source SVG icon library, designed to work best with our components and documentation.
</p>
<p>
Expand All @@ -66,8 +66,8 @@ <h2 class="display-5 font-weight-normal">Bootstrap Icons</h2>
<div class="masthead-followup-icon d-inline-block mb-2 text-white bg-danger">
{{ partial "icons/droplet-fill.svg" (dict "width" "32" "height" "32") }}
</div>
<h2 class="display-5 font-weight-normal">Official Themes</h2>
<p class="lead font-weight-normal">
<h2 class="display-5 fw-normal">Official Themes</h2>
<p class="lead fw-normal">
Take Bootstrap to the next level with premium themes from the <a href="{{ .Site.Params.themes }}">official Bootstrap Themes marketplace</a>.
</p>
<p>
Expand Down