Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

gridle

Package Overview
Dependencies
Maintainers
1
Versions
14
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

gridle - npm Package Compare versions

Comparing version 2.0.2 to 2.0.4

css/grid-mixins.css
css/grid-mixins.min.css
demo-mixins.html
js/gridle.eq.min.js
LICENSE.txt
sass/_grid-mixins.scss
sass/_variables.scss

7

bower.json
{
"name": "gridle",
"version": "2.0.2",
"version": "2.0.4",
"authors": [
"Olivier Bossel <olivier.bossel@gmail.com>"
],
"description": "Gridle Gridle grid system",
"main": [
"sass/gridle/_gridle.scss"
],
"description": "Gridle grid system",
"keywords": [

@@ -9,0 +12,0 @@ "gridle",

2

doc/01.setup.md

@@ -18,2 +18,3 @@ ## Setup

context : 12, // number of columns in your grid
column-width : null, // by default it's percentage based depending on the context but you can specify a column width yourself
gutter-width : 20px, // size of the gutters

@@ -26,2 +27,3 @@ gutter-height : 0, // size of top and bottom gutters

direction : ltr, // direction
dir-attribute : false, // if need to generate support for dir="rtl" in order to set part of layout direction
states-classes : false, // if we need to generate the states classes

@@ -28,0 +30,0 @@ name-multiplicator : 1, // if 5, generate gr-5, gr-10, etc...

11

doc/02.states.md

@@ -84,5 +84,5 @@ ## States

#content {
@include gridle( 8 );
@include gridle_grid( 8 );
@include gridle_state( mobile ) {
@include gridle_grid( 8 );
@include gridle_grid( 12 );
}

@@ -94,5 +94,9 @@

mobile : (
grid : 12,
hide : true
)
) );
// universal mixin
@include gridle( 8 mobile 12 hide );
}

@@ -104,2 +108,5 @@ #sidebar {

}
// universal mixin
@include gridle( 4 mobile hide );
}

@@ -106,0 +113,0 @@ ```

2

doc/03.mobile-first.md

@@ -30,3 +30,3 @@ ## Mobile First

Then, you have to tell your grid items to take the full with on small state (if you need so).
Then, you have to tell your grid items to take the full width on small state (if you need so).
This is only if you don't want to write each time grid-xs-12 in your html (if your number of columns are 12).

@@ -33,0 +33,0 @@

25

doc/04.classes.md

@@ -1,2 +0,2 @@

## Classes
When using this, the direction parameter will not have any effect ## Classes

@@ -109,6 +109,3 @@ When you're happy with your custom grid system, Gridle will provide you with multiple types of classes. Here's the list:

> When using this, the direction parameter will not have any effect anymore...
> These classes have to be applied on a parent/container element that has direct gr- childs
### Row full

@@ -515,2 +512,22 @@

### Direction
Gridle support direction by passing it in the setup mixin. You can also use the dir="rtl|ltr" html attribute to set the direction only for a part of the template.
```markup
<div class="row">
<div class="gr-4"></div>
<div class="gr-4"></div>
<div class="gr-4"></div>
</div>
<div class="row" dir="rtl">
<div class="gr-4"></div>
<div class="gr-4"></div>
<div class="gr-4"></div>
</div>
```
> Some of the gridle features like **push, pull, prefix, suffix and row-full need that the dir-attribute setting is set to true** in the setup mixin in order to work properly. If you don't use one of these features, you can let the setting to false, witch is his default value.
### Custom classes

@@ -517,0 +534,0 @@

164

doc/05.mixins.md

@@ -20,2 +20,5 @@ ## Mixins

}
// universal mixin
@include gridle(container);
```

@@ -35,3 +38,3 @@

with context :
// with context :
@include gridle_state( mobile ) {

@@ -41,6 +44,9 @@ @include gridle_row();

gridle_set :
// gridle_set :
@include gridle_set ( (
row : true
) );
) );
// universal mixin
@include gridle(row);
```

@@ -50,3 +56,3 @@

.my-row {
@include gridle_row();
@include gridle(row);
}

@@ -75,2 +81,5 @@ ```

) );
// universal mixin
@include gridle(row-align {align});
```

@@ -81,3 +90,6 @@

@include gridle_row();
@include gridle_align ( center middle );
@include gridle_row_align ( center middle );
// same with universal mixin
@include gridle( row row-align center middle );
}

@@ -103,2 +115,5 @@ ```

) );
// universal mixin
@include gridle(row-full);
```

@@ -116,3 +131,3 @@

with context :
// with context :
@include gridle_state ( mobile ) {

@@ -122,6 +137,9 @@ @include gridle ( {column-number} );

gridle_set :
// gridle_set :
@include gridle_set((
grid : {columns-number}
) );
// universal mixin
@include gridle( {columns-number} );
```

@@ -139,6 +157,9 @@

#content {
@include gridle_grid ( 8 ); // I made 12 columns width...
@include gridle_grid ( 8 ); // I made 8 columns width...
@include gridle_state( mobile tablet ) {
@include gridle_grid ( 12 ); // ... but 12 columns width on mobile and tablet
}
// same using universal mixin
@include gridle( 8 mobile 12 tablet 12 );
}

@@ -150,5 +171,11 @@ #sidebar {

}
// same using universal mixin
@include gridle( 4 mobile 12 );
}
#footer {
@include gridle_grid ( 12 );
// same using universal mixin
@include gridle( 12 );
}

@@ -179,2 +206,6 @@ ```

) );
// universal mixin
@include gridle( grow );
@include gridle( adapt );
```

@@ -186,2 +217,5 @@

@include gridle_grid ( adapt ); // same as line abow
// using universal mixin
@include gridle( adapt );
}

@@ -207,2 +241,5 @@ ```

) );
// universal mixin
@include gridle( grid-centered );
```

@@ -230,2 +267,5 @@

) );
// universal mixin
@include gridle( order {order} );
```

@@ -252,2 +292,6 @@

));
// universal mixin
@include gridle( push {column-number} );
@include gridle( pull {column-number} );
```

@@ -263,2 +307,5 @@

@include gridle_push ( 4 ); // I will be offset by 4 columns on the right
// same with universal mixin
@include gridle ( 8 push 4 );
}

@@ -269,2 +316,5 @@ #sidebar {

// same with universal mixin
@include gridle ( 4 pull 8 );
}

@@ -292,2 +342,6 @@ ```

), {state} );
// universal mixin
@include gridle( prefix {column-number} );
@include gridle( suffix {column-number} );
```

@@ -302,14 +356,14 @@

@include gridle_prefix ( 3 ); // 3 columns of dead space to the right
// same with universal mixin
@include gridle( 3 prefix 3 );
}
#box2 {
@include gridle_grid ( 3 );
@include gridle_prefix ( 3 ); // 3 columns of dead space to the right
@include gridle( 3 prefix 3 );
}
#box3 {
@include gridle_grid ( 3 );
@include gridle_suffix ( 3 ); // 3 columns of dead space to the left
@include gridle( 3 suffix 3 );
}
#box4 {
@include gridle_grid ( 3 );
@include gridle_suffix ( 3 ); // 3 columns of dead space to the left
@include gridle( 3 suffix 3 );
}

@@ -337,2 +391,6 @@ ```

) );
// universal mixin
@include gridle( wrap );
@include gridle( nowrap );
```

@@ -364,2 +422,5 @@

), {state} );
// universal mixin
@include gridle( clear-each {each} {what} );
```

@@ -370,2 +431,5 @@

@include gridle_clear_each( 2, left );
// same using universal mixin
@include gridle( clear-each 2 left );
}

@@ -400,2 +464,9 @@ ```

), {state} );
// universal mixin
@include gridle( hide );
@include gridle( show );
@include gridle( show-inline );
@include gridle( not-visible );
@include gridle( visible );
```

@@ -409,2 +480,5 @@

}
// same using universal mixin
@include gridle( 4 mobile hide );
}

@@ -430,2 +504,5 @@ ```

), {state} );
// universal mixin
@include gridle( float {left | right | both} );
```

@@ -439,2 +516,5 @@

}
// same using universal mixin
@include gridle( float right mobile float left );
}

@@ -460,5 +540,8 @@ ```

), {state} );
// universal mixin
@include gridle( clear {left | right | both} );
```
```markup
```scss
#sidebar {

@@ -469,2 +552,5 @@ @include gridle_clear( right ); // clear right normally...

}
// same using universal mixin
@include gridle( clear right mobile clear left );
}

@@ -492,6 +578,10 @@ ```

