Customizing Bootstrap's Sass according to our needs

As we work with Bootstrap's Sass files, we'll exert considerable control over them by doing the following:

• Organizing our scss folder to give us the flexibility and freedom to accomplish what we need while making future maintenance easier

• Customizing Bootstrap's Sass variables

• Creating a few custom Sass files of our own

• Incorporating a set of font-based icons in our site assets, providing the icons that we need for our social media links

In other words, we'll be doing more than merely learning and applying Bootstrap's conventions. We'll be bending them to our will.

In this chapter's exercise files, open the scss directory. Inside, you should see the following structure:

To prepare for what's ahead, I've given you a head start by explaining the new layer of organization. All of Bootstrap's Sass files are saved in the bower_components/bootstrap/scss/ folder. You should not modify these files; you can (re)use them as described in the next sections...