Advanced Settings

Here's some advanced options to customize a little more your grid

Custom column

Gridle will generate for you all the columns you need, depending on the context setting. That's fine. But sometime, you need some special columns... For example, a column of 33.333%, or 66.6667%, etc... This setting is made for you.

@include g-register-column( {name} , {column-count} , {context} );
 * Here we register a column with the ratio 1/3
 * where the "1" is the column-count, and the "3" is the context
 * in witch the column width will be calculated
@include g-register-column(1on3, 1, 3);

// another fancy example :
@include g-register-column(myFancyColumn, 12, 33); // 36.36%

States classes

This option allow you to generate all the classes scoped in a .state-{state} class. This allows you to view your grid by applying the name of your state as class on an html tag without needing the media queries. This is more a debug option that a real production one...

@include g-setup( (
    context : 12,
    // etx...
    states-classes : true // activate the behavior
) );

Then :

<html class="state-mobile">
    <!-- this will activate the mobile state -->

Generate JSON settings (for gridle.js)

This options allow you to enable / disable the generation of JSON settings in the css. This JSON is needed if you want to use gridle.js

$gridle-generate-json-settings : false; // default is true

Classes prefix

This option allow you to specify a prefix that will be added at all the gridle generate classes.

@g-setup( (
    // your settings...
    classes-prefix : 'hello-'
) );
<div class="hello-row">
    <div class="hello-gr-2 hello-push-5 hello-hide@mobile">
        ... All the classes will be affected ...

Classes names

These options are quite advanced stuffs but can be usefull if you want to customize the generated class names exactly as you want. Each pattern define how the classname will be generated. These are the tokens that you can use in the patterns :

%state        : Represent the state name (mobile, coco, etc...)
%column        : Represent the column index (1, 2, 10, etc...)  
%reverse     : Represent the "reverse" keyword in some patterns
%align         : Represent the alignement like "center", "middle", etc...
%float         : Represent the float like "left", "right" and "both"
%count         : Used in some patterns to represent a number
%side         : Reprensent a side for gutters like "top", "bottom", "left" and "right"
%column-count     : Represent the column number in the order class

To see the default patterns, I let you check the _settings.scss file in the gridle folder

If you want to customize a pattern, you just have to use the g-set-classname-map mixin like so :

@include g-set-classname-map ( {package}, {pattern} );

Some generated css use generic classname like [class*="gr-"] to target some elements. By default the framework will try to generate this class by itself but you can tell him explicitly the selector to use like this

@include g-set-generic-selector( {package} , {selector} );
@include g-set-generic-selector(grid, '[class*="grid-"]');

Note that the {package} parameter is the index of each map elements in the _settings.scss file like "clear-each", "grid", etc...

Extend base classes

You can extend the base gridle classes by using the mixin bellow. This has to be used with caution only if you now what you are doing...

@include g-extend-base-class( {packages} , {css_map} , {states} );
// add some css to the grid classes
@include g-extend-base-class(grid, (
    content : "I will be applied on all the grid classes in all the states"

// add some css only to the mobile state, grid and push classes
@include g-extend-base-class(grid push, (
    content : "I will be applied on all the grid and push classes of mobile state"
), mobile);

Apply css for all classes in some states

This mixin seams to be the same as the g-extend-base-class one. The big difference it that by using this, you tell to apply some css for all the specified package and all the states when the active state is the specified one.

@include g-apply-css-for( {packages} , {css_map} , {states} );
// apply this css when the active state is mobile on all the grids
@include g-apply-css-for(grid grid-grow grid-adapt, (
    content : "I will be applied on all the grids when the active state is mobile"
), mobile);

You can use this if you really need that particular behavior. Otherwise, it's more efficient to use something like this :

[class*="gr-"] {
    @include g-state(mobile) {
        content : "do something...";