Bootstrap: Cards need more improvement

[MoroccanGeek]

Hey, i really like working with cards, i really like this framework, but in the cards thing, it's just very "normal". i really would like cards to be like or better than the cards in the Semantic UI FrameWork, their cards give more materials to work with, like for example the "Add Friend" Card in terms of social media projects, or maybe the "interactive Cards" they have for Liking and commenting.
Thank you ^^

[Soviut]

Can you at least provide links to the examples you're talking about in Semantic UI.

From what I've seen, everything about their cards is possible using existing bootstrap classes. It's fairly straightforward to add an image background and a centered button to a card in order to achieve the "like" button look. Bootstrap doesn't have hover blur effects, but that's a single line of custom CSS.

EDIT: It would seem that those interactive elements are being added using jquery plugins anways

$('.special.cards .image').dimmer({
  on: 'hover'
});

[MoroccanGeek]

I'm not saying it's not possible or hard to do that. All i'm saying is for improvement purposes. Here's a link to the cards i'm talking about https://semantic-ui.com/views/card.html

[Soviut]

Right, and every one of those examples is already possible in Bootstrap with about he same amount of markup. BS cards can display images, titles, bodies, headers, footers, you can put buttons and links in any one of those sub-containers.

Are you saying the documentation needs to be updated with examples like this? Because the documentation seems pretty thorough https://getbootstrap.com/docs/4.0/components/card/

[MoroccanGeek]

Right, but what i mean is to have some already prepared Cards, just as improvement for the framework that's all.

[Soviut]

Please explain how these "already prepared cards" work in the other framework. Again, do you mean some some existing examples in the documentation or some kind of built in card types? Because Semantic doesn't have anything built in, just like Bootstrap you need to compose a set of components together to produce any of the results they show.

[MoroccanGeek]

yes exactly, built-in cards, with no need to do some additional CSS. That would be nice to have don't you think ?

[Soviut]

No, that wouldn't be good at all. The whole point of component frameworks is that you have a set of generic components that can be composed in different ways to produce what you need.

Semantic works the exact same way. You sets of components, card, header, footer, icon, etc. And compose them to make a design you want. For example

<div class="ui card">
  <div class="image">
    <img src="/images/avatar2/large/kristy.png">
  </div>
  <div class="content">
    <a class="header">Kristy</a>
    <div class="meta">
      <span class="date">Joined in 2013</span>
    </div>
    <div class="description">
      Kristy is an art director living in New York.
    </div>
  </div>
  <div class="extra content">
    <a>
      <i class="user icon"></i>
      22 Friends
    </a>
  </div>
</div>

Is the markup required to achieve the following card.

The equivalent is bootstrap is

<div class="card">
  <img class="card-img-top img-fluid" src="someimage.png">

  <div class="card-body">
    <h4 class="card-title">Kristy</h4>
    <h5 class="card-subtitle">Joined in 2013</h5>
    <p class="card-text">Kristy is an art director living in New York.</p>
    <footer class="card-footer">22 friends</footer>
  </div>
</div>

Just to reiterate, Semantic doesn't have any built-in cards; They're all being composed from components, just like bootstrap is.

[Zohaad97]

My take on this. Cards need to be improved so they should look like real cards.
Currently Bootstrap cards are simple, It doesn't gives a feel of actual card. They just look like normal border around div.
Cards can be made better by giving them some sort of shadow, so it looks nice and real.

[DiemenDesign]

There are shadow classes built right into BS for doing just this.
RTFM.

[Soviut]

@Zohaad97 Here are the docs for sahdows https://getbootstrap.com/docs/4.1/utilities/shadows/

[MoroccanGeek]

@Zohaad97 That's exactly what i mean.

[Soviut]

@MrDronax that's not what you said originally. Before you said you wanted cards that had pre-built functionality, such as liking and friending.

[MoroccanGeek]

i said that the cards looks very normal, what i suggest is some already existed Cards with no need of any modificcation

[Zohaad97]

@Soviut what I think @MrDronax wants to say that, pre-built card means that cards should have some element inside it.
@Soviut thanks for sharing the shadow docs. But if there would be an example of shadowed cards and elements in the card. That would be good for users to find a better way to play with card.

[DiemenDesign]

The problem with pre-built cards is bloat, not everyone wants to use pre-made cards or their requirements will again, as is yours, be different from what is available.

There's no reason, you couldn't create a repo that adds extra card styles and options, as an addon to BS.

[Soviut]

Exactly. Though I'm still confused as to why @MrDronax expects bootstrap to include pre-built cards when the Semantic framework doesn't include pre-builts either.

[DiemenDesign]

Laziness, or lack of knowledge to do so.

[mdo]

Closing as a won't fix for now since there's not of actionable todos here. Lots of what you want to do can be done with existing features, styles, and utilities. Can always do more/better examples, so feel free to suggest those via PRs if you have them.