mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-08 17:22:31 +03:00
Code Activity

Responsive font size implementation (#23816)

Browse Source
This commit is contained in:
Martijn Cuppens
2019-02-07 23:32:05 +01:00
committed by GitHub
parent d250567ce0
commit 51375abca5
35 changed files with 324 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/docs/4.2/assets/scss/_ads.scss
+1 -1
View File
@@ -11,7 +11,7 @@
padding: 15px 15px 15px 160px;
margin: 2rem 0;
overflow: hidden;
font-size: 13px;
@include font-size(.8125rem);
line-height: 1.4;
text-align: left;
background-color: rgba(0, 0, 0, .05);
site/docs/4.2/assets/scss/_algolia.scss
+5 -5
View File
@@ -47,7 +47,7 @@
.algolia-docsearch-suggestion--category-header {
padding: .125rem 1rem !important;
margin-top: 0 !important;
font-size: .875rem !important;
@include font-size(.875rem, true);
font-weight: 600 !important;
color: $bd-purple-bright !important;
border-bottom: 0 !important;
@@ -68,7 +68,7 @@
.algolia-docsearch-suggestion--subcategory-inline {
display: block !important;
font-size: .875rem;
@include font-size(.875rem);
color: $gray-700;
&::after {
@@ -107,7 +107,7 @@
.algolia-docsearch-suggestion--title {
display: block;
margin-bottom: 0 !important;
font-size: .875rem !important;
@include font-size(.875rem, true);
font-weight: 400 !important;
}
@@ -115,7 +115,7 @@
flex: 0 0 100%;
max-width: 100%;
padding: .2rem 0;
font-size: .8125rem !important;
@include font-size(.8125rem, true);
font-weight: 400;
line-height: 1.25 !important;
color: $gray-600;
@@ -126,7 +126,7 @@
width: auto !important;
height: auto !important;
padding: .75rem 1rem 0;
font-size: .75rem !important;
@include font-size(.75rem, true);
line-height: 1 !important;
color: #767676 !important;
border-top: 1px solid rgba(0, 0, 0, .1);
site/docs/4.2/assets/scss/_brand.scss
+1 -1
View File
@@ -44,7 +44,7 @@
}
h1 {
font-size: 4rem;
@include font-size(4rem);
}
}
}
site/docs/4.2/assets/scss/_clipboard-js.scss
+1 -1
View File
@@ -23,7 +23,7 @@
z-index: 10;
display: block;
padding: .25rem .5rem;
font-size: 75%;
@include font-size(75%);
color: #818a91;
background-color: transparent;
border: 0;
site/docs/4.2/assets/scss/_component-examples.scss
+1 -1
View File
@@ -406,7 +406,7 @@
border: 0;
}
pre code {
font-size: inherit;
@include font-size(inherit);
color: $gray-900; // Effectively the base text color
}
}
site/docs/4.2/assets/scss/_content.scss
+15 -8
View File
@@ -71,6 +71,18 @@
//
.bd-content {
> h2 {
@include font-size($h2-font-size);
}
> h3 {
@include font-size($h3-font-size);
}
> h4 {
@include font-size($h4-font-size);
}
> h2:not(:first-child) {
margin-top: 3rem;
}
@@ -97,20 +109,15 @@
margin-top: 1rem;
margin-bottom: .5rem;
font-weight: 300;
@include media-breakpoint-up(sm) {
font-size: 3rem;
}
@include font-size(3rem);
}
.bd-lead {
font-size: 1.125rem;
@include font-size(1.125rem);
font-weight: 300;
@include media-breakpoint-up(sm) {
@include media-breakpoint-up(lg) {
max-width: 80%;
margin-bottom: 1rem;
font-size: 1.5rem;
}
}
site/docs/4.2/assets/scss/_footer.scss
+1 -1
View File
@@ -3,7 +3,7 @@
//
.bd-footer {
font-size: 85%;
@include font-size(.875rem);
text-align: center;
background-color: #f7f7f7;
site/docs/4.2/assets/scss/_masthead.scss
+2 -4
View File
@@ -6,12 +6,14 @@
// background-image: linear-gradient(45deg, #fafafa, #f5f5f5);
h1 {
@include font-size(4rem);
line-height: 1;
}
.btn {
padding: .8rem 2rem;
font-weight: 600;
@include font-size(1.25rem);
}
.carbonad {
@@ -29,10 +31,6 @@
}
@include media-breakpoint-up(md) {
h1 {
font-size: 4rem;
}
.carbonad {
margin-top: 3rem !important;
}
site/docs/4.2/assets/scss/_nav.scss
+1 -2
View File
@@ -16,7 +16,6 @@
height: 2.5rem;
margin-top: .25rem;
overflow: hidden;
font-size: .875rem;
.navbar-nav {
padding-bottom: 2rem;
@@ -61,7 +60,7 @@
}
.dropdown-menu {
font-size: .875rem;
@include font-size(.875rem);
}
.dropdown-item.active {
site/docs/4.2/assets/scss/_placeholder-img.scss
+2 -4
View File
@@ -5,12 +5,10 @@
// Remember to update `site/_layouts/examples.html` too if this changes!
.bd-placeholder-img {
font-size: 1.125rem;
@include font-size(1.125rem);
text-anchor: middle;
}
.bd-placeholder-img-lg {
@include media-breakpoint-up(md) {
font-size: 3.5rem;
}
@include font-size(3.5rem);
}
site/docs/4.2/assets/scss/_sidebar.scss
+2 -2
View File
@@ -14,7 +14,7 @@
order: 2;
padding-top: 1.5rem;
padding-bottom: 1.5rem;
font-size: .875rem;
@include font-size(.875rem);
}
.section-nav {
@@ -144,7 +144,7 @@
.bd-sidebar .nav > li > a {
display: block;
padding: .25rem 1.5rem;
font-size: 90%;
@include font-size(90%);
color: rgba(0, 0, 0, .65);
}
site/docs/4.2/assets/scss/_variables.scss
+6
View File
@@ -7,3 +7,9 @@ $bd-download: #ffe484 !default;
$bd-info: #5bc0de !default;
$bd-warning: #f0ad4e !default;
$bd-danger: #d9534f !default;
// Enable responsive font sizes for font sizes defined in the docs
// The weird if test is made as a workaround to prevent a false fusv error.
//
// stylelint-disable-next-line scss/dollar-variable-default
$enable-responsive-font-sizes: if($enable-responsive-font-sizes, true, true);
site/docs/4.2/content/typography.md
+4 -28
View File
@@ -104,7 +104,7 @@ Use the included utility classes to recreate the small secondary heading text fr
## Display headings
Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using a **display heading**—a larger, slightly more opinionated heading style.
Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using a **display heading**—a larger, slightly more opinionated heading style. Keep in mind these headings are not responsive by default, but it's possible to enable [responsive font sizes](#responsive-font-sizes).
<div class="bd-example bd-example-type">
<table class="table">
@@ -294,32 +294,8 @@ Align terms and descriptions horizontally by using our grid system's predefined
{% endcapture %}
{% include example.html content=example %}
## Responsive typography
## Responsive font sizes
*Responsive typography* refers to scaling text and components by simply adjusting the root element's `font-size` within a series of media queries. Bootstrap doesn't do this for you, but it's fairly easy to add if you need it.
Bootstrap v4.3 ships with the option to enable responsive font sizes, allowing text to scale more naturally across device and viewport sizes. <abbr title="Responsive font sizes">RFS</abbr> can be enabled by changing the `$enable-responsive-font-sizes` Sass variable to `true` and recompiling Bootstrap.
Here's an example of it in practice. Choose whatever `font-size`s and media queries you wish.
{% highlight scss %}
html {
font-size: 1rem;
}
@include media-breakpoint-up(sm) {
html {
font-size: 1.2rem;
}
}
@include media-breakpoint-up(md) {
html {
font-size: 1.4rem;
}
}
@include media-breakpoint-up(lg) {
html {
font-size: 1.6rem;
}
}
{% endhighlight %}
To support <abbr title="Responsive font sizes">RFS</abbr>, we use a Sass mixin to replace our normal `font-size` properties. Responsive font sizes will be compiled into `calc()` functions with a mix of `rem` and viewport units to enable the responsive scaling behavior. More about <abbr title="Responsive font sizes">RFS</abbr> and its configuration can be found on its [GitHub repository](https://github.com/twbs/rfs).
site/docs/4.2/getting-started/theming.md
+1
View File
@@ -242,6 +242,7 @@ You can find and customize these variables for key global options in Bootstrap's
| `$enable-caret` | `true` (default) or `false` | Enables pseudo element caret on `.dropdown-toggle`. |
| `$enable-pointer-cursor-for-buttons` | `true` (default) or `false` | Add "hand" cursor to non-disabled button elements. |
| `$enable-print-styles` | `true` (default) or `false` | Enables styles for optimizing printing. |
| `$enable-responsive-font-sizes` | `true` or `false` (default) | Enables [responsive font sizes]({{ site.baseurl }}/docs/{{ site.docs_version }}/content/typography/#responsive-font-sizes). |
| `$enable-validation-icons` | `true` (default) or `false` | Enables `background-image` icons within textual inputs and some custom forms for validation states. |
| `$enable-deprecation-messages` | `true` or `false` (default) | Set to `true` to show warnings when using any of the deprecated mixins and functions that are planned to be removed in `v5`. |