Where is Bootstrap heading to?

Bootstrap, the CSS framework powering millions of awesome websites like frontconf.com, will launch its fifth version in 2020. Get to know what to expect from the upcoming release from one of the team members, Martijn.

Bootstrap, the mother of all CSS frameworks, is about to launch its fifth version in 2020. 9 years after its initial launch, Bootstrap has evolved from a solid base to an extendable and configurable system in the ever-changing landscape of the CSS world. In this talk, Martijn will give you a peek behind the scenes of the Bootstrap organisation, as well highlight the upcoming new features of the framework.

Transcript

1. Where is Bootstrap heading to? FrontConf 2020
2. Where is Bootstrap heading to? FrontConf 2020
3. Martijn Cuppens - Tech Lead @Intracto - Bootstrap team member Who am I?
5. Former way of working The pre Bootstrap times
6. My situation sketch • Team with ~4 backend developers, 1 frontend developer • Project duration between 1 month and 1 year + maintenance on existing/legacy projects • Sometimes we need to work on projects from other teams
7. Former frontend approach • No real CSS framework • Some kind shared codebase between teams ◦ Lacking documentation ◦ No “product owners” ◦ Not scoped
8. The problems with this approach • The struggles when a frontend developer is unavailable • No guidelines • Need for a frontend dev for every change
9. Misconceptions about CSS • The CSS I write is easy to understand • I can write my own simple grid system • Documentation ain’t needed
10. “We have to find a solution for these problems”
11. Bootstrap?
12. Bootstrap • Documentation • Useful in various situations • Decrement of custom (undocumented) code • Documented legacy code • Easy to get started • Community support • Well known framework by web developers • Easier to switch developer
13. Bootstrap!
14. What is Bootstrap? • Front end framework • Founded in 2011 • Prototyping / creating websites • Built in jQuery javascript plugins (modals, dropdowns, carousel,...) • Most popular CSS framework in the world
15. The Bootstrap team
16. The Bootstrap team • Original authors: Mark Otto & Jacob Thornton • 14 team members ◦ CSS team ◦ JS team
17. The Bootstrap team
18. Team communication
19. What’s included?
20. Reboot • CSS reset • Configurable font sizes • Themed elements (like links, form elements)
21. Layout • Responsive containers • Responsive grid
22. Components • Alerts • Badges • Breadcrumb • Buttons • Button groups • Card • Carousel • Tabs & accordions • Dropdowns • Forms • Input groups • List groups • Media object • Navs • Navbars • Pagination • Popovers • Progress • Scrollspy • Spinners • Toasts • Tooltips
23. Helpers • Stretched-link • Clearfix • Responsive embed • Sticky-top
24. Utilities • Classes which only handle one property, for example: ◦ Colors ◦ Borders ◦ displays ◦ margins/ paddings • Responsive variations • 1031 classes
25. The cool things
26. Sass • color-yiq() • escape-svg() • Mixins for the grid • sr-only() mixin • text-truncate() mixin
27. Accessibility • Modals ◦ Closed by esc / clicking background ◦ Tabbing • Dropdown ◦ Keyboard navigation • Collapse plugin ◦ Aria labels • Buttons ◦ Hover/ focus / active states
28. Stretched links • Stretching links over cards • Pseudo element • Just add stretched-link class <div class="card" style="width: 18rem;"> <img src="…" class="card-img-top" alt="…"> <div class="card-body"> <h5 class="card-title">Card with stretched link</h5> <p class="card-text">…</p> <a href="#" class="btn btn-primary stretched-link">Go somewhere</a> </div> </div>
29. Version 5
30. v5 • Utility API • Dropped jQuery • Cleanup mixins • Update reboot • New grid • RFS • Dropped IE support
31. Utility API $utilities: ( "align": ( property: vertical-align, class: align, values: baseline top middle bottom text-bottom text-top ), "float": ( responsive: true, property: float, values: left right none ), "height": ( property: height, class: h, values: ( 25: 25%, 50: 50%, 75: 75%, 100: 100%, auto: auto ) ), ... );
32. New grid • Temporary optimized grid • Easier to use • Responsive gutters • Might switch to CSS grid
33. The Bootstrap projects
34. Bootstrap projects • Bootstrap itself • Icons svg icon project • Stylelint config strict CSS linting config • RFS automated unit rescaling
35. RFS • Automated resizing engine • Initial for font-sizes only, nowadays for every property • Rescales values based on viewport size • For Bootstrap ◦ Automated resizing of larger font sizes ◦ Integration with utility API (margin & padding)
37. RFS - How it works
38. The Bootstrap future
39. The future of Bootstrap • RTL support • CSS variables magic • Light/ dark modes • Automated releases
40. You can help us! Just like Midzer and the other 1111 code contributions
41. Thanks!