Any ideas why i getting this wordpress error when loading grid.less into a blank theme?

"parse error: failed at @_gridsystem-width: (@column-width*@columns) + (@gutter-width*@columns) * 1px; line: 7"

I'm running less.js with the wp-LESS plugin. it's recognising & using other .less files fine.

I'm still having subpixel problem in google and safari, firefox and ie renders it ok.

I can see at least -1pixel with in the aside (right side) colum with the next code.

lol i don't know how to show code in here. pastebin to the rescue :P

http://pastebin.com/Dj6eHL95

Hi, can't find a solution. Is already possible to develop complex nesting? All I can get is subcolumns with fixed ratio like the example with a 3x3 subgrid.

For example I need two columns (13 and 3)
the 1st column should be splitter into 2 rows with respectively 3 and 10 large columns.

Thank you,

Mauro

It seems that the offset calculation doesn't work with @total-width set to 100%. I tried to offset a div by 1 column and it ended up being offset by 90% of the screen!

This concerns an error calling this line of code in style.less with LESS v1.2.0

@import "grid.less";

...which returns an error saying "a.extract[1] undefined"

I didn't forget to call less.js from a folder in the template folder nor did I forget to indicate the proper path for the .less files. I used a code via perkins theme's functions.php which goes:

/START/
define('WP_DEBUG', true);
require 'class.wp-less-styles.php';
include 'functions.less-styles.php';

class CallLessCSS
{
public function init()
{
// Register less
wp_register_script('less', get_template_directory_uri() . '/js/less-1.2.0.min.js', array(), false, true);
// Then add to the queue
wp_enqueue_script('less');

// Register app.less
wp_register_less_style('app', get_template_directory_uri() . '/stylesheet/style.less');
// Then add to the queue
wp_enqueue_less_style('app');

// Register ubuntu font
wp_register_style('ubuntu-font', 'http://fonts.googleapis.com/css?family=Ubuntu');
wp_enqueue_style('ubuntu-font'); 

}
}

// Init
add_action('init', array('CallLessCSS', 'init'));

/END/

I didn't forget to include perkinstheme's class.wp-less-styles.php and include 'functions.less-styles.php in the template folder.

I tried calling the files before the tag manually but it still does the same thing.

And I make sure to check on the error page's source to make sure I called the files properly.

I tried using less-1.1.3.min.js instead the problem didn't occur.

If it helps, I saw this in github as well: less/less.js#563 re: import bug on v2.0. They claim 1.2.1 works but LESSCSS.org has yet to release that as of time of this posting.

For now, I'll go for 1.1.3

Hope that helps :)

Not sure if this is an issue, but I can't seem to find a way to do it. Let's say I want to do something similar to this example: http://semantic.gs/examples/fluid/fluid.html; however, I want the gutters to be a fixed width. Is this possible with semantic.gs? I can see a simple fix like this working: "If @gutter-width is a percentage, then make it a percentage, if not, make it represent pixels, and if it is neither, than go with whichever is the current active unit(depending on if @total-width is set)." This is more of a question, but I couldn't find a mailing list or IRC channel to ask in, so I resorted to posting here.

Hi,

I'm trying this grid with SASS/COMPASS (using Scout) and wanted to report a weird bug:

First of all, I'm trying to use a fluid grid with nested elements.

If I change one of my partial file (_whatever.scss) and not the one with the grid, the calculation of the margin for the grid always return 0%.
If I change the partial for the grid (_grid.scss) everything works fine...

I'l try to narrow it down and let you know if I find something.

Thanks for the grid!

Hi Tyler

I've been trying out semantic.gs and it's been a fantastic resource. I've written a modified 'nested' column function which I've found useful and thought I'd share it with you.

It was a while ago I wrote it, but if memory serves me correctly I did it because I didn't find the .push/.pull functions flexible enough, plus I often found that for nested columns I didn't want any margins. You just set the number of columns you want the block to span, the number of columns the parent block spans and a margin width.

There may be an easier way to do this, but for what it's worth here's my code:

/* Nested blocks - define width as a percentage */

/* default values */
@target-block-width: 0;
@target-block-columns: 3;
@parent-block-columns: 9;
@margin-multiplier: 0;

/* Utility Variables */
@parent-width: @total-width*((((@gutter-width+@column-width)*@parent-block-columns)-@gutter-width) / @gridsystem-width);
@target-block-width: @total-width*((((@gutter-width+@column-width)*@target-block-columns)-@gutter-width) / @gridsystem-width);

@block-width: ((@target-block-width / @parent-width) * 100%);

.nested-block-width(@target-block-columns:@target-block-columns,@parent-block-columns:@parent-block-columns,@margin-multiplier:@margin-multiplier) {
    width: @block-width;
    margin: 0 ((@parent-width*(@gutter-width/@gridsystem-width))*@margin-multiplier);
}

