Bootstrap 4 with Sass

Bootstrap 4 with Sass

English | MP4 | AVC 1280×720 | AAC 48KHz 2ch | 1h 56m | 413 MB

Bootstrap is the most popular framework for building responsive, mobile-first websites. When you combine it with Sass, you get CSS superpowers and a level of customization that makes Bootstrap even more powerful. This course explores the differences between regular Bootstrap and the new Sass-driven version, Bootstrap 4, and shows how to use the Sass-enabled features to build more customized sites. Instructor Ray Villalobos shows how to install libraries to add custom fonts, icons, and animations; use Sass variables, maps, and mixins to create custom layouts; modify global settings; and customize existing components with CSS and Sass.

Topics include:

  • Installing Bootstrap 4
  • Installing additional fonts and libraries
  • Customizing Bootstrap 4
  • Configuring Sass variables
  • Adjusting global settings
  • Using utility mixins
  • Adjusting components with CSS and Sass
Table of Contents

Introduction
1 Working with Sass Bootstrap
2 Using the exercises for this course

Setting Up
3 Simple Sass Bootstrap installation
4 Working with a blog project
5 Installing additional fonts
6 Installing animate.css
7 Adding CSS for syntax highlighting code
8 Installing JavaScript libraries

Customizing Your Installation
9 Global configuration variables
10 Creating a custom variable file
11 Modifying colors
12 Using maps to add colors

Working with Global Bootstrap Settings
13 Enabling responsive font sizes
14 Gradients shadows and roundness
15 Spaces and sizes
16 Other global settings

Using Utility Mixins
17 Controlling breakpoints
18 Adjusting gutters
19 Modifying components
20 Adjusting with CSS and Sass

Conclusion
21 Next steps