From: [email protected]
To: [email protected]
Date: Fri, Aug 11, 2017
Subject: Bootstrap Beta release

Hey Kenneth, Bootstrap 4 beta came out not too long ago. And it just so happens that we need a new blog topic. If you’re not writing anything important, I would really like for you to come up with a post about it.

– The VIB

---

From: [email protected]
To: [email protected]
Date: Fri, Aug 11, 2017
Subject: Re: Bootstrap Beta release

Hey Bossman, I am currently writing a blog post on “Which tech mascot will win in an Epic Ultimate Showdown”. I am currently nearing a convincing 1000 word post on why Golang’s Gopher will come out victorious against Github’s Octocat in the finale. I also briefly touched up on comparing PHP and PostGres elephant and just how silly Lisp mascot looks. I feel pretty good about this one.

– K

---

From: [email protected]
To: [email protected]
Date: Fri, Aug 11, 2017
Subject: Re: Bootstrap Beta release

That’s a pretty cool topic. How about…. we put that one on hold and focus on the Bootstrap 4 while the topic is relevant? We would certainly like to garner attention with this one. We could always save the “Ultimate Showdown” post for later.

 

---

From: [email protected]
To: [email protected]
Date: Fri, Aug 11, 2017
Subject: Re: Bootstrap Beta release

Yeah sure. Let me just play around with the Bootstrap 4 and see what upgrade they made. I’ll whip something up as fast as I can.

---

 

From: [email protected]
To: [email protected]
Date: Fri, Aug 18, 2017
Subject: Re: Bootstrap Beta release

Here’s a start. Let me know what you think.

Intro

Although we at Arroyo Labs are big fans of Bootstrap 3 we have stayed away from the use of Bootstrap 4 alpha for client projects (for a good reason). With the Bootstrap 4 beta release, it was finally a time for us to explore its newest addition and changes. While playing around for couple of hours doesn’t do justice to the amount of effort that went into the upgrade, I wanted to express my thoughts on them in this quickly put-together writeup.

Before we delve further, I would like to quickly summarize who the Bootstrap 4 isn’t for. If you fall into one of the category, migrating to v4 is not recommended:

IE8, IE9, Safari 8

If you happen to be an apologist for the obsolete browsers named above, this framework is not for you. Bootstrap decided to move on to the newer and brighter browsers going forward.

Websites that are heavily dependent on Panels, Wells, and thumbnails

If you decide that removing the above components in favor of cards is not worth your time, it is your best bet to stick with Bootstrap 3.

 

New Features

Now, here are some notable changes the new version of Bootstrap brings:

New Dependencies

Bootstrap brings new dependencies of Popper.js and Tether to bring improvement to tooltip placement, popovers and dropdown menus. Be sure to include those two dependencies before including Bootstrap JS file

Card Component

So, what is Card component? Card Component is a new multi-purpose content container. Its mobile friendliness, and high customization options makes it a go-to component to fill up the web-applications with visually appealing modules.

 

Move from LESS to SASS

Bootstrap 4 has chosen SASS as it’s CSS preprocessor citing performance and more vibrant community. The biggest positive for those unfamiliar with SASS is that he/she can easily make customization to Bootstrap by changing the SASS variable without need for deep-diving into the CSS files. It’s not a fun news for LESS evangelists but I don’t expect there to be a huge learning curve undergoing transition to SASS.

 

Flexbox

Flexbox is great. With the dropped support with the older browsers, adopting the use of Flexbox is well-timed if not the next obvious next step forward. If you aren’t familiar with Flexbox, here is my favorite tutorial to get you up to speed.

From: [email protected]
To: [email protected]
Date: Fri, Aug 18, 2017
Subject: Re: Bootstrap Beta release

OK.. this is a start. But you only managed to round up bunch of common facts about Bootstrap 4 and I don’t see much of your own thought about this one. I would really like for you to dig deep and see what else you can come up with. As of now this isn’t a very interesting blog post.

Remember: there is no try. Only do.

---

