How Open Sourcing Bootstrap Made It Huge

It’s Open Source Week at SitePoint! All week we’re publishing articles focused on everything Open Source, Free Software and Community, so keep checking the OSW tag for the latest updates.

Bootstrap, the popular HTML/CSS/JS framework created by Mark Otto and Jacob Thornton, started off as a proprietary tool aiming to foster code consistency and maintainability across Twitter products. It was in late August 2010 that the big decision of open sourcing Bootstrap was taken.

Was Open Sourcing Bootstrap a Great Decision?

In Learnings from Open-Sourcing Bootstrap, Mark Otto shared one of the best testimonies of what it means to be at the heart of one of the most successful open source projects in the front-end ecosystem:

open-sourcing Bootstrap was one of the best things to happen to me personally and professionally. I’ve been able to help thousands of people do their work better and faster—all while helping them learn a bit more as they go. … Bootstrap has been worth every second I’ve put into it and I hope to keep it up for a long time to come.

That was 2012, what about now? Fast forward to 2016: Bootstrap 4 alpha 5 is out and to my recent question on the dedicated Bootstrap Slack Channel about how much being an open source project has contributed to the growth and success of the framework, Otto was quick to reply:

without it being open source, it wouldn’t have grown at all :) It would still be an internal project at twitter if we hadn’t shared it outwardly when we did.

The open source way is at the heart of Bootstrap being as huge as it is today: the second most starred project on GitHub and providing the front-end infrastracture for over ten million live websites.

At its core is communication and collaboration between designers and developers. Bootstrap itself comes to be called by its creator a living document powered by itself, as it embodies the very templates and components it documents. As a living styleguide, Bootstrap works as a compass for all discussions about the framework’s evolution as well as providing as many people as possible with guidance on its usage for building websites and apps.

Last but not least, being a framework that caters for all skill levels and being an instance of best front-end development practices, Bootstrap can be put to use as an excellent learning tool.

It’s not by chance that Bootstrap’s motto is in fact: Help awesome people do awesome stuff.

How is Bootstrap Managed on GitHub?

Not being part of the development team behind Bootstrap doesn’t mean being totally in the dark about how the project is maintained and developed on GitHub.

Let us not forget about the central role communication plays in laying the groundwork for the entire project. It turns out not only is Mark Otto great at documenting code, he’s also quite open when it comes to sharing his vision, project management, and generally his thought about a number of web development topics. The most curious among you can head over to Ask @mdo anything! on GitHub and browse through Otto’s replies, or better still, fire away with your own questions.

In Managing features in Bootstrap, Otto outlines a few guiding principles and practices he and his team follow on the Bootstrap repository.

Here’s a summary:

• Bootstrap is a product with a clear mission: Making design and development easier. If you request a particular feature, the Bootstrap team will evaluate whether to pursue it or not on the basis of a balance between this goal and the team’s interests and experience.
• The main tool for features management is the Bootstrap issue tracker. If you’d like to suggest a new feature or extend an existing one, just open a new issue or send a pull request. The team is quite shrewd when it comes to rejecting new suggestions that don’t match up with their goals for the framework, but if they accept, your request remains open and gets assigned a milestone for its release.
• Development of major releases is under wraps until testing time. The team has fun making significant changes to the framework on every major release. Which features will be present and which ones will be scrapped is managed in two private GitHub repos. Once the team is ready for testing, the project opens its doors to the community for help and feedback.

Bootstrap Version 4 Alpha 5

With each major release, Bootstrap gets a complete makeover. Version 4, the latest release at the time of writing, is no exception. Although the framework is in its alpha stage, which means all sorts of changes can still take place, you can come away from reading the docs and the issues tracker on GitHub with a rough idea of what you’ll find once the stable version comes out.

Here’s a bird’s eye view of what’s new in Bootstrap version 4 alpha:

• Move from Less to Sass.
• Optional use of flexbox.
• Replacement of pixels with rem and em units for sizing fonts, margins and paddings.
• One more grid tier for the extra-large responsive breakpoint.
• Introduction of Reboot as the new module for HTML resets.
• Rewrite of all JavaScript plugins using ES6.
• Improvement of Tooltips and Popovers with the Tether library.
• Scrapped Wells, Thumbnails and Panels for the Cards component.
• Removal of the Affix component.
• Dropped support for Internet Explorer 8 and below.

You can find more about broad changes in Bootstrap 4 alpha in Bootstrap 4 Alpha: Super Smart Features to Win You Over.

Here, I’m not going to include more granular changes involving class names, components’ HTML structure, reorganization and renaming of Sass variables, etc., since it’s likely they’re going to change quite a bit until the first stable release of the framework comes out.

If you’re curious, the alpha docs and The Bootstrap Blog are the best places to hunt for more details.

Conclusion

Teaching and learning from each other and building awesome stuff as a result of open communication and collaboration lie at the heart of the open source philosophy. Bootstrap certainly stands out as one of the most successful instances of the open source approach, which has made it what it is today.

Why not start to play with Bootstrap, learn from it, and make it more awesome with your contributions?