Only one line of code prevents to use gridle with libsass.

*width: expression((this.parentNode.clientWidth/#{$context}*#{($columns / $name-multiplicator)} - parseInt(this.currentStyle['paddingLeft']) - parseInt(this.currentStyle['paddingRight'])) + 'px');

https://github.com/olivierbossel/gridle/blob/master/sass/gridle/_mixins.scss#L243-L245

It will be great if support of IE7 will not interfere to use griddle with fastest sass compiler.

In a 12-column grid grid-4 elements are 33.33333% wide and grid-8 elements are 66.66667% wide.
The problem is that if you put two grid-4 elements and a grid-8 under them, the grid-8 element will be slightly wider.

Try this in Chrome:

<div style="width: 1200px; margin: 0 auto">
    <div class="grid-4" style="height:50px; background:red"></div>
    <div class="grid-4" style="height:50px; background:red"></div>
    <div class="grid-8" style="height:50px; background:green"></div>
</div>

Apparently the margin: 0 auto in the wrapper div does affect the widths.

I noticed that Bootstrap uses more decimal places in the percentage values; for this case they would be: 33.33333333% and 66.66666667%.
And... it works!

hello,
I try to use gridle in a Django project with django-libsass with uses libsass through libsass-python .
When compiling my scss file, I get this error :

gridle/_common-mixins.scss:32: error reading values after

did I miss something or is this a real bug ?

to reproduce the error :

• boot a fresh ubuntu Precise
• clone libsass git repo and checkout 1.3.0 tag branch
• clone sassc git repo and checkout 1.3.0 tag branch
• compile
• checkout gridle git repo
• sassc gridle/sass/tests.scss
• doh !

regards,
Luc

ps : ok, it seems to be a libsass bug : sass/libsass#548

My css.scss file does not find @import "gridle/gridle";

But in order to get this far, had to do the following:

1. Update my sass-rails to 5.0.0.beta1 in order to get my sass to > 3.3.
2. Compass needed to be installed.

Gemfile look like this so far:
gem 'sass-rails', '> 5.0.0.beta1'
gem 'gridle', '> 1.3.32'
gem 'compass'

1. Then found this issue here:
   #16
   and added in a config.rb into assets/stylesheets. Is this the correct place?

I now get "Sass::SyntaxError - File to import not found or unreadable: gridle/gridle." at the "@import 'gridle/gridle';" inside my css.scss file.

Thanks,
Joe

Hi,

I think it should be mentioned that classes .clear-each-{x} can not be used if gridle_register_clear_each( {each} , {what} ) mixin are not specified.

I'm using gulp-sass in the following task

gulp.task('styles', function() {

    var dir = config.dist + '/css';

    return gulp.src(config.scss) // src/styles/main.scss
        .pipe(sass({
            sourceComments: dist ? 'none' : 'map',
            sourceMap: 'sass',
            outputStyle: dist ? 'compressed' : 'nested',
            includePaths: ['node_modules/gridle/sass']
        }))
        //.pipe(autoprefixer("last 2 versions", "> 1%", "ie 8"))
        .on('error', handleErrors)
        .pipe(gulp.dest(dir))
        //.pipe(gulpif(browserSync.active, browserSync.reload({ stream: true })))
    ;
});

if the option errLogToConsole: true i the a error reading values after on line 32 in node_modules/gridle/sass/gridle/_common-mixins.scss

but i dont understand why running the command sass src/styles/main.scss -Inode_modules/gridle/sass' works fine

Hi,

I want to update to the last version of gridle. So, i've updated compass and when i compile, i have this issue:
Line 502 of src/vendor/gridle/sass/gridle/_generate-mixins.scss: () isn't a valid CSS value.

This is my configuration :

• gridle : 1.3.2
• compass version : Compass 1.0.0.rc.1
• sass : Sass 3.4.0.rc.3

If i change this code:

// common css :
@if  $what == null or index($what, grid) or index($what, default) {
    #{$grid-common-selector} {
        @include _gridle_grid_common();
    }
}
@if  $what == null or index($what, push) or index($what, default) {
    #{$push-common-selector} {
        @include _gridle_push_common();
    }
}
@if  $what == null or index($what, pull) or index($what, default) {
    #{$pull-common-selector} {
        @include _gridle_pull_common();
    }
}
@if  $what == null or index($what, prefix) or index($what, default) {
    #{$prefix-common-selector} {
        @include _gridle_prefix_common();
    }
}
@if  $what == null or index($what, suffix) or index($what, default) {
    #{$suffix-common-selector} {
        @include _gridle_suffix_common();
    }
}