From: [email protected]
To: [email protected]
Date: Fri, Aug 25, 2017
Subject: Re: Bootstrap Beta release

Sorry if I didn’t sound very invested in this one. It’s just that from quick glance, Foundation 6 is already few steps ahead of Bootstrap 4 despite its being obvious step forward. Introducing ES6, inclusion of SASS, Card component, etc… that ‘wow’ factor just wasn’t there for me by the time I got to Bootstrap 4. But I think it’s a pretty good upgrade to the framework. See attached.

 

My Thoughts

 

My experience with Bootstrap 4 has been pleasant to consider making immediate jump from v3 to v4. Here are brief highlight of the my takeaways:

 

Navigation Bars

One of the biggest trend I have seen from V3 to V4 is the slimming down on excess HTML elements and classes. Most improvement I have seen regarding DOM element efficiency is in the navigation bars.  One reason I stayed away from v3 navigation bars is for its bulkiness in DOM elements as it makes customizing a tedious task. V4 counterpart provides marginal improvement in that area.

To that, I say: Thank you thank you thank you.

 

Flexbox

Have I mentioned how great the Flexbox is? (See above paragraph). I saw an immediate benefit with the new Flexbox grid system. I have always considered the Bootstrap 3’s float-based grid layout to be misguided. and avoided its use altogether. In gentlest way to describe it, floats have become difficult to maintain and creates unnecessary frustration in the UI work. With no IE8 and other obsolete browsers to apologize for, Bootstrap 4 is finally able to embrace flexbox completely.

 

Documentation

Because this will likely go unmentioned by most,  I feel compelled to make my stand that the documentation is my favorite improvement going from v3 to v4.  I found the documentation for Bootstrap 3 to be one of the most infuriating experience as a developer. For instance, the documentation for the v3 components have been cramped into a single page with very little margin. Very often, I found myself accidentally scrolling out of the section, only to read up on components completely unrelated to what I was looking to read.

Thankfully, the team at Bootstrap (from all appearances) has adopted  MkDocs to generate the documentation. The components are now properly segmented and contents are better marginalized. The quality in detail of the documentation that highlights multiple use cases of each component deserves a special mention as well.

With no plan in place for Bootstrap team to upgrade the V3 documentation to a standard set by Bootstrap 4, this is the biggest reason I am eager to say goodbye to Bootstrap 3 and await for Bootstrap 4 to get out of its beta stage.

---

From: [email protected]
To: [email protected]
Date: Fri, Aug 25, 2017
Subject: Re: Bootstrap Beta release

It’s getting pretty close. I think there should be some outrageous and sensational claim to this post.. a hot take so to speak. We want people to laugh, cry, outrage over this until they pass out. So channel the ego of your favorite cable news commentator and flesh it out some more.

---

From: [email protected]
To: [email protected]
Date: Fri, Sept 1, 2017
Subject: Re: Bootstrap Beta release

This is getting into a dangerous territory. Yeah sure why not?

Bootstrap needs to try harder.

Despite all of the previously mentioned positive, it’s been playing catch up to Zurb’s Foundation in multiple features for months and we have no idea how long v4 is going to be in beta. To start a moratorium to it, I have provided some feature requests for Bootstrap.

 

Modals

Bootstrap modal stayed the same jumping from V3 to V4 thus this is the component I would like to see a big step in. The next big step forward is for Bootstrap to provide the ease of switching between multiple modals without introducing background scrolling issues. I wrote about having to deal with such challenges in this blog post.

Also, adding a feature to drag around a modal would be pretty neat.

 

Loading indicator

For containers such as jumbotron, cards and modals with content that takes long time to load, having optional loading animation indicators from generic spin animation to progress bars would help web applications more vibrant.

 

Code Colorization

A content container which detects codes (HTML, CSS, JS, etc) and applies various color for easy example code share

 

Please? 😉

---

From: [email protected]
To: [email protected]
Date: Fri, Sept 1, 2017
Subject: Re: Bootstrap Beta release

Excellent work Kenneth! Everyday you make me proud and today you get a raise and upgrade to your dental plan! Bless your heart.