gutter : {sides},
margin : {sides},
no_gutter : {sides},
no_margin : {sides}
no_gutter : {sides}
) );
// universal mixin
@include gridle( gutter );
@include gridle( gutter {sides} );
@include gridle( no-gutter );
@include gridle( no-gutter {sides} );
```

@@ -508,2 +598,5 @@

@include gridle_gutter ( top left ); // add gutter to top and left only
// same using universal mixin
@include gridle( gutter top left );
}

@@ -521,2 +614,5 @@ #content {

@include gridle_gutter(5px 10px 15px 20px);
// same using universal mixin
@include gridle( gutter 5px 10px 15px 20px );
}

@@ -526,2 +622,27 @@ ```

### Universal mixin
All these mixins described above are great but this force you to write a lot of @include... to do complexe things. The universal mixin is here to help you with that.
It allow to write in 1 line all you want from gridle in your element.
```fn
@include gridle( {properties-list} );
// syntax
@include gridle( {property} {value} {value} {property} {value} {state} {property} {value} {state} {property} {value}...);
```
```scss
.my-cool-element {
// make a grid 12 that push from 5 and will be hided on mobile
@include gridle(12 push 5 mobile hide);
// make something more complexe
@include gridle(4 push 3 suffix 4
mobile 12 suffix 0 push 0
tablet hide);
}
```
### Gridle state

@@ -590,3 +711,3 @@

