v4: Flex cards #21403
Merged
v4: Flex cards #21403
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
Adding 25%, 50%, and 75% to the mix for later use with cards
…margin this assumes no margin on the .card to start (which will follow in a later commit)
this allows us to easily scale card blocks in groups and decks, without repeating it in our css
use utils instead
add flex direction too
- Instead of negative left/right margins, we selectively apply margins to the cards as needed. This way the first and last child never receive a left and right margin (respectively), so we don't need to negative indent those at the .card-deck level. - Drops the margin-bottom override on the .card because there's no more default margin there. - Drop the margin-bottom from the .card-deck to match our lack of margins on the card. This and the previous commit fixes #19883.
Studio384
reviewed
Dec 23, 2016
| @@ -21,15 +21,21 @@ The `.pos-f-t` class can be used to easily position elements at the top of the v | |||
|
|
|||
| ## Width and height | |||
|
|
|||
| Easily make an element as wide or as tall as its parent using the `.w-100` and `.h-100` utility classes. | |||
| Easily make an element as wide or as tall (relative to its parent) our width and height utilities. Includes support for `25%`, `50%`, `75%`, and `100%`. | |||
There was a problem hiding this comment.
Should be a 'with' before the 'our'.
houndci-bot
reviewed
Dec 23, 2016
| @@ -389,7 +381,7 @@ module.exports = function (grunt) { | |||
|
|
|||
| // Docs task. | |||
| grunt.registerTask('docs-css', ['cssmin:docs', 'exec:postcss-docs']); | |||
| grunt.registerTask('lint-docs-css', ['scsslint:docs']); | |||
| grunt.registerTask('lint-docs-css', ['exec:scss-lint-docs']); | |||
|
Woof, I fucked up this PR history somehow. Going to merge manually. 😫 |
This was referenced Dec 23, 2016
Closed
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.
Redoes much of our cards in flexbox. Nothing huge changes here, though some card defaults have been updated. It's also worth noting that creating columns with flexbox isn't super great. I've stuck with CSS
columns there for the time being, but added more vars for folks to customize,This PR also includes the new width/height utils from #21402 so I can size columns.
Here's what's changed with cards:
Cards are now
display: flexwithflex-direction: column, though this doesn't affect the layout of the component from it's previous value,block. However, if you used.cardand.card-blockon the same element, you may encounter some visual bugs from the flexbox changes. To fix, separate those classes across two different HTML elements (as done in our docs).Cards are still 100% by default, which is now clarified in our docs with clearer mentions of sizing and better examples across the board.
Cards no longer have a default bottom margin. Use spacing utilities as you need to space them out. Closes I'd like to be able to set .card margin-bottom indepedently of .card-header padding #21073.
Footers in card decks and groups now align themselves to the bottom across cards thanks to some
flex-growon.card-blocks. For some card layouts, you may need to set this yourself, and to support you in that endeavor, we likely need some additional flex utilities. That'll come in future updates. Fixes .card-footer not aligned to bottom of card in .card-group #19381.Revamped the card deck margins to avoid some unneeded negative margins. Unlike the grid system, which uses
paddingfor gutters, the card deck usesmargin. As such, we can conditionally remove some gutters without affecting the display of the card itself. So, now we only applymargin-leftto non-:first-childcards andmargin-rightto non-:last-childcards. Fixes width scrolling problem with .card-deck #19883 and Make $card-deck-margin default to $grid-gutter-width-base / 2 #21300.Card docs have been overhauled quite extensively to better document all the supported content types, demonstrate various layout options, better group related content, and more.
Card columns have been updated with new and improved variables.
Future iterations of the card component will focus on expanding layout options (horizontal mode, more/better column support, responsive decks and groups, etc). That's not being addressed here though for scope reasons.