Bootstrap 4 Tutorial: Working with npm, Grunt.js and Sass (Part 2)

/* IMPORTS */
@import url(font-awesome.min.css);
@import url(animate.css);
@import url(jquery.mCustomScrollbar.css);
@import url(vegas.css);

Let’s also import the Google Fonts links that we need inside the _typography.scss file.

/* TYPOGRAPHY */
/* Google Fonts */
@import url("https://fonts.googleapis.com/css?family=Lato:400,300,300italic,400italic,700,700italic,900,900italic");
@import url("https://fonts.googleapis.com/css?family=Raleway:400,300,500,600,700,800,900");

Work on the variables for our Sass. Inside the _variables.scss file, copy the code below.

/* VARIABLES */

// colors
$color-white: #FFFFFF;
$color-turquoise: #00af94;

// backgrounds
$bg-white: #FFFFFF;
$bg-turquoise: #00c8aa;
$bg-black: #000000;

// font families
$font-lato: 'Lato', Arial, Verdana, sans-serif;
$font-raleway: 'Raleway', Arial, Verdana, sans-serif;

Then for mixins, let’s add the following code inside the _mixins.scss file (which is inside the helper folder).

/* MIXINS */
@mixin transition-cubic-bezier ($time) {
	-webkit-transition: all $time cubic-bezier(0.42, 0, 0.58, 1);
	-moz-transition: all $time cubic-bezier(0.42, 0, 0.58, 1);
	-ms-transition: all $time cubic-bezier(0.42, 0, 0.58, 1);
	-o-transition: all $time cubic-bezier(0.42, 0, 0.58, 1);
	transition: all $time cubic-bezier(0.42, 0, 0.58, 1);
}

Finally, we’ll work on our main file which is the style.scss. We will start by importing our support .scss files along with the regular CSS via Sass variables.

/* 
Theme Name: Bootstrap 4 Sass
Description: Bootstrap 4 with Sass
*/
//bootstrap
@import "scss/bootstrap";
// typography
@import "base/typography";

// compass
@import "compass";

// import files
@import "base/import";

// mixins
@import "helpers/mixins";

// variables
@import "helpers/variables";


/* GENERAL STYLES
-------------------------------------------------*/

body {
  background: $bg-white;
  font-family: $font-lato;
  font-weight: 400;
  font-size: 100%;
  line-height: 1.5em;
  position: absolute;
  height: 100%;
  color: $color-white;
  -webkit-font-smoothing: antialiased;
}

body, html {
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  width: 100%;
}

body, input, select, textarea {
	@include transition(all, 0.2s,cubic-bezier(0.42, 0, 0.58, 1) );
}


