ggs-rails 0.1.0 → 0.2.0

Sign up to get free protection for your applications and to get access to all the features.
data/.gitignore CHANGED
@@ -1,2 +1,3 @@
1
1
  Gemfile.lock
2
2
  pkg/
3
+ .sass-cache
data/README.md CHANGED
@@ -16,7 +16,17 @@ Add `ggs-rails` to the `:assets` group of your Rails application.
16
16
  Usage
17
17
  -----
18
18
 
19
- `ggs-rails` includes 2 main functions and 7 main mixins.
19
+ ### Variables ###
20
+
21
+ These variables are set by default, you can override them before
22
+ importing ggs.
23
+
24
+ * `$ggs-line`: Your base line-height. Defaults to 24
25
+ * `$ggs-font-size`: Your base font size. Defaults to 16
26
+ * `$ggs-8-column-breakpoint`: Width to switch from 4 columns to 8 columns.
27
+ Defaults to 45em
28
+ * `$ggs-16-column-breakpoint`: Width to switch from 8 columns to 16
29
+ columns. Defaults to 117em
20
30
 
21
31
  ### Functions ###
22
32
 
@@ -26,13 +36,12 @@ represents the width of `$multiplier` columns on the page. Pass the
26
36
  that does not span the entire width of the browser window.
27
37
 
28
38
  `ggs-lineheight($multiplier)`: Returns an `em` value for `line-height`
29
- times `$multiplier`. You must set two variables before this will work:
30
-
31
- * `$ggs-line` Your base line-height
32
- * `$ggs-font-size` Your base font size
39
+ times `$multiplier`.
33
40
 
34
41
  ### Mixins ###
35
42
 
43
+ #### For setting width and margins ####
44
+
36
45
  `ggs-width($num_columns: 1, $out_of: 18)`: Sets element `width` to
37
46
  proper percentage.
38
47
 
@@ -48,3 +57,28 @@ proper percentage.
48
57
 
49
58
  `ggs-margin-top($multiplier: 1)` and `ggs-margin-bottom($multipler: 1)`.
50
59
  Self explanatory.
60
+
61
+ #### For easy media queries ####
62
+
63
+ These mixins take a block that will serve as the body of the media query
64
+
65
+ `ggs-4-columns-max`: `@media screen and (max-width:
66
+ $ggs-8-column-breakpoint)`
67
+
68
+ `ggs-8-columns`: `@media screen and (min-width:
69
+ $ggs-8-column-breakpoint)`
70
+
71
+ `ggs-8-columns-max`: `@media screen and (max-width:
72
+ $ggs-16-column-breakpoint)`
73
+
74
+ `ggs-16-columns`: `@media screen and (min-width:
75
+ $ggs-16-column-breakpoint)`
76
+
77
+ `ggs-media-width($min-width)`: `@media screen and (min-width:
78
+ $min-width)`
79
+
80
+ `ggs-media-width-max($max-width)`: `@media screen and (max-width:
81
+ $max-width)`
82
+
83
+ `ggs-media-width-range($min-width, $max-width)`: `@media screen and
84
+ (min-width: $min-width) and (max-width: $max-width)`
data/ggs-rails.gemspec CHANGED
@@ -18,8 +18,8 @@ Gem::Specification.new do |s|
18
18
 
19
19
  s.required_rubygems_version = '>= 1.3.6'
20
20
 
21
- s.add_runtime_dependency 'rails', '~> 3.2'
22
- s.add_runtime_dependency 'sass-rails', '~> 3.2'
21
+ s.add_runtime_dependency 'rails', '~> 3.2'
22
+ s.add_runtime_dependency 'sass', '~> 3.2'
23
23
 
24
24
  s.add_development_dependency 'rake', '~> 0.9'
25
25
  s.add_development_dependency 'bundler', '~> 1.2'
