v4: Various flexbox fixes and updates #21407
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- Set an explicit `display: flex` on the base `.nav` class and remove the floats/clearfixes from our navs. - Set some global styles for `.nav-link`, a departure from the previous solution that featured no predefined padding. - Move `.nav-link` from `inline-block` to `block` given this setting was added for our tabs and pills anyway. - Remove horizontal margin from nav tabs; let folks set that on their own from now on.
Given move to flexbox, we can make this available for everyone and clean it up some. - Simplifies the `.nav-justified` styles to build on the flex-powered `.nav` base class. - Adds the `.nav-fill` to make nav links fill available horizontal space, but not equal width.
- Reorganize things, leading with the base nav first instead of an accessibility note, and then moving the rest to a new available styles section. - Add horizontal alignment options thanks to new flex utils (these new utils will be documented later in another commit). - Dropped `.nav-stacked` for a flex util and added additional alignment options, so document those, too.
- Adds new flexbox.md file to utilities docs - Adds a `breakpoints.yml` data file for easier output of responsive classes in the docs. Will put this to use on other pages soon. - Adds hella flex utils. There are some dupes for now, but they'll get removed in time.
mdo
force-pushed
the
flex-hugs-not-bugs
branch
from
71b8a2f to
2e9c4f0
Compare
|
Working on adding more flexbox utilities and documenting them well. This might be overly verbose, so please let me know if it's seeming a bit over the top. Each property will get a blurb and examples. Some will have tables, too.
For responsive versions, I've started by listing them all out like so. Too much? Just right?
|
|
Playing with it more, this feels a bit better and less repetitive.
|
…into flex-hugs-not-bugs
- better table of contents and overall structure - clearer examples of modal contents, longer modals, and modal options
|
This branch is running away from me a bit, so going to call it as-is once this next build passes and then move on to another branch. |
Closed
|
Will tackle remaining todos in separate PRs, btw. |
This was referenced Dec 25, 2016
mdo
added a commit
that referenced
this pull request
Dec 25, 2016
fixes broken inline form example mentioned in #21407
mdo
added a commit
that referenced
this pull request
Dec 25, 2016
fixes broken inline form example mentioned in #21407
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Starting a catchall branch of sorts to clean some stuff up around the move to flexbox.
Changes so far
Fixed inline forms in responsive navbars. The use of
my-utilities on the buttons here caused the inputs to grow to match the computed height of the button plus those margins, so things looked broken. I've changed the utilities here and fixed it all up.Updated the three remaining examples to use the new navbar—starter template, jumbotron, and offcanvas are now all up to speed.
Speaking of the offcanvas example, that's also been fixed. I pulled in the changes from fix the offcanvas example #19832.
Huge flexbox utilities overhaul. Replaced all existing
.flex-*utilities that had custom names with new utilities named after theirproperty: valuepair (e.g.,.flex-items-betweenis now.justify-content-between). Also added brand new docs to showcase all these new utils.Rewrote modal docs while aiming to fix some double borders in modal examples.
Still to do
Flexbox bugs
Flexbox todos
Remake form checks/radios with flexbox instead of abs positionnevermind i'm an idiot, can't do this because of our markupRemake dismissible alert with flexbox instead of abs positionwould require extra markup to do, skippingRedo modal positioning with flexbox (hopefully we can vertically center and keep the scroll)nevermind, going to do this later; too many other changes to make alongside this.Docs bugs