Bootstrap Sass Installation and Customization

Bootstrap is a popular, open-source framework. Complete with pre-built components, it allows web designers of all skill levels to quickly build a site. The latest version of Bootstrap uses Sass as the preprocessor of choice. In this article, I’ll show you how to configure and customize a Bootstrap Sass-based project.

Bootstrap Installation

There are multiple ways to obtain and install the Bootstrap source files. Just remember that whatever method and package manager you choose, make sure you have a Sass compiler and Autoprefixer up and running. Bootstrap needs both in order to work.

Download Bootstrap files

We can download the Bootstrap files from the Bootstrap download page. Once downloaded, we can extract the contents of the file into our project's folder.

Node

With Node.js installed, we can quickly install the npm package for Bootstrap by typing in the command line:

[code language="bash"]
npm install bootstrap
[/code]

Ruby Gems

We can include Bootstrap in a Ruby app using Bundler and Ruby Gems with this command in the Gemfile:

[code language="bash"]
gem 'bootstrap', '~> 4.0.0'
[/code]

Bootstrap Sass Setup

Once we have Bootstrap installed we need to set up our project. The first thing we want to do is create a sass folder to hold our SCSS files and a stylesheets folder to store the compiled CSS. After that, we create a file named app.scss inside the sass folder.

The app.scss file is used to import Bootstrap components.

The next thing we want to do is find the _variables.scss file inside the Bootstrap Sass package and copy it into our sass folder. Next, we rename the file as _customVariables.scss and add an import statement for _customVariables.scss to app.scss. It's important to import _customVariables.scss first for reasons I’ll explain shortly.

The last import is an optional _custom.scss file. Many people will include custom CSS rules directly after their import statements or in their app.scss file, but we're going to separate any custom rules into their own partial.

Notice, we import our _customVariables.scss file first. The reason is that Bootstrap's variables are set to default! values, so we need to override these values by importing our variables first.

Continue reading %Bootstrap Sass Installation and Customization%

by Reggie Dawson via SitePoint