Forcing a one column page in Blacklight 3.2

I have a Blacklight 3.2 app which uses the default CSS (which is now based on compass with susy grids for layout), and a rails layout that’s a barely customized version of the stock layout.

This layout is normally a two-column display, with a sidebar and main area.

But on some pages, I don’t want a sidebar. I want the main area to take up the whole width.  if there’s any content in the ‘sidebar’ area, it should just be beneath the main area in normal page flow, not beside it. (Sometimes I might hide the sidebar entirely, other times let it flow beneath).

I don’t want to have to give different pages different layouts. The DOM should be the same after all, it’s just a question of forcing the sidebar below instead of side-by-side.

I had a way to do this with previous yui-grids based Blacklight layout. Here’s a way to do it with the compass susy based layout too. Thanks to James Stuart for the hints. All errors mine — I confess I don’t entirely understand what’s going on here (I understand about 85% of it), and haven’t thoroughly tested this yet, but it makes sense and appears to work. There’s probably a nicer way to do this.

First, in my layout, I have it add a class to the <body> if such a class (or space seperated class literals) are in the @body_class ivar.

  <body class="<%= @body_class %>">

So far, that won’t do anything though, the CSS is still the same. So now we want to add CSS overrides such that when .one_column wrapper, override the CSS to force both the main and sidebar areas to be full width. We’re going to do that with plain old CSS overrides (although using scss/compass/susy to generate the CSS) — there’s probably a cleverer way integrate into BL’s existing scss context to make things more clean and re-use variables already declared and such, but this is good enough.

We’re going to add a new .css.scss file in our app, and require it in our ‘application.css’ manifest after the Blacklight styles are included, so it can override them CSS cascade style.

*= require force_one_column

./app/assets/force_one_column.css.scss

/* give us access to the compass susy mixins like
prefix/columns/omega. possibly also set up BL's default column widths
and such? */
@import "blacklight/grids/susy_framework"; 

.one_column {
   #bd  {
      #main {
        @include columns(24,24);
        @include omega(24);
      }
      #sidebar {
        @include columns(24,24);
        @include omega(24);
      }
   }
}

That’s it, it works.

  • Note that we needed to know standard BL susy layout is 24 columns. If someone changes that, our stuff will break and have to be fixed. There’s probably a way to make this more robust by incorporating this in the single existing BL scss (with access to it’s variables) in your local ./app/assets/blacklight_themes/standard.scss.css (or similar), but this is good enough for me for now.
  • Susy docs say one ought to be able to use `@include full(24)` instead of `@include columns(24,24); @include omega(24);` but for some reason that didn’t work for me, I dunno.
This entry was posted in General. Bookmark the permalink.

2 Responses to Forcing a one column page in Blacklight 3.2

  1. eriiicam says:

    ‘full’ and ‘columns’ behave differently, so the one won’t override the other, which is what it sounds like you need. You could use ‘un-column’ and then ‘full’ – it might be more robust in the long run.

  2. jrochkind says:

    Ah, that makes perfect sense. ‘un-column’, did not know about that, sounds like exacty what I should have been using, thanks! Except I’m not actually finding it in the documentation anywhere, do you know if it’s documented anywhere?

    Did just find it in the source, so I guess that’s good enough to confirm it’s existence at least! https://github.com/ericam/compass-susy-plugin/blob/master/sass/susy/_grid.scss#L122

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s