To that, it works :

// common css :
@if not $grid-common-selector == () and ($what == null or index($what, grid) or index($what, default)) {
    #{$grid-common-selector} {
        @include _gridle_grid_common();
    }
}
@if not $push-common-selector == () and $what == null or index($what, push) or index($what, default) {
    #{$push-common-selector} {
        @include _gridle_push_common();
    }
}
@if not $pull-common-selector == () and $what == null or index($what, pull) or index($what, default) {
    #{$pull-common-selector} {
        @include _gridle_pull_common();
    }
}
@if not $prefix-common-selector == () and $what == null or index($what, prefix) or index($what, default) {
    #{$prefix-common-selector} {
        @include _gridle_prefix_common();
    }
}
@if not $suffix-common-selector == () and $what == null or index($what, suffix) or index($what, default) {
    #{$suffix-common-selector} {
        @include _gridle_suffix_common();
    }
}

Do you have an idea why i have this issue ?

Thanks :)

Scenario
Say one container element (div) needs to have 50% layout (grid-6, in 12 column layout) and also should have float right.

Problem
Float right style is suppressed by the grid-{column} float setting

I really like this grid, and it's perfect as a bower package. I have it installed directly from Git, but I highly suggest you register to their public repo. Instructions are here: http://bower.io/

I don't understand how this custom column function works. Once I registered it, how do I use it?

Hi again - I'm trying to create a nested grid with a context, and it is generating this error:

"Error: $map2: 15 is not a map for `map-merge'\A on line 303 of /sass/gridle/_functions.scss, in `gridle_state'\A from line 192 of /sass/gridle/_mixins.scss, in `gridle'\A from line 27 of /sass/pages/_course-detail.scss\A from line 4 of /sass/pages/_all.scss\A from line 7 of /sass/courses.scss";

This is what my CSS looks like:

.parent {
  @include gridle(15);
  @include gridle-push(1);
  @include gridle_parent ( );
}

.child {
  @include gridle(5,15);
}

Any ideas what I'm doing wrong?

The documentation has an example like this in the Mixins Section:

@include gridle_state ( {min-width} , {max-width} ) { 
    ...
}

However when i try to do:

@include gridle_state( 200px, 500px ){
    ...
}

I get the following error:

Error: $map2: 200px is not a map for 'map-merge'

I feel like the documentation is slightly misleading here

Have you thought about switching to the // comment style to prevent comments in the CSS for the mixins? I know they aren't quite as nice but they don't show up in the generated CSS.

Although not a big deal it could be a slight annoyance further down the line in projects that move away from SASS and get maintained with the CSS only.

This appears in the generated CSS but there are no styles associated with the comments.

I'll make a pull request if you would include this.

/**
 * Map set
 *
 * @param   Map     $map        The map to use
 * @param   String  $key        The key to update
 * @param   Mixed   $value      The new value
 * @return  Map             The new map
 */
/**
 * Get the column width in percent for the global or a specific context
 *
 * @param   int         $columns                    The number of columns to calculate
 * @param   int         $context : $gridle-columns-count        The context to use
 * @return  percentage                          The width in percent
 */
/**
 *  Get a state map
 *
 * @param   string      $name       The name of the state to get
 * @return  map                 A state map object
 */
