Bootstrap 4 Beta released!
Here at UI School, we love Bootstrap and have been following its journey for a while now. We are super excited about the Beta release and all the new features it packs. Our 4 week production grade UI Serverless Architecture course is built with Bootstrap v4 Alpha. And our current production UI School site is also built with Bootstrap 4 with Sass. So yes we are early adopters and will definitely be upgrading this week. Happily.
Below are all the new cool features the beta version packs!
Moved from Less to Sass. Bootstrap now compiles faster than ever thanks to Libsass, and we join an increasingly large community of Sass developers.
Flexbox and an improved grid system. We’ve moved nearly everything to flexbox, added a new grid tier to better target mobile devices, and completely overhauled our source Sass with better variables, mixins, and now maps, too.
Dropped wells, thumbnails, and panels for cards. Cards are a brand new component to Bootstrap, but they’ll feel super familiar as they do nearly everything wells, thumbnails, and panels did, only better.
Forked Normalize.css and consolidated all our HTML resets into a new CSS module, Reboot. Normalize.css has taken a different path than we’d prefer, dropping some core CSS tweaks we’ve long depended upon. Reboot takes the core of Normalize.css and expands it to include more opinionated resets like
box-sizing: border-box, margin tweaks, and more all in a single Sass file.Brand new customization options. Instead of relegating style embellishments like gradients, transitions, shadows, grid classes, and more to a separate stylesheet like v3, we’ve moved all those options into Sass variables. Want default transitions on everything or to disable rounded corners? Simply update a variable and recompile.
Dropped IE8 and IE9 support, dropped older browser versions, and moved to rem units for component sizing to take advantage of newer CSS support. Aside from our grid, pixels have been swapped for rems and ems where appropriate to make responsive typography and component sizing even easier. Need support for IE8/IE9, Safari 8-, iOS 8-, etc? Keep using Bootstrap 3.
Rewrote all our JavaScript plugins. Every plugin has been rewritten in ES6 to take advantage of the newest JavaScript enhancements with new teardown methods, option type checking, new methods, and more.
Improved auto-placement of tooltips, popovers, and dropdownsthanks to the help of a library called Popper.js.
Redesigned and improved documentation. We redesigned it, rewrote it all in Markdown, and added a few handy plugins to streamline examples and code snippets to make working with our docs way easier. We also added an amazing new search form!
New build tools completely rewritten in npm scripts instead of Grunt, immensely simplifying the process of developing and contributing to Bootstrap.
And so much more! Custom form controls, a redesigned carousel, an overhauled navbar, HTML5 form validation styles, hundreds of responsive utility classes, new components, and more have also been included.
Quoted directly from the release blog.
Want to learn to how we integrated our Angular project with Bootstrap 4 and Sass? And how to upgrade your existing Bootstrap project to the latest version? Stick around for our next post which will cover a detailed step by step guide on setting up your Angular project and Bootstrap 4 Beta with Sass and Angular CLI auto-compile and prefixing.
Until then, do sign up to be notified when our UI Serverless Architecture course enrollment opens up over at UI School. We go over modern UI(User Interface) Serverless development by building an Enterprise Grade Single Page Application with Angular, Firebase & More. Learn UI advanced techniques, tooling, UX principles, site speed, performance considerations & more.
What we will be building:
Learn more at UI School
Are you excited about the new Bootstrap 4 Beta release too? Let us know.
