Created by: browner12
Motivation
Currently with .container and .container-fluid we have an all or nothing approach to either a full width or fixed width layout. I would like to make these containers responsive to give the end user full control over when the switch to a fixed width layout occurs.
It was brought up in PR #24903 (closed) , and discussed on the Slack channel. The use case I am addressing in this PR is actually the opposite of what's being asked in the other one, because I see this as the more 99% use case.
Example
The most common use case I see is the user who wants their extra small and small devices to maintain a fluid layout since real estate is at a premium, and only switch to a fixed layout on medium devices and larger where you have much more width.
Approach
If you dig into the source on containers you realize that on extra small devices, .container and .container-fluid are the same. It's not until you hit the larger sizes that max-widths start getting applied. The approach I use is similar to all the other responsive classes where styling is applied to the breakpoint and up. This PR introduces 4 new classes which can be used in place of existing container classes.
.container-sm.container-md.container-lg.container-xl
As an example,
<div class="container-md"></div>would mean the container stays fluid until you hit the medium breakpoint, and from there on up it would be fixed width. This table gives you a full breakdown.
| XS Screen | SM Screen | MD Screen | LG Screen | XL Screen | |
|---|---|---|---|---|---|
.container |
fixed * | fixed | fixed | fixed | fixed |
.container-sm |
fluid | fixed | fixed | fixed | fixed |
.container-md |
fluid | fluid | fixed | fixed | fixed |
.container-lg |
fluid | fluid | fluid | fixed | fixed |
.container-xl |
fluid | fluid | fluid | fluid | fixed |
.container-fluid |
fluid | fluid | fluid | fluid | fluid |
As you can see, the .container and .container-fluid maintain the same functionality so backwards compatibility is maintained.
Next Steps
I imagine this PR will require a decent amount of discussion. One point to address is if it is worth it to be able to go the other direction as well, and switch from a fixed layout to a fluid layout after a certain breakpoint.
Also, I'm sure I could also use some help on optimizing the SCSS.