jportilio.com

jPortilio: Responsive and filterable grid of items

Follow me
Follow me

Latest posts by Tomasz Antas (see all)

Mar 30, 2015

The jPortilio is a jQuery plugin inteded to create responsive and filterable grid of items. Filtering based on adding a lists of tags to items. In this brief article, we show how to quickly implement simple jPortilio grid.

Introduction

The jPortilio plugin is available to download from official website: jportilio.com, and requires a jQuery library.

You can see demo here.

Github.

 

Download

Download following files from official website:

  • jportilio.js (or jportilio.min.js)
  • jportilio.css (or jportilio.min.css)

Copy these files to your project and attach to HTML file (e.g index.html):

 

Usage

JPortilio contains a two basic elements: the group of tag buttons and the grid of items

jportilio_grid_ex_1

Let’s start create these two elements:

Tag buttons have to be embedded in jprt-buttons element and each button should has jprt-btn. A data-jprtgrid attribute points on the grid container, so its value must to be the same as ID value of grid element. The data-tag is a list of tags filtered by button (list is separate by comma “,”: ‘mobile,design,desktop’). And that’s all about buttons!

The grid of items has to have an ID attribute (value should be the same as value of data-jprtgrid attribute in tag buttons) and class jprt-container. In example, container class comes from Bootstrap 3 and is optional. It’s used, because sets the width of grid responsive.

If you are using Bootstrap 3 too, you can add some classes to style buttons and grid containers. The grid of items has the width as the jprt-container, so adding container sets the desirable size.

 

Items are added to jprt-container  and each item consists of 3 layers: caption, hover and content:

Item of grid has class jprt-item and consists of 3 layer with classes: jprt-captionjprt-hover and jprt-contentjprt-item has also at least two data attributes:

  • data-tags – it is a list of tags,
  • data-content-show – it is the method of showing content layer. More details further.

jprt-caption is displayed by default in grid, so is visible at first glance on the grid. When cursor moves on the item, the jprt-hover is displayed. The jprt-content is displayed when user clicks on item. The content of each layer can be created freely in respect to its sizes. However, the jPortilio prepared few styles. It allows to stylize the heading, tags and additional features, like item status or list of features. More details you can find here.

 

Plugin initialization

Plugin is initialized by adding a jQuery script:

Initialization allows to overwrite a default settings, such as the ratio of height to width and the number of items in single row for different screen sizes. More details you can find in proper section in jPortilio documentation.

 

Showing item content

There are 3 ways to show item’s content:

  • cover – content covers the item,
  • redirect – clicking on item redirects to another page,
  • new section – displays content as new element in next line of grid.

You can see how this showing methods works in this example.

To declare the showing method is used the data-content-show attribute of jprt-item element. Below are placed the simple examples for all three methods:

The redirect method requires data-content-url attribute besides the data-content-showData-content-url stores the destination url.

After selecting methods, we can fill the content layer freely.

 

Themes

JPortilio has a prepared few themes, which changes the look of basic elements. The list of themes is available here.

Using themes is very simple. The theme class names have to be placed in two places: in tag buttons group container and in grid element.  Let’s suppose that we want use dark theme. Its theme class name is jprt-dark-style:

 

Conclusion

JPortilio plugin can be an useful tool in creating such a features like portfolio. The jPortilio plugin is a new tool and is still improving. However, reporting bugs will be very helpful!

 

 

 

Tomasz AntasjPortilio: Responsive and filterable grid of items