You're reading from The Missing Bootstrap 5 Guide Customize and extend Bootstrap 5 with Sass and JavaScript to create unique website designs

Product type Paperback

Published in Aug 2022

Publisher Packt

ISBN-13 9781801076432

Length 384 pages

Edition 1st Edition

Languages

JavaScript

Tools

Bootstrap

Concepts

UI Development

Author (1):

Jeppe Schaumburg Jensen

View More author details

Table of Contents (17) Chapters

Preface

1. Part One – Customizing Bootstrap 5 with Sass

2. Chapter 1: Why and How to Customize Bootstrap FREE CHAPTER

3. Chapter 2: Using and Compiling Sass

4. Chapter 3: Downloading and Exploring the Bootstrap 5 Sass Files

5. Chapter 4: Bootstrap 5 Global Options and Colors

6. Chapter 5: Customizing Various Bootstrap 5 Elements

7. Chapter 6: Understanding and Using the Bootstrap 5 Utility API

8. Part Two – Creating a Unique-Looking Website Based on Bootstrap 5 and Customization

9. Chapter 7: Creating the Website Using Default Bootstrap 5 Elements

10. Chapter 8: Customizing the Website Using Bootstrap 5 Variables, Utility API, and Sass

11. Chapter 9: Improving the Website with Interactive Features Using JavaScript

12. Part Three – Advanced Topics Related to Bootstrap 5

13. Chapter 10: Using Bootstrap 5 with Advanced Sass and CSS Features

14. Chapter 11: Using Bootstrap 5 with Advanced JavaScript Features

15. Chapter 12: Optimizing Bootstrap 5 CSS and JavaScript Code

16. Other Books You May Enjoy

Using the RFS Sass plugin

RFS is officially described as a “unit resizing engine” that “automates responsive resizing.” In other words, RFS is a collection of Sass mixins and functions for calculating automated responsive CSS values based on the width of the viewport. Being an abbreviation for Responsive Font Sizes, it was originally developed for font resizing, but it’s now capable of resizing almost any value for any CSS property with units. RFS can be downloaded from its official website at GitHub at github.com/twbs/rfs/ or through NPM with the command npm install rfs. As you can see from the GitHub URL, the repository lives side by side with Bootstrap, since RFS is a side project from the team behind Bootstrap. In fact, RFS comes packaged with Bootstrap 5 as the file _rfs.scss in the vendor folder, and it’s used for resizing font sizes. This is most apparent in headings. RFS is enabled by default by the global option $enable-rfs and can...