Introducing Bootcards: Bootstrap Cards Made Easy

Ref : https://www.sitepoint.com/introducing-bootcards-bootstrap-cards-made-easy/

Quick Start with Bootcards

In this section, we will learn how to create cards with the help of Bootcards. To get started, before adding Bootcards files, we need to add Bootstrap. Next, you can add Bootcards’ OS-specific CSS files (desktop, Android or iOS) and its JavaScript file.

The reason why Bootcards has OS-specific CSS files is to provide a UI that can change its look and feel depending on the platform that you are using. Different CSS files will change default heading colors, make the navbar collapsible and other UI changes. Be careful, you will only need to load one type of CSS file depending on the device being used to view your web page.

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">

<!-- Important: you'll only need one of the Bootcards CSS files below for every platform -->

<!-- Bootcards CSS for iOS: -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootcards/1.0.0/css/bootcards-ios.min.css">

<!-- Bootcards CSS for Android: -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootcards/1.0.0/css/bootcards-android.min.css">

<!-- Bootcards CSS for desktop: -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootcards/1.0.0/css/bootcards-desktop.min.css">

<!-- Bootstrap and Bootcards JS -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>

<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootcards/1.0.0/js/bootcards.min.js"></script>

You can start working with Bootcards just by adding its CSS files, but for enhanced usability, make sure you include the JavaScript function below:

bootcards.init({
  offCanvasBackdrop: true,
  offCanvasHideOnMainClick: true,
  enableTabletPortraitMode: true,
  disableRubberBanding: true
});

These options are especially useful if you are targeting mobile or iOS users. To show a backdrop when the offcanvas menu is displayed, set offCanvasBackdrop to true. In case you want to hide the offcanvas menu when you click outside it, you can use offCanvasHideOnMainClick. You can also enable single pane mode for tablets in portrait mode by setting theenableTabletPortraitMode to true. The last setting above, disableRubberBanding, is used to disable the rubber banding effect on iOS devices.

Summary Cards

Sometimes we need to create dashboards or structures based on tabs that represent information by using icons or logos. To display this sort of structures, the Bootcards framework uses

Summary Cards can be used with other types of cards. In our example, we have used Chart and Table Cards alongside Summary Cards. In this case, Summary Cards can be seen as the door to the information displayed by these other types of cards.

sample code : http://codepen.io/SitePoint/pen/VKxbmj