Skip to content

RFS implementation #23734

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’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
MartijnCuppens wants to merge 1 commit into from
Closed

RFS implementation #23734

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion assets/scss/_ads.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
padding: 15px 15px 15px 160px;
margin: 2rem 0;
overflow: hidden;
font-size: 13px;
@include rfs(13);
line-height: 1.4;
text-align: left;
background-color: rgba(0,0,0,.05);
Expand Down
8 changes: 4 additions & 4 deletions assets/scss/_algolia.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@
.algolia-docsearch-suggestion--category-header {
padding: .125rem 1rem !important;
margin-top: 0 !important;
font-size: .875rem !important;
@include rfs(14, true);
font-weight: 500 !important;
color: $bd-purple-bright !important;
border-bottom: 0 !important;
Expand Down Expand Up @@ -93,14 +93,14 @@
display: block;
padding: .25rem 1rem !important;
margin-bottom: 0 !important;
font-size: .875rem !important;
@include rfs(14, true);
font-weight: 400 !important;
}

.algolia-docsearch-suggestion--text {
padding: 0 1rem .5rem !important;
margin-top: -.25rem;
font-size: .875rem !important;
@include rfs(14, true);
font-weight: normal;
line-height: 1.25 !important;
}
Expand All @@ -110,7 +110,7 @@
width: auto !important;
height: auto !important;
padding: .75rem 1rem 0;
font-size: .75rem !important;
@include rfs(12, true);
line-height: 1 !important;
color: #767676 !important;
border-top: 1px solid rgba(0,0,0,.1);
Expand Down
2 changes: 1 addition & 1 deletion assets/scss/_brand.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@
border-left: 1px solid #fff;
}
.bd-brand-item h1 {
font-size: 4rem;
@include rfs(64);
}
}

Expand Down
8 changes: 2 additions & 6 deletions assets/scss/_content.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,20 +94,16 @@
margin-top: 1rem;
margin-bottom: .5rem;
font-weight: 300;

@include media-breakpoint-up(sm) {
font-size: 3rem;
}
@include rfs(48);
}

.bd-lead {
font-size: 1.125rem;
@include rfs(20);
font-weight: 300;

@include media-breakpoint-up(sm) {
max-width: 80%;
margin-bottom: 1rem;
font-size: 1.5rem;
}
}

Expand Down
2 changes: 1 addition & 1 deletion assets/scss/_footer.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
//

.bd-footer {
font-size: 85%;
@include rfs(14);
text-align: center;
background-color: #f7f7f7;

Expand Down
9 changes: 3 additions & 6 deletions assets/scss/_masthead.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,14 @@
// background-image: linear-gradient(45deg, #fafafa, #f5f5f5);

h1 {
@include rfs(64);
line-height: 1;
}

.btn {
width: 100%;
padding: .8rem 2rem;
font-size: 1.25rem;
padding: .8em 2em;
@include rfs(20);
font-weight: 500;
}

Expand All @@ -31,10 +32,6 @@
}

@include media-breakpoint-up(md) {
h1 {
font-size: 4rem;
}

.carbonad {
margin-top: 3rem !important;
}
Expand Down
3 changes: 1 addition & 2 deletions assets/scss/_nav.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,6 @@
height: 2.5rem;
margin-top: .25rem;
overflow: hidden;
font-size: .875rem;

.navbar-nav {
padding-bottom: 2rem;
Expand Down Expand Up @@ -61,7 +60,7 @@
}

.dropdown-menu {
font-size: .875rem;
@include rfs(14);
}

.dropdown-item.active {
Expand Down
14 changes: 2 additions & 12 deletions assets/scss/_page-header.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,14 +12,14 @@
}

h1 {
font-size: 3rem;
@include rfs(48);
font-weight: normal;
color: #fff;
}

p {
margin-bottom: 0;
font-size: 1.25rem;
@include rfs(20);
font-weight: 300;
}

Expand All @@ -34,16 +34,6 @@
}
}

@include media-breakpoint-up(md) {
h1 {
font-size: 4rem;
}

p {
font-size: 1.5rem;
}
}

