Views Column Class

Please show your support for my Drupalcon Munich session.

This is a module that helps developers to markup the views output so that it can easily fit in with a grid system. The benefits of this are that the page can be more easily styled in a responsive way which will enable the view elements to appear great on multiple screen resolutions.

You will be able to easily apply grid-3 to your row elements and to fit within the boundary of a container of grid-12. What happens naturally is there is a margin of 10px on the left and right of each grid-3 element. And that will be 20px too much for 4 items of grid-3 to appear in each row of the container of grid-12.

Developers get round this often by disabling the margin on all the grid-3 blocks and introducing a margin of 20px to the right of each block. You can then assign a fixed width to a div that wraps the view which is 20px wider than the container of grid-12 and then give the container of grid-12 an overflow of hidden.

When using responsive themes this technique would need to be replicated in each grid for the different screen resolutions that is triggered by media queries.

This could be solved in this instance if we could apply a class of alpha to the 1st, 5th, 9th blocks and so on and also assign a class of omega to the 4th, 8th, 12th blocks and so on. This makes it very quick to theme and it eliminates the need to introduce the technique of overflow hidden for each of the different grids that the site could apply. This can often be upto 3 in the case of the omega 3 theme.

I used to achieve this myself by introducing a views-view-list.tpl.php file in my theme folder which I deemed to be more elegant than the overflow hidden technique I have described. The file can be found at http://snipt.org/xkmx

This is my first attempt to write this approach into a module that also allows flexibility in the class names that are assigned to the blocks that appear in the left and right columns of the display. It is important to note that it doesn't seek to style the blocks that is left to the themer but if you were to use a base theme that used a grid system you could easily assign grid- values to the list class of the style format and then alpha for Class for left column and omega for class for right column.

Additionally, you have option of displaying classes in each row output by views with it's position in the column structure that you wish to implement. (e.g. column-1, column-2, column-3, column-1)

And I have also introduced an Advanced classes field that allows the developer to apply this technique multiple times. A use case for this is that you may wish the blocks to appear in 4 columns for larger screen resolutions but only 1 or 2 columns for smaller screen resolutions.

So you can apply alpha to the 1st, 5th, 9th blocks and omega to the 4th, 8th, 12th blocks but also apply alpha-mobile to the 1st, 3rd, 5th blocks and omega-mobile on the 2nd, 4th, 6th blocks. This gives the freedom to the theme to apply the styles that would render a display of 2 columns for smaller screen resolutions and 4 columns for larger screen resolutions.

I see this being adopted in many sites very quickly as developers are keen to implement responsive designs or at least theme in a way that responsiveness could be applied at a later stage on their sites. I also feel it is a fit for the omega_tools module suite and whether or not I get any recognition in this contest I will be submitting this project as there is a real need for it.

So, this module is a style plugin for views. After it is installed it will appear amongst the other style options.

I've also added the ability to set a class prefix for each row. So, if you specify a 4 column layout then the first 4 items could have a class of row-1 (row-) being the default row class prefix. I have not had a need for this yet but it would allow you to do different things with the styling of the views output. It was a very simple and natural addition as well. Again, let me know how you get on with this. Thanks for supporting this module.

Short Video Tutorial

Downloads