Hi there,
I hope this is the best place to post my question, if not please refer me to the proper group / focum or support area! Thank you.
I'm trying to make a responsive (sub theme zen) template using SASS w/ zen grids. I noticed when using the responsive template that it makes the right side bar expand /shrink when you re-size. I only want the main content area to resize. If I set a min-width on the side-bar the percentage margins that zen grids adds breaks the layout.
If I try to set the width in the include statement:
.region-sidebar-second {
//set width to 292px
@include zen-grid-item(1, 5, left,5, 20,292);
}
It breaks the entire layout.
Is it possible using zen grids to have a dynamic main area and a fixed width sidebar? Or am I forced to use all fixed or all dynamic?
Obviously I could build this without zengrids using a fixed-width float on the sidebar and a flexible main content area -- but I'm trying to not bypass zen and use zen if I can.
Hopefully I am not trying to do the impossible -- seems fairly basic to me!
Thanks for your help.
Comments
Obviously I could build this
This is the solution. You can NOT mix percentages and pixels.
Got it, thanks. Glad it
Got it, thanks. Glad it wasn't just me then...
--
Fountain City Inc
Creative-Technical solutions
Beautiful websites built with Drupal
http://fountaincity.tech
Zen grids is tool to build
Zen grids is tool to build grid system. If sidebar is fixed then there is NO grid, which means you can not use any grid system to calculate columns and gutters.
Maybe not with Zen Grids... but it IS possible with other grids
I love Zen, but Zen Grids has always left something to be desired for me. I usually scrape Zen Grids out of the theme and use Susy grid instead - it has always seemed far more flexible.
What you're trying to do is possible with Susy - see http://stackoverflow.com/questions/21967723/susy-2-fixed-width-sidebar-w... - the "isolate" approach looks the most feasible.
Thanks for the tip to try
Thanks for the tip to try Susy! I will certainly give it a whirl.
--
Fountain City Inc
Creative-Technical solutions
Beautiful websites built with Drupal
http://fountaincity.tech
Why is hard to understand the
Why is hard to understand the layout with negative margins? This is flexible even in IE6. Zen grids uses exactly this approach for making grid system.
Using negative margins each element is independent of other elements in same wrapper. With this approach there is mistake of width rounding maximum 1px in total, no matter how many columns.
Here is your solution.
HTML
<div class="clearfix">
<div class="l-content__wrapper">
<div class="l-content blue">content (percentage)</div>
</div>
<div class="l-sidebar green">sidebar (static)</div>
</div>
CSS
.clearfix {
*zoom: 1;
}
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.l-content__wrapper {
float: left;
margin-right: -100%;
width: 100%;
}
.l-content {
margin-right: 220px;
}
.l-sidebar {
float: right;
margin-left: -100%;
width: 200px;
}
.green {background-color: green;}
.blue {background-color: blue;}
Here is demo: http://jsfiddle.net/arYjs/
Thanks for your reply! This
Thanks for your reply! This indeed works, and I thank you for the code!!
But we aren't using Zen grids anymore are we? My original question was how to achieve this using Zen grids without using my own custom CSS.
--
Fountain City Inc
Creative-Technical solutions
Beautiful websites built with Drupal
http://fountaincity.tech
My original question was how
Not possible.
Why? Because, as I've already said, Zen grids is a tool for helping you to calculate: width of columns, their margins (left and right), direction, to clearfix parent, etc. And it's really simple to use.
The layout you asked for is not a grid.