Gridle has a support for element queries (Thanks to Marc J Schmidt for his wonderfull work on the "polyfill"). To make your element responsive to his own width, use this mixin as described bellow
Gridle has a support for element queries (Thanks to [Marc J Schmidt](https://github.com/marcj/css-element-queries) for his wonderfull work on the "polyfill"). To make your element responsive to his own width, use this mixin as described bellow

@@ -648,7 +769,4 @@ ```fn

), tablet );
// you can also pass ( tablet, mobile ) as {state} param to apply to multiple states at once
// you can also pass tablet mobile as {state} param to apply to multiple states at once
// hide on mobile :
@include gridle_hide( mobile );
/**

@@ -655,0 +773,0 @@ * ------------------ OR --------------------

33

doc/09.changelog.md
## Changelog
Here what has changed in this version
### 2.0.4
#### Adding universal mixin support
The universal mixin allows you to write complexe gridle instructions in 1 line
#### Enhance direction support
You can now specify that a part of your layout has a different direction with the dir="rtl" html attribute
#### Column width support
Add support for the column-width setting in setup. This has to be used only if you now what you are doing. By default gridle is a percentage based grid system...
### 2.0.3
#### Fix some issues with nesting grids
Your grid will now have the full container width available cause all the rows will expand themselves by the gutter width. This is a better behavior.
#### Adding license in repo
There's now a LICENSE.txt file in the repo.
#### Adding basic mixins sample in demo-mixins.html file
### 2.0.2
#### Adding element queries support
You have now support for element queries.
### 2.0.0

@@ -6,0 +37,0 @@

9

js/demo.js

@@ -13,7 +13,11 @@ jQuery(function($) {

$('.gr-12.gridle-debug').each(function() {
var $this, $ul;
var $this, $ul, first_clicked;
$this = $(this);
$ul = $('<ul class="selector selector--states" />');
first_clicked = false;
$.each(states, function(idx, item) {
var $li;
if (!item.settings.classes) {
return;
}
$li = $('<li data-state="' + item.name + '">' + item.name + '</li>');

@@ -32,5 +36,6 @@ $li.bind('click', function(e) {

$ul.append($li);
if (idx === 0) {
if (!first_clicked) {
$li.trigger('click');
}
first_clicked = true;
});

@@ -37,0 +42,0 @@ $this.prepend($ul);

2

js/gridle-full.min.js

@@ -1,1 +0,1 @@

window.matchMedia||(window.matchMedia=function(){"use strict";var a=window.styleMedia||window.media;if(!a){var b=document.createElement("style"),c=document.getElementsByTagName("script")[0],d=null;b.type="text/css",b.id="matchmediajs-test",c.parentNode.insertBefore(b,c),d="getComputedStyle"in window&&window.getComputedStyle(b,null)||b.currentStyle,a={matchMedium:function(a){var c="@media "+a+"{ #matchmediajs-test { width: 1px; } }";return b.styleSheet?b.styleSheet.cssText=c:b.textContent=c,"1px"===d.width}}}return function(b){return{matches:a.matchMedium(b||"all"),media:b||"all"}}}()),function(a){"function"==typeof define&&define.amd?define([],a):("object"==typeof exports,a())}(function(){var a,b,c;return b={convert:function(a,b){return b={},a.on=function(c,d){return(b[c]=b[c]||[]).push(d),a},a.emit=function(c){var d,e,f,g;if(b[c]){for(g=b[c],e=0,f=g.length;f>e;e++)d=g[e],d.apply(a,Array.prototype.slice.call(arguments,1));return a}},a}},window.Gridle={_inited:!1,_isReady:!1,_statesInCss:null,_statesFindedInCss:!1,_cssSettings:[],_states:[],_activeStates:[],_activeStatesNames:[],_inactiveStates:[],_inactiveStatesNames:[],_updatedStates:[],_updatedStatesNames:[],resizeTimeout:null,_settings:{onUpdate:null,debug:null},init:function(b){var c,d;return this._inited=!0,null!=b&&(this._settings=b),b&&null!=b.debug&&(null!=(c=this._settings.debug)||b.debug),b&&null!=b.onStatesChange&&(null!=(d=this._settings.onStatesChange)||b.onStatesChange),this._debug("waiting for content to be fully loaded"),a(function(a){return function(){return a._parseCss()}}(this))},_parseCss:function(){var a,b,c,d,e,f,g,h;for(b=0,d=document.styleSheets.length,h=!1;d>b;){try{if(f=document.styleSheets[b].cssText||document.styleSheets[b].cssRules||document.styleSheets[b].rules,"string"==typeof f)g=f.match(/#gridle-settings(?:\s*)\{(?:\s*)content(?:\s*):(?:\s*)\"(.+)\"(;\s*|\s*)\}/)&&RegExp.$1,g&&(g=g.toString().replace(/\\/g,""),g=JSON.parse(g),this._cssSettings=g,h=!0,this._cssSettings=g,this._statesInCss=g.states);else for(c in f)e=f[c],/#gridle-settings/.test(e.cssText)&&(g=e.cssText.toString().match(/:(.*);/)&&RegExp.$1,g=g.toString().replace(/\\/g,""),g=g.trim(),g=g.substr(1),g=g.substr(0,g.length-1),g=JSON.parse(g),null!=(null!=g?g.states:void 0))&&(this._cssSettings=g,this._statesInCss=g.states,h=!0)}catch(i){if(a=i,"SecurityError"!==a.name)throw a}b++}return this._statesInCss?this._processFindedStates():this._debug("no states found...")},_processFindedStates:function(){var a,b,c;this._debug("begin process finded states in css"),c=this._statesInCss;for(a in c)b=c[a],this._registerState(a,b);return this._launch()},_launch:function(){return this._debug("launch"),this._isReady=!0,this._crossEmit("ready"),this._addEvent(window,"resize",function(a){return function(){return clearTimeout(a.resizeTimeout),a.resizeTimeout=setTimeout(function(){return a._onResize()},100)}}(this)),this._onResize()},_onResize:function(){var a;return a=[],this._updateStatesStatus(),this.getActiveStatesNames().length&&this._debug("active states",this.getActiveStatesNames().join(",")),this.getInactiveStatesNames().length&&this._debug("inactive states",this.getInactiveStatesNames().join(",")),this.getUpdatedStatesNames().length?this._debug("updated states",this.getUpdatedStatesNames().join(",")):void 0},_registerState:function(a,b,c){var d;return d={name:a,query:b.query,settings:b,status:null,previous_status:null,updateOnResize:null!=c?c:!0},this._states.push(d),this._debug("|--- register state",a,d)},_updateStatesStatus:function(){var a,b,c,d,e,f;a=this.getDefaultState(),b=this._states.indexOf(a),e=a.status,this._activeStates=[],this._activeStatesNames=[],this._inactiveStates=[],this._inactiveStatesNames=[],this._updatedStates=[],this._updatedStatesNames=[],f=this._states;for(c in f)d=f[c],d.updateOnResize&&(this._states[c].previous_status=d.status,this._validateState(d)?(this._states[c].status||(this._updatedStates.push(d),this._updatedStatesNames.push(d.name)),this._states[c].status=!0,this._activeStates.push(d),this._activeStatesNames.push(d.name)):"default"!==d.name&&(this._states[c].status&&(this._updatedStates.push(d),this._updatedStatesNames.push(d.name)),this._states[c].status=!1,this._inactiveStates.push(d),this._inactiveStatesNames.push(d.name)));return this._activeStates.length?(this._states[b].status=!1,this._inactiveStates.push(a),this._inactiveStatesNames.push("default"),e&&(this._updatedStates.push(a),this._updatedStatesNames.push("default"))):(this._states[b].status=!0,this._activeStates.push(a),this._activeStatesNames.push("default"),e||(this._updatedStates.push(a),this._updatedStatesNames.push("default"))),this._updatedStates.length&&this._crossEmit("update",this._updatedStates,this._activeStates,this._inactiveStates),this._updatedStates.length&&this._settings.onUpdate?this._settings.onUpdate(this._updatedStates,this._activeStates,this._inactiveStates):void 0},_validateState:function(){return function(a){return matchMedia(a.query).matches}}(this),_addEvent:function(a,b,c){return a?a.addEventListener?a.addEventListener(b,c,!1):a.attachEvent?a.attachEvent("on"+b,c):a["on"+b]=c:!1},_crossEmit:function(a){return"undefined"!=typeof jQuery&&null!==jQuery&&(jQuery(this).trigger(a,Array.prototype.slice.call(arguments,1)),jQuery("body").trigger("gridle."+a,Array.prototype.slice.call(arguments,1))),this.emit.apply(this,arguments)},_ajax:function(a){var b,c;return b={type:a.type||"GET",url:a.url,success:a.success,error:a.error,dataType:a.dataType||"text",context:a.context},c=new XMLHttpRequest,b.context&&(c.context=b.context),c.open(b.type,b.url,!0),c.onreadystatechange=function(){var a;if(4!==c.readyState)return!1;switch(c.status){case 200:switch(b.dataType){case"json":a=JSON.parse(c.responseText);break;default:a=c.responseText}if(b.success)return b.success(a,c.status,c)}},c.send()},getDefaultState:function(){var a,b,c,d;for(d=this.getRegisteredStates(),b=0,c=d.length;c>b;b++)if(a=d[b],"default"===a.name)return a},getRegisteredStates:function(){return this._states},getUpdatedStates:function(){return this._updatedStates},getUpdatedStatesNames:function(){return this._updatedStatesNames},getActiveStates:function(){return this._activeStates},getActiveStatesNames:function(){return this._activeStatesNames},getInactiveStates:function(){return this._inactiveStates},getInactiveStatesNames:function(){return this._inactiveStatesNames},isActive:function(a){var b,c,d,e;c=!1,e=this._activeStatesNames;for(b in e)d=e[b],a===d&&(c=!0);return c},isReady:function(){return this._isReady},_debug:function(){return this._settings.debug?console.log("GRIDLE",arguments):void 0}},c=!1,a=function(a){var b;return b=function(a){return c?void a():void 0},window.addEventListener?window.addEventListener("load",function(){return function(){return c=!0,a()}}(this),!1):window.attachEvent("onload",function(){return function(){return c=!0,a()}}(this)),b(function(){return function(){return a()}}(this))},b.convert(window.Gridle),a(function(){return setTimeout(function(){return Gridle._inited?void 0:Gridle.init()},500)}),"function"==typeof window.define&&window.define.amd&&window.define([],function(){return window.Gridle}),Gridle}),function(){this.ResizeSensor=function(a,b){function c(){this.q=[],this.add=function(a){this.q.push(a)};var a,b;this.call=function(){for(a=0,b=this.q.length;b>a;a++)this.q[a].call()}}function d(a,b){return a.currentStyle?a.currentStyle[b]:window.getComputedStyle?window.getComputedStyle(a,null).getPropertyValue(b):a.style[b]}function e(a,b){if(a.resizedAttached){if(a.resizedAttached)return void a.resizedAttached.add(b)}else a.resizedAttached=new c,a.resizedAttached.add(b);a.resizeSensor=document.createElement("div"),a.resizeSensor.className="resize-sensor";var e="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;",f="position: absolute; left: 0; top: 0;";a.resizeSensor.style.cssText=e,a.resizeSensor.innerHTML='<div class="resize-sensor-expand" style="'+e+'"><div style="'+f+'"></div></div><div class="resize-sensor-shrink" style="'+e+'"><div style="'+f+' width: 200%; height: 200%"></div></div>',a.appendChild(a.resizeSensor),{fixed:1,absolute:1}[d(a,"position")]||(a.style.position="relative");var g,h,i=a.resizeSensor.childNodes[0],j=i.childNodes[0],k=a.resizeSensor.childNodes[1],l=(k.childNodes[0],function(){j.style.width=i.offsetWidth+10+"px",j.style.height=i.offsetHeight+10+"px",i.scrollLeft=i.scrollWidth,i.scrollTop=i.scrollHeight,k.scrollLeft=k.scrollWidth,k.scrollTop=k.scrollHeight,g=a.offsetWidth,h=a.offsetHeight});l();var m=function(){a.resizedAttached&&a.resizedAttached.call()},n=function(a,b,c){a.attachEvent?a.attachEvent("on"+b,c):a.addEventListener(b,c)};n(i,"scroll",function(){(a.offsetWidth>g||a.offsetHeight>h)&&m(),l()}),n(k,"scroll",function(){(a.offsetWidth<g||a.offsetHeight<h)&&m(),l()})}if("[object Array]"===Object.prototype.toString.call(a)||"undefined"!=typeof jQuery&&a instanceof jQuery||"undefined"!=typeof Elements&&a instanceof Elements)for(var f=0,g=a.length;g>f;f++)e(a[f],b);else e(a,b);this.detach=function(){ResizeSensor.detach(a)}},this.ResizeSensor.detach=function(a){a.resizeSensor&&(a.removeChild(a.resizeSensor),delete a.resizeSensor,delete a.resizedAttached)}}(),function(){var a=this.ElementQueries=function(){function b(a){a||(a=document.documentElement);var b=getComputedStyle(a,"fontSize");return parseFloat(b)||16}function c(a,c){var d=c.replace(/[0-9]*/,"");switch(c=parseFloat(c),d){case"px":return c;case"em":return c*b(a);case"rem":return c*b();case"vw":return c*document.documentElement.clientWidth/100;case"vh":return c*document.documentElement.clientHeight/100;case"vmin":case"vmax":var e=document.documentElement.clientWidth/100,f=document.documentElement.clientHeight/100,g=Math["vmin"===d?"min":"max"];return c*g(e,f);default:return c}}function d(a){this.element=a,this.options={};var b,d,e,f,g,h,i,j=0,k=0;this.addOption=function(a){var b=[a.mode,a.property,a.value].join(",");this.options[b]=a};var l=["min-width","min-height","max-width","max-height"];this.call=function(){j=this.element.offsetWidth,k=this.element.offsetHeight,g={};for(b in this.options)this.options.hasOwnProperty(b)&&(d=this.options[b],e=c(this.element,d.value),f="width"==d.property?j:k,i=d.mode+"-"+d.property,h="","min"==d.mode&&f>=e&&(h+=d.value),"max"==d.mode&&e>=f&&(h+=d.value),g[i]||(g[i]=""),h&&-1===(" "+g[i]+" ").indexOf(" "+h+" ")&&(g[i]+=" "+h));for(var a in l)g[l[a]]?this.element.setAttribute(l[a],g[l[a]].substr(1)):this.element.removeAttribute(l[a])}}function e(a,b){a.elementQueriesSetupInformation?a.elementQueriesSetupInformation.addOption(b):(a.elementQueriesSetupInformation=new d(a),a.elementQueriesSetupInformation.addOption(b),a.elementQueriesSensor=new ResizeSensor(a,function(){a.elementQueriesSetupInformation.call()})),a.elementQueriesSetupInformation.call(),this.withTracking&&i.push(a)}function f(a,b,c,d){var f;if(document.querySelectorAll&&(f=document.querySelectorAll.bind(document)),f||"undefined"==typeof $$||(f=$$),f||"undefined"==typeof jQuery||(f=jQuery),!f)throw"No document.querySelectorAll, jQuery or Mootools's $$ found.";for(var g=f(a),h=0,i=g.length;i>h;h++)e(g[h],{mode:b,property:c,value:d})}function g(a){var b;for(a=a.replace(/'/g,'"');null!==(b=j.exec(a));)5<b.length&&f(b[1]||b[5],b[2],b[3],b[4])}function h(a){var b="";if(a)if("string"==typeof a)a=a.toLowerCase(),(-1!==a.indexOf("min-width")||-1!==a.indexOf("max-width"))&&g(a);else for(var c=0,d=a.length;d>c;c++)1===a[c].type?(b=a[c].selectorText||a[c].cssText,-1!==b.indexOf("min-height")||-1!==b.indexOf("max-height")?g(b):(-1!==b.indexOf("min-width")||-1!==b.indexOf("max-width"))&&g(b)):4===a[c].type&&h(a[c].cssRules||a[c].rules)}this.withTracking=!1;var i=[],j=/,?([^,\n]*)\[[\s\t]*(min|max)-(width|height)[\s\t]*[~$\^]?=[\s\t]*"([^"]*)"[\s\t]*]([^\n\s\{]*)/gim;this.init=function(a){this.withTracking=a;for(var b=0,c=document.styleSheets.length;c>b;b++)try{h(document.styleSheets[b].cssText||document.styleSheets[b].cssRules||document.styleSheets[b].rules)}catch(d){if("SecurityError"!==d.name)throw d}},this.update=function(a){this.withTracking=a,this.init()},this.detach=function(){if(!this.withTracking)throw"withTracking is not enabled. We can not detach elements since we don not store it.Use ElementQueries.withTracking = true; before domready.";for(var b;b=i.pop();)a.detach(b);i=[]}};a.update=function(b){a.instance.update(b)},a.detach=function(a){a.elementQueriesSetupInformation?(a.elementQueriesSensor.detach(),delete a.elementQueriesSetupInformation,delete a.elementQueriesSensor,console.log("detached")):console.log("detached already",a)},a.withTracking=!1,a.init=function(){a.instance||(a.instance=new a),a.instance.init(a.withTracking)};var b=function(a){if(document.addEventListener&&document.addEventListener("DOMContentLoaded",a,!1),/KHTML|WebKit|iCab/i.test(navigator.userAgent))var b=setInterval(function(){/loaded|complete/i.test(document.readyState)&&(a(),clearInterval(b))},10);window.onload=a};window.addEventListener?window.addEventListener("load",a.init,!1):window.attachEvent("onload",a.init),b(a.init)}(),function(a){"function"==typeof define&&define.amd?define([],a):("object"==typeof exports,a())}(function(){var a;return a=function(){function a(){var a;a=new ElementQueries,a.init()}return a.prototype.update=function(){return ElementQueries.update()},a}(),window.GridleEq=new a});
window.matchMedia||(window.matchMedia=function(){"use strict";var a=window.styleMedia||window.media;if(!a){var b=document.createElement("style"),c=document.getElementsByTagName("script")[0],d=null;b.type="text/css",b.id="matchmediajs-test",c.parentNode.insertBefore(b,c),d="getComputedStyle"in window&&window.getComputedStyle(b,null)||b.currentStyle,a={matchMedium:function(a){var c="@media "+a+"{ #matchmediajs-test { width: 1px; } }";return b.styleSheet?b.styleSheet.cssText=c:b.textContent=c,"1px"===d.width}}}return function(b){return{matches:a.matchMedium(b||"all"),media:b||"all"}}}()),function(a){"function"==typeof define&&define.amd?define([],a):("object"==typeof exports,a())}(function(){var a,b,c;return c={convert:function(a,b){return b={},a.on=function(c,d){return(b[c]=b[c]||[]).push(d),a},a.emit=function(c){var d,e,f,g;if(b[c]){for(g=b[c],e=0,f=g.length;f>e;e++)d=g[e],d.apply(a,Array.prototype.slice.call(arguments,1));return a}},a}},window.Gridle={_inited:!1,_isReady:!1,_statesInCss:null,_statesFindedInCss:!1,_cssSettings:[],_states:[],_activeStates:[],_activeStatesNames:[],_inactiveStates:[],_inactiveStatesNames:[],_updatedStates:[],_updatedStatesNames:[],resizeTimeout:null,_settings:{onUpdate:null,debug:null},init:function(a){var c,d;return this._inited=!0,null!=a&&(this._settings=a),a&&null!=a.debug&&(null!=(c=this._settings.debug)||a.debug),a&&null!=a.onStatesChange&&(null!=(d=this._settings.onStatesChange)||a.onStatesChange),this._debug("waiting for content to be fully loaded"),b(function(a){return function(){return a._parseCss()}}(this))},_parseCss:function(){var a,b,c,d,e,f,g,h;for(b=0,d=document.styleSheets.length,h=!1;d>b;){try{if(f=document.styleSheets[b].cssText||document.styleSheets[b].cssRules||document.styleSheets[b].rules,"string"==typeof f)g=f.match(/#gridle-settings(?:\s*)\{(?:\s*)content(?:\s*):(?:\s*)\"(.+)\"(;\s*|\s*)\}/)&&RegExp.$1,g&&(g=g.toString().replace(/\\/g,""),g=JSON.parse(g),this._cssSettings=g,h=!0,this._cssSettings=g,this._statesInCss=g.states);else for(c in f)e=f[c],/#gridle-settings/.test(e.cssText)&&(g=e.cssText.toString().match(/:(.*);/)&&RegExp.$1,g=g.toString().replace(/\\/g,""),g=g.trim(),g=g.substr(1),g=g.substr(0,g.length-1),g=JSON.parse(g),null!=(null!=g?g.states:void 0))&&(this._cssSettings=g,this._statesInCss=g.states,h=!0)}catch(i){if(a=i,"SecurityError"!==a.name)throw a}b++}return this._statesInCss?this._processFindedStates():this._debug("no states found...")},_processFindedStates:function(){var a,b,c;this._debug("begin process finded states in css"),c=this._statesInCss;for(a in c)b=c[a],this._registerState(a,b);return this._launch()},_launch:function(){return this._debug("launch"),this._isReady=!0,this._crossEmit("ready"),this._addEvent(window,"resize",function(a){return function(b){return clearTimeout(a.resizeTimeout),a.resizeTimeout=setTimeout(function(){return a._onResize()},100)}}(this)),this._onResize()},_onResize:function(){var a;return a=[],this._updateStatesStatus(),this.getActiveStatesNames().length&&this._debug("active states",this.getActiveStatesNames().join(",")),this.getInactiveStatesNames().length&&this._debug("inactive states",this.getInactiveStatesNames().join(",")),this.getUpdatedStatesNames().length?this._debug("updated states",this.getUpdatedStatesNames().join(",")):void 0},_registerState:function(a,b,c){var d;return d={name:a,query:b.query,settings:b,status:null,previous_status:null,updateOnResize:null!=c?c:!0},this._states.push(d),this._debug("|--- register state",a,d)},_updateStatesStatus:function(){var a,b,c,d,e,f;a=this.getDefaultState(),b=this._states.indexOf(a),f=a.status,this._activeStates=[],this._activeStatesNames=[],this._inactiveStates=[],this._inactiveStatesNames=[],this._updatedStates=[],this._updatedStatesNames=[],d=this._states;for(c in d)e=d[c],e.updateOnResize&&(this._states[c].previous_status=e.status,this._validateState(e)?(this._states[c].status||(this._updatedStates.push(e),this._updatedStatesNames.push(e.name)),this._states[c].status=!0,this._activeStates.push(e),this._activeStatesNames.push(e.name)):"default"!==e.name&&(this._states[c].status&&(this._updatedStates.push(e),this._updatedStatesNames.push(e.name)),this._states[c].status=!1,this._inactiveStates.push(e),this._inactiveStatesNames.push(e.name)));return this._activeStates.length?(this._states[b].status=!1,this._inactiveStates.push(a),this._inactiveStatesNames.push("default"),f&&(this._updatedStates.push(a),this._updatedStatesNames.push("default"))):(this._states[b].status=!0,this._activeStates.push(a),this._activeStatesNames.push("default"),f||(this._updatedStates.push(a),this._updatedStatesNames.push("default"))),this._updatedStates.length&&this._crossEmit("update",this._updatedStates,this._activeStates,this._inactiveStates),this._updatedStates.length&&this._settings.onUpdate?this._settings.onUpdate(this._updatedStates,this._activeStates,this._inactiveStates):void 0},_validateState:function(a){return function(a){return matchMedia(a.query).matches}}(this),_addEvent:function(a,b,c){return a?a.addEventListener?a.addEventListener(b,c,!1):a.attachEvent?a.attachEvent("on"+b,c):a["on"+b]=c:!1},_crossEmit:function(a){return"undefined"!=typeof jQuery&&null!==jQuery&&(jQuery(this).trigger(a,Array.prototype.slice.call(arguments,1)),jQuery("body").trigger("gridle."+a,Array.prototype.slice.call(arguments,1))),this.emit.apply(this,arguments)},_ajax:function(a){var b,c;return b={type:a.type||"GET",url:a.url,success:a.success,error:a.error,dataType:a.dataType||"text",context:a.context},c=new XMLHttpRequest,b.context&&(c.context=b.context),c.open(b.type,b.url,!0),c.onreadystatechange=function(){var a;if(4!==c.readyState)return!1;switch(c.status){case 200:switch(b.dataType){case"json":a=JSON.parse(c.responseText);break;default:a=c.responseText}if(b.success)return b.success(a,c.status,c)}},c.send()},getDefaultState:function(){var a,b,c,d;for(c=this.getRegisteredStates(),a=0,b=c.length;b>a;a++)if(d=c[a],"default"===d.name)return d},getRegisteredStates:function(){return this._states},getUpdatedStates:function(){return this._updatedStates},getUpdatedStatesNames:function(){return this._updatedStatesNames},getActiveStates:function(){return this._activeStates},getActiveStatesNames:function(){return this._activeStatesNames},getInactiveStates:function(){return this._inactiveStates},getInactiveStatesNames:function(){return this._inactiveStatesNames},isActive:function(a){var b,c,d,e;c=!1,e=this._activeStatesNames;for(b in e)d=e[b],a===d&&(c=!0);return c},isReady:function(){return this._isReady},_debug:function(){return this._settings.debug?console.log("GRIDLE",arguments):void 0}},a=!1,b=function(b){var c;return c=function(b){return a?void b():void 0},window.addEventListener?window.addEventListener("load",function(c){return function(){return a=!0,b()}}(this),!1):window.attachEvent("onload",function(c){return function(){return a=!0,b()}}(this)),c(function(a){return function(){return b()}}(this))},c.convert(window.Gridle),b(function(){return setTimeout(function(){return Gridle._inited?void 0:Gridle.init()},500)}),"function"==typeof window.define&&window.define.amd&&window.define([],function(){return window.Gridle}),Gridle}),function(){this.ResizeSensor=function(a,b){function c(){this.q=[],this.add=function(a){this.q.push(a)};var a,b;this.call=function(){for(a=0,b=this.q.length;b>a;a++)this.q[a].call()}}function d(a,b){return a.currentStyle?a.currentStyle[b]:window.getComputedStyle?window.getComputedStyle(a,null).getPropertyValue(b):a.style[b]}function e(a,b){if(a.resizedAttached){if(a.resizedAttached)return void a.resizedAttached.add(b)}else a.resizedAttached=new c,a.resizedAttached.add(b);a.resizeSensor=document.createElement("div"),a.resizeSensor.className="resize-sensor";var e="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;",f="position: absolute; left: 0; top: 0;";a.resizeSensor.style.cssText=e,a.resizeSensor.innerHTML='<div class="resize-sensor-expand" style="'+e+'"><div style="'+f+'"></div></div><div class="resize-sensor-shrink" style="'+e+'"><div style="'+f+' width: 200%; height: 200%"></div></div>',a.appendChild(a.resizeSensor),{fixed:1,absolute:1}[d(a,"position")]||(a.style.position="relative");var g,h,i=a.resizeSensor.childNodes[0],j=i.childNodes[0],k=a.resizeSensor.childNodes[1],l=(k.childNodes[0],function(){j.style.width=i.offsetWidth+10+"px",j.style.height=i.offsetHeight+10+"px",i.scrollLeft=i.scrollWidth,i.scrollTop=i.scrollHeight,k.scrollLeft=k.scrollWidth,k.scrollTop=k.scrollHeight,g=a.offsetWidth,h=a.offsetHeight});l();var m=function(){a.resizedAttached&&a.resizedAttached.call()},n=function(a,b,c){a.attachEvent?a.attachEvent("on"+b,c):a.addEventListener(b,c)};n(i,"scroll",function(){(a.offsetWidth>g||a.offsetHeight>h)&&m(),l()}),n(k,"scroll",function(){(a.offsetWidth<g||a.offsetHeight<h)&&m(),l()})}if("[object Array]"===Object.prototype.toString.call(a)||"undefined"!=typeof jQuery&&a instanceof jQuery||"undefined"!=typeof Elements&&a instanceof Elements)for(var f=0,g=a.length;g>f;f++)e(a[f],b);else e(a,b);this.detach=function(){ResizeSensor.detach(a)}},this.ResizeSensor.detach=function(a){a.resizeSensor&&(a.removeChild(a.resizeSensor),delete a.resizeSensor,delete a.resizedAttached)}}(),function(){var a=this.ElementQueries=function(){function b(a){a||(a=document.documentElement);var b=getComputedStyle(a,"fontSize");return parseFloat(b)||16}function c(a,c){var d=c.replace(/[0-9]*/,"");switch(c=parseFloat(c),d){case"px":return c;case"em":return c*b(a);case"rem":return c*b();case"vw":return c*document.documentElement.clientWidth/100;case"vh":return c*document.documentElement.clientHeight/100;case"vmin":case"vmax":var e=document.documentElement.clientWidth/100,f=document.documentElement.clientHeight/100,g=Math["vmin"===d?"min":"max"];return c*g(e,f);default:return c}}function d(a){this.element=a,this.options={};var b,d,e,f,g,h,i,j=0,k=0;this.addOption=function(a){var b=[a.mode,a.property,a.value].join(",");this.options[b]=a};var l=["min-width","min-height","max-width","max-height"];this.call=function(){j=this.element.offsetWidth,k=this.element.offsetHeight,g={};for(b in this.options)this.options.hasOwnProperty(b)&&(d=this.options[b],e=c(this.element,d.value),f="width"==d.property?j:k,i=d.mode+"-"+d.property,h="","min"==d.mode&&f>=e&&(h+=d.value),"max"==d.mode&&e>=f&&(h+=d.value),g[i]||(g[i]=""),h&&-1===(" "+g[i]+" ").indexOf(" "+h+" ")&&(g[i]+=" "+h));for(var a in l)g[l[a]]?this.element.setAttribute(l[a],g[l[a]].substr(1)):this.element.removeAttribute(l[a])}}function e(a,b){a.elementQueriesSetupInformation?a.elementQueriesSetupInformation.addOption(b):(a.elementQueriesSetupInformation=new d(a),a.elementQueriesSetupInformation.addOption(b),a.elementQueriesSensor=new ResizeSensor(a,function(){a.elementQueriesSetupInformation.call()})),a.elementQueriesSetupInformation.call(),this.withTracking&&i.push(a)}function f(a,b,c,d){var f;if(document.querySelectorAll&&(f=document.querySelectorAll.bind(document)),f||"undefined"==typeof $$||(f=$$),f||"undefined"==typeof jQuery||(f=jQuery),!f)throw"No document.querySelectorAll, jQuery or Mootools's $$ found.";for(var g=f(a),h=0,i=g.length;i>h;h++)e(g[h],{mode:b,property:c,value:d})}function g(a){var b;for(a=a.replace(/'/g,'"');null!==(b=j.exec(a));)5<b.length&&f(b[1]||b[5],b[2],b[3],b[4])}function h(a){var b="";if(a)if("string"==typeof a)a=a.toLowerCase(),(-1!==a.indexOf("min-width")||-1!==a.indexOf("max-width"))&&g(a);else for(var c=0,d=a.length;d>c;c++)1===a[c].type?(b=a[c].selectorText||a[c].cssText,-1!==b.indexOf("min-height")||-1!==b.indexOf("max-height")?g(b):(-1!==b.indexOf("min-width")||-1!==b.indexOf("max-width"))&&g(b)):4===a[c].type&&h(a[c].cssRules||a[c].rules)}this.withTracking=!1;var i=[],j=/,?([^,\n]*)\[[\s\t]*(min|max)-(width|height)[\s\t]*[~$\^]?=[\s\t]*"([^"]*)"[\s\t]*]([^\n\s\{]*)/gim;this.init=function(a){this.withTracking=a;for(var b=0,c=document.styleSheets.length;c>b;b++)try{h(document.styleSheets[b].cssText||document.styleSheets[b].cssRules||document.styleSheets[b].rules)}catch(d){if("SecurityError"!==d.name)throw d}},this.update=function(a){this.withTracking=a,this.init()},this.detach=function(){if(!this.withTracking)throw"withTracking is not enabled. We can not detach elements since we don not store it.Use ElementQueries.withTracking = true; before domready.";for(var b;b=i.pop();)a.detach(b);i=[]}};a.update=function(b){a.instance.update(b)},a.detach=function(a){a.elementQueriesSetupInformation?(a.elementQueriesSensor.detach(),delete a.elementQueriesSetupInformation,delete a.elementQueriesSensor,console.log("detached")):console.log("detached already",a)},a.withTracking=!1,a.init=function(){a.instance||(a.instance=new a),a.instance.init(a.withTracking)};var b=function(a){if(document.addEventListener&&document.addEventListener("DOMContentLoaded",a,!1),/KHTML|WebKit|iCab/i.test(navigator.userAgent))var b=setInterval(function(){/loaded|complete/i.test(document.readyState)&&(a(),clearInterval(b))},10);window.onload=a};window.addEventListener?window.addEventListener("load",a.init,!1):window.attachEvent("onload",a.init),b(a.init)}(),function(a){"function"==typeof define&&define.amd?define([],a):("object"==typeof exports,a())}(function(){var a;return a=function(){function a(){var a;a=new ElementQueries,a.init()}return a.prototype.update=function(){return ElementQueries.update()},a}(),window.GridleEq=new a});

99

js/gridle.js

@@ -0,2 +1,49 @@

/*! matchMedia() polyfill - Test a CSS media type/query in JS. Authors & copyright (c) 2012: Scott Jehl, Paul Irish, Nicholas Zakas, David Knight. Dual MIT/BSD license */
window.matchMedia || (window.matchMedia = function() {
"use strict";
// For browsers that support matchMedium api such as IE 9 and webkit
var styleMedia = (window.styleMedia || window.media);
// For those that don't support matchMedium
if (!styleMedia) {
var style = document.createElement('style'),
script = document.getElementsByTagName('script')[0],
info = null;
style.type = 'text/css';
style.id = 'matchmediajs-test';
script.parentNode.insertBefore(style, script);
// 'style.currentStyle' is used by IE <= 8 and 'window.getComputedStyle' for all other browsers
info = ('getComputedStyle' in window) && window.getComputedStyle(style, null) || style.currentStyle;
styleMedia = {
matchMedium: function(media) {
var text = '@media ' + media + '{ #matchmediajs-test { width: 1px; } }';
// 'style.styleSheet' is used by IE <= 8 and 'style.textContent' for all other browsers
if (style.styleSheet) {
style.styleSheet.cssText = text;
} else {
style.textContent = text;
}
// Test if media query is true or false
return info.width === '1px';
}
};
}
return function(media) {
return {
matches: styleMedia.matchMedium(media || 'all'),
media: media || 'all'
};
};
}());
/*

@@ -25,3 +72,3 @@ * Gridle.js

*/
var domLoaded, smokesignals, _domLoaded;
var _domLoaded, domLoaded, smokesignals;
smokesignals = {

@@ -35,9 +82,9 @@ convert: function(obj, handlers) {

obj.emit = function(eventName) {
var handler, _i, _len, _ref;
var handler, k, len, ref;
if (!handlers[eventName]) {
return;
}
_ref = handlers[eventName];
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
handler = _ref[_i];
ref = handlers[eventName];
for (k = 0, len = ref.length; k < len; k++) {
handler = ref[k];
handler.apply(obj, Array.prototype.slice.call(arguments, 1));

@@ -78,3 +125,3 @@ continue;

init: function(settings) {
var _ref, _ref1;
var ref, ref1;
this._inited = true;

@@ -85,4 +132,4 @@ if (settings != null) {

if (settings && (settings.debug != null)) {
if ((_ref = this._settings.debug) != null) {
_ref;
if ((ref = this._settings.debug) != null) {
ref;
} else {

@@ -93,4 +140,4 @@ settings.debug;

if (settings && (settings.onStatesChange != null)) {
if ((_ref1 = this._settings.onStatesChange) != null) {
_ref1;
if ((ref1 = this._settings.onStatesChange) != null) {
ref1;
} else {

@@ -167,7 +214,7 @@ settings.onStatesChange;

_processFindedStates: function() {
var name, query, _ref;
var name, query, ref;
this._debug('begin process finded states in css');
_ref = this._statesInCss;
for (name in _ref) {
query = _ref[name];
ref = this._statesInCss;
for (name in ref) {
query = ref[name];
this._registerState(name, query);

@@ -235,3 +282,3 @@ }

_updateStatesStatus: function() {
var defaultState, defaultStateIdx, key, state, wasDefault, _ref;
var defaultState, defaultStateIdx, key, ref, state, wasDefault;
defaultState = this.getDefaultState();

@@ -246,5 +293,5 @@ defaultStateIdx = this._states.indexOf(defaultState);

this._updatedStatesNames = [];
_ref = this._states;
for (key in _ref) {
state = _ref[key];
ref = this._states;
for (key in ref) {
state = ref[key];
if (!state.updateOnResize) {

@@ -377,6 +424,6 @@ continue;

getDefaultState: function() {
var state, _i, _len, _ref;
_ref = this.getRegisteredStates();
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
state = _ref[_i];
var k, len, ref, state;
ref = this.getRegisteredStates();
for (k = 0, len = ref.length; k < len; k++) {
state = ref[k];
if (state.name === 'default') {

@@ -441,7 +488,7 @@ return state;

isActive: function(stateName) {
var index, isActive, name, _ref;
var index, isActive, name, ref;
isActive = false;
_ref = this._activeStatesNames;
for (index in _ref) {
name = _ref[index];
ref = this._activeStatesNames;
for (index in ref) {
name = ref[index];
if (stateName === name) {

@@ -448,0 +495,0 @@ isActive = true;

2

js/gridle.min.js

@@ -1,1 +0,1 @@

!function(a){"function"==typeof define&&define.amd?define([],a):("object"==typeof exports,a())}(function(){var a,b,c;return b={convert:function(a,b){return b={},a.on=function(c,d){return(b[c]=b[c]||[]).push(d),a},a.emit=function(c){var d,e,f,g;if(b[c]){for(g=b[c],e=0,f=g.length;f>e;e++)d=g[e],d.apply(a,Array.prototype.slice.call(arguments,1));return a}},a}},window.Gridle={_inited:!1,_isReady:!1,_statesInCss:null,_statesFindedInCss:!1,_cssSettings:[],_states:[],_activeStates:[],_activeStatesNames:[],_inactiveStates:[],_inactiveStatesNames:[],_updatedStates:[],_updatedStatesNames:[],resizeTimeout:null,_settings:{onUpdate:null,debug:null},init:function(b){var c,d;return this._inited=!0,null!=b&&(this._settings=b),b&&null!=b.debug&&(null!=(c=this._settings.debug)||b.debug),b&&null!=b.onStatesChange&&(null!=(d=this._settings.onStatesChange)||b.onStatesChange),this._debug("waiting for content to be fully loaded"),a(function(a){return function(){return a._parseCss()}}(this))},_parseCss:function(){var a,b,c,d,e,f,g,h;for(b=0,d=document.styleSheets.length,h=!1;d>b;){try{if(f=document.styleSheets[b].cssText||document.styleSheets[b].cssRules||document.styleSheets[b].rules,"string"==typeof f)g=f.match(/#gridle-settings(?:\s*)\{(?:\s*)content(?:\s*):(?:\s*)\"(.+)\"(;\s*|\s*)\}/)&&RegExp.$1,g&&(g=g.toString().replace(/\\/g,""),g=JSON.parse(g),this._cssSettings=g,h=!0,this._cssSettings=g,this._statesInCss=g.states);else for(c in f)e=f[c],/#gridle-settings/.test(e.cssText)&&(g=e.cssText.toString().match(/:(.*);/)&&RegExp.$1,g=g.toString().replace(/\\/g,""),g=g.trim(),g=g.substr(1),g=g.substr(0,g.length-1),g=JSON.parse(g),null!=(null!=g?g.states:void 0))&&(this._cssSettings=g,this._statesInCss=g.states,h=!0)}catch(i){if(a=i,"SecurityError"!==a.name)throw a}b++}return this._statesInCss?this._processFindedStates():this._debug("no states found...")},_processFindedStates:function(){var a,b,c;this._debug("begin process finded states in css"),c=this._statesInCss;for(a in c)b=c[a],this._registerState(a,b);return this._launch()},_launch:function(){return this._debug("launch"),this._isReady=!0,this._crossEmit("ready"),this._addEvent(window,"resize",function(a){return function(){return clearTimeout(a.resizeTimeout),a.resizeTimeout=setTimeout(function(){return a._onResize()},100)}}(this)),this._onResize()},_onResize:function(){var a;return a=[],this._updateStatesStatus(),this.getActiveStatesNames().length&&this._debug("active states",this.getActiveStatesNames().join(",")),this.getInactiveStatesNames().length&&this._debug("inactive states",this.getInactiveStatesNames().join(",")),this.getUpdatedStatesNames().length?this._debug("updated states",this.getUpdatedStatesNames().join(",")):void 0},_registerState:function(a,b,c){var d;return d={name:a,query:b.query,settings:b,status:null,previous_status:null,updateOnResize:null!=c?c:!0},this._states.push(d),this._debug("|--- register state",a,d)},_updateStatesStatus:function(){var a,b,c,d,e,f;a=this.getDefaultState(),b=this._states.indexOf(a),e=a.status,this._activeStates=[],this._activeStatesNames=[],this._inactiveStates=[],this._inactiveStatesNames=[],this._updatedStates=[],this._updatedStatesNames=[],f=this._states;for(c in f)d=f[c],d.updateOnResize&&(this._states[c].previous_status=d.status,this._validateState(d)?(this._states[c].status||(this._updatedStates.push(d),this._updatedStatesNames.push(d.name)),this._states[c].status=!0,this._activeStates.push(d),this._activeStatesNames.push(d.name)):"default"!==d.name&&(this._states[c].status&&(this._updatedStates.push(d),this._updatedStatesNames.push(d.name)),this._states[c].status=!1,this._inactiveStates.push(d),this._inactiveStatesNames.push(d.name)));return this._activeStates.length?(this._states[b].status=!1,this._inactiveStates.push(a),this._inactiveStatesNames.push("default"),e&&(this._updatedStates.push(a),this._updatedStatesNames.push("default"))):(this._states[b].status=!0,this._activeStates.push(a),this._activeStatesNames.push("default"),e||(this._updatedStates.push(a),this._updatedStatesNames.push("default"))),this._updatedStates.length&&this._crossEmit("update",this._updatedStates,this._activeStates,this._inactiveStates),this._updatedStates.length&&this._settings.onUpdate?this._settings.onUpdate(this._updatedStates,this._activeStates,this._inactiveStates):void 0},_validateState:function(){return function(a){return matchMedia(a.query).matches}}(this),_addEvent:function(a,b,c){return a?a.addEventListener?a.addEventListener(b,c,!1):a.attachEvent?a.attachEvent("on"+b,c):a["on"+b]=c:!1},_crossEmit:function(a){return"undefined"!=typeof jQuery&&null!==jQuery&&(jQuery(this).trigger(a,Array.prototype.slice.call(arguments,1)),jQuery("body").trigger("gridle."+a,Array.prototype.slice.call(arguments,1))),this.emit.apply(this,arguments)},_ajax:function(a){var b,c;return b={type:a.type||"GET",url:a.url,success:a.success,error:a.error,dataType:a.dataType||"text",context:a.context},c=new XMLHttpRequest,b.context&&(c.context=b.context),c.open(b.type,b.url,!0),c.onreadystatechange=function(){var a;if(4!==c.readyState)return!1;switch(c.status){case 200:switch(b.dataType){case"json":a=JSON.parse(c.responseText);break;default:a=c.responseText}if(b.success)return b.success(a,c.status,c)}},c.send()},getDefaultState:function(){var a,b,c,d;for(d=this.getRegisteredStates(),b=0,c=d.length;c>b;b++)if(a=d[b],"default"===a.name)return a},getRegisteredStates:function(){return this._states},getUpdatedStates:function(){return this._updatedStates},getUpdatedStatesNames:function(){return this._updatedStatesNames},getActiveStates:function(){return this._activeStates},getActiveStatesNames:function(){return this._activeStatesNames},getInactiveStates:function(){return this._inactiveStates},getInactiveStatesNames:function(){return this._inactiveStatesNames},isActive:function(a){var b,c,d,e;c=!1,e=this._activeStatesNames;for(b in e)d=e[b],a===d&&(c=!0);return c},isReady:function(){return this._isReady},_debug:function(){return this._settings.debug?console.log("GRIDLE",arguments):void 0}},c=!1,a=function(a){var b;return b=function(a){return c?void a():void 0},window.addEventListener?window.addEventListener("load",function(){return function(){return c=!0,a()}}(this),!1):window.attachEvent("onload",function(){return function(){return c=!0,a()}}(this)),b(function(){return function(){return a()}}(this))},b.convert(window.Gridle),a(function(){return setTimeout(function(){return Gridle._inited?void 0:Gridle.init()},500)}),"function"==typeof window.define&&window.define.amd&&window.define([],function(){return window.Gridle}),Gridle});
window.matchMedia||(window.matchMedia=function(){"use strict";var a=window.styleMedia||window.media;if(!a){var b=document.createElement("style"),c=document.getElementsByTagName("script")[0],d=null;b.type="text/css",b.id="matchmediajs-test",c.parentNode.insertBefore(b,c),d="getComputedStyle"in window&&window.getComputedStyle(b,null)||b.currentStyle,a={matchMedium:function(a){var c="@media "+a+"{ #matchmediajs-test { width: 1px; } }";return b.styleSheet?b.styleSheet.cssText=c:b.textContent=c,"1px"===d.width}}}return function(b){return{matches:a.matchMedium(b||"all"),media:b||"all"}}}()),function(a){"function"==typeof define&&define.amd?define([],a):("object"==typeof exports,a())}(function(){var a,b,c;return c={convert:function(a,b){return b={},a.on=function(c,d){return(b[c]=b[c]||[]).push(d),a},a.emit=function(c){var d,e,f,g;if(b[c]){for(g=b[c],e=0,f=g.length;f>e;e++)d=g[e],d.apply(a,Array.prototype.slice.call(arguments,1));return a}},a}},window.Gridle={_inited:!1,_isReady:!1,_statesInCss:null,_statesFindedInCss:!1,_cssSettings:[],_states:[],_activeStates:[],_activeStatesNames:[],_inactiveStates:[],_inactiveStatesNames:[],_updatedStates:[],_updatedStatesNames:[],resizeTimeout:null,_settings:{onUpdate:null,debug:null},init:function(a){var c,d;return this._inited=!0,null!=a&&(this._settings=a),a&&null!=a.debug&&(null!=(c=this._settings.debug)||a.debug),a&&null!=a.onStatesChange&&(null!=(d=this._settings.onStatesChange)||a.onStatesChange),this._debug("waiting for content to be fully loaded"),b(function(a){return function(){return a._parseCss()}}(this))},_parseCss:function(){var a,b,c,d,e,f,g,h;for(b=0,d=document.styleSheets.length,h=!1;d>b;){try{if(f=document.styleSheets[b].cssText||document.styleSheets[b].cssRules||document.styleSheets[b].rules,"string"==typeof f)g=f.match(/#gridle-settings(?:\s*)\{(?:\s*)content(?:\s*):(?:\s*)\"(.+)\"(;\s*|\s*)\}/)&&RegExp.$1,g&&(g=g.toString().replace(/\\/g,""),g=JSON.parse(g),this._cssSettings=g,h=!0,this._cssSettings=g,this._statesInCss=g.states);else for(c in f)e=f[c],/#gridle-settings/.test(e.cssText)&&(g=e.cssText.toString().match(/:(.*);/)&&RegExp.$1,g=g.toString().replace(/\\/g,""),g=g.trim(),g=g.substr(1),g=g.substr(0,g.length-1),g=JSON.parse(g),null!=(null!=g?g.states:void 0))&&(this._cssSettings=g,this._statesInCss=g.states,h=!0)}catch(i){if(a=i,"SecurityError"!==a.name)throw a}b++}return this._statesInCss?this._processFindedStates():this._debug("no states found...")},_processFindedStates:function(){var a,b,c;this._debug("begin process finded states in css"),c=this._statesInCss;for(a in c)b=c[a],this._registerState(a,b);return this._launch()},_launch:function(){return this._debug("launch"),this._isReady=!0,this._crossEmit("ready"),this._addEvent(window,"resize",function(a){return function(b){return clearTimeout(a.resizeTimeout),a.resizeTimeout=setTimeout(function(){return a._onResize()},100)}}(this)),this._onResize()},_onResize:function(){var a;return a=[],this._updateStatesStatus(),this.getActiveStatesNames().length&&this._debug("active states",this.getActiveStatesNames().join(",")),this.getInactiveStatesNames().length&&this._debug("inactive states",this.getInactiveStatesNames().join(",")),this.getUpdatedStatesNames().length?this._debug("updated states",this.getUpdatedStatesNames().join(",")):void 0},_registerState:function(a,b,c){var d;return d={name:a,query:b.query,settings:b,status:null,previous_status:null,updateOnResize:null!=c?c:!0},this._states.push(d),this._debug("|--- register state",a,d)},_updateStatesStatus:function(){var a,b,c,d,e,f;a=this.getDefaultState(),b=this._states.indexOf(a),f=a.status,this._activeStates=[],this._activeStatesNames=[],this._inactiveStates=[],this._inactiveStatesNames=[],this._updatedStates=[],this._updatedStatesNames=[],d=this._states;for(c in d)e=d[c],e.updateOnResize&&(this._states[c].previous_status=e.status,this._validateState(e)?(this._states[c].status||(this._updatedStates.push(e),this._updatedStatesNames.push(e.name)),this._states[c].status=!0,this._activeStates.push(e),this._activeStatesNames.push(e.name)):"default"!==e.name&&(this._states[c].status&&(this._updatedStates.push(e),this._updatedStatesNames.push(e.name)),this._states[c].status=!1,this._inactiveStates.push(e),this._inactiveStatesNames.push(e.name)));return this._activeStates.length?(this._states[b].status=!1,this._inactiveStates.push(a),this._inactiveStatesNames.push("default"),f&&(this._updatedStates.push(a),this._updatedStatesNames.push("default"))):(this._states[b].status=!0,this._activeStates.push(a),this._activeStatesNames.push("default"),f||(this._updatedStates.push(a),this._updatedStatesNames.push("default"))),this._updatedStates.length&&this._crossEmit("update",this._updatedStates,this._activeStates,this._inactiveStates),this._updatedStates.length&&this._settings.onUpdate?this._settings.onUpdate(this._updatedStates,this._activeStates,this._inactiveStates):void 0},_validateState:function(a){return function(a){return matchMedia(a.query).matches}}(this),_addEvent:function(a,b,c){return a?a.addEventListener?a.addEventListener(b,c,!1):a.attachEvent?a.attachEvent("on"+b,c):a["on"+b]=c:!1},_crossEmit:function(a){return"undefined"!=typeof jQuery&&null!==jQuery&&(jQuery(this).trigger(a,Array.prototype.slice.call(arguments,1)),jQuery("body").trigger("gridle."+a,Array.prototype.slice.call(arguments,1))),this.emit.apply(this,arguments)},_ajax:function(a){var b,c;return b={type:a.type||"GET",url:a.url,success:a.success,error:a.error,dataType:a.dataType||"text",context:a.context},c=new XMLHttpRequest,b.context&&(c.context=b.context),c.open(b.type,b.url,!0),c.onreadystatechange=function(){var a;if(4!==c.readyState)return!1;switch(c.status){case 200:switch(b.dataType){case"json":a=JSON.parse(c.responseText);break;default:a=c.responseText}if(b.success)return b.success(a,c.status,c)}},c.send()},getDefaultState:function(){var a,b,c,d;for(c=this.getRegisteredStates(),a=0,b=c.length;b>a;a++)if(d=c[a],"default"===d.name)return d},getRegisteredStates:function(){return this._states},getUpdatedStates:function(){return this._updatedStates},getUpdatedStatesNames:function(){return this._updatedStatesNames},getActiveStates:function(){return this._activeStates},getActiveStatesNames:function(){return this._activeStatesNames},getInactiveStates:function(){return this._inactiveStates},getInactiveStatesNames:function(){return this._inactiveStatesNames},isActive:function(a){var b,c,d,e;c=!1,e=this._activeStatesNames;for(b in e)d=e[b],a===d&&(c=!0);return c},isReady:function(){return this._isReady},_debug:function(){return this._settings.debug?console.log("GRIDLE",arguments):void 0}},a=!1,b=function(b){var c;return c=function(b){return a?void b():void 0},window.addEventListener?window.addEventListener("load",function(c){return function(){return a=!0,b()}}(this),!1):window.attachEvent("onload",function(c){return function(){return a=!0,b()}}(this)),c(function(a){return function(){return b()}}(this))},c.convert(window.Gridle),b(function(){return setTimeout(function(){return Gridle._inited?void 0:Gridle.init()},500)}),"function"==typeof window.define&&window.define.amd&&window.define([],function(){return window.Gridle}),Gridle});

2

package.json
{
"name": "gridle",
"description": "Gridle grid system",
"version": "2.0.2",
"version": "2.0.4",
"main": "sass/gridle/_gridle.scss",

@@ -6,0 +6,0 @@ "scripts": {

7

README.md

@@ -1,2 +0,2 @@

# gridle (v2.0.2)
# gridle (v2.0.4)

@@ -159,3 +159,3 @@

Gridle offer you multiple ways to set grid properties on your elements, the gridle_set is one of these ways
Gridle offer you multiple ways to set grid properties on your elements, the gridle_set and gridle universal mixin are some of these ways

@@ -176,2 +176,5 @@ ```scss

));
// same with universal mixin
@include gridle(8 push 4 tablet 10 push 2 mobile 12 push 0);
}

