ZEN 5 Responsive - general questions

Question

For a couple of last days I've read dozens of articles about Zen 5, its grid system and responsive design. But there are still some questions need to be answered or maybe confirmed.

1. responsive-sidebars.scss file

Let's say I want to have different text color of main content for different media queries. I guess the overall definition of the color should be in pages.scss file, but for specific media queries it should to be in responsive-sidebars.scss, right? A've added a color: red; syntax to the example shown in the second question. Is this correct place for this property and value?

2. Override $zen-column-count variable

Let's assume that I want a scenario like this. For the front page I want to have 5 column grid at @media all and (min-width: 960px). But for non-front pages I want to use 10 column grid at the same media query. I reckon, I can do it like this:

@media all and (min-width: 960px) {
 $zen-column-count: 5;

 .sidebar-first {
  #content { 
   @include zen-grid-item(4, 2);
   color: red;
  }

  .region-sidebar-first {
   @include zen-grid-item(1, 1);
  }

 /* not-front pages */
 $zen-column-count: 10;

 .not-front .sidebar-first {
  #content { 
   @include zen-grid-item(7, 3);
  }

  .region-sidebar-first {
   @include zen-grid-item(3, 1);
  }

 }
}

3.Different max-width query for front and non-front pages.

Let's say I want to have different max-width query for front and not-front pages. In the responsive-sidebars.scss file I found this notation:

@media all and (max-width: 1125px) { 

}

While the only difference between front and non-front pages is a body class, how can I prevent this to use it only for front page? Is the notation of ".front" class is enough to apply this media query to front page?

Answer 1

The short answer is yes; the .front class is more than adequate.

Using SASS nesting, your CSS would probably end up looking something like the following.

@media all and (min-width: 960px) {
 $zen-column-count: 5;

 .front {
   .sidebar-first {
    #content { 
     @include zen-grid-item(4, 2);
     color: red;
    }

    .region-sidebar-first {
     @include zen-grid-item(1, 1);
    }
  }

 /* not-front pages */
 $zen-column-count: 10;

 .sidebar-first {
  #content { 
   @include zen-grid-item(7, 3);
  }

  .region-sidebar-first {
   @include zen-grid-item(3, 1);
  }

 }
}

Note that I've removed the .not-front class from the second batch. Adding the .front class to the first block gives it a higher level of specificity, so it can't be overridden by what is in the second block. Basically, if you are using .front for the first bits, then it is redundant to use .not-front for the second block.

As an FYI, there is an awesome CSS specificity article here.