/**
 * Check if a state exist :
 *
 * @param   string      $name       The name of the state to check
 * @return  Boolean             true is exist
 */
/**
 * Get the media queries variables :
 *
 * @param   int         $index      The media query indes
 * @param   String      $var        The media query variable name
 * @return  String|int          The variable value
 */
/**
 * Get a variable
 *
 * @param   String      $varName                The variable name
 * @param   String      $stateMap-or-stateName      The state name or a map state value
 * @return  Mixed                           The finded value
 */
/**
 * Set a variable in a state
 * @param   Mixed $stateName-or-stateIndex  The state name of state index
 * @param   String $var                         Variable name to assign
 * @param   Mixed $newValue                 The new value to assign
 * @return  List                                    The states list (full)
 */
/**
 * Generate a column
 *
 * @param   String      $name           The column name (often count)
 * @param   int         $columns        The column count that the column will take
 * @param   int         $context        The context on witch the with will be calculed
 * @param   Boolean     $generateClasses    Set if the column has to be generated in css
 */
/**
 * Generate classname
 *
 * @param   List        $parrern    The pattern to use to generate classname
 * @param   String      $state      The state
 * @param   int         $count      The column count
 */
/**
 * Get the media query for a particular state, or with, etc...
 *
 * @param   Mixed       $state-or-min-width         The state name of the min with
 * @param   Mixed       $max-width          The max width if first param is a min width
 * @return  String                      The media query string without the @media
 */
/**
 * Get states count
 * 
 * @return  int     The number of states defined
 */
/**
 * Setup
 */
/**
 *  Register a clear each class
 */
/**
 * Register a special class
 */
/**
 * Register default states
 */
/**
 * Register default mobile first states :
 */
/**
 * Set the debug device (not used for now)
 * 
 * @param   String      $state      The state to update
 * @para m  String      $device     The device to use (iphone, etc...)
 */
/**
 * Parent clear each
 */
/**
 * Vertical align :
 */
/**
 * Show inline
 *
 * @param   String      $state      The state name
 */
/**
 * Generate a custom class for all the states
 *
 * @param   list    $pattern        The name pattern of the class
 * @param   list    $statesNames        The states names to generate
 */

I get following error when compiling my files using the "compass -watch":
Syntax error: List index is 1 but list has no items for nth' on line 1531 of I:\Clients\de\web_wp\wp-content\themes\de\sass\gridle\_gridle.scss, ingridle_generate_json_settings'
from line 1780 of I:\Clients\de\web_wp\wp-content\themes\de\sass\gridle_gridle.scss, in _gridle_generate_classes' from line 1555 of I:\Clients\de\web_wp\wp-content\themes\de\sass\gridle\_gridle.scss, ingridle_generate_classes'
from line 5 of I:/Clients/de/web_wp/wp-content/themes/de/sass/grid.scss

Any ideas why this is happening?

I'm having following error when trying to compile using gulp-sass

gridle/mixins:116: property "html#{_gridle_classname("#{$stateName}" must be followed by a ':'

👍

If we define the prefix in _grid-settings.scss like this

then the container element is not prefixed with the user defined prefix when we convert it sass to css as it is explicitly defined in gridle/grid.scss

Can we move the container outside the grid.scss?

Resulting css having other element prefixed with user defined prefix but container is not

Is it possible to set the gutter width differently depending on the size of the browser? Would there be a best practice approach for this? Apologies if I am missing something obvious.

Many thanks,
Loque

Hi Olivier. Congrats for your work, i like so much your grid system for its simplicity.

I have one question about media queries. Is there the possibility to use mixins to apply grid specific CSS to a custom html tags inside standard media query syntax?

For example i tried this piece of code:
@media all and (max-width: 1025px) {
.mydivclass {
@include gridle_container();
}
}

