SPTechCon The SharePoint and Office 365 Conference Logo

Twitter Bootstrap continues to improve: What's in store for SharePoint integration

Twitter Bootstrap continues to improve: What's in store for SharePoint integration

by: Eric Overfield

Change is the only constant. You must embrace change if you want to stay sane in the SharePoint space. Since Web design strategies continue to evolve with the latest devices, design trends and UI concepts, so too must the underlying frameworks we use day in, day out.

Version 4 of Twitter Bootstrap, by far the most popular HTML framework for building successful mobile friendly (responsive) SharePoint interfaces, was recently announced. Although still in its alpha stage, it is incumbent upon us front-end SharePoint developers to know what is in store and to investigate what might change, and how we might take these changes into account for current as well as future projects.

Bootstrap 4 (B4) was officially announced Aug. 19 via a blog post, which was well worth the read. In this post, the Bootstrap team laid out general improvements as well as migration strategies. Although we can expect additional alpha releases as well as beta rounds before its official launch, let's peer into the key highlights that might affect our projects.

IE8 Support: No more
First off, IE8 support has been dropped. This is actually great news in general, but I know many of our clients must still support IE8, and likely many of you still have to as well. If you are an IE8 shop, stick with Bootstrap 3, or upgrade Internet Explorer.

There is a silver lining: When Bootstrap 3 was launched, the Bootstrap team effectively dumped Bootstrap 2 support immediately. The word is this time around they are not going to drop Bootstrap 3 support once B4 is released. We can continue using B3 for the foreseeable future for our IE8 projects.

Sass is the way to go
Bootstrap was originally developed using the CSS scripting language Less. In its day, Less was popular, but it gave way to Sass (or rather SassScript, but who can tell?). Bootstrap 3 came out with an eagerly awaited Sass port, and many of us jumped to the Sass source as quick as we could.

B4 was developed for Sass first, and as of now a Less port is not available. I do not think this will change as Sass is much more popular and has become the CSS scripting language of choice. If, on the other hand, you are starting a new B3 project looking at Less source, I suggest you move to Sass now.

If you are migrating from previous versions of Bootstrap to B4, you will likely find that you will have to migrate your CSS/Sass/Less deployment by hand, a few styles at a time. B4 Sass has been completely rewritten, as have the JavaScript libraries.

Pixels to Ems
The third pillar of Responsive Web Design-CSS3 Media Queries-is based around viewport widths: the number of pixels across your smartphone, tablet or desktop. B3 used pixel widths to set breakpoints while B4 moved to ems. Ems are based off the default font size of a particular page, and by default 1 em is set to 16px.

A common unit for both font size and breakpoint will help keep units inline, but resetting the default font size can cause issues with SharePoint. Out-of-the-box SharePoint features, such as the Web part tool pane, list views and many site settings pages, may look broken within the B4 framework without further refinement. The best solution at this point is to provide custom CSS to override a particular B4 reset.

Fortunately, the primary grid/scaffolding stayed the same. The grid still uses classes such as containers (container-fluid), rows and cols. A fifth breakpoint was added, -xl, making room for a breakpoint in the 480px range. If you have been using B3, this means that much of your grid should transfer to B4 without much hassle.

Other significant changes
There are quite a few other exciting improvements that will affect migrations more than fresh builds. The JavaScript libraries in B4 were completely rebuilt. The Normalize module B3 used to provide a unified interface across browsers has been replaced with Reboot, a custom B4 reset tool.

New layout modules are included. Flexbox (or the Flexible Box Module) is a new layout strategy currently in W3C's Last Call Working Draft phase. B4 will support Flexbox through an add-in, and although I would suggest we hold off until browser support improves, Flexbox looks very promising. Other new layouts include cards and a masonry grid. (Think Pinterest. Nice, right?) This should work seamlessly with SharePoint, a huge plus.

Bootstrap 4 has removed all internal icons, although with FontAwesome you should be set.

A documented path to migrate to Bootstrap 4 has been released and may currently be viewed at the Bootstrap 4 Alpha documentation page. If you have been using Bootstrap 3, the general process should be familiar, just watch out for the new breakpoint.

Final thoughts
We are still months away from the official Bootstrap 4 release. If you are in the middle of a Bootstrap 3 project (or about to start one), I suggest you stay the course. Stick with the grid and use Sass for your CSS, and if you haven't moved to Sass, do that now. If you intend to use the component styling found in B3 or the JavaScript components, check out the B4 Alpha documentation and prepare yourself for any changes.

If you have a project moving to development in three to six months, definitely read up on B4 and begin working with the Alpha release. Watch box-sizing, font sizing, and the new breakpoint. The new layout modules such as cards and masonry grid have a lot of potential for our master pages and page layouts.

Eric Overfield is the president and cofounder of PixelMill, a digital branding consultancy specializing in Responsive Web Design, UI/UX, and Branding for SharePoint websites and portals.

View all Blog Posts