Twitter Bootstrap 4 and SharePoint – An In-depth Preview

What is that groundswell you are hearing? Is it the most popular and widely used responsive framework is getting an overhaul? As many of you are likely aware, I am a big proponent of responsive frameworks as a rapid development tool for building responsive SharePoint sites, and in particular I have been a supporter of Twitter Bootstrap. The Bootstrap development team officially announced the Alpha release of Bootstrap 4 (B4) August 19th, 2015 via a blog post, well worth the read. In this post, the Bootstrap team lays out general improvements as well as upgrade strategies. Although we can expect additional alpha releases as well as probable beta rounds before the launch of the official stable B4 framework, it is incumbent upon us SharePoint developers to dig in and see what is coming.

I recently wrote an article for SP TechCon that provided an overview of the changes found in B4. Let’s go deeper and investigate the primary modifications to the framework.

IE8 Support – Going away

Dumping IE8 support may be considered overdue for those outside of the SharePoint world, but for many of us, this might be an issue. B4 will no longer support IE8. This truly is good news as the IE8 support muddled the code base with code bloat. B4 is a mobile first framework without additional shims to allow IE8 to reinterpret the embedded media queries.

B4, and in fact B3, allow us to refine the framework to only include components we want to use in a particular project. This is accomplished by provide the SASS (or rather SassScript) source files for the CSS as well as the independent JavaScript source for the script components (more on JS in a bit). What this means is that the “grid“, i.e. the first pillar of responsive design, has CSS that is defined in one primary SCSS file. If you wanted to be so bold, you could modify this SCSS file to shim the grid to be backwards compatible with IE8. You could then get some of the features of B4 even in IE8.

But why would you do this? Well, because it is possible I suppose, but not something I would undertake. If you are an IE8 shop, or plan to stick with IE8 for a while, stick with B3. Save yourself the headaches of needlessly porting B4 to work with IE8. There is good news on this front. 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 simple drop B3 support once B4 is released.

SASS or how Less got left behind

Bootstrap was originally developed using the CSS scripting language “Less”. In its day, Less was popular, but Less gave way to “Sass“. The Bootstrap team eventually came out with an official Sass port and most of us who were creating our own tailored Bootstrap implementations jumped to the Sass source as quickly as we could.

B4 was developed using 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 now and are looking at their Less source, I suggest you move to Sass now.

When you begin considering migrating your site from previous versions of Bootstrap to B4, be aware that the Bootstrap SASS/CSS has been completely rewritten. The grid classes itself are mostly the same, but the rest, well yeah, charges are afoot. You will need to allocate the time and budget to migrate most of your styling by hand.

Pixels to EM’s

The third pillar of Responsive Web Design, CSS3 Media Quries, is based around viewport widths, i.e. the number of pixels across on your smartphone, tablet or desktop. B3 used the pixel unit to set breakpoints while B4 moved to the em unit. Em’s are based off the default font size of a particular page and by default this is set to 16px at the HTML element level. At the BODY element level the default font size is set to 1rem. By setting fonts to use em’s, moving breakpoints to em’s will help keep units inline. The use of rem’s instead of em’s for font-size makes sense as it makes inheritance much less tricky to figure out as well. I will discuss rem’s and font sizes in getter length shortly.

For SharePoint the move to em’s and rem’s causes the unintended consequence of odd font sizes in out-of-the-box SharePoint features such as the web part tool pane, list views and many site settings pages. The best solution at this point is to provide custom CSS to override a particular B4 reset. My reasoning here is that we are using a framework such as Bootstrap to provide an overall coding structure as well as for use as a rapid development tool. Leave the framework alone as its codebase is, well, better than what SP provides OOTB. Fix SP to work with the grid rather than the other way around.

Update: There has been a good, health discussion around the merits or rather demerits of frameworks. I will be discussing this topic soon and providing my guidance and suggestions for practical developers and developments, i.e. the 99%.

Grid

Fortunately the primary grid / scaffolding stayed the same, and the grid structure has been one of my more highly rated benefits for recommending Bootstrap in the first place. The grid still uses classes such as container (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. Otherwise the updated grid should not cause us issues. If you plan to use just the grid and strip away the rest of Bootstrap using the SASS source, be aware that the SASS grid is radically different than in B3. The end result is primarily the same, just something to be aware of.

Reboot Module

Bootstrap 4 takes the Normalize module that helps provide a unified interface design across all browsers and bumps it up a notch with the new homegrown Reboot module. This new reset component adds additional resets for tables, lists, forms and a few others components. Read more in the documentation, but for SharePoint, this may again effect OOTB SharePoint features so just be aware.

Flexbox

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 addon and it looks very promising. Until more browsers support flexbox, this is a component I suggest we hold off on until a later date. New layout modules are also included.

New Layout Modules

New layout modules have been added to B4 including cards and the masonry grid. Think Pinterest. Nice right? This should work seamlessly with SharePoint, a huge plus. The card layout is actually a component that provides scaffolding on how to markup a particular block to display as a card. Using cards you can begin building a masonry grid. I have started to see people take tabs as well as the Masonry Script Library and create a truly fluid mason grid.

All of this should work fine in your SharePoint projects. Looking for a modern search result experience from SharePoint using B4, cards, a library such as Masonry and Display templates? Oh yeah, I am looking at Elio Struyf (@eliostruyf), the Display Template wizard.

Font styling now in rem’s

The font styling has been changed to rem’s which we quickly discussed earlier. Something of interest is that IE8 does not support rem units at all and in IE9/10, rem units may not be used in a font declaration but it may be used with font-size. Since IE8 isn’t supported anyhow, this is not the biggest issue.

What rem does is provide a font-size that is relative to the root element, i.e. . In the following CSS example:

If we then use a font-size of 1rem for other selectors, we are specifying 1 unit based on the HTML tag, which we set to 16px. Thus 1rem is equivalent to 16px in the above example.

For SharePoint, as already stated with em’s, this will begin to mess with OOTB SharePoint font-sizes. The fixes required to make B4 work with SharePoint may be a check mark in the anti-framework crowd. Yeah, I get it, but I would rather fix as necessary and continue on with better general coding practices.

Icons have been removed

Bootstrap 4 has removed all internal icons although with FontAwesome you should be set. Not much to say here really, rather a note.

Migration

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-plus 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 stay the course. Stick with the grid and use Sass for your CSS. If you intend to use the component styling found in B3 or the JavaScript components, check out the B4 Alpha documentation and prepare yourself now 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. The box-sizing will need adjustment for some SharePoint components, but we saw that in B3 as well. The font sizing may also need adjustment for your projects as resetting the body to 1rem will bleed into the ribbon, webpart controls, the site settings and more.

The new layout modules such as cards and masonry grid have a lot of potential for our master pages and page layouts. Front support for Sass should give you more reasons to move there if you haven’t already. Check out flexbox and see if that will work for your portals if your supported browsers will allow for them.

Overall, I like the update and I look forward to integrating components into future projects where it makes sense. What do you think? Is this the latest and greatest since sliced bread or just another update? Sound off!