/* Usage */

.nested-block-width(8,12,0); /* target-block-columns, parent-block-columns, margin-multiplier */

I'm not sure if I'm doing something wrong but using the row helper with a fixed width layout doesn't seem to be working.

Setting the number of columns lower seems to increase the width of the row, not decrease it. This is the output from sass:

@include row(12);

display: block;
width: 980.0px;
margin: 0 -10px;

@include row(8);

display: block;
width: 990px;
margin: 0 -15px;

@include row(4);

display: block;
width: 1020px;
margin: 0 -30px;

Does this seem weird to anyone else?

Yesterday I tried your grid.
At first I set up my grid with fixed sizes. Then I added the total-width to 100% - but then nothing fitted any more. Do I need to change sizes when moving to fluid grids?

Hello,

How to handle the following in semantic.js:
1 - Padding in columns;
2 - Child columns;
3 - Table columns widths.
Can I apply the mixins to it?

Thank You,
Miguel

Something like:

.block-a {
    .valign(top); 
}
.block-b {
    .valign(middle); 
}
.block-c {
    .valign(bottom); 
}

For the responsive layout I'm trying to change per screen size the total-width.
For example:
@media only screen and (max-width: 959px) {

@total-width:700px

top { .column(12); background:#999 !important; }

#maincolumn {
.column(8);
margin-bottom:20px;
}
#sidebar {
.column(2); 

}

}

Or the @column-width, @gutter-width

It would be nice to have a way in Semantic.gs to define a vertical grid or to impose a vertical rhythm.

Something like (in SCSS)

h1 { margin-bottom: vertical-unit(2); }
p { margin-bottom: vertical-unit(1); }

Coming from a couple of projects using Foundation, I thought the push and pull classes were meant to do source ordering. It seems, though, that these are more similar to adding empty columns/offsets instead.

I've partially fixed this by changing margin-left to left and adding position: relative to the .column mixin, but I haven't figured out the math of it yet.

The em dash(?) character in this comment seems to cause the grid.scss file to be served up as ASCII:

// Utility function — you should never need to modify this

This is the Sinatra error message:

Encoding::UndefinedConversionError at /css/grid.css
"\xE2" from ASCII-8BIT to UTF-8

Changing the character from "—" to "-" seems to do the trick.

The website documentation states that for a responsive layout you need this

@media (max-device-width: 960px) {
   article {
      .column(12);
   }
   aside {
      .column(12);
   }
}

When in fact, this is required

@media screen and (max-width: 960px) {
   article, aside {
      .column(12);
   }
}

Hey all,

I'm working on putting a bootstrap of sorts together for myself for various projects using a little bit from various sources around the web along with some personal includes. Just whipped up this layout really quickly tonight and noticed a bug in Firefox when resizing the window (the third column on the bottom right occasionally clears the floats and pushes down beneath the others):

http://bootstrap.korywakefield.com/

Any ideas? Pretty sure my brain is just fried from working all night, haha. Other than that one little bug, is looking pretty good elsewhere. I'll continue to mess with it tomorrow and see if I can come up with any answers.

With this setup:

@column-width: 60;
@gutter-width: 20;
@columns: 16; //or anything but 12
@total-width: 100%;

The layout no longer respects the total-width: 100%. Screenshot.
Notice how the page is only taking up about 75% of the browser.

Maybe it would be wise to make it clear on the semantic page and documentation that IE7 have severe glitches on the columns that cannot be fixed because of CSS rounding issue.

I have a layout with many boxes that should behave responsively and fluid. The site is www.memelinks.com.
The problem is that each box has 1px border, and on some specific browser widths (on chrome; opera is ok) the layout breaks and there's an "empty" column on the right.
I've used a simple test page and verified that the problem is related to the border width; simply changing border into outline, the problem vanished.

Here is an screenshot showing the problem; the top window uses border, and the bottom, outline.

When working with normal layouts (without a grid) I was used to subtract the border total width from the element's width, but... how would I do that using semantic.gs?

Hello, TwigKit.

First of all, thanks for great work! This semantic grid system is awesome, I started to use it in all my projects.

Are you planning to implement Prefixes and Suffixes like in 960.gs?

Thanks for semantic.gs. It's great.

I was looking at the "Less Framework 4" which, if combined with semantic.gs, would use the following variable settings:

@column-width: 68;
@gutter-width: 24;

