View Mode Switch Layout With CSS3 and Javascript

In this tutorial written by MARY LOU we're going to create a layout switch with two viewing modes (grid and list).  It's useful for E-commerce Website that allows the users to switch the product view mode to improve the user experiences. 

How to use it:

1. Markup html structure

<div id="cbp-vm" class="cbp-vm-switcher cbp-vm-view-grid">

<div class="cbp-vm-options"> 
<a href="#" class="cbp-vm-icon cbp-vm-grid cbp-vm-selected" data-view="cbp-vm-view-grid">Grid View</a> 
<a href="#" class="cbp-vm-icon cbp-vm-list" data-view="cbp-vm-view-list">List View</a> </div>
<ul>

<li> <a class="cbp-vm-image" href="#"><img src="images/1.png"></a>
<h3 class="cbp-vm-title">Silver beet</h3>
<div class="cbp-vm-price">$19.90</div>
<div class="cbp-vm-details"> Silver beet shallot wakame tomatillo salsify mung bean beetroot groundnut. </div>
<a class="cbp-vm-icon cbp-vm-add" href="#">Add to cart</a> </li>

<li> <a class="cbp-vm-image" href="#"><img src="images/2.png"></a>
<h3 class="cbp-vm-title">Wattle seed</h3>
<div class="cbp-vm-price">$22.90</div>
<div class="cbp-vm-details"> Wattle seed bunya nuts spring onion okra garlic bitterleaf zucchini. </div>
<a class="cbp-vm-icon cbp-vm-add" href="#">Add to cart</a> </li>

...

</ul>
</div>

2. The CSS for the layout

@font-face {
font-family: 'fontawesome';
src: url('../fonts/fontawesome/fontawesome.eot');
src: url('../fonts/fontawesome/fontawesome.eot?#iefix') format('embedded-opentype'),  url('../fonts/fontawesome/fontawesome.woff') format('woff'),  url('../fonts/fontawesome/fontawesome.ttf') format('truetype'),  url('../fonts/fontawesome/fontawesome.svg#fontawesome') format('svg');
font-weight: normal;
font-style: normal;
}
/* Main container */
.cbp-vm-switcher {
padding: 20px;
border: 3px solid #47a3da;
}
/* options/select wrapper with switch anchors */
.cbp-vm-options {
text-align: right;
padding-bottom: 10px;
border-bottom: 3px solid #47a3da;
}
.cbp-vm-options a {
display: inline-block;
width: 40px;
height: 40px;
overflow: hidden;
white-space: nowrap;
color: #d0d0d0;
margin: 2px;
}
.cbp-vm-options a:hover, .cbp-vm-options a.cbp-vm-selected {
color: #47a3da;
}
.cbp-vm-options a:before {
width: 40px;
height: 40px;
line-height: 40px;
font-size: 30px;
text-align: center;
display: inline-block;
}
/* General style of switch items' list */

.cbp-vm-switcher ul {
list-style: none;
padding: 0;
margin: 0;
}
/* Clear eventual floats */
.cbp-vm-switcher ul:before, .cbp-vm-switcher ul:after {
content: " ";
display: table;
}
.cbp-vm-switcher ul:after {
clear: both;
}
.cbp-vm-switcher ul li {
display: block;
position: relative;
}
.cbp-vm-image {
display: block;
margin: 0 auto;
}
.cbp-vm-image img {
display: inline-block;
max-width: 100%;
border: none;
}
.cbp-vm-title {
margin: 0;
padding: 0;
}
.cbp-vm-price {
color: #c0c0c0;
}
.cbp-vm-add {
color: #fff;
background: #47a3da;
padding: 10px 20px;
border-radius: 2px;
margin: 20px 0 0;
display: inline-block;
transition: background 0.2s;
}
.cbp-vm-add:hover {
color: #fff;
background: #02639d;
}
.cbp-vm-add:before {
margin-right: 5px;
}
/* Common icon styles */
.cbp-vm-icon:before {
font-family: 'fontawesome';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
}
.cbp-vm-grid:before {
content: "\f00a";
}
.cbp-vm-list:before {
content: "\f00b";
}
.cbp-vm-add:before {
content: "\f055";
}
/* Individual view mode styles */

/* Large grid view */
.cbp-vm-view-grid ul {
text-align: center;
}
.cbp-vm-view-grid ul li {
width: 33%;
text-align: center;
padding: 25px;
margin: 20px 0 0;
display: inline-block;
min-height: 420px;
vertical-align: top;
}
.cbp-vm-view-grid .cbp-vm-title {
font-size: 2em;
}
.cbp-vm-view-grid .cbp-vm-details {
max-width: 300px;
min-height: 70px;
margin: 0 auto;
}
.cbp-vm-view-grid .cbp-vm-price {
margin: 10px 0;
font-size: 1.5em;
}
/* List view */
.cbp-vm-view-list li {
padding: 20px 0;
white-space: nowrap;
}
.cbp-vm-view-list .cbp-vm-image, .cbp-vm-view-list .cbp-vm-title, .cbp-vm-view-list .cbp-vm-details, .cbp-vm-view-list .cbp-vm-price, .cbp-vm-view-list .cbp-vm-add {
display: inline-block;
vertical-align: middle;
}
.cbp-vm-view-list .cbp-vm-image {
width: 10%;
}
.cbp-vm-view-list .cbp-vm-title {
font-size: 1.3em;
padding: 0 10px;
white-space: normal;
width: 23%;
}
.cbp-vm-view-list .cbp-vm-price {
font-size: 1.3em;
width: 10%;
}
.cbp-vm-view-list .cbp-vm-details {
width: 40%;
padding: 0 15px;
overflow: hidden;
white-space: normal;
}
.cbp-vm-view-list .cbp-vm-add {
margin: 0;
}
 @media screen and (max-width: 66.7em) {
.cbp-vm-view-list .cbp-vm-details {
width: 30%;
}
}
 @media screen and (max-width: 57em) {
.cbp-vm-view-grid ul li {
width: 49%;
}
}
 @media screen and (max-width: 47.375em) {
.cbp-vm-view-list .cbp-vm-image {
width: 20%;
}
.cbp-vm-view-list .cbp-vm-title {
width: auto;
}
.cbp-vm-view-list .cbp-vm-details {
display: block;
width: 100%;
margin: 10px 0;
}
.cbp-vm-view-list .cbp-vm-add {
margin: 10px;
}
}
 @media screen and (max-width: 40.125em) {
.cbp-vm-view-grid ul li {
width: 100%;
}
}

3. The javascript

/**
 * cbpViewModeSwitch.js v1.0.0
 * http://www.codrops.com
 *
 * Licensed under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 * 
 * Copyright 2013, Codrops
 * http://www.codrops.com
 */
(function() {

var container = document.getElementById( 'cbp-vm' ),
optionSwitch = Array.prototype.slice.call( container.querySelectorAll( 'div.cbp-vm-options > a' ) );

function init() {
optionSwitch.forEach( function( el, i ) {
el.addEventListener( 'click', function( ev ) {
ev.preventDefault();
_switch( this );
}, false );
} );
}

function _switch( opt ) {
// remove other view classes and any any selected option
optionSwitch.forEach(function(el) { 
classie.remove( container, el.getAttribute( 'data-view' ) );
classie.remove( el, 'cbp-vm-selected' );
});
// add the view class for this option
classie.add( container, opt.getAttribute( 'data-view' ) );
// this option stays selected
classie.add( opt, 'cbp-vm-selected' );
}

init();

})();

---

This awesome jQuery plugin is developed by MARY LOU. For more Advanced Usages, please check the demo page or visit the official website.