Using nested columns in Semantic.gs with a FIXED layout

Question

I have implemented a fluid layout with Semantic.gs and some nested columns with LESS. But now our client decided they want the layout to be fixed.

I thought I could simply comment out the line @total-width:100% in grid.less, however now the other LESS files give an error on lines with the .row() mixin.

Is there a workaround for this?

Here is the relevant portion of grid.less

/////////////////
// Semantic.gs // for LESS: http://lesscss.org/ 
/////////////////  

// Defaults which you can freely override
@column-width: 20;
@gutter-width: 10;
@columns: 47;


// Utility variable - you should never need to modify this
@gridsystem-width: (@column-width*@columns) + (@gutter-width*@columns) * 1px;
// Set @total-width to 100% for a fluid layout
//@total-width: @gridsystem-width;
//@total-width: 100%;
// Uncomment these two lines and the star-hack width/margin lines below to enable sub-pixel fix for IE6 & 7. See http://tylertate.com/blog/2012/01/05/subpixel-rounding.html
 @min-width: 980;
 @correction: 1 / @min-width * 100 * 1.5%;

Here is the problematic section of the LESS file. The LESS compiler gives the error 'Compiler Errors variable @total-width is undefined (Line: 292)', which is the line with the .row() attribute:

 #v_main_wrapper{
    position:relative;
    float:none;
    .row(47);
    &:after{
  content: "";
  display: table;
  clear: both;
    }

}

Sorry, post edited to show code – Maureen Dunlap Mar 07 '13 at 18:02 — Maureen Dunlap, Mar 07 '13 at 18:02

score 0 · Answer 1 · answered Mar 07 '13 at 19:09

0

I would think that you would want this:

@total-width: @gridsystem-width; //leave this uncommented, to calculate width
//@total-width: 100%;

answered Mar 07 '13 at 19:09

ScottS

71,703
13
126
146

Thanks ScottS. That didn't work for my nested columns, it just stacked them all on top of each other. I ended up just setting the total width to 980, same as the min-width. – Maureen Dunlap Mar 08 '13 at 14:02
@MaureenDunlap: I considered suggesting that, but was not sure if that would solve all your problems. Theoretically, it would seem to me you want to recalculate your number of columns, column-width, and gutter-width so taht the `@gridsystem-width` = 980 then it calculates out. However, if just hard-coding it as 980 worked for you, then that is great. – ScottS Mar 08 '13 at 14:42

Using nested columns in Semantic.gs with a FIXED layout

1 Answers1