SASS, Bootstrap, Webpack — Create your first website

Published in

satoripop

6 min readNov 29, 2018

Bootstrap stands as one of the most popular open-source front-end frameworks on the Web. To build its template, Bootstrap uses SASS as source CSS files, REM as primary CSS unit and Flexbox for its grid system.

In this series, our objective is to cover all you need to know about Sass, Bootstrap, and Webpack to start creating your website:

– Step 1: Learn SASS fundamentals

Sass is an extension of CSS that adds power and elegance to the basic language CSS. We want to use Sass in creating our website, so we should start first by exploring Sass and learning the main concepts that we will be using later on.

=> SASS — Learn the fundamentals

– Step 2: Understand how Flexbox works

To create flexible, responsive layout structures we will be using flexbox layout, let’s understand together how flexbox works while testing the result of each new property.

=> Flexbox — Understand how it works

– Step 3: Differentiate REM vs EM vs PX

we often use px as a CSS unit, however, CSS3 introduces a few new units including the remunit, so what is remand em ? let’s see how to differentiate between these units and how we will use them.

=> Differentiate REM vs EM vs PX

– Step 4: Configure Laravel-mix

To get browsers to understand our Sass code, we’ll need to compile the Sass files and transform them into CSS files. Laravel Mix provides a fluent API for defining the Webpack building steps to get us up and running as quickly as possible. Let’s configure laravel-mix:

=> Webpack — Configure Laravel-mix

– Step 5: Structure your project

Now we are pretty much ready to start developing and learning how to use Bootstrap 4, for this, I created a project named ‘Firstlypop’ .

Download the project from GitHub here.

Let’s start by discovering the content of the project:

a README.md file: Here you enter the details of your project; requirements, installation steps, development team members, etc.

a package.json file : It is already preconfigured to install Laravel-mix, bootstrap and jQuery. You can add the list of the packages that your project requires.

a webpack.mix.js file: It is already preconfigured to compile a file at assets/js/app.js to assets/dist/js and another file atassets/sass/style.scss to assets/dist/css .

a gitignore file: I added untracked files that Git should ignore like node_modules and dist files.

an index.html file: contains a basic html 5 template.
Note we will import the compiled CSS file in the dist folder, as well the compiled JS files.

an assets folder

I have setup the SASS folder as follows:

A Base folder containing fonts, custom variables, mixins, placeholders and a global style file.
Components folder to add custom style of different components such as buttons, sliders and forms.
Partials folder to add header and footer style.
Pages folder organized by each page’s specific style.
finally style.scss file to import these style files.

I often use this structure for easy and clear overview of where each style comes from.

– Step 6: Customize bootstrap

Now that we have an already set up project, we can start customizing Bootstrap.

Bootstrap 4 uses a predefined series of variables, mixins and other settings to work its magic.

To explore them, open up the file node_modules/bootstrap/scss/_variables.scss in your code editor

We want to customize these settings easily and without overwriting the styles over and over again or touching the Bootstrap core files.

For example, let’s say we want to change the primary color to purple.

First, we’ll look in node_modules/bootstrap/scss/_variables.scss file. The variables are broken down into sections, and we’re looking for the Color system section.

There, we want the $primary: $blue !default; variable so we can copy it over to our custom fileassets/sass/base/_variables.scss and change its value.

next, open up the file: assets/sass/base/style.scss and import your sass files along with the bootstrap’s sass files.

Notice, we import our _variables.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.

Lastly in you CMD: cd path/to/your_project run the command npm run watch and check the new modification on your browser.

Remember in our webpack.mix.js we added mix.browserSync which reloads the browser page automatically when detecting a change.

Of course there is much more you can do. You can change not only the colors but also the typography, spacing, and more.

$h1-font-size: $font-size-base * 2.5 !default;$h2-font-size: $font-size-base * 2 !default;$btn-padding-y:  .5rem !default;$btn-padding-x:  .75rem !default;$btn-line-height: 1.2 !default;

We harnessed the power of mixins and control directives so check out the bootstrap mixins folder under node_modules/bootstrap/scss.

Finding the variables you need to change should be more manageable now, and you’ll know what to look for exactly.

For creating responsive breakpoints, bootstrap provides sass mixins media queries:

@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }

Check out the full description of Bootstrap responsive breakpoints here also check out the Bootstrap grid system here.

Conclusion

Okay, by now you should have a good basis to build upon.

To sum up, we discovered the power of sass and the flexbox layout,
we explored the difference between rem / em / pxand we learned when to use each one. Finally, we utilized the Firstlypop project as we configured the compiler laravel-mix.

We hope that you gained a thorough understanding of the new concepts of web integration.

You can download the Firstlypop project from Github here and start customizing the framework with ease.

And that’s a wrap. Thank you for reading :)
Got any questions or feedback? Leave a comment below.