and on compass compile a deprecation warning was returned:
"@extending an outer selector from within @media is deprecated.
You may only @extend selectors within the same directive.
This will be an error in Sass 3.3.
It can only work once @extend is supported natively in the browser."

Am i obliged to use a state registration?

Thank you

Hi,

Sass 3.0 has just been released and I'm having issues with compiling _gridle.scss, I'm getting:

Syntax error: List index is 1 but list has no items for `nth' on line 1509 of gridle/_gridle.scss,
in `gridle_generate_json_settings' from line 1758 of gridle/_gridle.scss
...

Hi - I'm trying to adjust the position of a grid element at a certain breakpoint. I've used breakpoint-sass to do this in the past, and am trying to apply the same methodology to gridle, but it gives me an error.

Here's my code:

//_settings.scss
@include gridle_register_state( tablet, (
    max-width : 768px,
) );

//_header.scss
h1 {
        font-size: em(24);
        @include gridle ( 14 );
        @include gridle-push(1);
        @include centerVertical();

        @include gridle_state ( tablet ) {
            @include gridle-push(0);
        }

    }

And here's the error:

"Sass::SyntaxError: You may not @extend an outer selector from within @media.\A You may only @extend selectors within the same directive.\A From \"@extend %gridle-push-pull-common\" on line 65 of /sass/gridle/_common-mixins.scss.\A "

This is more a question than a bug.
Why do all the grid items use float left?

I can not compile the grid using the newest version. It throws the following error:

error sass/grid-bootstrap.scss (Line 7: Invalid CSS after " context ": expected ")", was ": 12,")
identical css/grid-bootstrap.css 
    error sass/grid.scss (Line 24 of sass/gridle/_common-mixins.scss: Invalid CSS after "   @each $stateName": expected "in", was ", $state in $_g...")
identical css/grid.css 
unchanged sass/style-bootstrap.scss
    error sass/style.scss (Line 38: Invalid CSS after "     max-width ": expected ")", was ": 620px")
identical css/style.css 

The bower installation does not work properly

bower bower#*               not-cached git://github.com/theshock/atomjs.git#*
bower bower#*                  resolve git://github.com/theshock/atomjs.git#*
bower gridle#*                  cached git://github.com/olivierbossel/gridle.git#1.3.0
bower gridle#*                validate 1.3.0 against git://github.com/olivierbossel/gridle.git#*
bower bower#*                 checkout master
bower gridle#*                     new version for git://github.com/olivierbossel/gridle.git#*
bower gridle#*                 resolve git://github.com/olivierbossel/gridle.git#*
bower gridle#*                download https://github.com/olivierbossel/gridle/archive/1.3.1.tar.gz
bower bower#*                 resolved git://github.com/theshock/atomjs.git#474cdf1ee5
bower gridle#*                 extract archive.tar.gz
bower gridle#*                resolved git://github.com/olivierbossel/gridle.git#1.3.1
bower                        ENOTFOUND Package install not found

Hi!

I found out that when I'm using mixins for creating grid I get a lot of redundant queries. E.g.:

.primary {
    @include gridle_set( (
        grid : 24
    ) );
}

Gives me that:

@media screen and (max-width: 99999999px) {
  /* line 29, layout\_grid.scss */
  .primary {
    float: left;
    direction: ltr;
    padding-left: 12px;
    padding-right: 12px;
  }
}
@media screen and (max-width: 480px) {
  /* line 29, layout\_grid.scss */
  .primary {
    float: left;
    direction: ltr;
    padding-left: 12px;
    padding-right: 12px;
  }
}
@media screen and (min-width: 481px) and (max-width: 99999999px) {
  /* line 29, layout\_grid.scss */
  .primary {
    float: left;
    direction: ltr;
    padding-left: 12px;
    padding-right: 12px;
  }
}
@media screen and (min-width: 768px) and (max-width: 99999999px) {
  /* line 29, layout\_grid.scss */
  .primary {
    float: left;
    direction: ltr;
    padding-left: 12px;
    padding-right: 12px;
  }
}
@media screen and (min-width: 1024px) and (max-width: 99999999px) {
  /* line 29, layout\_grid.scss */
  .primary {
    float: left;
    direction: ltr;
    padding-left: 12px;
    padding-right: 12px;
  }
}
@media screen and (min-width: 1200px) and (max-width: 99999999px) {
  /* line 29, layout\_grid.scss */
  .primary {
    float: left;
    direction: ltr;
    padding-left: 12px;
    padding-right: 12px;
  }
}
@media screen and (max-width: 99999999px) {
  /* line 29, layout\_grid.scss */
  .primary {
    width: 100%;
  }
}

