The Missing Bootstrap 5 Guide: Customize and extend Bootstrap 5 with Sass and JavaScript to create unique website designs

Cover
Title page
Copyright and Credits
Dedication
Contributors
Table of Contents
Preface
Part One – Customizing Bootstrap 5 with Sass
Chapter 1: Why and How to Customize Bootstrap
	Technical requirements
	When we should customize Bootstrap
	What elements can be customized?
	How we can customize Bootstrap 5
		Method 1 – editing the compiled Bootstrap CSS directly
		Method 2 – overwriting the Bootstrap CSS with your own custom styles
		Method 3 – customizing the default styles using Sass
	Examples of a component customized with the three different methods
		Method 1 – editing the compiled Bootstrap CSS directly
		Method 2 – overwriting the Bootstrap CSS with your own custom styles
		Method 3 – customizing the default styles using Sass
	Examples of user interfaces with a customized version of Bootstrap 5
		The card component
		Forum
		The contact page
		Portfolio
		Further customizations in this book
	Summary
Chapter 2: Using and Compiling Sass
	Technical requirements
	What is Sass?
	Sass syntax
		Comparison between the original Sass syntax and the modern Sass syntax
		Parent selector
	Sass features
		Variables
		Nesting
		Partials and import
		Mixins
		Extend
		Operators
		Functions
		Special values
		Built-in modules
	Sass features used by Bootstrap
		Syntax
		Partials
		Variables
		Maps
		Mixins
		Built-in modules
	Most important Sass features for Bootstrap developers
		Variables for customization
		Maps for the utility API
		Mixins and extend for semantic code
	Compiling Sass
		Experimenting with Sass using Sassmeister
		Incorporating Sass compilation into a development workflow
	Summary
Chapter 3: Downloading and Exploring the Bootstrap 5 Sass Files
	Technical requirements
	Downloading the Bootstrap 5 source code
		From the website
		From GitHub
		From NPM
	Exploring the Bootstrap 5 Sass files
		Root folder
	Importing the default Bootstrap 5
		Exploring bootstrap.scss
	Exploring the Bootstrap 5 variables
		Default values with the !default flag
		Null value default variables
	Summary
Chapter 4: Bootstrap 5 Global Options and Colors
	Technical requirements
	About the code examples
	Importing the Bootstrap 5 files individually
	Changing the global options
		Caret
		Rounded
		Shadows
		Gradients
		Transitions
		Reduced motion
		Smooth scroll
		Grid classes
		Container classes
		CSS grid
		Button pointers
		Responsive Font Sizes
		Validation icons
		Negative margins
		Deprecation messages
		Important utilities
		Spacer
	Customizing the colors
		Overview of the color variables
		Generating color classes
		Adding color to theme colors
		Removing color from theme colors
		Defining a custom color palette
	Summary
Chapter 5: Customizing Various Bootstrap 5 Elements
	Technical requirements
	Customizing the layout
		Breakpoints
		Containers
		Grids
	Customizing content
		Typography
		Images
		Figures
	Customizing forms
		Range
	Customizing components
		Breadcrumbs
		Cards
	Customizing helpers
	Customizing utilities
		Borders
		Spacing
	Summary
Chapter 6: Understanding and Using the Bootstrap 5 Utility API
	Technical requirements
	About the utility API
	Understanding the utility API syntax
		About the code examples
		Name
		CSS property
		Values
		Class
		CSS variable utilities
		CSS variable name
		Local CSS variables
		State
		Responsive
		RFS
		Print
		RTL
		!important
		More examples of the syntax
	Using the utility API
		Adding a simple utility
		Adding a complex utility
		Overwriting a utility
		Modifying a utility
		Removing a utility
	Summary
