Responsive grid framework in Backlight

The Responsive Grid Framework was introduced in the CE3 version of the TTG Lightroom plug-ins. With it you can organize text into columns of different widths. It’s a great way to make your text more interesting to look at. For a more thorough overview, see this post.

There are a few differences in the Backlight version of the Responsive Grid Framework. For starters, you don’t need to add the “clearfix” class to grid_x containers; Matt has already taken care of that.

Related to that, the “container_x” class is gone. It’s been replaced by the “grid_x” class.

Built into Backlight is the “grid_12” class. This will set up a 12 column grid framework. Inside that class, you can set up columns how you like. For example, one column on the left taking up two-thirds of the page (col_8) and one column on the right taking up one-third (col_4).
The html will look like this:


<div class="grid_12">  <!-- this sets up the 12 column grid -->
<div class="col_8">   <!-- this sets up the 2/3 width column -->
--------your html code containing text, pictures, etc--------
</div>
<div class="col_4">   <!-- this sets up the 1/3 width column -->
--------your html code--------------------------------------
</div>
</div>

You can set up any number of columns, as long as they add up to twelve. For instance, three columns of equal width will all get the col_4 class.

See a demonstration of the Responsive Grid Framework on my Backlight test site.

Push and Pull Classes

Under normal behavior, when the browser or device width are narrow enough, the columns will reform, one on top of the other. By default the first column in a row will be on top, the second below that, and so on.

But this can be changed by using the “push” and “pull” classes. These classes are contained in a media query that applies them only when the browser’s or device’s width is a minimum of 992px. In other words, the classes will only affect displays 992px or wider. When the browser or device width drops below 992px the columns reform to the order as written in the html.

For example, on desktop displays let’s say that you want to have some text in the left hand column and an image in the right. But on a smart phone you want the image on top and the text below that.

Layout the html how you want it to appear on the mobile device. This means placing the image in the first column and the text in the second column. Add the “push_6” class to the first column and the “pull_6” class to the second column like so:


<div class="grid_12">  
<div class="col_6 push_6">   
<img src="http://yoursite.com/images/picture.jpg" alt="alternate text">
</div>
<div class="col_6 pull_6">   
<h3>Test title</h3>
<p>text you want to appear to the left on desktop and beneath on smart phones</p>
</div>
</div>

See an example of the push and pull classes at work on my Backlight test site.

The Row Class

There is also a new “row” class. I asked Matt about this. This is what he said:

Using .row will force a new row, even when the previous row is unfilled. So this:

<div class=”grid_12″>

<div class=”col_4″></div>

<div class=”col_4″></div>

<div class=”col_4 row”></div>

<div class=”col_4″></div>

</div>

Would give you two rows with two items, and each row occupying 2/3 of the full container width.

And there’s this gem for those who want to define their own grid set up:

There’s styling in place for partial class names, so you can define your own .grid_10, for example, and all you need to provide are widths for each column class, a la .grid_10 .col_10 { width: 10%; }, etc.

If you really want to explore the possibilities, take a look at the css file for the responsive grid. Look in your Backlight download for it:
backlight/modules/okapi-core/static/css/grid-framework-12mf.css.

You’ll find other classes to try including the alpha and omega classes (removes built-in padding from left or right of a column), and the prefix and suffix classes (add space to front or back of a column).

Leave a Reply

Your email address will not be published. Required fields are marked *

About this site

This site is: a repository of time-savers and best practices from a user's perspective, picked up from several years of using TTG plugins.
This site is not: a support site.
Read more here.

Tip Jar

If this site has saved you some time, kept your hair attached, or otherwise prevented you from tossing the mouse through the monitor, feel free to donate.

Categories


Highly recommended. This is my go-to Lightroom book. Click on the book image. (affiliate link)

Affiliate link!

Current TTG versions

Backlight Versions

Backlight 1.2.1
Pages module 1.2.1
Cart Add-on 4.1.1
Client Response Add-on 7.1.1
Theater Add-on 1.2.1
WordPress Add-on 1.2.1

CE4 Versions

TTG-BE: 2.0.5a
Autoindex: 7.0.8
Cart: 3.1.4a
CRG: 6.1.3a
Gallery: 6.1.9
Pages: 7.0.15
Publisher: 2.3.3
Stage: 6.1.6
Theme for WordPress: 3.1.2

Subscribe to new posts