O'Reilly logo

Bootstrap 4 Site Blueprints by Ian Whitley, David Cochran, Bass Jobsen

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Writing your own custom SCSS code

Now that you know the basics of Sass, you are ready to start your own custom CSS code. Remember the blog website layout I showed you at the start of this chapter?

As you already have seen in Chapter 2, Creating Your Own Build Process with Gulp, we do not only modularize our CSS code but also the HTML code. The HTML templates are compiled with Panini and can be found in the html folder of our project.

The color scheme

You will start your project with a color scheme. Open the scss/includes/_variables.scss file. This file contains a copy of Bootstrap's variables. You can remove these variables since we'll use Bootstrap's defaults with a few exceptions.

Now write the following SCSS code in the scss/includes/_variables.scss ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required