@@ -0,0 +1,170 @@
1
+ /*
2
+ *
3
+ * Golden Gridlet (1.01) <http://goldengridsystem.com/>
4
+ * by Joni Korpi <http://jonikorpi.com/>
5
+ * licensed under MIT <http://opensource.org/licenses/mit-license.php>
6
+ *
7
+ */
8
+
9
+ var guideColor = 'rgb(255,195,0)';
10
+ var guideInnerColor = 'rgba(255,255,255, 0.91)';
11
+ var guideOpacity = '0.618';
12
+
13
+ var switchColor = 'rgb(0,0,0)';
14
+ var switchOpacity = '0.618';
15
+
16
+ if (typeof(ggs_font_size) === 'undefined') {
17
+ var ggs_font_size = 16;
18
+ }
19
+ if (typeof(ggs_line_height) === 'undefined') {
20
+ var ggs_line_height = 24;
21
+ }
22
+ if (typeof(ggs_8_column_breakpoint) === 'undefined') {
23
+ var ggs_8_column_breakpoint = '45em';
24
+ }
25
+ if (typeof(ggs_16_column_breakpoint) === 'undefined') {
26
+ var ggs_16_column_breakpoint = '117em';
27
+ }
28
+
29
+ var baselineGridHeight = (ggs_line_height / ggs_font_size)+'em';
30
+ var eightColBreakpoint = ggs_8_column_breakpoint;
31
+ var sixteenColBreakpoint = ggs_16_column_breakpoint;
32
+
33
+ /*
34
+ * Note that the script might not work as expected if
35
+ * the <body> element of your page has a set width and
36
+ * position: relative;, because the guides are appended
37
+ * inside <body>, but positioned in relation to <html>.
38
+ *
39
+ * Also note that the baseline grid doesn't really align
40
+ * up anymore after zooming the baseline grid in or out,
41
+ * because of rounding errors.
42
+ */
43
+
44
+
45
+ /*!
46
+ * Ender: open module JavaScript framework
47
+ * copyright Dustin Diaz & Jacob Thornton 2011 (@ded @fat)
48
+ * https://ender.no.de
49
+ * License MIT
50
+ * Build: ender -b jeesh
51
+ */
52
+ !function(a){function d(a,b){return c(a,b)}function c(a,e,f){d._select&&(typeof a=="string"||a.nodeName||a.length&&"item"in a||a==window)?(f=d._select(a,e),f.selector=a):f=isFinite(a.length)?a:[a];return b(f,c)}function b(a,b){for(var c in b)c!="noConflict"&&c!="_VERSION"&&(a[c]=b[c]);return a}b(d,{_VERSION:"0.2.4",ender:function(a,e){b(e?c:d,a)},fn:a.$&&a.$.fn||{}}),b(c,{forEach:function(a,b,c){for(c=0,l=this.length;c<l;++c)c in this&&a.call(b||this[c],this[c],c,this);return this},$:d});var e=a.$;d.noConflict=function(){a.$=e;return this},typeof module!="undefined"&&module.exports&&(module.exports=d),a.ender=a.$=d}(this),!function(a){function F(a){var b=a.relatedTarget;if(!b)return b==null;return b!=this&&b.prefix!="xul"&&!/document/.test(this.toString())&&!p(this,b)}var b=1,c={},d={},e=/over|out/,f=/[^\.]*(?=\..*)\.|.*/,g=/\..*/,h="addEventListener",i="attachEvent",j="removeEventListener",k="detachEvent",l=a.document||{},m=l.documentElement||{},n=m[h],o=n?h:i,p=function(a,b){var c=b.parentNode;while(c!=null){if(c==a)return!0;c=c.parentNode}},q=function(a,c){return a.__uid=c||a.__uid||b++},r=function(a){var b=q(a);return c[b]=c[b]||{}},s=n?function(a,b,c,d){a[d?h:j](b,c,!1)}:function(a,b,c,d,e){e&&d&&(a["_on"+e]=a["_on"+e]||0),a[d?i:k]("on"+b,c)},t=function(b,c,d){return function(e){e=D(e||((this.ownerDocument||this.document||this).parentWindow||a).event);return c.apply(b,[e].concat(d))}},u=function(a,b,c,d,e){return function(f){(d?d.call(this,f):n?!0:f&&f.propertyName=="_on"+c||!f)&&b.apply(a,[f].concat(e))}},v=function(a,b,c,e){var h=b.replace(g,""),i=r(a),j=i[h]||(i[h]={}),k=q(c,b.replace(f,""));if(j[k])return a;var l=G[h];l&&(c=l.condition?u(a,c,h,l.condition):c,h=l.base||h);var m=E[h];c=m?t(a,c,e):u(a,c,h,!1,e),m=n||m;if(h=="unload"){var p=c;c=function(){w(a,h,c)&&p()}}a[o]&&s(a,m?h:"propertychange",c,!0,!m&&h),j[k]=c,c.__uid=k;return h=="unload"?a:d[q(a)]=a},w=function(a,b,c){var d,e,h,i,j=r(a),k=b.replace(g,"");if(!j||!j[k])return a;e=b.replace(f,""),h=e?e.split("."):[c.__uid];for(i=h.length;i--;){d=h[i],c=j[k][d],delete j[k][d];if(a[o]){k=G[k]?G[k].base:k;var l=n||E[k];s(a,l?k:"propertychange",c,!1,!l&&k)}}return a},x=function(a,b,c){return function(d){var e=typeof a=="string"?c(a,this):a;for(var f=d.target;f&&f!=this;f=f.parentNode)for(var g=e.length;g--;)if(e[g]==f)return b.apply(f,arguments)}},y=function(a,b,c,d,e){if(typeof b=="object"&&!c)for(var f in b)b.hasOwnProperty(f)&&y(a,f,b[f]);else{var g=typeof c=="string",h=(g?c:b).split(" ");c=g?x(b,d,e):c;for(var i=h.length;i--;)v(a,h[i],c,Array.prototype.slice.call(arguments,g?4:3))}return a},z=function(a,b,c){var d,e,h,i,j=typeof b=="string",k=j&&b.replace(f,""),l=w,m=r(a);if(j&&/\s/.test(b)){b=b.split(" "),i=b.length-1;while(z(a,b[i])&&i--);return a}h=j?b.replace(g,""):b;if(!m||j&&!m[h])return a;if(typeof c=="function")l(a,h,c);else if(k)l(a,b);else{l=h?l:z,e=j&&h,h=h?c||m[h]||h:m;for(d in h)h.hasOwnProperty(d)&&l(a,e||d,h[d])}return a},A=function(a,b,c){var d,e,h,i=b.split(" ");for(h=i.length;h--;){b=i[h].replace(g,"");var j=E[b],k=i[h].replace(f,""),l=r(a)[b];if(k){k=k.split(".");for(e=k.length;e--;)l[k[e]]&&l[k[e]].apply(a,c)}else if(!c&&a[o])B(j,b,a);else for(e in l)l.hasOwnProperty(e)&&l[e].apply(a,c)}return a},B=n?function(b,c,d){evt=document.createEvent(b?"HTMLEvents":"UIEvents"),evt[b?"initEvent":"initUIEvent"](c,!0,!0,a,1),d.dispatchEvent(evt)}:function(a,b,c){a?c.fireEvent("on"+b,document.createEventObject()):c["_on"+b]++},C=function(a,b,c){var d=r(b),e,f;e=c?d[c]:d;for(f in e)e.hasOwnProperty(f)&&(c?y:C)(a,c||b,c?e[f]:f);return a},D=function(a){var b={};if(!a)return b;var c=a.type,d=a.target||a.srcElement;b.preventDefault=D.preventDefault(a),b.stopPropagation=D.stopPropagation(a),b.target=d&&d.nodeType==3?d.parentNode:d;if(~c.indexOf("key"))b.keyCode=a.which||a.keyCode;else if(/click|mouse|menu/i.test(c)){b.rightClick=a.which==3||a.button==2,b.pos={x:0,y:0};if(a.pageX||a.pageY)b.clientX=a.pageX,b.clientY=a.pageY;else if(a.clientX||a.clientY)b.clientX=a.clientX+document.body.scrollLeft+document.documentElement.scrollLeft,b.clientY=a.clientY+document.body.scrollTop+document.documentElement.scrollTop;e.test(c)&&(b.relatedTarget=a.relatedTarget||a[(c=="mouseover"?"from":"to")+"Element"])}for(var f in a)f in b||(b[f]=a[f]);return b};D.preventDefault=function(a){return function(){a.preventDefault?a.preventDefault():a.returnValue=!1}},D.stopPropagation=function(a){return function(){a.stopPropagation?a.stopPropagation():a.cancelBubble=!0}};var E={click:1,dblclick:1,mouseup:1,mousedown:1,contextmenu:1,mousewheel:1,DOMMouseScroll:1,mouseover:1,mouseout:1,mousemove:1,selectstart:1,selectend:1,keydown:1,keypress:1,keyup:1,orientationchange:1,touchstart:1,touchmove:1,touchend:1,touchcancel:1,gesturestart:1,gesturechange:1,gestureend:1,focus:1,blur:1,change:1,reset:1,select:1,submit:1,load:1,unload:1,beforeunload:1,resize:1,move:1,DOMContentLoaded:1,readystatechange:1,error:1,abort:1,scroll:1},G={mouseenter:{base:"mouseover",condition:F},mouseleave:{base:"mouseout",condition:F},mousewheel:{base:/Firefox/.test(navigator.userAgent)?"DOMMouseScroll":"mousewheel"}},H={add:y,remove:z,clone:C,fire:A},I=function(a){var b=z(a).__uid;b&&(delete d[b],delete c[b])};a[i]&&y(a,"unload",function(){for(var b in d)d.hasOwnProperty(b)&&I(d[b]);a.CollectGarbage&&CollectGarbage()});var J=a.bean;H.noConflict=function(){a.bean=J;return this},typeof module!="undefined"&&module.exports?module.exports=H:a.bean=H}(this),!function(a){var b=bean.noConflict(),c=function(c,d,e){var f=d?[d]:[];return function(){for(var e,g=0,h=this.length;g<h;g++)e=[this[g]].concat(f,Array.prototype.slice.call(arguments,0)),e.length==4&&e.push(a),!arguments.length&&c=="add"&&d&&(c="fire"),b[c].apply(this,e);return this}},d=c("add"),e=c("remove"),f=c("fire"),g={on:d,addListener:d,bind:d,listen:d,delegate:d,unbind:e,unlisten:e,removeListener:e,undelegate:e,emit:f,trigger:f,cloneEvents:c("clone"),hover:function(a,c,d){for(d=this.length;d--;)b.add.call(this,this[d],"mouseenter",a),b.add.call(this,this[d],"mouseleave",c);return this}},h,i=["blur","change","click","dblclick","error","focus","focusin","focusout","keydown","keypress","keyup","load","mousedown","mouseenter","mouseleave","mouseout","mouseover","mouseup","mousemove","resize","scroll","select","submit","unload"];for(h=i.length;h--;)g[i[h]]=c("add",i[h]);a.ender(g,!0)}(ender),!function(a,b){function J(a,b){return new E(a,b)}function I(){return{x:b.pageXOffset||d.scrollLeft,y:b.pageYOffset||d.scrollTop}}function H(a){return a===b||/^(?:body|html)$/i.test(a.tagName)}function G(a,c,d){var e=this[0];if(a==null&&c==null)return(H(e)?I():{x:e.scrollLeft,y:e.scrollTop})[d];H(e)?b.scrollTo(a,c):(a!=null&&(e.scrollLeft=a),c!=null&&(e.scrollTop=c));return this}function F(a){return typeof a=="string"?J.create(a):z(a)?[a]:a}function E(a){this.length=0;if(a){a=typeof a!="string"&&!a.nodeType&&typeof a.length!="undefined"?a:[a],this.length=a.length;for(var b=0;b<a.length;b++)this[b]=a[b]}}function D(a,b,c){var d=J(a),e=d.css("position"),f=d.offset(),g="relative",h=e==g,i=[parseInt(d.css("left"),10),parseInt(d.css("top"),10)];e=="static"&&(d.css("position",g),e=g),isNaN(i[0])&&(i[0]=h?0:a.offsetLeft),isNaN(i[1])&&(i[1]=h?0:a.offsetTop),b!==null&&(a.style.left=b-f.left+i[0]+"px"),c!==null&&(a.style.top=c-f.top+i[1]+"px")}function C(a,b,c){var d=0,g=b||this,h=[],i=f&&typeof a=="string"&&a.charAt(0)!="<"?function(b){return(b=f(a))&&(b.selected=1)&&b}():a;w(F(i),function(a){w(g,function(b){var f=!b[e]||b[e]&&!b[e][e]?function(){var a=b.cloneNode(!0);g.$&&g.cloneEvents&&g.$(a).cloneEvents(b);return a}():b;c(a,f),h[d]=f,d++})},this),w(h,function(a,b){g[b]=a}),g.length=d;return g}function A(a,b,c){for(var d=0,e=a.length;d<e;++d)if(b.call(c,a[d],d,a))return!0;return!1}function z(a){return a&&a.nodeName&&a.nodeType==1}function y(a){return a.replace(/-(.)/g,function(a,b){return b.toUpperCase()})}function w(a,b,c){for(var d=0,e=a.length;d<e;d++)b.call(c||a[d],a[d],d,a);return a}function v(a){return new RegExp("(^|\\s+)"+a+"(\\s+|$)")}var c=a.document,d=c.documentElement,e="parentNode",f=null,g="getElementsByTagName",h=/^checked|value|selected$/,i=/select|fieldset|table|tbody|tfoot|td|tr|colgroup/i,j="table",k={thead:j,tbody:j,tfoot:j,tr:"tbody",th:"tr",td:"tr",fieldset:"form",option:"select"},l=/^checked|selected$/,m=/msie/i.test(navigator.userAgent),n=[],o=0,p=/^-?[\d\.]+$/,q="px",r="setAttribute",s="getAttribute",t=/(^\s*|\s*$)/g,u={lineHeight:1,zoom:1,zIndex:1,opacity:1},x=String.prototype.trim?function(a){return a.trim()}:function(a){return a.replace(t,"")},B=c.defaultView&&c.defaultView.getComputedStyle?function(a,b){var d=null;b=="float"&&(b="cssFloat");var e=c.defaultView.getComputedStyle(a,"");e&&(d=e[y(b)]);return a.style[b]||d}:m&&d.currentStyle?function(a,b){b=y(b),b=b=="float"?"styleFloat":b;if(b=="opacity"){var c=100;try{c=a.filters["DXImageTransform.Microsoft.Alpha"].opacity}catch(d){try{c=a.filters("alpha").opacity}catch(e){}}return c/100}var f=a.currentStyle?a.currentStyle[b]:null;return a.style[b]||f}:function(a,b){return a.style[y(b)]};E.prototype={each:function(a,b){return w(this,a,b)},map:function(a,b){var c=[],d,e;for(e=0;e<this.length;e++)d=a.call(this,this[e]),b?b(d)&&c.push(d):c.push(d);return c},first:function(){return J(this[0])},last:function(){return J(this[this.length-1])},html:function(a,b){function f(b){while(b.firstChild)b.removeChild(b.firstChild);w(F(a),function(a){b.appendChild(a)})}var c=b?d.textContent==null?"innerText":"textContent":"innerHTML",e;return typeof a!="undefined"?this.each(function(b){(e=b.tagName.match(i))?f(b,e[0]):b[c]=a}):this[0]?this[0][c]:""},text:function(a){return this.html(a,1)},addClass:function(a){return this.each(function(b){this.hasClass(b,a)||(b.className=x(b.className+" "+a))},this)},removeClass:function(a){return this.each(function(b){this.hasClass(b,a)&&(b.className=x(b.className.replace(v(a)," ")))},this)},hasClass:function(a,b){return typeof b=="undefined"?A(this,function(b){return v(a).test(b.className)}):v(b).test(a.className)},toggleClass:function(a,b){if(typeof b!="undefined"&&!b)return this;return this.each(function(b){this.hasClass(b,a)?b.className=x(b.className.replace(v(a)," ")):b.className=x(b.className+" "+a)},this)},show:function(a){return this.each(function(b){b.style.display=a||""})},hide:function(a){return this.each(function(a){a.style.display="none"})},append:function(a){return this.each(function(b){w(F(a),function(a){b.appendChild(a)})})},prepend:function(a){return this.each(function(b){var c=b.firstChild;w(F(a),function(a){b.insertBefore(a,c)})})},appendTo:function(a,b){return C.call(this,a,b,function(a,b){a.appendChild(b)})},prependTo:function(a,b){return C.call(this,a,b,function(a,b){a.insertBefore(b,a.firstChild)})},next:function(){return this.related("nextSibling")},previous:function(){return this.related("previousSibling")},related:function(a){return this.map(function(b){b=b[a];while(b&&b.nodeType!==1)b=b[a];return b||0},function(a){return a})},before:function(a){return this.each(function(b){w(J.create(a),function(a){b[e].insertBefore(a,b)})})},after:function(a){return this.each(function(b){w(J.create(a),function(a){b[e].insertBefore(a,b.nextSibling)})})},insertBefore:function(a,b){return C.call(this,a,b,function(a,b){a[e].insertBefore(b,a)})},insertAfter:function(a,b){return C.call(this,a,b,function(a,b){var c=a.nextSibling;c?a[e].insertBefore(b,c):a[e].appendChild(b)})},css:function(a,d,e){if(d===undefined&&typeof a=="string"){d=this[0];if(!d)return null;if(d==c||d==b){e=d==c?J.doc():J.viewport();return a=="width"?e.width:a=="height"?e.height:""}return B(d,a)}var f=a;typeof a=="string"&&(f={},f[a]=d),m&&f.opacity&&(f.filter="alpha(opacity="+f.opacity*100+")",f.zoom=a.zoom||1,delete f.opacity);if(d=f["float"])m?f.styleFloat=d:f.cssFloat=d,delete f["float"];var g=function(a,b,c){for(var d in f)f.hasOwnProperty(d)&&(c=f[d],(b=y(d))&&p.test(c)&&!(b in u)&&(c+=q),a.style[b]=c)};return this.each(g)},offset:function(a,b){if(a||b)return this.each(function(c){D(c,a,b)});var c=this[0],d=c.offsetWidth,e=c.offsetHeight,f=c.offsetTop,g=c.offsetLeft;while(c=c.offsetParent)f=f+c.offsetTop,g=g+c.offsetLeft;return{top:f,left:g,height:e,width:d}},attr:function(a,b){var c=this[0];return typeof b=="undefined"?h.test(a)?l.test(a)&&typeof c[a]=="string"?!0:c[a]:c[s](a):this.each(function(c){a=="value"?c.value=b:c[r](a,b)})},val:function(a){return typeof a=="string"?this.attr("value",a):this[0].value},removeAttr:function(a){return this.each(function(b){b.removeAttribute(a)})},data:function(a,b){var c=this[0];if(typeof b=="undefined"){c[s]("data-node-uid")||c[r]("data-node-uid",++o);var d=c[s]("data-node-uid");n[d]||(n[d]={});return n[d][a]}return this.each(function(c){c[s]("data-node-uid")||c[r]("data-node-uid",++o);var d=c[s]("data-node-uid"),e={};e[a]=b,n[d]=e})},remove:function(){return this.each(function(a){a[e]&&a[e].removeChild(a)})},empty:function(){return this.each(function(a){while(a.firstChild)a.removeChild(a.firstChild)})},detach:function(){return this.map(function(a){return a[e].removeChild(a)})},scrollTop:function(a){return G.call(this,null,a,"y")},scrollLeft:function(a){return G.call(this,a,null,"x")}},J.setQueryEngine=function(a){f=a,delete J.setQueryEngine},J.aug=function(a,b){for(var c in a)a.hasOwnProperty(c)&&((b||E.prototype)[c]=a[c])},J.create=function(a){return typeof a=="string"?function(){var b=/^<([^\s>]+)/.exec(a),d=c.createElement(b&&k[b[1].toLowerCase()]||"div"),e=[];d.innerHTML=a;var f=d.childNodes;d=d.firstChild,e.push(d);while(d=d.nextSibling)d.nodeType==1&&e.push(d);return e}():z(a)?[a.cloneNode(!0)]:[]},J.doc=function(){var a=d.scrollWidth,b=d.scrollHeight,c=this.viewport();return{width:Math.max(a,c.width),height:Math.max(b,c.height)}},J.firstChild=function(a){for(var b=a.childNodes,c=0,d=b&&b.length||0,e;c<d;c++)b[c].nodeType===1&&(e=b[d=c]);return e},J.viewport=function(){var a=self.innerHeight,b=self.innerWidth;m&&(a=d.clientHeight,b=d.clientWidth);return{width:b,height:a}},J.isAncestor="compareDocumentPosition"in d?function(a,b){return(a.compareDocumentPosition(b)&16)==16}:"contains"in d?function(a,b){return a!==b&&a.contains(b)}:function(a,b){while(b=b[e])if(b===a)return!0;return!1};var K=a.bonzo;J.noConflict=function(){a.bonzo=K;return this},a.bonzo=J}(this,window),!function(a){function d(a){var b=[],c,d;label:for(c=0;c<a.length;c++){for(d=0;d<b.length;d++)if(b[d]==a[c])continue label;b[b.length]=a[c]}return b}function c(a,b){for(var c=0;c<a.length;c++)if(a[c]===b)return c;return-1}var b=bonzo;b.setQueryEngine(a),a.ender(b),a.ender(b(),!0),a.ender({create:function(c){return a(b.create(c))}}),a.id=function(b){return a([document.getElementById(b)])},a.ender({parents:function(b,e){var f=a(b),g,h,i,j=[];for(g=0,h=this.length;g<h;g++){i=this[g];while(i=i.parentNode)if(c(f,i)!==-1){j.push(i);if(e)break}}return a(d(j))},closest:function(a){return this.parents(a,!0)},first:function(){return a(this[0])},last:function(){return a(this[this.length-1])},next:function(){return a(b(this).next())},previous:function(){return a(b(this).previous())},appendTo:function(a){return b(this.selector).appendTo(a,this)},prependTo:function(a){return b(this.selector).prependTo(a,this)},insertAfter:function(a){return b(this.selector).insertAfter(a,this)},insertBefore:function(a){return b(this.selector).insertBefore(a,this)},siblings:function(){var b,c,d,e=[];for(b=0,c=this.length;b<c;b++){d=this[b];while(d=d.previousSibling)d.nodeType==1&&e.push(d);d=this[b];while(d=d.nextSibling)d.nodeType==1&&e.push(d)}return a(e)},children:function(){var c,e=[];for(i=0,l=this.length;i<l;i++){if(!(c=b.firstChild(this[i])))continue;e.push(c);while(c=c.nextSibling)c.nodeType==1&&e.push(c)}return a(d(e))},height:function(a){return a?this.css("height",a):parseInt(this.css("height"),10)},width:function(a){return a?this.css("width",a):parseInt(this.css("width"),10)}},!0)}(ender||$),!function(a,b){function l(a){k=1;while(a=c.shift())a()}var c=[],d,e=!1,f=b.documentElement,g=f.doScroll,h="DOMContentLoaded",i="addEventListener",j="onreadystatechange",k=/^loade|c/.test(b.readyState);b[i]&&b[i](h,function a(){b.removeEventListener(h,a,e),l()},e),g&&b.attachEvent(j,d=function a(){/^c/.test(b.readyState)&&(b.detachEvent(j,a),l())}),a.domReady=g?function(a){self!=top?k?a():c.push(a):function(){try{f.doScroll("left")}catch(b){return setTimeout(function(){domReady(a)},50)}a()}()}:function(a){k?a():c.push(a)}}(this,document),!function(a){a.ender({domReady:domReady}),a.ender({ready:function(a){domReady(a);return this}},!0)}(ender),!function(a,b){function X(a,c){var d=typeof c=="string"?X(c)[0]:c||b;if(!d||!a)return[];if(h=U(a,c,X))return h;return Z(a,d)}function W(a){var b=[],c,d;label:for(c=0;c<a.length;c++){for(d=0;d<b.length;d++)if(b[d]==a[c])continue label;b[b.length]=a[c]}return b}function V(a){return a&&a.nodeType&&(a.nodeType==1||a.nodeType==9)}function U(a,c,d){var e=typeof c=="string"?d(c)[0]:c||b;if(a===window||V(a))return!c||a!==window&&V(e)&&Y(a,e)?[a]:[];if(a&&typeof a=="object"&&isFinite(a.length))return N(a);if(h=a.match(w))return(m=b.getElementById(h[1]))?[m]:[];if(h=a.match(y))return N(e.getElementsByTagName(h[1]));return!1}function T(a){var c=[],d=[],e,f=0,g,h,i,j,k,l,m,n,o,q,r=M.g(a)||M.s(a,a.split(C));r=r.slice(0);if(!r.length)return c;k=r.pop(),n=r.length&&(i=r[r.length-2].match(w))?b.getElementById(i[1]):b;if(!n)return c;o=P(k),m=/^[+~]$/.test(r[r.length-1])?function(a){a=[];while(n=n.nextSibling)n.nodeType==1&&(o[1]?o[1]==n.tagName.toLowerCase():1)&&a.push(n);return a}():n.getElementsByTagName(o[1]||"*");for(e=0,h=m.length;e<h;e++)if(q=Q.apply(m[e],o))c[f++]=q;if(!r.length)return c;for(f=0,h=c.length,g=0;f<h;f++){j=c[f];for(e=r.length-2;e>=0;e=e-2)while(j=H[r[e+1]](j,c[f]))if(p=Q.apply(j,P(r[e])))break;p&&(d[g++]=c[f])}return d}function S(a,b,c){switch(a){case"=":return b==c;case"^=":return b.match(L.g("^="+c)||L.s("^="+c,new RegExp("^"+R(c))));case"$=":return b.match(L.g("$="+c)||L.s("$="+c,new RegExp(R(c)+"$")));case"*=":return b.match(L.g(c)||L.s(c,new RegExp(R(c))));case"~=":return b.match(L.g("~="+c)||L.s("~="+c,new RegExp("(?:^|\\s+)"+R(c)+"(?:\\s+|$)")));case"|=":return b.match(L.g("|="+c)||L.s("|="+c,new RegExp("^"+R(c)+"(-|$)")))}return 0}function R(a){return K.g(a)||K.s(a,a.replace(D,"\\$1"))}function Q(a,b,c,e,f,g,h){var j,k,l;if(b&&this.tagName.toLowerCase()!==b)return!1;if(c&&(j=c.match(u))&&j[1]!==this.id)return!1;if(c&&(q=c.match(v)))for(d=q.length;d--;){k=q[d].slice(1);if(!(J.g(k)||J.s(k,new RegExp("(^|\\s+)"+k+"(\\s+|$)"))).test(this.className))return!1}if(e&&!h){i=this.attributes;for(l in i)if(Object.prototype.hasOwnProperty.call(i,l)&&(i[l].name||l)==f)return this}if(e&&!S(g,this.getAttribute(f)||"",h))return!1;return this}function P(a){return a.match(G)}function O(a){while(a=a.previousSibling)if(a.nodeType==1)break;return a}function N(a){k=[];for(d=0,o=a.length;d<o;d++)k[d]=a[d];return k}function I(){this.c={}}var c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u=/#([\w\-]+)/,v=/\.[\w\-]+/g,w=/^#([\w\-]+$)/,x=/^\.([\w\-]+)$/,y=/^([\w\-]+)$/,z=/^([\w]+)?\.([\w\-]+)$/,A=b.documentElement,B=/\s*([\s\+\~>])\s*/g,C=/([\s\>\+\~])(?![\s\w\-\/\?\&\=\:\.\(\)\!,@#%<>\{\}\$\*\^'"]*\])/,D=/([.*+?\^=!:${}()|\[\]\/\\])/g,E=/^([a-z0-9]+)?(?:([\.\#]+[\w\-\.#]+)?)/,F=/\[([\w\-]+)(?:([\|\^\$\*\~]?\=)['"]?([ \w\-\/\?\&\=\:\.\(\)\!,@#%<>\{\}\$\*\^]+)["']?)?\]/,G=new RegExp(E.source+"("+F.source+")?"),H={" ":function(a){return a&&a!==A&&a.parentNode},">":function(a,b){return a&&a.parentNode==b.parentNode&&a.parentNode},"~":function(a){return a&&a.previousSibling},"+":function(a,b,c,d){if(!a)return!1;c=O(a),d=O(b);return c&&d&&c==d&&c}};I.prototype={g:function(a){return this.c[a]||undefined},s:function(a,b){this.c[a]=b;return b}};var J=new I,K=new I,L=new I,M=new I,Y="compareDocumentPosition"in A?function(a,b){return(b.compareDocumentPosition(a)&16)==16}:"contains"in A?function(a,c){c=c==b||c==window?A:c;return c!==a&&c.contains(a)}:function(a,b){while(a=a.parentNode)if(a===b)return 1;return 0},Z=b.querySelector&&b.querySelectorAll?function(a,c){if(b.getElementsByClassName&&(h=a.match(x)))return N(c.getElementsByClassName(h[1]));return N(c.querySelectorAll(a))}:function(a,c){a=a.replace(B,"$1");var d=[],f,i=[],j;if(h=a.match(z)){s=c.getElementsByTagName(h[1]||"*"),k=J.g(h[2])||J.s(h[2],new RegExp("(^|\\s+)"+h[2]+"(\\s+|$)"));for(j=0,g=s.length,e=0;j<g;j++)k.test(s[j].className)&&(d[e++]=s[j]);return d}for(j=0,s=a.split(","),g=s.length;j<g;j++)i[j]=T(s[j]);for(j=0,g=i.length;j<g&&(f=i[j]);j++){var l=f;if(c!==b){l=[];for(e=0,h=f.length;e<h&&(element=f[e]);e++)Y(element,c)&&l.push(element)}d=d.concat(l)}return W(d)};X.uniq=W;var $=a.qwery;X.noConflict=function(){a.qwery=$;return this},a.qwery=X}(this,document),!function(a){function e(b,c){var e=/^<([^\s>]+)/.exec(b)[1],f=(c||a).createElement(d[e]||"div"),g=[];f.innerHTML=b;var h=f.childNodes;f=f.firstChild,g.push(f);while(f=f.nextSibling)f.nodeType==1&&g.push(f);return g}var b=qwery.noConflict(),c="table",d={thead:c,tbody:c,tfoot:c,tr:"tbody",th:"tr",td:"tr",fieldset:"form",option:"select"};$._select=function(a,c){return/^\s*</.test(a)?e(a,c):b(a,c)},$.ender({find:function(a){var c=[],d,e,f,g,h;for(d=0,e=this.length;d<e;d++){h=b(a,this[d]);for(f=0,g=h.length;f<g;f++)c.push(h[f])}return $(b.uniq(c))},and:function(a){var b=$(a);for(var c=this.length,d=0,e=this.length+b.length;c<e;c++,d++)this[c]=b[d];return this}},!0)}(document);
53
+
54
+ var ender = $.noConflict();
55
+
56
+ function setHeights() {
57
+ if (!ender('body').hasClass('ggs-hidden')) {
58
+ /* Which one is taller, <body> or <html>? */
59
+ if (ender('body').offset().height > ender('html').offset().height) {
60
+ var largerHeight = ender('body').offset().height;
61
+ }
62
+ else {
63
+ var largerHeight = ender('html').offset().height;
64
+ }
65
+
66
+ /* Give guides the new height */
67
+ ender('.ggs-guide').each(function() {
68
+ ender(this).css('height', largerHeight);
69
+ });
70
+
71
+ /* Calculate the amount of lines needed and append them */
72
+ var lines = Math.floor(largerHeight/24);
73
+ ender('#ggs-baseline-container').empty();
74
+ for (i=0; i<=lines; i++) {
75
+ ender('#ggs-baseline-container').append('<div class="ggs-line"></div>');
76
+ }
77
+
78
+ /* Set the baseline container to the same height as the guides, so there's no overflow */
79
+ ender('#ggs-baseline-container').css('height', largerHeight);
80
+ }
81
+ }
82
+
83
+ ender.domReady(function () {
84
+
85
+ /* Add control classes and switch element */
86
+ ender('body').addClass('ggs-hidden ggs-animated').append('<div id="ggs-switch"><div class="ggs-switchBar"></div><div class="ggs-switchBar"></div><div class="ggs-switchBar"></div></div>');
87
+
88
+ /* Create CSS */
89
+ var styles = '\
90
+ html{height:100%;position:relative;}\
91
+ #ggs-switch{position:fixed;top:0;right:0;z-index:9500; cursor:pointer; width: 24px; padding: 18px 18px 14px; opacity:'+switchOpacity+'; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transition: all 0.145s ease-out; -moz-transition: all 0.145s ease-out; -ms-transition: all 0.145s ease-out; transition: all 0.145s ease-out;}\
92
+ .ggs-switchBar {background: '+switchColor+'; height: 4px; margin-bottom: 4px;}\
93
+ .ggs-animated #ggs-switch {-webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); transform: rotate(0deg);}\
94
+ .ggs-guide{position:absolute;top:0;z-index:9000;height:100%;margin-left:-0.75em;border:solid '+guideColor+';border-width:0 0.75em;background:'+guideColor+';opacity:'+guideOpacity+'; -webkit-transition: all 0.235s ease-out; -moz-transition: all 0.235s ease-out; -ms-transition: all 0.235s ease-out; transition: all 0.235s ease-out;}\
95
+ .ggs-animated .ggs-guide {-webkit-transform: scale(0, 1); -moz-transform: scale(0, 1); -ms-transform: scale(0, 1); transform: scale(0, 1); opacity: 0;}\
96
+ .ggs-animated #ggs-baseline-container {opacity: 0;}\
97
+ .ggs-hidden .ggs-guide, .ggs-hidden #ggs-baseline-container {display: none;}\
98
+ .ggs-0{left:0;}\
99
+ .ggs-1{left:11.11111111111111%;}\
100
+ .ggs-2{left:16.666666666666664%;}\
101
+ .ggs-3{left:22.22222222222222%;}\
102
+ .ggs-4{left:27.77777777777778%;}\
103
+ .ggs-5{left:33.33333333333333%;}\
104
+ .ggs-6{left:38.888888888888886%;}\
105
+ .ggs-7{left:44.44444444444444%;}\
106
+ .ggs-8{left:50%;}\
107
+ .ggs-9{left:55.55555555555556%;}\
108
+ .ggs-10{left:61.11111111111111%;}\
109
+ .ggs-11{left:66.66666666666666%;}\
110
+ .ggs-12{left:72.22222222222221%;}\
111
+ .ggs-13{left:77.77777777777777%;}\
112
+ .ggs-14{left:83.33333333333333%;}\
113
+ .ggs-15{left:88.88888888888889%;}\
114
+ .ggs-16{right:0;}\
115
+ .ggs-0,.ggs-16{width:5.555555555555555%;padding-right:0.75em;border:0;margin:0;}\
116
+ .ggs-guide div{background:'+guideInnerColor+';width:2px;height:100%;position:absolute;left:-1px;top:0;}\
117
+ .ggs-0 div{left:auto;right:0.75em;}\
118
+ .ggs-16 div{left:0.75em;}\
119
+ #ggs-baseline-container {opacity: '+guideOpacity+'; position: absolute; left:0; top:0; z-index: 8000; width: 100%; height: 100%; -webkit-transition: opacity 0.235s ease-out; -moz-transition: opacity 0.235s ease-out; -ms-transition: opacity 0.235s ease-out; transition: opacity 0.235s ease-out; overflow-y: hidden;}\
120
+ .ggs-line {border-top: 1px dotted '+guideColor+'; height: '+baselineGridHeight+'; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box;}\
121
+ @media screen and (max-width: '+(eightColBreakpoint)+'){.ggs-2,.ggs-6,.ggs-10,.ggs-14{display:none;}}\
122
+ @media screen and (max-width: '+(sixteenColBreakpoint)+'){.ggs-1,.ggs-3,.ggs-5,.ggs-7,.ggs-9,.ggs-11,.ggs-13,.ggs-15{display:none;}}\
123
+ ';
124
+
125
+ /* Create guides */
126
+ for (i=0; i<=16; i++) {
127
+ ender('body').append(ender('<div class="ggs-guide ggs-'+i+'"><div></div></div>'));
128
+ };
129
+ ender('body').append(ender('<div id="ggs-baseline-container"></div>'));
130
+
131
+ /* Append CSS */
132
+ (function(d,u) {
133
+ if(d.createStyleSheet) {
134
+ d.createStyleSheet( u );
135
+ }
136
+ else {
137
+ var css=d.createElement('style');
138
+ css.setAttribute("type","text/css");
139
+ css.appendChild(document.createTextNode(u));
140
+ d.getElementsByTagName("head")[0].appendChild(css);
141
+ }
142
+ }(document, styles))
143
+
144
+ /* Resize guides when window size changes */
145
+ ender(window).on('resize', setHeights);
146
+
147
+ /* Add listeners for switch element */
148
+ ender('#ggs-switch').click(function(){
149
+ if (ender('body').hasClass('ggs-hidden')) {
150
+ ender('body').removeClass('ggs-hidden');
151
+ setHeights();
152
+ setTimeout(
153
+ function () {
154
+ ender('body').removeClass('ggs-animated');
155
+ },
156
+ 20
157
+ );
158
+ }
159
+ else {
160
+ ender('body').addClass('ggs-animated');
161
+ setTimeout(
162
+ function () {
163
+ ender('body').addClass('ggs-hidden');
164
+ },
165
+ 300
166
+ );
167
+ }
168
+ });
169
+
170
+ });
@@ -0,0 +1,41 @@
1
+ @mixin ggs-4-columns-max {
2
+ @media screen and (max-width: $ggs-8-column-breakpoint) {
3
+ @content;
4
+ }
5
+ }
6
+
7
+ @mixin ggs-8-columns {
8
+ @media screen and (min-width: $ggs-8-column-breakpoint) {
9
+ @content;
10
+ }
11
+ }
12
+
13
+ @mixin ggs-8-columns-max {
14
+ @media screen and (max-width: $ggs-16-column-breakpoint) {
15
+ @content;
16
+ }
17
+ }
18
+
19
+ @mixin ggs-16-columns {
20
+ @media screen and (min-width: $ggs-16-column-breakpoint) {
21
+ @content;
22
+ }
23
+ }
24
+
25
+ @mixin ggs-media-width($min-width) {
26
+ @media screen and (min-width: $min-width) {
27
+ @content;
28
+ }
29
+ }
30
+
31
+ @mixin ggs-media-width-max($max-width) {
32
+ @media screen and (max-width: $max-width) {
33
+ @content;
34
+ }
35
+ }
36
+
37
+ @mixin ggs-media-width-range($min-width, $max-width) {
38
+ @media screen and (min-width: $min-width) and (max-width: $max-width) {
39
+ @content;
40
+ }
41
+ }
@@ -0,0 +1,10 @@
1
+
2
+ @mixin ggs-wrapper($class-name: 'wrapper') {
3
+ .#{$class-name} {
4
+ padding: 0 #{($ggs-line/2)/$ggs-em}em;
5
+ -webkit-box-sizing: border-box;
6
+ -moz-box-sizing: border-box;
7
+ -ms-box-sizing: border-box;
8
+ box-sizing: border-box;
9
+ }
10
+ }
@@ -1,2 +1,10 @@
1
+ $ggs-line: 24 !default;
2
+ $ggs-font-size: 16 !default;
3
+ $ggs-em: $ggs-font-size * 1 !default;
4
+
5
+ $ggs-8-column-breakpoint: 45em !default;
6
+ $ggs-16-column-breakpoint: 117em !default;
7
+
8
+ @import "ggs/columns";
1
9
  @import "ggs/width";
