TTG Tips and Tricks

The Responsive Grid Framework was introduced in the CE3 version of the TTG Lightroom plug-ins (and has been one of my very favorite features since then). 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.
Note, when writing code, either write directly in the Backlight or Lightroom Publisher page copy fields or, better yet, write it in a plain text editor like Notepad ++ (Windows) or Text Wrangler (Mac) and then paste where needed in Backlight or Lightroom Publisher albums and album sets.

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="https://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 Alpha and Omega classes

By default, the column classes have built in left and right padding to give the columns some space between them. This also means that the left column will look “indented” compared to other text on the page and the right column will also look indented. If you want the text of the left and right columns to line up with the rest of the page, you can add the alpha class to the left column and the omega class to the right column.

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

For Backlight 1.2 and later, look here:
backlight/modules/pangolini-core/static/css/grid-framework-12mf.css

For Backlight 2 or 3, go to your site and access the page’s source code. Do this by right-clicking on the page and selecting “View Page Source” or words to that effect, depending on your browser. If you’re one of those who’ve disabled the context menu (right click), then go to the Tools menu in the browse and look for Developer Tools and find View Page Source in that menu.

Once you’re viewing the page source, scroll down to line 45 or so. Look for a line that looks like this:

<link rel="stylesheet" type="text/css" media="all" href="/backlight/publisher/gallery/stylesheet/style/6" />

Click on the link (/backlight/publisher/gallery/stylesheet/style/X). Copy and paste the entire code into a plain text editor and save it as a .css file. You’ll find the Responsive Grid css at around line 515. I keep a copy of the css file on my computer just for reference.

You’ll find other classes to try including the prefix and suffix classes (add space to front or back of a column).