.scroll-touch {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

a {
  font-family: $font-lato;
    color: $color-white;
    cursor: pointer;
  text-decoration: none;
	@include transition(all, 0.2s,cubic-bezier(0.42, 0, 0.58, 1));
  &:hover {
    color: $color-turquoise;
    text-decoration: none !important;
    outline: none !important;
  }
  &:active, &:focus {
    outline: none !important;
    text-decoration: none !important;
    color: $color-white;
  }
}

.btn{
  margin-top: 27px;
}

strong, b {
  font-weight: 700;
}

em, i {
  font-style: italic;
}

p {
  font-family: $font-lato;
  margin: 0;
  font-size: 1em;
  line-height: 1.6em;
  color: $color-white;
  font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
  color: $color-white;
  font-weight: 400;
  line-height: 1.3em;
}

h1 {
  font-size: 44px;
  font-family: $font-raleway;
  font-weight: 700;
}

h2 {
  font-size: 22px;
  margin-top: 15px;
  margin-bottom: 30px;
}

h3 {
  font-size: 30px;
  margin-bottom: 25px;
}

h4 {
  font-size: 25px;
  margin-bottom: 25px;
}

h5 {
  font-size: 20px;
  margin-bottom: 25px;
}

h6 {
  font-size: 15px;
  margin-bottom: 25px;
}


.clear {
  clear: both;
}


/* ALIGNMENT
-------------------------------------------------*/

.align-left {
  text-align: left;
}

.align-center {
  text-align: center;
}

.align-right {
  text-align: right;
}

.no-margin-bottom {
  margin-bottom: 0;
}

.opacity-0 {
  opacity: 0 !important;
  visibility: hidden !important;
}


.opacity-1 {
  opacity: 1 !important;
  visibility: visible !important;
}

.index-999 {
  z-index: -999 !important;
}


/* CONTENT
-------------------------------------------------*/

.header-overlay {
  position: fixed;
  width: 100%;
  top: 0;
  left: -100vw;
  height: 100%;
  overflow: visible;
  opacity: 0;
}

.overlay {
  position: fixed;
  overflow: hidden;
  top: 0;
  left: -50%;
  background: rgba(7, 7, 7, 0.8);
  width: 100%;
  height: 100%;
  @include transition(all, 0.5s,cubic-bezier(0.7, 0, 0.3, 1));
  border-right: 1px solid #15171e;
  &.morp {
    -webkit-transform: skew(-25deg, 0deg);
    -moz-transform: skew(-25deg, 0deg);
    -ms-transform: skew(-25deg, 0deg);
    -o-transform: skew(-25deg, 0deg);
    transform: skew(-25deg, 0deg);
  }
}

#header-content {
  position: fixed;
  left: 0;
  top: 0;
  width: 50%;
  height: 100%;
  opacity: 0;
  @include transition(all,0.3s,cubic-bezier(0, 0, 0.58, 1));
  .content {
    position: absolute;
    z-index: 0;
    left: 0;
    padding: 0;
    top: 50vh;
    width: 100%;
    padding: 0 10%;
    @include transition(all, 0.3s, cubic-bezier(0, 0, 0.58, 1));
    @include translateY(-50%);
    text-align: left;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    opacity: 1;
    visibility: visible;
  }
}


#main-content {
  background:$bg-white;
  position: relative;
  overflow: auto;
  @include translate3d(100%, 0, 0);
  top: 0;
  width: 50%;
  @include transition(all, 0.5s, cubic-bezier(0.7, 0, 0.3, 1));
  &.main-hide {
  	@include translate3d(200%, 0, 0);
  }
  .content {
    width: 100%;
    padding: 8% 10% 0;
    text-align: left;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    opacity: 1;
    visibility: visible;
    h1, h2, h3, h4, h5, h6 {
      color: #757A86;
    }
    h3 {
      font-family: $font-raleway;
      text-transform: uppercase;
      font-weight: 700;
    }

    p {
      color: #747c83;
      font-family: $font-lato;
    }
    
      img {
        overflow: hidden;
        @include transition(all, 0.3s, cubic-bezier(0.42, 0, 0.58, 1));
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        @include scale(1);
        @include transition(all, 0.6s, cubic-bezier(0.215, 0.61, 0.355, 1));
      }
 
    }
  }


#close-content {
  position: fixed;
  background: transparent;
  border: none;
  top: 15px;
  right: 15px;
  color: #757A86;
  font-size: 2em;
  &:hover {
  	@include scale(1.2);;
  }
  &.hide-close {
    right: -40px;
  }
}

.mCSB_scrollTools {
  position: absolute;
  width: 5px;
  height: auto;
  left: auto;
  top: 0;
  right: -5px;
  bottom: 0;
  z-index: 1;
  @include transition(all, 0.5s, cubic-bezier(0.7, 0, 0.3, 1));
  .mCSB_draggerRail {
    width: 5px;
    height: 100%;
    margin: 0;
    @include border-radius(0);
    background-color: #757a86;
    filter: "alpha(opacity=40)";
    -ms-filter: "alpha(opacity=40)";
  }
  .mCSB_dragger .mCSB_dragger_bar {
    /* the dragger element */
    position: relative;
    width: 5px;
    height: 100%;
    margin: 0 auto;
    @include border-radius(0);
    text-align: center;
    background-color: #025aa5;
  }
}