2
10
  @import "ggs/lineheight";
data/lib/ggs/version.rb CHANGED
@@ -1,3 +1,3 @@
1
1
  module GGS
2
- VERSION = '0.1.0'
2
+ VERSION = '0.2.0'
3
3
  end
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: ggs-rails
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.1.0
4
+ version: 0.2.0
5
5
  prerelease:
6
6
  platform: ruby
7
7
  authors:
@@ -9,11 +9,11 @@ authors:
9
9
  autorequire:
10
10
  bindir: bin
11
11
  cert_chain: []
12
- date: 2012-09-26 00:00:00.000000000 Z
12
+ date: 2012-10-24 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: rails
16
- requirement: &70358892821640 !ruby/object:Gem::Requirement
16
+ requirement: &70322935061320 !ruby/object:Gem::Requirement
17
17
  none: false
18
18
  requirements:
19
19
  - - ~>
@@ -21,10 +21,10 @@ dependencies:
21
21
  version: '3.2'
22
22
  type: :runtime
23
23
  prerelease: false
24
- version_requirements: *70358892821640
24
+ version_requirements: *70322935061320
25
25
  - !ruby/object:Gem::Dependency
26
- name: sass-rails
27
- requirement: &70358892820960 !ruby/object:Gem::Requirement
26
+ name: sass
27
+ requirement: &70322935060580 !ruby/object:Gem::Requirement
28
28
  none: false
