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”.

My introduction to angular.js

Angular JS

For me, the process of making websites has changed a lot in the 15 years I’ve been in the business. HTML, CSS and JQuery are still the preferred languages of UX Designers and Frontend Developers like myself. Why? Simply because these are the languages that the web browser renders, this is the output you see in your viewport. How that output gets there and the rich level of interaction that website apps now present to the user is where we’ve seen the biggest changes and developments. I worked in an e-commerce company for 4 years prior to returning back to freelance work, there we used asp.net repeaters to retrieve data from our databases and present them as html pages, we injected data into those databases using C#. I kept hearing about this other structural framework called Angular.js so I thought i’d take a brief look to see what all the fuss is about.

Angular is more than a Java Script library

Anyone who has worked in the Frontend of websites and apps will have used plenty of JQuery. It’s our ‘go to’ library of Java Script that saves us heaps of time and allows us to add a nice level of user interaction to our pages, so to see the extention .js on the end of “Angular” is a reassuring and familiar sight. The we open it up for the first time and discover it’s a whole lot more. As the angular.io state;

“Angular is a platform that makes it easy to build applications with the web. Angular combines declarative templates, dependency injection, end to end tooling, and integrated best practices to solve development challenges. Angular empowers developers to build applications that live on the web, mobile, or the desktop”

Angular empowers a Frontend Developer

In simple terms Angular brings complicated backend functionality (usually reserved for people who understand and write code such as C#) into the frontend. At a first glimpse it’s not too dissimilar to something like asp.net

asp repeater
A typical asp.net repeater used on an e-commerce website

In a simple “Hello World” index document we can see our first glimpse of how Angular (much like asp.net) allows us to present data from a source and render it on the page as html output. Of course the app/controller could contain any kind of javascript functions, iterations or objects.

Angular Code
Angular source code that is injected into our html page
The HTML markup (note the attributes and reference the angular source {{message}} )
The rendered browser html output
The rendered browser html output

Two Way Bindings

So we’ve seen how Angular can retrieve some data and present it on a page much like asp.net. Now lets look at a simple two way binding that demonstrates how Angular can also add a rich later of interaction that can open the possibility of injecting data back into a database from it’s application.

Presenting some different input fields using scopes in Angular
Angular reading and presenting the user input interaction.

Amazing right! All of this without a line of C# being written. I’ll look forward to taking this much further in my next blog post.

A very small draw back

angular js is built upon node.js. It can easily be set up for local development by installing node on your machine and running as a local server. If like me you;re used to developing WordPress sites for small businesses you’ll find they often use cheap, shared web hosting. I’m yet to find a shared hosting provider who will allow you to install node.js on their server. So keep in mind angular.js is more likely to be reserved for your larger clients.

Check back soon for more of my experiments with angular.js.

How to merge wordpress sites

HOW TO MERGE WORDPRESS SITES

In this blog post I go on to explain how I’ve been faced with the task of merging 4 WordPress sites into a single site for my client Warwick Music Ltd. They had a site for each of the plastic musical instruments they invented, manufacture and retail (the pBone, pTrumpet and pBuzz) along with a site catering for music educators. The challenge has been to maintain their valuable domain / link equity, ensure all the content can still be accessed and present under their existing brand as a single WordPress installation.

I needed to carefully plan my approach. For anyone faced with a similar task my best advise would be to map this out first, but also make sure you have access to some useful SEO tools such as MOZ, alongside the basics obtained from Google Analytics. I split the task into 5 main areas;

  1. Merge of content using the Export and Import feature of WordPress
  2. Enable WordPress to handle multiple domains
  3. Add new access pages and make template code and markup changes
  4. Analyse landing pages and user behavior to facilitate the production of a 301 redirect list
  5. Test and go live