In 2016, there's no doubt the 'card-based' design pattern is an important instrument in a modern web developer's toolbelt. Cards have been used with great success in most social and sharing websites and applications (Dribbble, Twitter, Facebook, Pinterest, Trello, etc.), and especially in mobile design. Their compactness, portability, and high flexibility give developers a convenient way to build responsive layouts and easily adapt the content to different contexts.
You can employ cards in a wide variety of scenarios such as listing blog posts, recipe articles, product overviews, features highlights, making self-contained widgets, etc. For a more in detail overview of what cards are and why you should use them see this article.
Today we'll explore two examples of the card-based design pattern implemented
- an image album
- and a recipe widget
We're going to use Semantic UI, which is one of the most popular and easy-to-use CSS frameworks and provides a ready-to-use Card component out-of-the-box. Any designer with some familiarity with HTML/CSS should have no problem following this tutorial.
Before we get started with the examples make sure you have prepared two empty HTML files, each one with references to jQuery (jquery.js) and Semantic UI (semantic.css, semantic.js). You can link them from a CDN if you don't want to download them.
[code language="html"]
< !DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>Semantic UI CDN</title>
<link rel="stylesheet" href="http://ift.tt/1SZSw8j"/>
<script src="http://ift.tt/1LttwG1"></script>
<script src="http://ift.tt/1SZSxcd"></script>
</head>
<body>
<!-- Your Semantic UI Code -->
</body>
</html>
[/code]
Example 1: A Simple Image Album
For the first example, let's suppose we need an application to store and manage our images grouped in separate albums. We also want each album to looks like a stack of images. To achieve that effect, add the following code in your first HTML file:
[code language="html"]
<div id="album">
<div class="ui piled compact segment">
<div class="floating ui red label">9</div>
<div class="ui card">
<!-- Album Card Content -->
</div>
</div>
</div>
[/code]
We wrap the album with a <div id="album"> tag. Then, we use a Segment component, which makes the album to appear as a stack of images. We also put a label at top-right corner displaying how many images the album contains. And finally, we add an empty Card component.
At this stage, we need some CSS to give a little breathing space around the album and to distinguish it from the background:
[code language="css"]
body {
margin: 30px;
background-color: whitesmoke;
}
[/code]
Right now, the album looks a bit strange. But don't worry, we'll get it into a shape in a minute.
We want to have a front image showing the first image from the album. When we hover over that image, it will be dimmed and a button will appear in the center. When we click the button we'll go inside the album. We do all this by adding the following code inside the empty Card component.
[code language="html"]
<div class="blurring dimmable image">
<div class="ui inverted dimmer">
<div class="content">
<div class="center">
<div class="ui red button view">VIEW</div>
</div>
</div>
</div>
<img src="http://mrg.bz/IxQIgC">
</div>
[/code]
To activate the Dimmer component, which we use above, we need to add the following jQuery code:
[code language="javascript"]
$( document ).ready(function() {
$('.ui.card .image').dimmer({on: 'hover'});
});
[/code]
The album looks better now, but the VIEW button does nothing. For now, just leave it as it is, we'll activate it a bit later.
Let's continue building the album "face" by adding the following code:
[code language="html"]
<div class="content">
<div id="rate" class="ui star rating right floated" data-rating="3"></div>
<div class="header">Animals</div>
<div class="meta">
<span class="date"><i class="calendar icon"></i>Created 7/27/2014</span>
<span class="right floated date"><i class="history icon"></i> Modified 8/4/2014</span>
</div>
<div class="description">
Different animals from around the world
</div>
</div>
[/code]
Here, we use the content class to group a header, meta, and description elements, which represent the title of the album, album details such as when the album is created and when is modified, and a short description of the album content. Also, we add a Rating component aligned to the right of the title. To activate it and make it visible, we use jQuery again:
$('.ui.rating').rating({maxRating: 5});
You may notice that the album details are too big and don't fit on one line. We'll fix this at the end when all cards are created.
We continue by adding two buttons at the bottom of the album card:
<div class="extra content" >
<div class="ui right labeled button" data-content="Like it!" data-variation="tiny">
<div class="ui red icon tiny button">
<i class="thumbs outline up large icon"></i>
</div>
<a class="ui basic red left pointing label">365</a>
</div>
<div class="ui left labeled right floated button" data-content="Share it!" data-variation="tiny">
<a class="ui basic red right pointing label">183</a>
<div class="ui red icon tiny button">
<i class="external share large icon"></i>
</div>
</div>
</div>
Here, we use two complex buttons, wrapped in an extra content class - one to like the album and one to share it. Also, we need a tooltip for each button, so we add a data-content attribute containing the tooltip's message. And again, to activate the Popup component we use this jQuery code:
$('.ui.button').popup();
Now, the "face" of the album is ready and it's time to build the inner view for the album images. We add the following code, but this time after (outside) the <div id="album"> tag:
<div id="album_items">
<button class="ui labeled icon button back">
<i class="arrow lircle left icon"></i>Back
</button>
<div class="ui cards">
<!-- Album Images Cards -->
</div>
</div>
Here, we wrap the album images with a <div id="album_items"> tag, and we add a button to get back to the album "face". Then, we add <div class="ui cards"> tag whose purpose is to hold the individual image cards. We also put the following CSS to hide initially the album images and to give some space around them:
#album_items {
display: none;
}
#album_items .ui.cards {
margin: 10px;
}
Now, it's time to make the VIEW button working. We add the following code:
$('.button.view').on('click', (function() {
$('#album').fadeOut('slow', function () {
$('#album_items').fadeIn('slow');
});
}));
$('.button.back').on('click', (function() {
$('#album_items').fadeOut('slow', function () {
$('#album').fadeIn('slow');
});
}));
Good. If you try it now you'll see it is working. But there is nothing to show in the album yet. So, let's start adding the image cards. Here is the code for the first card:
Continue reading %How to Design Rich Card-Based Layouts with Semantic UI%
by Ivaylo Gerchev via SitePoint
No comments:
Post a Comment