Bootcards is a UI framework for card interfaces. Like its name says, it is based on the Bootstrap framework and it has a dual-pane capability for both desktop and mobile.
These days information is everywhere and sometimes the sheer amount of it can confuse us. With the rise of mobile devices, UX designers have been trying to create interfaces that are minimalistic and don't overload users with information.
Cards interfaces have been gaining lots of popularity, mainly because they focus on what's important and are graphically catchy.
Bootcards is mostly used on lists, Summary Cards, different type of File Cards, and Media Cards such as Twitter Cards. The framework is helpful when we want to create lists which contain more information than usual. Another use case for Bootcards relates to Summary Cards, which are a great way of creating card-based dashboards.
Why Cards
Cards are in fashion nowadays. They show exactly what users want by keeping the focus strictly on key points. You can use cards to display contact details, summaries, file information, and more. This pattern breaks the content into small components and arranges them in eye-catching designs.
A lot of big names such as Google, Spotify, Pinterest and Amazon have used cards in their designs, especially in mobile devices. Cards gained importance when they got used for the first time by Twitter. Twitter Cards were presented in 2012 and since then the hype has gone up.
A cards-based layout consists of text, images, videos and more, all of which creates a valuable mix of information. Twitter uses cards to create a connection between users and content: users can quickly spot the summary that is important to them without having to go through the entire content. One more good reason for using Twitter Cards is to drive engagement to your Tweets.
The Google Now Cards' slogan is to give the right information at the right time. Google Now Cards accomplish this by showing only valuable information with a focus on the needs of mobile users.
Bootcards offers a full set of features for creating high quality cards. The framework is optimized for all devices and media queries. Another good point is its native look and feel. It offers separate stylesheets for each platform: iOS, Android or Desktop.
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.
[code language="html"]<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>
[/code]
You can start working with Bootcards just by adding its CSS files, but for enhanced usability, make sure you include the JavaScript function below:
[code language="js"]
bootcards.init({
offCanvasBackdrop: true,
offCanvasHideOnMainClick: true,
enableTabletPortraitMode: true,
disableRubberBanding: true
});
[/code]
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 the enableTabletPortraitMode to true. The last setting above, disableRubberBanding, is used to disable the rubber banding effect on iOS devices.
Continue reading %Introducing Bootcards: Bootstrap Cards Made Easy%
by Taulant Spahiu via SitePoint