@@ -178,0 +181,0 @@ ```

js/matchMedia.js
coffee/demo.coffee

Sorry, the diff of this file is not supported yet

config.rb

Sorry, the diff of this file is not supported yet

css/grid-flex.css

Sorry, the diff of this file is not supported yet

css/grid-flex.min.css

Sorry, the diff of this file is not supported yet

css/grid.css

Sorry, the diff of this file is not supported yet

css/grid.min.css

Sorry, the diff of this file is not supported yet

css/style.css

Sorry, the diff of this file is not supported yet

css/style.min.css

Sorry, the diff of this file is not supported yet

css/tests.css

Sorry, the diff of this file is not supported yet

css/tests.min.css

Sorry, the diff of this file is not supported yet

demo-flex.html

Sorry, the diff of this file is not supported yet

demo.html

Sorry, the diff of this file is not supported yet

Gruntfile.coffee

Sorry, the diff of this file is not supported yet

js/demo.js.map

Sorry, the diff of this file is not supported yet

js/gridle-eq.js.map

Sorry, the diff of this file is not supported yet

js/gridle.js.map

Sorry, the diff of this file is not supported yet

js/jquery.js

Sorry, the diff of this file is too big to display

sass/_grid-settings-flex.scss

Sorry, the diff of this file is not supported yet

sass/_grid-settings.scss

Sorry, the diff of this file is not supported yet

sass/gridle/_api.scss

Sorry, the diff of this file is not supported yet

sass/gridle/_driver-default.scss

Sorry, the diff of this file is not supported yet

sass/gridle/_driver-flex.scss

Sorry, the diff of this file is not supported yet

sass/gridle/_functions.scss

Sorry, the diff of this file is not supported yet

sass/gridle/_generate-mixins.scss

Sorry, the diff of this file is not supported yet

sass/gridle/_init.scss

Sorry, the diff of this file is not supported yet

sass/gridle/_mixins.scss

Sorry, the diff of this file is not supported yet

sass/gridle/_settings-mixins.scss

Sorry, the diff of this file is not supported yet

sass/style.scss

Sorry, the diff of this file is not supported yet

sass/tests.scss

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc