Bootcards

Why Bootcards

Bootcards is a cards-based UI framework. It is built on top of Bootstrap and uses it's responsive features. Unlike most other UI frameworks, it includes a dual-pane interface for tablet users.

We think Cards are the design pattern for mobile of the future. Cards are used already on sites and apps like Twitter, Google (Plus, Now), Spotify, Pinterest and Amazon. To kickstart your (and our) projects we decided to create Bootcards.

Want to read more about cards?

• Why cards are the future of the web
• 9 inspirational cards ui design example
• Twitter Cards
• Cards UI samples on Pinterest

Main features

• Native look & feel for iOS and Android.
• Independent scrolling columns to support master/detail views.
• Single-pane mode for tablets in portrait: in a master/detail view, the list is hidden to leave more room for the content.
• All markup based on Bootstrap v3.
• Optimized for smartphones AND tablets.

Want to help or know more? Drop us a note.

Native look & feel

Bootcards includes stylesheets to give your apps a native look, whether that's on iOS, Android or desktop. Try opening the demo app with a tablet or smartphone to see the difference!

The demo app is a simple CRM application with companies, customers and notes. It was built using NodeJS and is hosted on Heroku. Note that not all functions in the demo app have been implemented.

Getting started

There are a couple of ways to get started with Bootcards:

• Download the latest release from this repository - see link above (or clone it from git clone https://github.com/bootcards/bootcards).
• Install it using Bower: bower install bootcards
• Load Bootcards from a CDN: you can find all the url's here or grab them from below.

To add Bootcards to your application you'll need to include the Bootcards OS-specific CSS file (for iOS, Android or desktop) and the Bootcards JavaScript file. Since Bootcards is build on top of Bootstrap (3+), including the Bootstrap CSS file is required too. We've made that easy for you by embedding it into the Bootcards CSS files.

<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="//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>

The Bootcards styling will work by just loading the CSS files. If you want to use features like the built-in offcanvas, automatic portrait mode, you'll need to initialize Bootcards using the following Javascript function:

/*
 * Initialize Bootcards.
 * 
 * Parameters:
 * - offCanvasBackdrop (boolean): show a backdrop when the offcanvas is shown
 * - offCanvasHideOnMainClick (boolean): hide the offcanvas menu on clicking outside the off canvas
 * - enableTabletPortraitMode (boolean): enable single pane mode for tablets in portraitmode
 * - disableRubberBanding (boolean): disable the iOS rubber banding effect
 * - disableBreakoutSelector (string) : for iOS apps that are added to the home screen:
                      jQuery selector to target links for which a fix should be added to not
                      allow those links to break out of fullscreen mode.
 */
 
bootcards.init( {
  offCanvasBackdrop : true,
  offCanvasHideOnMainClick : true,
  enableTabletPortraitMode : true,
  disableRubberBanding : true,
  disableBreakoutSelector : 'a.no-break-out'
});
        

See the starter template in the "samples" folder for an example.