Bootstrap 4 is the hawtness and we want to start using it. But what's new?What's changed? Am I going to be able to get my head around it? All these things and more we will uncover.
An in-depth look at migration and what has changed can be found here: http://getbootstrap.com/docs/4.0/migration/. I'm not going to rehash all that so you should read that first. I'm going to try and outline what these changes mean for us and the way that we work.
Globals and Variables
- Global options: http://getbootstrap.com/docs/4.0/getting-started/options/#global-options
- These are flags that turn on and off certain features. We should specify these in our _custom-bootstrap.scss so we can set them on a per project basis.
- $spacer variable looks interesting. If we base all our margin and padding off of it then we can control all the spacing by changing one var.
- Colour map variable can be customized with brand colours so we can use ${color} variables: http://getbootstrap.com/docs/4.0/getting-started/options/#theme-colors
- Variable maps for defining grid breakpoints and container max widths. '$grid-breakpoints', '$container-max-widths' http://getbootstrap.com/docs/4.0/layout/grid/#variables
- We probably will need to be overriding these on some sites.
- It’s also possible to define the grid tiers: http://getbootstrap.com/docs/4.0/layout/grid/#grid-tiers
Component based z-index variables to make it easy to stick something else above/below a given component. http://getbootstrap.com/docs/4.0/layout/overview/#z-index
- Navbar: Addition of `.navbar-expand{-sm|-md|-lg|-xl}` variable makes it easy to choose the breakpoint at which the collapse kicks out.
...