@include media-breakpoint-up(lg) {
h1,
p {
Expand Down
2 changes: 1 addition & 1 deletion assets/scss/_sidebar.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
order: 2;
padding-top: 1.5rem;
padding-bottom: 1.5rem;
font-size: .875rem;
@include rfs(14);
}

.section-nav {
Expand Down
34 changes: 14 additions & 20 deletions docs/4.0/content/typography.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -289,32 +289,26 @@ Align terms and descriptions horizontally by using our grid system's predefined
</dl>
{% endexample %}

## 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.

Here's an example of it in practice. Choose whatever `font-size`s and media queries you wish.
Bootstrap uses [RFS](https://github.com/MartijnCuppens/rfs) to control its font size. RFS is an SCSS-mixin which automatically rescales the font size based on the browsers' screen width.

{% highlight scss %}
html {
font-size: 14px;
}

@include media-breakpoint-up(sm) {
html {
font-size: 16px;
}
.post-title {
@include rfs(60px);
}
{% endhighlight %}

@include media-breakpoint-up(md) {
html {
font-size: 20px;
}
With the SCSS-input of above, the following css will be generated:
{% highlight css %}
.post-title {
font-size: 60px;
}

@include media-breakpoint-up(lg) {
html {
font-size: 28px;
@media (max-width: 1200px) {
.post-title {
font-size: calc(21.6px + 3.2vw);
}
}
{% endhighlight %}

More about RFS can be found on its [Github repository](https://github.com/MartijnCuppens/rfs).
1 change: 0 additions & 1 deletion docs/4.0/examples/justified-nav/justified-nav.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,6 @@ body {
}
.jumbotron .btn {
padding: 14px 24px;
font-size: 21px;
}

.navbar {
Expand Down
3 changes: 1 addition & 2 deletions docs/4.0/examples/narrow-jumbotron/narrow-jumbotron.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,8 +47,7 @@ body {
border-bottom: .05rem solid #e5e5e5;
}
.jumbotron .btn {
padding: .75rem 1.5rem;
font-size: 1.5rem;
padding: .75em 1.5em;
}

/* Supporting marketing content */
Expand Down
1 change: 1 addition & 0 deletions docs/4.0/getting-started/options.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ You can find and customize these variables for key global options in our `_varia
| `$enable-hover-media-query` | `true` or `false` (default) | ... |
| `$enable-grid-classes` | `true` (default) or `false` | Enables the generation of CSS classes for the grid system (e.g., `.container`, `.row`, `.col-md-1`, etc.). |
| `$enable-print-styles` | `true` (default) or `false` | Enables styles for optimizing printing. |
| `$enable-responsive-font-sizes` | `true` (default) or `false` | Enables [responsive font sizes]({{ site.baseurl }}/docs/{{ site.docs_version }}/content/typography/#responsive-font-sizes). |

## Color

Expand Down
2 changes: 1 addition & 1 deletion scss/_badge.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
.badge {
display: inline-block;
padding: $badge-padding-y $badge-padding-x;
font-size: $badge-font-size;
@include rfs($badge-font-size);
font-weight: $badge-font-weight;
line-height: 1;
text-align: center;
Expand Down
2 changes: 1 addition & 1 deletion scss/_close.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
.close {
float: right;
font-size: $close-font-size;
@include rfs($close-font-size);
font-weight: $close-font-weight;
line-height: 1;
color: $close-color;
Expand Down
6 changes: 3 additions & 3 deletions scss/_code.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ samp {
// Inline code
code {
padding: $code-padding-y $code-padding-x;
font-size: $code-font-size;
@include rfs($code-font-size);
color: $code-color;
background-color: $code-bg;
@include border-radius($border-radius);
Expand All @@ -25,7 +25,7 @@ code {
// User input typically entered via keyboard
kbd {
padding: $code-padding-y $code-padding-x;
font-size: $code-font-size;
@include rfs($code-font-size);
color: $kbd-color;
background-color: $kbd-bg;
@include border-radius($border-radius-sm);
Expand All @@ -44,7 +44,7 @@ pre {
display: block;
margin-top: 0;
margin-bottom: 1rem;
font-size: $code-font-size;
@include rfs($code-font-size);
color: $pre-color;

// Account for some code outputs that place code tags in pre tags
Expand Down
2 changes: 1 addition & 1 deletion scss/_custom-forms.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -180,7 +180,7 @@
height: $custom-select-height-sm;
padding-top: $custom-select-padding-y;
padding-bottom: $custom-select-padding-y;
font-size: $custom-select-font-size-sm;
@include rfs($custom-select-font-size-sm);
}


Expand Down
4 changes: 2 additions & 2 deletions scss/_dropdown.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@
min-width: $dropdown-min-width;
padding: $dropdown-padding-y 0;
margin: $dropdown-spacer 0 0; // override default ul
font-size: $font-size-base; // Redeclare because nesting can cause inheritance issues
@include rfs($font-size-base); // Redeclare because nesting can cause inheritance issues
color: $body-color;
text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
list-style: none;
Expand Down Expand Up @@ -122,7 +122,7 @@
display: block;
padding: $dropdown-padding-y $dropdown-item-padding-x;
margin-bottom: 0; // for use with heading elements
font-size: $font-size-sm;
@include rfs($font-size-sm);
color: $dropdown-header-color;
white-space: nowrap; // as with > li > a
}
16 changes: 8 additions & 8 deletions scss/_forms.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
display: block;
width: 100%;
padding: $input-btn-padding-y $input-btn-padding-x;
font-size: $font-size-base;
@include rfs($font-size-base);
line-height: $input-btn-line-height;
color: $input-color;
background-color: $input-bg;
Expand Down Expand Up @@ -96,13 +96,13 @@ select.form-control {
.col-form-label-lg {
padding-top: calc(#{$input-btn-padding-y-lg} - #{$input-btn-border-width} * 2);
padding-bottom: calc(#{$input-btn-padding-y-lg} - #{$input-btn-border-width} * 2);
font-size: $font-size-lg;
@include rfs($font-size-lg);
}

.col-form-label-sm {
padding-top: calc(#{$input-btn-padding-y-sm} - #{$input-btn-border-width} * 2);
padding-bottom: calc(#{$input-btn-padding-y-sm} - #{$input-btn-border-width} * 2);
font-size: $font-size-sm;
@include rfs($font-size-sm);
}


Expand All @@ -116,7 +116,7 @@ select.form-control {
padding-top: $input-btn-padding-y;
padding-bottom: $input-btn-padding-y;
margin-bottom: 0;
font-size: $font-size-base;
@include rfs($font-size-base);
}


Expand Down Expand Up @@ -151,7 +151,7 @@ select.form-control {

.form-control-sm {
padding: $input-btn-padding-y-sm $input-btn-padding-x-sm;
font-size: $font-size-sm;
@include rfs($font-size-sm);
line-height: $input-btn-line-height-sm;
@include border-radius($input-border-radius-sm);
}
Expand All @@ -164,7 +164,7 @@ select.form-control-sm {

.form-control-lg {
padding: $input-btn-padding-y-lg $input-btn-padding-x-lg;
font-size: $font-size-lg;
@include rfs($font-size-lg);
line-height: $input-btn-line-height-lg;
@include border-radius($input-border-radius-lg);
}
Expand Down Expand Up @@ -257,7 +257,7 @@ select.form-control-lg {
.invalid-feedback {
display: none;
margin-top: .25rem;
font-size: .875rem;
@include rfs(14);
color: $form-feedback-invalid-color;
}

Expand All @@ -269,7 +269,7 @@ select.form-control-lg {
width: 250px;
padding: .5rem;
margin-top: .1rem;
font-size: .875rem;
@include rfs(14);
line-height: 1;
color: #fff;
background-color: rgba($form-feedback-invalid-color,.8);
Expand Down
2 changes: 1 addition & 1 deletion scss/_images.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,6 @@
}

.figure-caption {
font-size: $figure-caption-font-size;
@include rfs($figure-caption-font-size);
color: $figure-caption-color;
}
Loading