Part Two – Creating a Unique-Looking Website Based on Bootstrap 5 and Customization
Chapter 7: Creating the Website Using Default Bootstrap 5 Elements
	Technical requirements
	About the website
		Sitemap
	Bootstrap Icons
	Page setup
	Global modules
		Header
		Footer
		Page title
		Product card
	Page types
		Home (index.html)
		Shop (shop.html)
		Product (product.html)
		About (about.html)
		Contact (contact.html)
		Wishlist (wishlist.html)
		Cart (cart.html)
		Frequently Asked Questions (faq.html)
		Article page (shipping.html, returns.html, terms-of-service.html, and privacy-policy.html)
	Summary
Chapter 8: Customizing the Website Using Bootstrap 5 Variables, Utility API, and Sass
	Technical requirements
	Importing Bootstrap 5 files and custom styles
	Default variable overrides
		Color palette
		Global options
		Global variables
		Layout
		Forms
		Components
	Variable values using existing variables
		Content
		Forms
		Components
		Helpers
	Utilities
	Other custom styling
		Alert
		Offcanvas
	Summary
Chapter 9: Improving the Website with Interactive Features Using JavaScript
	Technical requirements
	About the code examples
		Simple and clean JavaScript code
		Page IDs
		Partial and complete code
		Original and updated code
		Line numbers
	Adding a tooltip component to a form label
	Adding toast components to product-related actions
		Adding a product to the cart
		Adding a product to the wishlist
		Adding all products to the cart
		Removing a product from the wishlist
		Removing a product from the cart
	Changing the product quantity in the shopping cart
	Adding form validation
	Adding form submission loading indicators
	Adding form success messages
	Creating programmatic tabs navigation
		Shopping Cart tab pane
		Shipping Details tab pane
	Updating the progress status in the checkout flow
		Updating the progress using inline styling
		Updating the progress using classes
	Creating a lightbox for the product gallery
	Summary
Part Three – Advanced Topics Related to Bootstrap 5
Chapter 10: Using Bootstrap 5 with Advanced Sass and CSS Features
	Technical requirements
	Using Bootstrap 5 Sass mixins
		Mixin overview
		Mixins depending on global options
		Mixins that are not used
		Mixins used for variants
		Examples
	Using Bootstrap 5 Sass functions
		Tint color
		Shade color
		Shift color
		Color contrast
	Extending Bootstrap 5 classes for semantic HTML
	Extending Bootstrap 5 classes to create custom components
		The Page title global module
		Blockquote in the Reviews section
		Border in the Summary section
	Creating a custom component using Bootstrap 5 variables, mixins, and functions
		Creating contextual color variants
		Creating responsive horizontal variants
	Using Bootstrap 5 CSS custom properties
		Groups of CSS custom properties
		Limitations of CSS custom properties for customization
		The dark color theme
		Breadcrumb
		Helper
		Prefix for CSS custom properties
	Using the RFS Sass plugin
	Summary
Chapter 11: Using Bootstrap 5 with Advanced JavaScript Features
	Technical requirements
	Interactive components of Bootstrap 5
		Accordion
		Alert
		Button
		Carousel
		Collapse
		Dropdown
		List group
		Modal
		Navs and tabs
		Offcanvas
		Popover
		Scrollspy
		Toast
		Tooltip
	Initializing interactive components
		Initializing interactive components using data attributes
		Initializing interactive components using JavaScript
		Initializing multiple components
	Defining options for interactive components
		Defining default options
		Defining options using data attributes
		Defining options using JavaScript
		Defining default, common, and individual options
	Using JavaScript methods
		Asynchronous methods and transitions
	Using JavaScript events
	Summary
Chapter 12: Optimizing Bootstrap 5 CSS and JavaScript Code
	Technical requirements
	Including the Sass partials for the used components only
	Removing unused helpers and utilities
		Removing unused helpers
		Removing unused utilities
		Trimming used utilities
	Setting up a build process using Node.js, npm, and Laravel Mix
		Using the Laravel Mix template
		Using Laravel Mix
		Adding the website code to the build process
	Using a module bundler to optimize JavaScript
	Minifying our compiled CSS and bundled JavaScript
	Summary
Index
About Packt
Other Books You May Enjoy