The problem is the width calculation that's implemented would render this less code:

  .column(3);
}```

as this:
```div {
  display: inline;
  float: left;
  width: 251.99999999999997px;
  margin: 0 12px;
}```

as you can see, the width should be 252px. Just to put the above in perspective, here's how column 1-10 is calculated:
```div {
  width: 68px;
  width: 160px;
  width: 251.99999999999997px;
  width: 344px;
  width: 436px;
  width: 528px;
  width: 620px;
  width: 712px;
  width: 804px;
  width: 896px;
}```

I was able to work around this by modifying the width calculation to the following:
```width: (((@gutter-width + @column-width) * round(@x)) - @gutter-width) * (@total-width / @gridsystem-width)```

I'm using the latest lesscss version which has a round() function that corrects it. There's probably a better way to do the above mathematically, but it seems to work.

I've added two new mixins for my own use, maybe they should be introduced into release:

...css
.column-first(@x,@columns:@columns) {
display: inline;
float: left;
width: @total-width_((((@gutter-width+@column-width)@x)-@gutter-width) / @gridsystem-width);
margin: 0 @total-width((@gutter-width_.5)/@gridsystem-width);
margin-left: 0;
// width: @total-width((((@gutter-width+@column-width)@x)-@gutter-width) / @gridsystem-width)-@Correction;
// *margin: 0 @total-width((@gutter-width*.5)/@gridsystem-width)-@Correction;
}

.column-last(@x,@columns:@columns) {
display: inline;
float: left;
width: @total-width_((((@gutter-width+@column-width)@x)-@gutter-width) / @gridsystem-width);
margin: 0 @total-width((@gutter-width_.5)/@gridsystem-width);
margin-right: 0;
// width: @total-width((((@gutter-width+@column-width)@x)-@gutter-width) / @gridsystem-width)-@Correction;
// *margin: 0 @total-width((@gutter-width*.5)/@gridsystem-width)-@Correction;
}
...

How can I center my columns in a responsive layout, and also adding a padding in a column.

Hi,

My apologies if this is not the correct place to put this request, however I didn't know where else to go.

I need to increase the space between the first/last columns and the edge of the div.center width. The background colour is set to white and the background of body is set to grey, so I'd like more than just 10px between the left edge of the first column and the change from white to grey.

Initially div.center was set to 960px, however I'd like it to be more like 1000px.

Is there a modification I can make inside grid.less to get this to work?

Cheers.

Hey guys,

I'm working on a new site utilizing OOCSS and noticed that whenever I place an image in the .last-unit column that it creates a layout bug in Firefox and Opera where it will jump down and clear the float.

I found this example that you can see it in if you open using Opera or Firefox:

http://oocss.org/grids_test/core/grid/grids_all.html#largeImg

Notice the 1/5 columns towards the bottom are taking up the entire browser width in Opera, and in Firefox they're just not containing the images properly (for my test site it's acting like the Opera example seen here).

Any ideas on what's causing this?

I am getting an issue with a fluid grid, when I use nested columns, the margins for the nested columns are slightly too small. You can see an example of this here:

http://semantic.gs/examples/nested/nested.html

The margin between the nested columns is slightly smaller than the margin with the side bar.

Is anyone else getting this? Is there a fix?

Thanks!

When I open the examples in Chrome there is no grid.

In Firefox I get "Access to restricted URI denied".

Max OS X 10.6.8

Chrome: 13.0.782.218
Firefox: 6.0.1

Thanks

I'm pretty sure this won't work https://github.com/twigkit/semantic.gs/blob/master/stylesheets/scss/grid.scss#L23

I don't believe this is the right place to pose this question, but perhaps someone can lead me in the right direction?

I've added the semantic.gs css, less and js files to my wordpress site (bredwild.com), and I can see the files when I inspect my page in chrome. For some reason the js doesn't seem to be parsing the css properly which results in the styles not being expressed on the webpage.

To illustrate, I've added two very simple css classes in my "less.css" file:

@gray: #cccccc;
@white: #fff;

body { background-color: @gray; font-color: @white; }

When I inspect the body class in chrome I see that the @gray and @white calls have a yellow exclamation next to them and a line through them.

Any ideas on why the js (less-1.3.0.min) isn't working, or do you know of a better place to ask this question?

Thanks!

Rounding of percentage column width makes right column jitter from right top to left bottom

I'm using Sass.

Whenever I use the row mixin on an element - no matter how many columns I assign to it - the element gets a full width.

I've been checking the code, and I don't get how the row mixin could get a width based on the $columns variable, if the variable is not used in the calculation after width.

grid.scss:
@mixin row($columns:$columns) { ... width: $total-width*(($gutter-width + $_gridsystem-width)/$_gridsystem-width); ... }

The $column mixin is also not using the second variable "$columns" (used for nested columns) so I don't see how nested columns are supposed to work.

If I'm the only one with this problem then it's rather an issue than a question.
Any help? Thx!

Can we add push and pull classes?

Hi,

How is supposed to work the nested columns ? Maybe it's only a bug on your stylus version but second parameter is never used.
I think you should recalculate the _gridsystem-width according to the second column parameter and change the parameter name to avoid a maximum call stack size error.

https://gist.github.com/1354849

David

Instead of having to respecify every single tag you've set a column width on inside a media query, it would be cool to just re-specify the .column mixin if the screen goes below a certain size.

Right now we have to find every tag with a .column(x) mixin and set them to .column(12), like so:

@media screen and (max-width: 480px) {
   article {
      .column(12);
   }
   aside {
      .column(12);
   }
}

Would it be possible to do something equivalent to:

@media screen and (max-width: 480px) {
    .column(x) {
        width: 100%;
    }
}

This doesn't work, but I was wondering if there was some obscure LESS/SASS conditional logic that could somehow take care of this.

It should be trivial to convert to stylus.
The techniques used in the grid should be agonistic to the CSS compiler used, and would increase the number of users of the grid.

I've started a port

In grid.less the total grid width is calculated as

@gridsystem-width: (@column-width_@columns) + (@gutter-width_@columns) * 1px;

Should'nt this rather be

@gridsystem-width: (@column-width_@columns) + (@gutter-width_(@columns-1)) * 1px;

That is,calculating the total gutter width,we substract 1,since the last column has no next column,therefore ,no gutter to include.
This is the formula used by all grid frameworks like bootstrap,blueprint etc.
Please correct if I am wrong.Do I miss something?

In the site is says:

article {
   .column(9);

   ul {
      .row(9);

      li {
         .column(4,9);
      }
   }
}
aside {
   .column(3);
}

It should be:

article {
   .column(9);

   ul {
      .row(9);

      li {
         .column(3,9);
      }
   }
}
aside {
   .column(3);
}

Hello,

I'm currently using semantic.gs while coding a wordpress weblog theme. The system works great and I was really flashed by its possibilities. The only "issue" I found was the fact, that there doesn't seem to be an "official" way to create a fixed-width layout and responsive layout...

Would be great, If there would be an example for that...

Hey ya all,

I've got a question; I'm lost of having nested elements and it's container. I hope I didn't make some stupid mistake but currently can't figure out what's going on ;-(

Okay; An UL which has several LI's should aligned left with SGS but appears complete width at bigger width screens.

I use Semantic Grid System along with 320 and Up.
piece if LESS-code ;

@import "semanticgrid.less";

@columns: 12;

@column-width: 60;

@gutter-width: 20;

@total-width: 100%;
.center-content {

width: 100%;

margin: 1em auto;

}
s-three {
width: 95%;
.cf;

.s-three-child {
    .column(12);

    ul {
        .row(12);

        li {
            .column(12,12);
            margin-bottom: 1em;
            list-style: none;
        }
    }
}

aside {
    display: none;
}

}

//  10. MEDIA QUERIES       ==============================
// 480px

@media only screen and (min-width: 480px) {
@import "480.less";

#s-three {
width: 100%;

    .s-three-child {
        .column(12);

        ul {
            .row(12);

            li {
                .column(6,12);
                margin-bottom: 1em;
            }
        }
    }

    aside {
        display: none;
    }
}

}
// 768px

@media only screen and (min-width: 768px) {
@import "768.less";

.center-content {
    min-width: 740px;
    width: 95%;
    max-width: 940px;
    background-color: #e7e7ed;
}

#s-three {
width: 100%;

    #s-three-child{
        .column(9);

        ul {
            .row(9);

            li {
                .column(3,9);
                margin-bottom: 1em;
            }
        }
    }   

    aside {
        .column(3);
        background-color: #f8d385;
    }
}

}

    <div class="center-content">
        <section id="s-three">
            <div class="s-three-child">
                <ul>
                    <li><img src="img/410x230.png" alt="410x230.png"></li>
                    <li><img src="img/410x230.png" alt="410x230.png"></li>
                    <li><img src="img/410x230.png" alt="410x230.png"></li>
                    <li><img src="img/410x230.png" alt="410x230.png"></li>
                    <li><img src="img/410x230.png" alt="410x230.png"></li>
                    <li><img src="img/410x230.png" alt="410x230.png"></li>
                    <li><img src="img/410x230.png" alt="410x230.png"></li>
                    <li><img src="img/410x230.png" alt="410x230.png"></li>
                    <li><img src="img/410x230.png" alt="410x230.png"></li>
                </ul>
            </div>
            <aside><h2>aside element</h2></aside>
        </section>
    </div>
    <div class="center-content">


I get dimension of div.s-three-child ul of width: 102.083% and margin: 0px -1.04167% for all MQ's when I apply the code like on the webpage for nested columns I expect to have a 9col width of ul with 3col width of aside from MQ 768px and higher but is never triggered according to inspector and firebug. You can find the testpage at http://http://less.myradon.net/320andup/
What I'm I doing wrong me lads?!