29
29
  requirements:
30
30
  - - ~>
@@ -32,10 +32,10 @@ dependencies:
32
32
  version: '3.2'
33
33
  type: :runtime
34
34
  prerelease: false
35
- version_requirements: *70358892820960
35
+ version_requirements: *70322935060580
36
36
  - !ruby/object:Gem::Dependency
37
37
  name: rake
38
- requirement: &70358892820120 !ruby/object:Gem::Requirement
38
+ requirement: &70322935060040 !ruby/object:Gem::Requirement
39
39
  none: false
40
40
  requirements:
41
41
  - - ~>
@@ -43,10 +43,10 @@ dependencies:
43
43
  version: '0.9'
44
44
  type: :development
45
45
  prerelease: false
46
- version_requirements: *70358892820120
46
+ version_requirements: *70322935060040
47
47
  - !ruby/object:Gem::Dependency
48
48
  name: bundler
49
- requirement: &70358892819380 !ruby/object:Gem::Requirement
49
+ requirement: &70322935059440 !ruby/object:Gem::Requirement
50
50
  none: false
51
51
  requirements:
52
52
  - - ~>
@@ -54,7 +54,7 @@ dependencies:
54
54
  version: '1.2'
55
55
  type: :development
56
56
  prerelease: false
57
- version_requirements: *70358892819380
57
+ version_requirements: *70322935059440
58
58
  description: SASS mixins for easy implementation of The Golden Grid System http://goldengridsystem.com/
59
59
  email:
60
60
  - ryan@coshx.com
@@ -68,9 +68,12 @@ files:
68
68
  - README.md
69
69
  - Rakefile
70
70
  - ggs-rails.gemspec
71
+ - lib/assets/javascripts/GGS.js
71
72
  - lib/assets/stylesheets/ggs.scss
73
+ - lib/assets/stylesheets/ggs/columns.scss
72
74
  - lib/assets/stylesheets/ggs/lineheight.scss
73
75
  - lib/assets/stylesheets/ggs/width.scss
76
+ - lib/assets/stylesheets/ggs/wrapper.scss
74
77
  - lib/ggs-rails.rb
75
78
  - lib/ggs/rails.rb
76
79
  - lib/ggs/version.rb
@@ -88,7 +91,7 @@ required_ruby_version: !ruby/object:Gem::Requirement
88
91
  version: '0'
89
92
  segments:
90
93
  - 0
91
- hash: 1759879847608307313
94
+ hash: 1525528690884040206
92
95
  required_rubygems_version: !ruby/object:Gem::Requirement
93
96
  none: false
94
97
  requirements: