Updating to Bootstrap 4 (with SCSS)

twitter boostrap

I like to use the Bootstrap framework when building responsive applications and websites. It’s lightweight and easy to use. Orginally named the Twitter Blueprint because it was developed by Mark Otto and Jacob Thornton as Twitter as a framework to encourage consistency across internal tools. So, it;s not just a framework, more an evolution of a style library. It’ snow in it’s 4th iteration, so here are the steps I used to update my WordPress theme from boostrap 3 to the new 4.

SCSS & SASS

As a UX Designer and Frontend developer I was pleased to see Bootstrap move to using SCSS. There’s also older SASS sheets included and if you want to write in SASS you can. Sass is actually the older syntax of scss and in simple terms it is intended for people who prefer conciseness over similarity to CSS (programmers 😂). Instead of of brackets and semicolons, it uses the indentation of lines to specify blocks. You can either load the SASS files directly or use a local preprocessor set up to turn the SASS files into SCSS. I’ll be writing a blog post all about SCSS soon, so check back for a more detailed look later. Of course you can sidestep all of the above and write plain css if you like.

GO get Bootstrap

First I need to update all of my files. I did this using command prompt bower install bootstrap#v4.0.0-alpha.4, but you can just get the files from here and manually install. You could also use the CDN like this;

CSS

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

JS

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>

Next I needed to get SASS up and running on my local machine, I have node.js set up on my local machine so I could use the npm (install anywhere) option
npm install -g sass

There’s full instructions on the SAS website

Adding the files to the WordPress theme

Fortunately I built my original WordPress theme using Bootstrap 3, so there wasn’t a great deal of layout I needed to fix. The updated version of of bootstrap has changed slightly, notable alterations are;

  1. The navigation Bar mark-up
  2. Panels are now “Cards”
  3. Updated Pagination
  4. Minor changes to the carousel
  5. No more Glyphicons (this point I was actually sad about)
  6. The grid system

There’s a great article over on http://www.dotnetcurry.com that gives you a step by step guide to updating and details about the changes.

When you load your files into your project you’ll wan tto create your own custom.scss file inside the SASS directory. If you did the bower install and ran SASS in the command line you’ll find if you create an .sass file it should be pre-processed into a .scss file on save. You will want to link to this new scss file just before your first tag, this will be your custom file for writing your own css files and needs to come last in the stack to override your theme defaults.

The Grid System

The biggest change is in the grid system. A grid their has been introduced providing a breakpoint at 544px. This gives boostrap 4 grid classes instead of the previous 3; xs, sm, md, and lg. This gives us five breakpoints:

• An extra-small breakpoint for handheld devices that boast a smaller screen than normal (0px)

• A small breakpoint aimed at phones / handhelds (544px)

• A breakpoint for screens of medium size, such as tablets (768px)

• A breakpoint for large screens – that is, desktops (992px)

• An extra-large breakpoint to support wide-screen (1200px)

To center columns the the offset class has been altered from .col-*-offset-** to .offset-*-** and the push class from .col-push-*-* to .push-*-*

On the whole it wasn’t too difficult to update and now I’m looking forward to delving in deeper and finding out the possibilities the updated version offers and how it can add to my UX designs and Prototypes I build for my clients. I believe this is going to greatly enhance my “5 step UX design process”.