Published: 2015-12-26, by Jonathan M. Hethey,reading time: ~5 minutes

Bootstrap 4 Grid only and SASS with Gulp

Bootstrap is a great CSS framework, but what if we only want to use the grid and not all the other features? You can do this if you either use the SASS or LESS version of the bootstrap framework. I'll quickly demonstrate how you only take the necessary parts. I dug into this, because I was creating a landing page only featuring parts of the bootstrap framework to increase the page speed.

Because Bootstrap is coming in ~~LESS~~ (from version 4 only in SASS) and SASS variants we can use those to only include certain files and not the entire framework. If you look at the Twitter Bootstrap Github repository, you can find the files inside the sass folder.

We'll make use of the bootstrap v4-dev branch for this tutorial, which in the fututre will be the master branch. Check out the v4 alpha documentation.

Get the code from the v4 bootstrap development branch.

What you will need to use the bootstrap 4 grid system:

bootstrap
a SASS compiler
a code editor
optional: gulp

To clone my repository, just use the following:

git clone --recursive git@github.com:JonathanMH/bootstrap-grid.git

(thanks https://github.com/BekoBou for the hint ;)) Now let's go ahead and create a directory for our project:

mkdir bootstrap-grid
cd bootstrap-grid
git init

Next, let's add the bootstrap repository as a git submodule and switch to the bootstrap v4-dev branch, you need to have git installed for the following step, but you can also download a .zip file manually.

git submodule add https://github.com/twbs/bootstrap.git
cd bootstrap
git checkout remotes/origin/v4-dev

You can also list all available branches with git branch -a. After this we change back to our project directory with cd ...

Now we need to create our example files and folders:

mkdir scss css
touch index.html scss/style.scss

Now we should have the following files in our project directory:

css/
index.html
scss/
  style.scss

including only the bootstrap grid in our SASS file

To only use the bootstrap grid, we'll just include the relevant .scss files straight from the bootstrap repository. Opening the style.scss file, we can put in the following to only include the bootstrap files that have something to do with the grid. Also the variables in the top set the grid work with the flexbox rules instead of floats.

$enable-flex:               true;
$enable-grid-classes:       true;

@import './bootstrap/scss/_variables.scss';
@import './bootstrap/scss/_mixins.scss';
@import './bootstrap/scss/_normalize.scss';
@import './bootstrap/scss/_reboot.scss';
@import './bootstrap/scss/_grid.scss';

Now when we compile the file to the css folder, it will show that the bootstrap grid relevant rules have been written to css/style.css. To make sure it works, we can insert something like the code below into the index.html file. Pay attention to, that we are not including the .scss file, but the compiled style.css:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Bootstrap v4 only grid system | JonathanMH</title>
    <link rel="stylesheet" href="css/style.css">
  </head>
  <body>
    <div class="container">
      <!-- Stack the columns on mobile by making one full-width and the other half-width -->
      <div class="row">
        <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
        <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
      </div>

      <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
      <div class="row">
        <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
        <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
        <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
      </div>

      <!-- Columns are always 50% wide, on mobile and desktop -->
      <div class="row">
        <div class="col-xs-6">.col-xs-6</div>
        <div class="col-xs-6">.col-xs-6</div>
      </div>
    </div>
  </body>
</html>

automating sass builds gulp

Here's the relevant part from my gulp file, that uses the gulp-sass module to process my style.scss file. Since we don't want to manually compile this every time, we'll automate this all with gulp and on top of that, minify our CSS. This is the content of my gulpfile.js inside my project:

var gulp = require('gulp');
var sass = require('gulp-sass');
var minifyCss = require('gulp-minify-css');

gulp.task('styles', function() {
  gulp.src('./scss/style.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(minifyCss({compatibility: 'ie9'}))
    .pipe(gulp.dest('./css/'))
});

// Watch task
gulp.task('default',function() {
  // run task initially, after that watch
  gulp.start('styles');
  gulp.watch('./scss/*.scss',['styles']);
});

To use it, make sure you install gulp globally and the dependencies inside the project:

sudo -H npm install -g gulp
npm install --save gulp gulp-sass gulp-minify-css
gulp

Now you should be getting the following output:

(master)⚡ % gulp
[17:19:32] Using gulpfile ~/projects/bootstrap-grid/gulpfile.js
[17:19:32] Starting 'default'...
[17:19:32] Starting 'styles'...
[17:19:32] Finished 'styles' after 19 ms
[17:19:32] Finished 'default' after 39 ms

Performance Matters!

One of the reasons to do this, is of course to save bandwidth and decrease the page load speed. By only using what we need for the grid system, we end up at a minified CSS file size of 28kb instead of the full bootstraps 104kb. You can of course do this with any part of the bootstrap framework or other frameworks that make use of a CSS preprocessor.

ls -lsh css
28K -rw-r--r-- 1 geronimo geronimo 19K Dec 26 17:29 style.css

ls -lsh bootstrap/dist/css
104K -rw-r--r-- 1 geronimo geronimo  95K Dec 26 16:58 bootstrap.min.css

Maybe you have heard that performance gets some additional attention, also with Facebook having their 2g tuesdays. Performance is really not measurable without context, but certainly an important point to pay attention to.

Summary

Now you know how to manage dependencies with git, automate a task with gulp and how to only take what you need from the bootstrap css framework. This is only one method to make your site faster and it should happen right from the beginning so you don't include things you will not need anyways.

Would you do something different? How are you managing build processes and dependencies?