.mCSB_scrollTools-left {
  right: 50% !important;
}

#contact-form {
  margin-top: 40px;
  .form-control {
    background: $color-white;
    border: 1px solid rgba(0, 0, 0, 0.1);
    @include border-radius(0);
    box-shadow: none;
    font-weight: 400;
    outline: medium none;
    height: 40px;
    width: 100%;
    color: $bg-black;
    @include transition(all, 0.3s, cubic-bezier(0, 0, 0.58, 1));
    text-align: left;
    &:hover, &:focus {
      box-shadow: none;
    }
    &::-webkit-input-placeholder, &::-moz-placeholder, &:-moz-placeholder, &:-ms-input-placeholder {
      color: #747c83 !important;
    }
  }
  textarea.form-control {
    min-height: 150px;
  }
  button#valid-form {
    font-weight: 400;
    padding: 1em 2em;
    font-size: 1em;
    display: block;
    margin: 0 auto 0;
    background: $bg-turquoise;
    color: $color-white;
    @include border-radius(0);
    font-weight: 700;
    width: 100%;
    line-height: 10px;
    &:hover {
      background: $color-turquoise;
      color: $color-white;
    }
  }
}

/* FOOTER
-------------------------------------------------*/

footer {
  padding: 10px 0;
  background: transparent;
  text-align: center;
  p {
    font-size: 11px;
    font-weight: 100;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #757A86;
  }
}


/* MEDIA QUERIES
-------------------------------------------------*/

@media only screen and (max-width: 1024px) {
  .overlay {
    width: 100%;
    height: 100%;
    left: 0;
    &.morp {
    	@include skew(0deg, 0deg); ;
    }
  }
  #header-content {
    position: relative;
    width: 100%;
    height: auto;
    padding: 100px 0 150px;
    .content {
      position: relative;
      left: 50%;
      @include translateX(-50%); ;
      top: auto;
      text-align: center;
    }
  }
  #main-content {
    position: relative;
    @include translate3d(0, 0, 0);;
    top: 0;
    width: 100%;
    &.main-hide {
    	@include translate3d(0, 0, 0); ;
    }
  }
  #close-content {
    display: none;
  }
  .mCSB_scrollTools {
    right: 0;
  }
  .mCSB_scrollTools-left {
    right: 0 !important;
  }
}

/* Small Devices, Tablets */
@media only screen and (max-width: 768px) {}

/* Extra Small Devices, Phones */
@media only screen and (max-width: 480px) {
  #header-content {
    padding: 50px 0 100px;
    .content {
      padding: 0 3%;
    }
    &.minimal-phone {
      height: 100vh;
    }
  }
  h1.text-intro {
    font-size: 30px;
  }
  h2.text-intro {
    font-size: 18px;
  }
}

@media screen and (max-device-width: 667px) and (orientation: landscape) {
  #header-content {
    padding: 50px 0 100px;
  }
  h1.text-intro {
    font-size: 30px;
  }
  h2.text-intro {
    font-size: 18px;
  }
}

Compiling Sass files via Grunt.js

Going back to our Gruntfile.js, we set up Compass and Sass using the following code below. These code will set the path linking to our style.scss file and style.css file and we enable Compass by setting up compass: true on the options of grunt sass.

compass: {      
    dist: {        
      options: {      
        sassDir: 'sass',
        cssDir: 'css',
        environment: 'production'
      }
    },
    dev: {              
      options: {
        sassDir: 'sass',
        cssDir: 'css'
      }
    }
  },

sass: {
    	dist: {
            options: {                 
                compass: true,
            },
    		files: {
    			'css/style.css' : 'sass/style.scss'
    		}
    	}
    },

The final thing we need to do is to create and set up a config.rb file for Compass inside the project directory. This file defines the relationship between files and their assets, how and where the CSS should be generated, and any dependencies for a project via Compass. Copy the code below inside the config.rb file.

require 'compass/import-once/activate'
cache = true
cache_path = 'C:/temp/sass/'
# Require any additional compass plugins here.

# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "/"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "javascripts"

# You can select your preferred output style here (can be overridden via the command line):
# output_style = :expanded or :nested or :compact or :compressed

# To enable relative paths to assets via compass helper functions. Uncomment:
# relative_assets = true

# To disable debugging comments that display the original location of your selectors. Uncomment:
line_comments = false


# If you prefer the indented syntax, you might want to regenerate this
# project again passing --syntax sass, or you can uncomment this:
# preferred_syntax = :sass
# and then run:
# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass

Finally, compile .scss files to one CSS file, go to your terminal or command prompt and inside your project directory type grunt sass.

We can also ask Grunt to watch for changes and run the tasks it needs. The watch task will run every time a file is changed and saved. Since the configuration was already set up on our Sass files we just need to simply type grunt watch on command prompt or terminal.

Working with custom.js

As a final touch, let’s add up the following JavaScript codes inside our custom.js file to enable our animation for our Bootstrap theme. You can also create a minified version of this file by just typing grunt uglify.

/* JAVASCRIPT CODES */

$(window).load(function() {
  setTimeout(function() {
    $('.header-overlay').velocity({
      translateX: "100%",
      opacity: "1",
    }, {
      duration: 850,
      easing: [0.6, 0, 0.3, 1],
    })
  }, 850);


  setTimeout(function() {
    $('#header-content').velocity({
      opacity: "1",
      complete: function() {
        setTimeout(function() {
          $('.text-intro').each(function(i) {
            (function(self) {
              setTimeout(function() {
                $(self).addClass('animated-middle fadeInUp').removeClass('opacity-0');
              }, (i * 150) + 150);
            })(this);
          });
        }, 0);
      }
    }, {
      duration: 1000,
      easing: [0.7, 0, 0.3, 1],
    })
  }, 1600);
})


$(document).ready(function() {
  $('a#open-more-info').on("click", function() {
    $(".overlay").toggleClass("morp");
    $("#main-content").toggleClass("main-hide");
    $("#close-content").toggleClass("hide-close");
    $('.mCSB_scrollTools').toggleClass('mCSB_scrollTools-left');
    setTimeout(function() {
      $("#mcs_container").mCustomScrollbar("scrollTo", "#main-content", {
        scrollInertia: 500,
        callbacks: false
      });
    }, 350);
  });
  $('button#close-content').on("click", function() {
    $(".overlay").addClass("morp");
    $("#main-content").addClass("main-hide");
    $("#close-content").addClass("hide-close");
    $('.mCSB_scrollTools').removeClass('mCSB_scrollTools-left');
    setTimeout(function() {
      $("#mcs_container").mCustomScrollbar("scrollTo", "#main-content", {
        scrollInertia: 500,
        callbacks: false
      });
    }, 350);
  });


  $(function() {
    $('body').bind('mousewheel', function(event) {
      event.preventDefault();
      var scrollTop = this.scrollTop;
      this.scrollTop = (scrollTop + ((event.deltaY * event.deltaFactor) * -1));
    });
  });
  
  var ifTouchDevices = navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry|Windows Phone)/);

  function scrollbar() {
    if (ifTouchDevices) {
      $('body').addClass('scroll-touch');
      $('a#open-more-info').on("click", function() {
        event.preventDefault();
        var target = "#" + this.getAttribute('data-target');
        $('body').animate({
          scrollTop: $(target).offset().top
        }, 500);
      });
    } else {
      $('body').mCustomScrollbar({
        scrollInertia: 150,
        axis: "y"
      });
    }
  }
  scrollbar();
});

You can download the demo files here.

Wrapping Up

Bootstrap is a great CSS framework that you can use to build a website, and using the SASS version lets you do almost anything you want.

Thankfully, task runner like Grunt.js makes the work much easier if you take time to learn the simple commands.

Hopefully this tutorial has helped you understand npm, Grunt.js and Sass and how it can speed up your Bootstrap development. If you have any questions or suggestions, drop a line in the comments.