Bootstrap Card Variations

Bootstrap-Card-Variations.markdown

Bootstrap Card Variations

A side-by-side comparison of card components.

Current:

• uses jade, less

• depends on bootstrap latest, jquery, font-awesome

Planned:

• content and context testing

• expansion of number and variety of cards, for different use cases

A Pen by Thomas Ingalls on CodePen.

License.

index.jade

.container
  h1 The wide world of responsive, Bootstrap-powered card elements.
  br
  .row
    div.card3.col-sm-4(contentEditable="True")
      div
        div.cardhead
          h3.text-center Improved Product Card: .card3
          img.img-responsive(src="http://fasttechcdn.com/products/120/1205700/1205700-1.jpg")
        div.cardcontent
          p Features of this card:
          ul
            li 
              p Card title above image. 
            li
              p Pure bootstrap + CSS3. 
            li
              p No flexbox.
              p.alert.alert-success 
                em Nota bene: 
                | This card's mobile-friendliness has vastly improved over card1, because of a max-width on the div containing the image.
            li 
              p Arbitrary HTML below image/title fold
            li 
              p goes
            li 
              p here
          form(role="form")
            .form-group
              label(for="nonsense") Nonsense
              input.form-control(type="text", id="nonsense")
          br
    div.card1.col-sm-4(contentEditable="True")
      div
        div.cardhead
          img.img-responsive(src="//placehold.it/300x168")
          h3 Basic Card: .card1
        div.cardcontent
          p Features of this card:
          ul
            li 
              p Image above the card title. 
              p 
                em Nota bene: 
                | This card can be less than ideal for mobile, due to poor image resizing.
            li 
              p Arbitrary HTML below image/title fold
            li goes
            li here
          form(role="form")
            .form-group
              label(for="nonsense") Nonsense
              input.form-control(type="text", id="nonsense")
          br
    div.card2.col-sm-4(contentEditable="True")
      div
        div.cardhead
          div.cardtitles
            h3 Card Title Text how long can this get without making this break
            h4 Subtitle text if needed?
        div.cardcontent
          p colored text?
          ul
            li arbitrary
            li html
            li goes
            li here
          form(role="form")
            .form-group
              label(for="nonsense") Nonsense
              input.form-control(type="text", id="nonsense")
          br
    div.card2.col-sm-4(contentEditable="True")
      div
        div.cardhead
          div.cardtitles
            h3 Material-ish: .card2
            h4 A versitile info-card.
        div.cardcontent
          h4 To Do 
          p 
            i on this card style
          pre
            | - [ ] incorporate color scheme
            | - [ ] incorporate baseline grid calculations for padding & spacing
            | - [ ] test with all kinds of sizes of content
            | - [ ] 1px on right uncovered in middle card. Where's that coming from?
          h4 Features of this card:
          h5 Good background images
          p The background image fills its container along the limiting dimension. 
          p.alert.alert-info 
            em Nota bene: 
            | Ambiance images work best here, though they are not the only images that can fit.
          p.alert.alert-warning 
            em Careful!  
            | This may not be appropriate for product imagery.
          h5 Title overlay
          p A title overlay appears in the header.
          p.alert.alert-danger
            em
              span.fa.fa-warning 
              |  Take note: 
            | This feature is not compatible with IE<10, thanks to use of flexbox.
          h5 Refined style 
          p Subtle refinements to styles create a durable presentation.
          form(role="form")
            .form-group
              label(for="nonsense") Nonsense
              input.form-control(type="text", id="nonsense")
          br
  .row
    .col-md-12
      p new row

style.less

em {
  font-weight: bold;
  font-style: normal;
}
// TODO:
// 1. incorporate color schemes
// 2. incorporate baseline grid sizing for padding calculations
// 3. variations: 
//     - title text that jumps above images on mobile
//     - product image cards that treat huge widths with respect
//     - click to expand long-text cards

.card1 { 
  
  margin-bottom: 30px;
  // The card class is primarily a .card wrapper,
  // plus an inner div with a border and padding.
  
  > div {
    border: solid 1px black; // color should be variable
    padding: 15px; // needs to be proportional to grid
  }
  
  .cardhead {
    //background-color: #eee;
  }
  
  .cardhead > img {
      margin: 0 auto; // centers elements when media queries kick in
      // better behavior would be to switch to a wider image
      // even better behavior would be to appropriately zoom the image
  }
  
  .cardcontent {
    //background-color: #eae;
  }


}

/******************** end of .card1 class ********************/

.card2 {
  * {
    //outline: solid 1px rgba(0,0,0,0.25);
  }
  
  margin-bottom: 30px;
  
  > div {
    border-radius: 4px;
    box-shadow: 0px 3px 3px 0px rgba(0,0,0,0.75);
    overflow: hidden;
  }
  
  .cardhead {
    background: url('//lorempixel.com/800/300/business') no-repeat center top;
    background-size: cover;
    border-radius: 4px 4px 0px 0px;
    box-shadow: 0px 3px 2px 0px rgba(0,0,0,0.75);
    overflow: hidden;
    position: relative;
    border: none;
    display: flex;
    min-height: 160px;
    max-height: 200px;
    
    .cardtitles {
      background: rgba(0,0,0,.25);
      padding: 0px 8px;
      width: 100%;
      // this isn't working properly.
      // it's supposed to keep a constant
      // height and align the titles 
      // to the bottom, but right now
      // the titles have padding to push
      // up the height of this div.
      align-self: flex-end;
      
      > h3,h4 {
        color: #fff;
      }
    }
    
  }
  
  .cardcontent {
    padding: 16px 8px;
    background-color: #fafafa;
    
    
  }
  
}

/******************** end of .card2 class ********************/

.card3{
  margin-bottom: 30px;
  //- let the bootstrap column styles do the heavy lifting
  
  > div {
    //- and keep the card size-controlled from inside the container div
    max-width: 450px; //- prevents balooning feature images at 4:3 pixel ratios
    margin: 0 auto;
    border-radius: 4px;
    overflow: hidden;
  }
  
  .cardhead {
    background-color: #eee;
    border-radius: 4px 4px 0px 0px;
    overflow: hidden;
    
    > img {
      margin: 0 auto;
      padding: 15px; // optional padding to keep image /on top/ of background
    }
    
    > h3,h4 {
      color: #000;
    }
  } //- .cardhead
  
  .cardcontent {
    padding: 16px 8px;
    background-color: #fafafa;   
  } //- .cardcontent
}

WbxrEz.markdown

WbxrEz

A Pen by Thomas Ingalls on CodePen.

License.