My states:

@include gridle_register_state( palm, (
    max-width : 480px
) );

@include gridle_register_state( lap-and-up, (
    min-width : 481px
) );

@include gridle_register_state( tab, (
    min-width : 768px
) );

@include gridle_register_state( desk, (
    min-width : 1024px
) );

@include gridle_register_state( desk-wide, (
    min-width : 1200px
) );

Is there any way to clean it up?

Thanks!

Hi there!
Nice grid system, thanks!
Im getting this warnings:
DEPRECATION WARNING: Passing name xs, a non-string value, to unquote()
will be an error in future versions of Sass.
And the code is:

@include gridle_register_state( xs, (
max-width : 480px,
gutter-width : 10px
) );

hi, first thanks for you job :) great things come from this tool.

the problem...
update the framework and i have an error when watch file with compass, this is this command line error 1:

error sass/main.scss (Line 6 of sass/_grid-settings.scss: Invalid CSS after " context ": expected ")", was ": 12,")

and error 2:

error sass/main.scss (Line 21 of sass/_grid-settings.scss: Invalid CSS after " query ": expected ")", was ": "only screen ...")

Greetings!

"error gridle/_gridle.scss (Line 79: File to import not found or unreadable: compass/css3."

Either remove the dependency or document it.

I've just included Gridle 1.3.3 in my project for the first time, and right off the bat, it's not working. Heres the stack trace:

Syntax error: Invalid CSS after "...{$stateName} #{": expected expression (e.g. 1px, bold), was "&}";"
on line 32 of H:\spacexstatsv4\public\assets\css\gridle\gridle_common-mixins.scss
from line 86 of H:\spacexstatsv4\public\assets\css\gridle\gridle_gridle.scss
from line 2 of H:\spacexstatsv4\public\assets\css\gridle_grid-settings.scss
from line 2 of H:\spacexstatsv4\public\assets\css\gridle\grid.scss
from line 2 of H:\spacexstatsv4\public\assets\css\styles.scss
Use --trace for backtrace.

Why is this occurring?

I'm using Koala 2.0.3 to compile with SASS 3.3.7, for what it's worth...

Hi!

Can you let us the oportunity to add custum css on the big rule of all grid element ?

In my case, my big selector class rules looks-like this:

 .grid-0, .grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11, .grid-12, .grid-xxs-0, .grid-xxs-1, .grid-xxs-2, .grid-xxs-3, .grid-xxs-4, .grid-xxs-5, .grid-xxs-6, .grid-xxs-7, .grid-xxs-8, .grid-xxs-9, .grid-xxs-10, .grid-xxs-11, .grid-xxs-12, .grid-xs-0, .grid-xs-1, .grid-xs-2, .grid-xs-3, .grid-xs-4, .grid-xs-5, .grid-xs-6, .grid-xs-7, .grid-xs-8, .grid-xs-9, .grid-xs-10, .grid-xs-11, .grid-xs-12, .grid-sm-0, .grid-sm-1, .grid-sm-2, .grid-sm-3, .grid-sm-4, .grid-sm-5, .grid-sm-6, .grid-sm-7, .grid-sm-8, .grid-sm-9, .grid-sm-10, .grid-sm-11, .grid-sm-12, .grid-md-0, .grid-md-1, .grid-md-2, .grid-md-3, .grid-md-4, .grid-md-5, .grid-md-6, .grid-md-7, .grid-md-8, .grid-md-9, .grid-md-10, .grid-md-11, .grid-md-12, .grid-lg-0, .grid-lg-1, .grid-lg-2, .grid-lg-3, .grid-lg-4, .grid-lg-5, .grid-lg-6, .grid-lg-7, .grid-lg-8, .grid-lg-9, .grid-lg-10, .grid-lg-11, .grid-lg-12

and I need to define a max-width 100%.

I don't think than copy past all in custom styles is a good worflow.

Thanks in advance.

Hi there,

I think it would be great to have an option to exclude all the box-sizing attributes that are added to containers, grid-* styles.
I use a single solution to make the whole site use border-box (http://www.paulirish.com/2012/box-sizing-border-box-ftw/) so I'd rather save some KBs and get the gridle function that generates the classes to ignore all border-box attributes.

It's not urgent, but very nice to have.

Hi. I found your framework and I was trying to take it for a spin. After issues with gulp-sass, I moved to gulp-ruby-sass.
It compiles without problems, but I don't see any css in the output. This is my code:

@import "gridle/gridle";

@include gridle_setup( (
  context : 12,
  gutter-width : 0
  // etc...
) );

@include gridle_register_state( mobile , (
    max-width : 400px
) );
@include gridle_register_state( tablet, (
    min-width : 401px,
    max-width : 767px,
    gutter-width : 30px     // change the gutters for this state
) );

I'm invoking it from cli, with:
sass sass/alpege.scss css/alpege.css -I vendor/gridle/sass

Any hints what I'm doing wrong?

Hi,

Is there way to create a fixed width column with this framework?

Column1 fixed at 300px
Column2 fill all of the rest of the space

Thanks

Reported "issue" :

Is there a more efficient way of doing this? @include gridle( 12, tablet-portrait ); @include gridle_push( 0, tablet-portrait ); @include gridle( 12, tablet-portrait ); @include gridle_push( 0, tablet-portrait ); @include gridle( 12, mobile ); @include gridle_push( 0, mobile );

Solution :

There's now the @include gridle_state that let you write cleaner sass like so :

#myCoolSidebar {

    /**
     * Default usage :
     */
    // set the default values
    @include gridle_set( (
        grid : 4,
        push : 8
    ) );

    // erase values for tablet
    @include gridle_set( (
        grid : 12,
        push : 0
    ), tablet );
    // you can also pass ( tablet, mobile ) as {state} param to apply to multiple states at once

    // hide on mobile :
    @include gridle_hide( mobile );

    /**
     * ------------------ OR --------------------
     */

    /**
     * Or pass your states directly in one gridle_set call :
     * !!! do not set any state as second parameter with this solution
     * Be careful to not have any states that match a reserved gridle setting name like push, pull, etc...
     */
    @include gridle_set( (
        grid : 4,
        push : 8,
        tablet : (
            grid : 12,
            push : 0
        )
    ) );
}

cf. Documentation for more informations :
http://gridle.org/documentation

Cheers !

possibly MIT?

https://github.com/spaceribs/blobeval/blob/master/LICENSE.md

With the version I downloaded yesterday I am getting strange output in the css, stating multiple max-width values. I am unable to use Compass because the alpha version required will not install on my mac - but I doubt this would make a difference. I am using Sass 3.38.

The css below is generated using your grid_bootstrap.scss file

@media screen and (max-width: 768px) and (max-width: 99999999px) {
.clear-xs {
clear: both;
}
}

@media screen and (max-width: 768px) and (max-width: 99999999px) {
.clear-xs-left {
clear: left;
}
}

@media screen and (min-width: 768px) and (max-width: 99999999px) and (max-width: 99999999px) {
.clear-sm {
clear: both;
}
}

@media screen and (min-width: 768px) and (max-width: 99999999px) and (max-width: 99999999px) {
.clear-sm-left {
clear: left;
}
}

Regards
Nik

This is actually more of a libsass issue, but I'd mention it here anyway. Throughout the Gridle codebase, the @each $key, $value in $map syntax is used. This is not (yet?) supported by libsass. Can this be rewritten to make it compatible?

I am building a site that had grids of artwork, I would like to still use griddle to format these grids. The gutter on these grids should be different from the rest of the site.

Is it possible to set the gutters for states with a mixin?

I have tried a few things after skimming the codebase.

This is from my failed attempts, I imagine it should look something like this but I can't find the setting.

.gallery-artwork{
    @include gridle(4); //set to 10% in the main settings
    @include gridle(6,"tablet");
    @include gridle(12,"mobile");
    //@include gridle_gutter(50px);
    //@include gridle_gutter(30px,"tablet");
    //@include gridle_set_state_var( gutter-width , 50px);
    //@include gridle_set_state_var( gutter-width , 30px, tablet );
    @include gridle_set((
    gutter-width : 50px,
    ));
}

Could you steer me in the right direction?

Currently gutter is added as padding.

Given the case that you want to build a page with boxes having a background color this approach is not ideal. They would stick to each other, only the content would have the padding.
With the current approach you would need to wrap each box by a wrapper element having the grid classes assigned.

When using margin you won't need a wrapper element and the boxes are visually separated.

As I mentioned earlier on Twitter https://twitter.com/verpixelt/status/507453327102451712 I don't see the advantages of using Coffee Script at this point(please correct me if I miss something here). I would propose to write this in plain Javascript.

Friendly feature request here, and it may not be totally possible, but it would be great to allow flexbox as a choice instead of floating. I've started to see more and more grid systems use Flexbox (http://ionicframework.com/) and while i'm sure it's a lot of effort it's worth some consideration.

Hi,

I'm trying to bundle your gridle.js e.g.

concat: {
options: {
stripBanners: true
},
foot: {
src: [
'bower_components/gridle/js/gridle.js',
'bower_components/gridle/js/gridle.js.map',
'bower_components/masonry/dist/masonry.pkgd.js',
'js/*.js'
],
dest: 'bundles/js/foot.js'
}
}

But when I include 'foot.js' on my site, I get:

GET http://localhost:1234/work/gridle/bundles/js/gridle.js.map 404 (Not Found)

If I include gridle.js without bundling, it works. But we'd like to bundle all of our js for performance.

Is there a fix for this?

I get the following error when i try to use the example code for the gridle_state-mixin

Tried this:
@include gridle_state ( tablet ) { background : yellow; border : 1px solid pink; }

Got this:

Syntax error: Invalid CSS after "...ridle_classname": expected selector, was "(" _gridle_get_v..." on line 116 of scss\framework\gridle\lib\_mixins.scss, in 'gridle_state'

A colleague of me is trying to compile my sass file, unfortunately he gets a error.

Syntax error: You may not @extend an outer selector from within @media. You may only @extend selectors within the same directive. From "@extend %gridle-grid-common" on line 313 of assets/_gridle.scss. on line 266 of assets/_gridle.scss Use --trace for backtrace.

We both work with Prepros 4.0.0, I'm using a mac with sass version 3.2.12 and he is working with sass version 3.3.0.rc2 .

Why is he getting error with a more recent sass version?

Hi Olivier,

First of all, thank you for Gridle, it's my favorite grid system.
I think i found a little issue and i can't find a natural way to resolve it.

I am using Gridle with a mobile first approach, like this :

+gridle_register_state ('tablet', $min-width-tablet, null)
+gridle_register_state ('desktop', $min-width-desktop, null)

I am using a 24 cols grid and in a particular case :

• for my default state (mobile) : i use grid-24 full width column without gutter (no-gutter). It's perfect here.
• for my desktop state, i should have 3 columns so i use grid-desktop-8 and i have to show the right gutters here with gutter-desktop-right.

<div class="grid-24 grid-desktop-8 no-gutter gutter-desktop-right"> 

And my issue is the following, Gridle is generating no-gutter classes with !important flags. So, the gutter-desktop-... classes can't apply. The padding does not change.

Thank you

What's the recommended way of getting state variables.

I see this function _gridle_get_state_var but it looks like this isn't part of the public API to me due to the underscore prefix.

Thanks

Hi! I want to use @include gridle_container(); and it does not work

My code

.mainContainer {
    @include gridle_container();
    max-width: 800px;
    margin: 0 auto;
  }

after compilation

.mainContainer {
    max-width: 800px;
    margin: 0 auto;
  }

HELP ME! PLEASE!

Hi Olivier,

first, thank you very much for your awesome grid system. I enjoy every time I use it.

After upgrading to the new version I get an error:

File to import not found or unreadable: gridle/gridle

My relevant local gems are

compass (1.0.0.alpha.19)
compass-core (1.0.0.alpha.19)
compass-import-once (1.0.4)
gridle (1.3.24)
rubygems-bundler (1.4.4, 1.4.3)
rvm (1.11.3.9)
sass (3.3.8)
sass-globbing (1.1.1)
sassy-buttons (0.2.6)

Do you have any idea?

How can I register a custom column and use it with mixins?
I know I can do it with classes like this

@include gridle_register_column('1on5', 1, 5);
@include gridle_generate_classes();

<div class="grid-1on5 item"></div>

I've tried

@include gridle_register_column('1on5', 1, 5);
.item {
   @include gridle('1on5');
}

I found a bug (or a feature not mentioned in the docs 😄). I'm starting project and I pic Gridle over inuit.css grid. gridle_parent mixin not working properly when state isn't specified. It's easy to fix by passing "default" as a state. Maby I'm just doing something wrong.

_grid-settings.scss:

// Import gridle :
@import 'gridle/gridle';

// setup the grid (required) :
@include gridle_setup((
    context : 12,
    gutter-width : 24px,
    debug : false
));

@include gridle_register_default_mobile_first_states();

grid.scss:

// Import grid settings :
@import 'grid-settings';

.wrapper {
    @include gridle_container();
    max-width: 1000px;
    margin: 0 auto
}

.content,
.footer,
.sidebar--footer {
    @include gridle(12);
    @include gridle_parent("default");
}

.main {
    @include gridle(6);
}

.sidebar,
.widget {
    @include gridle(3);
}

.widget {
    background: #bada55;
}

.sidebar {
    background: #c0ff33;
}

index.html:

<div class="wrapper gridle-debug">
    <div class="content">
        <div class="sidebar">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam facere esse quod harum. Quae, recusandae, quaerat odit optio ab eius magni fugiat quis repudiandae rerum quos soluta ut blanditiis ad.</div>
        <main class="main">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit voluptatum optio mollitia minus beatae. Rerum, placeat, deserunt, atque saepe nesciunt modi repudiandae eaque qui amet officia quisquam reiciendis quibusdam dolor!</main>
        <div class="sidebar">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam facere esse quod harum. Quae, recusandae, quaerat odit optio ab eius magni fugiat quis repudiandae rerum quos soluta ut blanditiis ad.</div>
    </div>
    <div class="footer">
        <div class="sidebar--footer">
            <div class="widget">Lorem ipsum...</div>
            <div class="widget">Lorem ipsum...</div>
            <div class="widget">Lorem ipsum...</div>
            <div class="widget">Lorem ipsum...</div>
        </div>
    </div>
</div>

When I change

gridle_parent("default")

to:

gridle_parent()

It looks pretty lame

it's because of overwriting padding-left: 0; and padding-right: 0; by default state media query.

Gridle.scss is awesome and I hope it'll by fixed soon...