From 28621e6378c8e914760d340273be9d9565b3588f Mon Sep 17 00:00:00 2001 From: caouecs Date: Tue, 11 Jun 2013 00:37:59 +0200 Subject: [PATCH 01/57] text-align and float none --- sass/_base.scss | 10 +++++++++- sass/functions/_semantic-grid.scss | 1 + 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/sass/_base.scss b/sass/_base.scss index b9fb1af..dd1c547 100644 --- a/sass/_base.scss +++ b/sass/_base.scss @@ -48,6 +48,14 @@ html, body { } } -.center-text { +.text-center { text-align: center; } + +.text-left { + text-align: left; +} + +.text-right { + text-align: right; +} diff --git a/sass/functions/_semantic-grid.scss b/sass/functions/_semantic-grid.scss index 3003ba4..8540713 100644 --- a/sass/functions/_semantic-grid.scss +++ b/sass/functions/_semantic-grid.scss @@ -176,6 +176,7 @@ %pull-right { float: right; } %pull-left { float: left; } +%pull-none { float: none; } // Collapse Gutters %collapse { From c0feaa4a2e0c2ef223675afe341ea22da3d41e92 Mon Sep 17 00:00:00 2001 From: chambaz Date: Wed, 12 Jun 2013 16:48:04 -0400 Subject: [PATCH 02/57] Added support for gumby-classname attribute to set class to use other than .active --- js/libs/ui/gumby.toggleswitch.js | 25 +++++++++++++------------ 1 file changed, 13 insertions(+), 12 deletions(-) diff --git a/js/libs/ui/gumby.toggleswitch.js b/js/libs/ui/gumby.toggleswitch.js index 8ed8e27..3932a84 100644 --- a/js/libs/ui/gumby.toggleswitch.js +++ b/js/libs/ui/gumby.toggleswitch.js @@ -31,6 +31,7 @@ Toggle.prototype.init = function() { this.targets = this.parseTargets(); this.on = Gumby.selectAttr.apply(this.$el, ['on']) || Gumby.click; + this.className = Gumby.selectAttr.apply(this.$el, ['classname']) || 'active'; var scope = this; @@ -78,7 +79,7 @@ // call triggered event and pass target data Toggle.prototype.triggered = function() { // trigger gumby.onTrigger event and pass array of target status data - this.$el.trigger('gumby.onTrigger', [this.$el.hasClass('active')]); + this.$el.trigger('gumby.onTrigger', [this.$el.hasClass(this.className)]); }; // Switch object inherits from Toggle @@ -88,21 +89,21 @@ Toggle.prototype.trigger = function(cb) { // no targets just toggle active class on toggle if(!this.targets) { - this.$el.toggleClass('active'); + this.$el.toggleClass(this.className); // combine single target with toggle and toggle active class } else if(this.targets.length == 1) { - this.$el.add(this.targets[0]).toggleClass('active'); + this.$el.add(this.targets[0]).toggleClass(this.className); // if two targets check active state of first // always combine toggle and first target } else if(this.targets.length > 1) { - if(this.targets[0].hasClass('active')) { - this.$el.add(this.targets[0]).removeClass('active'); - this.targets[1].addClass('active'); + if(this.targets[0].hasClass(this.className)) { + this.$el.add(this.targets[0]).removeClass(this.className); + this.targets[1].addClass(this.className); } else { - this.targets[1].removeClass('active'); - this.$el.add(this.targets[0]).addClass('active'); + this.targets[1].removeClass(this.className); + this.$el.add(this.targets[0]).addClass(this.className); } } @@ -116,17 +117,17 @@ Switch.prototype.trigger = function(cb) { // no targets just add active class to switch if(!this.targets) { - this.$el.addClass('active'); + this.$el.addClass(this.className); // combine single target with switch and add active class } else if(this.targets.length == 1) { - this.$el.add(this.targets[0]).addClass('active'); + this.$el.add(this.targets[0]).addClass(this.className); // if two targets check active state of first // always combine switch and first target } else if(this.targets.length > 1) { - this.$el.add(this.targets[0]).addClass('active'); - this.targets[1].removeClass('active'); + this.$el.add(this.targets[0]).addClass(this.className); + this.targets[1].removeClass(this.className); } // call event handler here, applying scope of object Switch/Toggle From 32b5f6c3dbdbbc9eaa7ea749229ceba679e88f84 Mon Sep 17 00:00:00 2001 From: chambaz Date: Wed, 12 Jun 2013 16:48:17 -0400 Subject: [PATCH 03/57] Minified JS --- js/libs/gumby.min.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/libs/gumby.min.js b/js/libs/gumby.min.js index 5a9cdd0..51f9554 100644 --- a/js/libs/gumby.min.js +++ b/js/libs/gumby.min.js @@ -1 +1 @@ -!function(){"use strict";function Gumby(){this.$dom=$(document);this.isOldie=!!this.$dom.find("html").hasClass("oldie");this.click="click";this.onReady=this.onOldie=this.onTouch=false;this.uiModules={};this.inits={};this.path=$("script[gumby-path]").attr("gumby-path")||$("script[data-path]").attr("data-path")||$("script[path]").attr("path")||"js/libs"}Gumby.prototype.init=function(){this.initUIModules();var scope=this;this.$dom.ready(function(){if(scope.onReady){scope.onReady()}if(scope.isOldie&&scope.onOldie){scope.onOldie()}if(Modernizr.touch&&scope.onTouch){scope.onTouch()}})};Gumby.prototype.ready=function(code){if(code&&typeof code==="function"){this.onReady=code}};Gumby.prototype.oldie=function(code){if(code&&typeof code==="function"){this.onOldie=code}};Gumby.prototype.touch=function(code){if(code&&typeof code==="function"){this.onTouch=code}};Gumby.prototype.debug=function(){return{$dom:this.$dom,isOldie:this.isOldie,uiModules:this.uiModules,click:this.click}};Gumby.prototype.selectAttr=function(){var i=0;for(;i').trigger("gumby.onCheck").trigger("gumby.onChange")}else{this.$el.find("input").prop("checked",false).end().find("i").remove().end().removeClass("checked").trigger("gumby.onUncheck").trigger("gumby.onChange")}};Gumby.addInitalisation("checkboxes",function(){$(".checkbox").each(function(){var $this=$(this);if($this.data("isCheckbox")){return true}$this.data("isCheckbox",true);new Checkbox($this)})});Gumby.UIModule({module:"checkbox",events:["onCheck","onUncheck","onChange","check","uncheck"],init:function(){Gumby.initialize("checkboxes")}})}();!function(){"use strict";function FitText($el){this.$el=$el;this.rate=Gumby.selectAttr.apply(this.$el,["rate"])||1;this.fontSizes=this.parseSizes(Gumby.selectAttr.apply(this.$el,["sizes"]));var scope=this;$(window).on("load resize orientationchange",function(){scope.resize()})}FitText.prototype.resize=function(){this.$el.css("font-size",this.calculateSize())};FitText.prototype.calculateSize=function(){return Math.max(Math.min(this.$el.width()/(this.rate*10),parseFloat(this.fontSizes.max)),parseFloat(this.fontSizes.min))};FitText.prototype.parseSizes=function(attrStr){var sizes={min:Number.NEGATIVE_INFINITY,max:Number.POSITIVE_INFINITY};if(!attrStr){return sizes}if(attrStr.indexOf("|")>-1){attrStr=attrStr.split("|");sizes.min=Number(attrStr[0])||sizes.min;sizes.max=Number(attrStr[1])||sizes.max}sizes.min=Number(attrStr)||sizes.min;return sizes};Gumby.addInitalisation("fittext",function(){$(".fittext").each(function(){var $this=$(this);if($this.data("isFittext")){return true}$this.data("isFittext",true);new FitText($this)})});Gumby.UIModule({module:"fittext",events:[],init:function(){Gumby.initialize("fittext")}})}();!function(){"use strict";function Fixed($el){this.$el=$el;this.$holder=Gumby.selectAttr.apply(this.$el,["holder"]);this.fixedPoint=Gumby.selectAttr.apply(this.$el,["fixed"]);this.unfixPoint=false;if(this.$holder){this.$holder=$(this.$holder)}else{this.$holder=$(window)}if(this.fixedPoint.indexOf("|")>-1){var points=this.fixedPoint.split("|");this.fixedPoint=points[0];this.unfixPoint=points[1]}this.fixedPoint=this.parseAttrValue(this.fixedPoint);if(this.unfixPoint){this.unfixPoint=this.parseAttrValue(this.unfixPoint)}var scope=this;this.$holder.scroll(function(){scope.scroll()})}Fixed.prototype.scroll=function(){var offset=this.$holder.scrollTop(),fixedPoint=this.fixedPoint,unfixPoint=this.unfixPoint,endPoint=this.endPoint;fixedPoint=fixedPoint instanceof jQuery?this.fixedPoint.offset().top:this.fixedPoint;unfixPoint=unfixPoint instanceof jQuery?this.unfixPoint.offset().top:this.unfixPoint;if(!unfixPoint){unfixPoint=offset*2}if(offset>=fixedPoint&&offset=unfixPoint&&this.$el.hasClass("fixed")){this.$el.removeClass("fixed").trigger("gumby.onUnfixed",1)}};Fixed.prototype.parseAttrValue=function(attr){if($.isNumeric(attr)){return Number(attr)}else if(attr==="top"){return this.$el.offset().top}else{var $el=$(attr);return $el.length?$el:false}};Gumby.addInitalisation("fixed",function(){$("[data-fixed],[gumby-fixed],[fixed]").each(function(){var $this=$(this);if($this.data("isFixed")){return true}$this.data("isFixed",true);new Fixed($this)})});Gumby.UIModule({module:"fixed",events:["onFixed","onUnfixed"],init:function(){Gumby.initialize("fixed")}})}();!function(){"use strict";if(!Modernizr.touch){return}function Navbar($el){this.$el=$el;var scope=this;this.$el.find("li").on(Gumby.click,function(e){var $this=$(this);e.stopPropagation();if(this.href==="#"){e.preventDefault()}scope.dropdown($this)})}Navbar.prototype.dropdown=function($this){if($this.children(".dropdown").length){if($this.hasClass("active")){$this.removeClass("active")}else{$this.addClass("active")}}else{this.$items.removeClass("active")}};Gumby.addInitalisation("navbars",function(){$(".navbar").each(function(){var $this=$(this);if($this.data("isNavbar")){return true}$this.data("isNavbar",true);new Navbar($this)})});Gumby.UIModule({module:"navbar",events:[],init:function(){Gumby.initialize("navbars")}})}();!function(){"use strict";function RadioBtn($el){this.$el=$el;var scope=this;this.$el.on(Gumby.click,function(e){scope.click(e)}).on("gumby.check",function(){scope.update()});if(scope.$el.hasClass("checked")){scope.update()}}RadioBtn.prototype.click=function(e){var $target=$(e.target);e.stopPropagation();e.preventDefault();this.update()};RadioBtn.prototype.update=function(){var $input=this.$el.find("input[type=radio]"),group='input[name="'+$input.attr("name")+'"]';$(".radio").has(group).removeClass("checked").find("input").prop("checked",false).end().find("i").remove();$input.prop("checked",true);this.$el.append('').addClass("checked").trigger("gumby.onChange")};Gumby.addInitalisation("radiobtns",function(){$(".radio").each(function(){var $this=$(this);if($this.data("isRadioBtn")){return true}$this.data("isRadioBtn",true);new RadioBtn($this)})});Gumby.UIModule({module:"radiobtn",events:["onChange","check"],init:function(){Gumby.initialize("radiobtns")}})}();!function(){"use strict";function Retina($el){this.$el=$el;this.imageSrc=this.$el.attr("src");this.retinaSrc=this.fetchRetinaImage();this.$retinaImg=$(new Image);var scope=this;if(!this.retinaSrc){return false}this.$retinaImg.attr("src",this.retinaSrc).load(function(){scope.retinaImageLoaded()})}Retina.prototype.fetchRetinaImage=function(){var imgSrc=this.imageSrc,index=this.imageSrc.search(/(\.|\/)(gif|jpe?g|png)$/i);if(index<0){return false}return imgSrc.substr(0,index)+"@2x"+imgSrc.substr(index,imgSrc.length)};Retina.prototype.retinaImageLoaded=function(){this.$el.attr("src",this.$retinaImg.attr("src")).trigger("gumby.onRetina")};Gumby.addInitalisation("retina",function(){if(!window.devicePixelRatio||window.devicePixelRatio<=1){return}$("img[data-retina],img[gumby-retina],img[retina]").each(function(){var $this=$(this);if($this.data("isRetina")){return true}$this.data("isRetina",true);new Retina($this)})});Gumby.UIModule({module:"retina",events:["onRetina"],init:function(){Gumby.initialize("retina")}})}();!function(){"use strict";function SkipLink($el){this.$el=$el;this.targetPos=0;this.duration=Number(Gumby.selectAttr.apply(this.$el,["duration"]))||200;this.offset=Gumby.selectAttr.apply(this.$el,["offset"])||false;this.easing=Gumby.selectAttr.apply(this.$el,["easing"])||"swing";var scope=this;this.$el.on(Gumby.click+" gumby.skip",function(e){e.preventDefault();scope.calculateTarget()})}SkipLink.prototype.calculateTarget=function(){var scope=this,target=Gumby.selectAttr.apply(this.$el,["goto"]),$target;if(target=="top"){this.targetPos=0}else if($.isNumeric(target)){this.targetPos=Number(target)}else{$target=$(target);if(!$target){return false}this.targetPos=$target.offset().top}this.skipTo()};SkipLink.prototype.skipTo=function(){var scope=this;$("html,body").animate({scrollTop:this.calculateOffset()},this.duration,this.easing).promise().done(function(){scope.$el.trigger("gumby.onComplete")})};SkipLink.prototype.calculateOffset=function(){if(!this.offset){return this.targetPos}var op=this.offset.substr(0,1),off=Number(this.offset.substr(1,this.offset.length));if(op==="-"){return this.targetPos-off}else if(op==="+"){return this.targetPos+off}};Gumby.addInitalisation("skiplinks",function(){$(".skiplink > a, .skip").each(function(){var $this=$(this);if($this.data("isSkipLink")){return true}$this.data("isSkipLink",true);new SkipLink($this)})});Gumby.UIModule({module:"skiplink",events:["onComplete","skip"],init:function(){Gumby.initialize("skiplinks")}})}();!function(){"use strict";function Tabs($el){this.$el=$el;this.$nav=this.$el.find("ul.tab-nav > li");this.$content=this.$el.find(".tab-content");var scope=this;this.$nav.children("a").on(Gumby.click,function(e){e.preventDefault();scope.click($(this))});this.$el.on("gumby.set",function(e,index){scope.set(e,index)})}Tabs.prototype.click=function($this){var index=$this.parent().index();this.$nav.add(this.$content).removeClass("active");this.$nav.eq(index).add(this.$content.eq(index)).addClass("active");this.$el.trigger("gumby.onChange",index)};Tabs.prototype.set=function(e,index){this.$nav.eq(index).find("a").trigger(Gumby.click)};Gumby.addInitalisation("tabs",function(){$(".tabs").each(function(){var $this=$(this);if($this.data("isTabs")){return true}$this.data("isTabs",true);new Tabs($this)})});Gumby.UIModule({module:"tabs",events:["onChange","set"],init:function(){Gumby.initialize("tabs")}})}();!function(){"use strict";function Toggle($el){this.$el=$($el);this.targets=[];this.on="";if(this.$el.length){this.init()}}function Switch($el){this.$el=$($el);this.targets=[];this.on="";if(this.$el.length){this.init()}}Toggle.prototype.init=function(){this.targets=this.parseTargets();this.on=Gumby.selectAttr.apply(this.$el,["on"])||Gumby.click;var scope=this;this.$el.on(this.on,function(e){if($(this).prop("tagName")==="A"){e.preventDefault()}e.stopPropagation();scope.trigger(scope.triggered)}).on("gumby.trigger",function(){scope.trigger(scope.triggered)})};Toggle.prototype.parseTargets=function(){var targetStr=Gumby.selectAttr.apply(this.$el,["trigger"]),secondaryTargets=0,targets=[];if(!targetStr){return false}secondaryTargets=targetStr.indexOf("|");if(secondaryTargets===-1){return[$(targetStr)]}targets=targetStr.split("|");return targets.length>1?[$(targets[0]),$(targets[1])]:[$(targets[0])]};Toggle.prototype.triggered=function(){this.$el.trigger("gumby.onTrigger",[this.$el.hasClass("active")])};Switch.prototype=new Toggle;Toggle.prototype.trigger=function(cb){if(!this.targets){this.$el.toggleClass("active")}else if(this.targets.length==1){this.$el.add(this.targets[0]).toggleClass("active")}else if(this.targets.length>1){if(this.targets[0].hasClass("active")){this.$el.add(this.targets[0]).removeClass("active");this.targets[1].addClass("active")}else{this.targets[1].removeClass("active");this.$el.add(this.targets[0]).addClass("active")}}if(cb&&typeof cb==="function"){cb.apply(this)}};Switch.prototype.trigger=function(cb){if(!this.targets){this.$el.addClass("active")}else if(this.targets.length==1){this.$el.add(this.targets[0]).addClass("active")}else if(this.targets.length>1){this.$el.add(this.targets[0]).addClass("active");this.targets[1].removeClass("active")}if(cb&&typeof cb==="function"){cb.apply(this)}};Gumby.addInitalisation("toggles",function(){$(".toggle").each(function(){var $this=$(this);if($this.data("isToggle")){return true}$this.data("isToggle",true);new Toggle($this)})});Gumby.addInitalisation("switches",function(){$(".switch").each(function(){var $this=$(this);if($this.data("isSwitch")){return true}$this.data("isSwitch",true);new Switch($this)})});Gumby.UIModule({module:"toggleswitch",events:["trigger","onTrigger"],init:function(){Gumby.initialize("switches");Gumby.initialize("toggles")}})}();!function($){"use strict";function Validation($this,req){this.$this=$this;this.$field=this.$this.parents(".field");this.req=req||function(){return!!this.$this.val().length};var scope=this;if(this.$this.is("[type=checkbox], [type=radio]")){this.$field=this.$this.parent("label");this.$field.on("gumby.onChange",function(){scope.validate()})}else if(this.$this.is("select")){this.$field=this.$this.parents(".picker");this.$field.on("change",function(){scope.validate()})}else{this.$this.on("blur",function(e){if(e.which!==9){scope.validate()}})}}Validation.prototype.validate=function(){var result=this.req(this.$this);if(!result){this.$field.removeClass("success").addClass("danger")}else{this.$field.removeClass("danger").addClass("success")}return result};$.fn.validation=function(options){var settings=$.extend({submit:false,fail:false,required:[]},options),validations=[];return this.each(function(){if(!settings.required.length){return false}var $this=$(this),reqLength=settings.required.length,i;for(i=0;i').trigger("gumby.onCheck").trigger("gumby.onChange")}else{this.$el.find("input").prop("checked",false).end().find("i").remove().end().removeClass("checked").trigger("gumby.onUncheck").trigger("gumby.onChange")}};Gumby.addInitalisation("checkboxes",function(){$(".checkbox").each(function(){var $this=$(this);if($this.data("isCheckbox")){return true}$this.data("isCheckbox",true);new Checkbox($this)})});Gumby.UIModule({module:"checkbox",events:["onCheck","onUncheck","onChange","check","uncheck"],init:function(){Gumby.initialize("checkboxes")}})}();!function(){"use strict";function FitText($el){this.$el=$el;this.rate=Gumby.selectAttr.apply(this.$el,["rate"])||1;this.fontSizes=this.parseSizes(Gumby.selectAttr.apply(this.$el,["sizes"]));var scope=this;$(window).on("load resize orientationchange",function(){scope.resize()})}FitText.prototype.resize=function(){this.$el.css("font-size",this.calculateSize())};FitText.prototype.calculateSize=function(){return Math.max(Math.min(this.$el.width()/(this.rate*10),parseFloat(this.fontSizes.max)),parseFloat(this.fontSizes.min))};FitText.prototype.parseSizes=function(attrStr){var sizes={min:Number.NEGATIVE_INFINITY,max:Number.POSITIVE_INFINITY};if(!attrStr){return sizes}if(attrStr.indexOf("|")>-1){attrStr=attrStr.split("|");sizes.min=Number(attrStr[0])||sizes.min;sizes.max=Number(attrStr[1])||sizes.max}sizes.min=Number(attrStr)||sizes.min;return sizes};Gumby.addInitalisation("fittext",function(){$(".fittext").each(function(){var $this=$(this);if($this.data("isFittext")){return true}$this.data("isFittext",true);new FitText($this)})});Gumby.UIModule({module:"fittext",events:[],init:function(){Gumby.initialize("fittext")}})}();!function(){"use strict";function Fixed($el){this.$el=$el;this.$holder=Gumby.selectAttr.apply(this.$el,["holder"]);this.fixedPoint=Gumby.selectAttr.apply(this.$el,["fixed"]);this.unfixPoint=false;if(this.$holder){this.$holder=$(this.$holder)}else{this.$holder=$(window)}if(this.fixedPoint.indexOf("|")>-1){var points=this.fixedPoint.split("|");this.fixedPoint=points[0];this.unfixPoint=points[1]}this.fixedPoint=this.parseAttrValue(this.fixedPoint);if(this.unfixPoint){this.unfixPoint=this.parseAttrValue(this.unfixPoint)}var scope=this;this.$holder.scroll(function(){scope.scroll()})}Fixed.prototype.scroll=function(){var offset=this.$holder.scrollTop(),fixedPoint=this.fixedPoint,unfixPoint=this.unfixPoint,endPoint=this.endPoint;fixedPoint=fixedPoint instanceof jQuery?this.fixedPoint.offset().top:this.fixedPoint;unfixPoint=unfixPoint instanceof jQuery?this.unfixPoint.offset().top:this.unfixPoint;if(!unfixPoint){unfixPoint=offset*2}if(offset>=fixedPoint&&offset=unfixPoint&&this.$el.hasClass("fixed")){this.$el.removeClass("fixed").trigger("gumby.onUnfixed",1)}};Fixed.prototype.parseAttrValue=function(attr){if($.isNumeric(attr)){return Number(attr)}else if(attr==="top"){return this.$el.offset().top}else{var $el=$(attr);return $el.length?$el:false}};Gumby.addInitalisation("fixed",function(){$("[data-fixed],[gumby-fixed],[fixed]").each(function(){var $this=$(this);if($this.data("isFixed")){return true}$this.data("isFixed",true);new Fixed($this)})});Gumby.UIModule({module:"fixed",events:["onFixed","onUnfixed"],init:function(){Gumby.initialize("fixed")}})}();!function(){"use strict";if(!Modernizr.touch){return}function Navbar($el){this.$el=$el;var scope=this;this.$el.find("li").on(Gumby.click,function(e){var $this=$(this);e.stopPropagation();if(this.href==="#"){e.preventDefault()}scope.dropdown($this)})}Navbar.prototype.dropdown=function($this){if($this.children(".dropdown").length){if($this.hasClass("active")){$this.removeClass("active")}else{$this.addClass("active")}}else{this.$items.removeClass("active")}};Gumby.addInitalisation("navbars",function(){$(".navbar").each(function(){var $this=$(this);if($this.data("isNavbar")){return true}$this.data("isNavbar",true);new Navbar($this)})});Gumby.UIModule({module:"navbar",events:[],init:function(){Gumby.initialize("navbars")}})}();!function(){"use strict";function RadioBtn($el){this.$el=$el;var scope=this;this.$el.on(Gumby.click,function(e){scope.click(e)}).on("gumby.check",function(){scope.update()});if(scope.$el.hasClass("checked")){scope.update()}}RadioBtn.prototype.click=function(e){var $target=$(e.target);e.stopPropagation();e.preventDefault();this.update()};RadioBtn.prototype.update=function(){var $input=this.$el.find("input[type=radio]"),group='input[name="'+$input.attr("name")+'"]';$(".radio").has(group).removeClass("checked").find("input").prop("checked",false).end().find("i").remove();$input.prop("checked",true);this.$el.append('').addClass("checked").trigger("gumby.onChange")};Gumby.addInitalisation("radiobtns",function(){$(".radio").each(function(){var $this=$(this);if($this.data("isRadioBtn")){return true}$this.data("isRadioBtn",true);new RadioBtn($this)})});Gumby.UIModule({module:"radiobtn",events:["onChange","check"],init:function(){Gumby.initialize("radiobtns")}})}();!function(){"use strict";function Retina($el){this.$el=$el;this.imageSrc=this.$el.attr("src");this.retinaSrc=this.fetchRetinaImage();this.$retinaImg=$(new Image);var scope=this;if(!this.retinaSrc){return false}this.$retinaImg.attr("src",this.retinaSrc).load(function(){scope.retinaImageLoaded()})}Retina.prototype.fetchRetinaImage=function(){var imgSrc=this.imageSrc,index=this.imageSrc.search(/(\.|\/)(gif|jpe?g|png)$/i);if(index<0){return false}return imgSrc.substr(0,index)+"@2x"+imgSrc.substr(index,imgSrc.length)};Retina.prototype.retinaImageLoaded=function(){this.$el.attr("src",this.$retinaImg.attr("src")).trigger("gumby.onRetina")};Gumby.addInitalisation("retina",function(){if(!window.devicePixelRatio||window.devicePixelRatio<=1){return}$("img[data-retina],img[gumby-retina],img[retina]").each(function(){var $this=$(this);if($this.data("isRetina")){return true}$this.data("isRetina",true);new Retina($this)})});Gumby.UIModule({module:"retina",events:["onRetina"],init:function(){Gumby.initialize("retina")}})}();!function(){"use strict";function SkipLink($el){this.$el=$el;this.targetPos=0;this.duration=Number(Gumby.selectAttr.apply(this.$el,["duration"]))||200;this.offset=Gumby.selectAttr.apply(this.$el,["offset"])||false;this.easing=Gumby.selectAttr.apply(this.$el,["easing"])||"swing";var scope=this;this.$el.on(Gumby.click+" gumby.skip",function(e){e.preventDefault();scope.calculateTarget()})}SkipLink.prototype.calculateTarget=function(){var scope=this,target=Gumby.selectAttr.apply(this.$el,["goto"]),$target;if(target=="top"){this.targetPos=0}else if($.isNumeric(target)){this.targetPos=Number(target)}else{$target=$(target);if(!$target){return false}this.targetPos=$target.offset().top}this.skipTo()};SkipLink.prototype.skipTo=function(){var scope=this;$("html,body").animate({scrollTop:this.calculateOffset()},this.duration,this.easing).promise().done(function(){scope.$el.trigger("gumby.onComplete")})};SkipLink.prototype.calculateOffset=function(){if(!this.offset){return this.targetPos}var op=this.offset.substr(0,1),off=Number(this.offset.substr(1,this.offset.length));if(op==="-"){return this.targetPos-off}else if(op==="+"){return this.targetPos+off}};Gumby.addInitalisation("skiplinks",function(){$(".skiplink > a, .skip").each(function(){var $this=$(this);if($this.data("isSkipLink")){return true}$this.data("isSkipLink",true);new SkipLink($this)})});Gumby.UIModule({module:"skiplink",events:["onComplete","skip"],init:function(){Gumby.initialize("skiplinks")}})}();!function(){"use strict";function Tabs($el){this.$el=$el;this.$nav=this.$el.find("ul.tab-nav > li");this.$content=this.$el.find(".tab-content");var scope=this;this.$nav.children("a").on(Gumby.click,function(e){e.preventDefault();scope.click($(this))});this.$el.on("gumby.set",function(e,index){scope.set(e,index)})}Tabs.prototype.click=function($this){var index=$this.parent().index();this.$nav.add(this.$content).removeClass("active");this.$nav.eq(index).add(this.$content.eq(index)).addClass("active");this.$el.trigger("gumby.onChange",index)};Tabs.prototype.set=function(e,index){this.$nav.eq(index).find("a").trigger(Gumby.click)};Gumby.addInitalisation("tabs",function(){$(".tabs").each(function(){var $this=$(this);if($this.data("isTabs")){return true}$this.data("isTabs",true);new Tabs($this)})});Gumby.UIModule({module:"tabs",events:["onChange","set"],init:function(){Gumby.initialize("tabs")}})}();!function(){"use strict";function Toggle($el){this.$el=$($el);this.targets=[];this.on="";if(this.$el.length){this.init()}}function Switch($el){this.$el=$($el);this.targets=[];this.on="";if(this.$el.length){this.init()}}Toggle.prototype.init=function(){this.targets=this.parseTargets();this.on=Gumby.selectAttr.apply(this.$el,["on"])||Gumby.click;this.className=Gumby.selectAttr.apply(this.$el,["classname"])||"active";var scope=this;this.$el.on(this.on,function(e){if($(this).prop("tagName")==="A"){e.preventDefault()}e.stopPropagation();scope.trigger(scope.triggered)}).on("gumby.trigger",function(){scope.trigger(scope.triggered)})};Toggle.prototype.parseTargets=function(){var targetStr=Gumby.selectAttr.apply(this.$el,["trigger"]),secondaryTargets=0,targets=[];if(!targetStr){return false}secondaryTargets=targetStr.indexOf("|");if(secondaryTargets===-1){return[$(targetStr)]}targets=targetStr.split("|");return targets.length>1?[$(targets[0]),$(targets[1])]:[$(targets[0])]};Toggle.prototype.triggered=function(){this.$el.trigger("gumby.onTrigger",[this.$el.hasClass(this.className)])};Switch.prototype=new Toggle;Toggle.prototype.trigger=function(cb){if(!this.targets){this.$el.toggleClass(this.className)}else if(this.targets.length==1){this.$el.add(this.targets[0]).toggleClass(this.className)}else if(this.targets.length>1){if(this.targets[0].hasClass(this.className)){this.$el.add(this.targets[0]).removeClass(this.className);this.targets[1].addClass(this.className)}else{this.targets[1].removeClass(this.className);this.$el.add(this.targets[0]).addClass(this.className)}}if(cb&&typeof cb==="function"){cb.apply(this)}};Switch.prototype.trigger=function(cb){if(!this.targets){this.$el.addClass(this.className)}else if(this.targets.length==1){this.$el.add(this.targets[0]).addClass(this.className)}else if(this.targets.length>1){this.$el.add(this.targets[0]).addClass(this.className);this.targets[1].removeClass(this.className)}if(cb&&typeof cb==="function"){cb.apply(this)}};Gumby.addInitalisation("toggles",function(){$(".toggle").each(function(){var $this=$(this);if($this.data("isToggle")){return true}$this.data("isToggle",true);new Toggle($this)})});Gumby.addInitalisation("switches",function(){$(".switch").each(function(){var $this=$(this);if($this.data("isSwitch")){return true}$this.data("isSwitch",true);new Switch($this)})});Gumby.UIModule({module:"toggleswitch",events:["trigger","onTrigger"],init:function(){Gumby.initialize("switches");Gumby.initialize("toggles")}})}();!function($){"use strict";function Validation($this,req){this.$this=$this;this.$field=this.$this.parents(".field");this.req=req||function(){return!!this.$this.val().length};var scope=this;if(this.$this.is("[type=checkbox], [type=radio]")){this.$field=this.$this.parent("label");this.$field.on("gumby.onChange",function(){scope.validate()})}else if(this.$this.is("select")){this.$field=this.$this.parents(".picker");this.$field.on("change",function(){scope.validate()})}else{this.$this.on("blur",function(e){if(e.which!==9){scope.validate()}})}}Validation.prototype.validate=function(){var result=this.req(this.$this);if(!result){this.$field.removeClass("success").addClass("danger")}else{this.$field.removeClass("danger").addClass("success")}return result};$.fn.validation=function(options){var settings=$.extend({submit:false,fail:false,required:[]},options),validations=[];return this.each(function(){if(!settings.required.length){return false}var $this=$(this),reqLength=settings.required.length,i;for(i=0;i Date: Thu, 13 Jun 2013 13:56:53 +0200 Subject: [PATCH 04/57] mixin pull(none) --- sass/functions/_semantic-grid.scss | 3 +++ 1 file changed, 3 insertions(+) diff --git a/sass/functions/_semantic-grid.scss b/sass/functions/_semantic-grid.scss index 8540713..aa00b17 100644 --- a/sass/functions/_semantic-grid.scss +++ b/sass/functions/_semantic-grid.scss @@ -138,6 +138,9 @@ @if $direction == left { @extend %pull-left; } + @elseif $direction == none { + @extend %pull-none; + } @else { @extend %pull-right; } From 88b66ff064bb6a5c4c52960cea31f396ddb219e3 Mon Sep 17 00:00:00 2001 From: caouecs Date: Thu, 13 Jun 2013 14:00:43 +0200 Subject: [PATCH 05/57] ui.html up-to-date with text-center --- ui.html | 1213 ++++++++++++++++++++++++++++--------------------------- 1 file changed, 609 insertions(+), 604 deletions(-) diff --git a/ui.html b/ui.html index c1e15f1..b674695 100644 --- a/ui.html +++ b/ui.html @@ -57,7 +57,7 @@
-
+

This is a modal.

Gumby modals are easy to make using Toggles & Switches. The .modal class already has the required styles which you can open and close using Toggles & Switches.

@@ -212,6 +212,9 @@
My Cool Fifth Level Headline
My Cool Sixth Level Headline

This is my awesome paragraph text, it is the base style/size for paragraph text. We love 16px for body copy as it provides for a more consistent cross browser experience. It is also digitally equivalent to to 12pt standard set in print design. We also love the golden ratio, all of the type set here is based off of that deliciously elegant ratio. Enjoy!

+
+

Responsive text will expand to fill the available space

+

ul.disc

@@ -538,643 +541,644 @@

Check Boxes

+
+
+

Tabs

-

Tabs

-
-
-
-

Basic Tabs

- -
-

Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.

-
-
-

Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.

-
-
-

Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.

-

Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio.

-
My cool button
-
-
-
-
-
-

Pill Tabs

- -
-

Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.

-
My cool button
-
-
-

Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.

-
-
-

Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.

-

Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.

-
-
-
+
+
+

Basic Tabs

+ +
+

Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.

+
+
+

Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.

+
+
+

Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.

+

Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio.

+
My cool button
+
+
-
-
-
-

Vertical Tabs

- -
-

Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.

-
-
-

Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.

-
-
My cool button
-
-
-
-

Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.

-

Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio.

-
-
-
+
+
+

Pill Tabs

+ +
+

Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.

+
My cool button
+
+
+

Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.

+
+
+

Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.

+

Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.

+
+
-
-

Drawers

-

- Open Top Drawer -

-

- Toggle Bottom Drawers -

-

- Close All Drawers -

-
-
-
-

Digital Surgeons

+
+
+
+

Vertical Tabs

+ +
+

Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.

-
-
-
-
-
-

Digital Surgeons

+
+

Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.

+
+
My cool button
+
-
-
-
-

Digital Surgeons

+
+

Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.

+

Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio.

+ +
+
+
+
+

Drawers

+

+ Open Top Drawer +

+

+ Toggle Bottom Drawers +

+

+ Close All Drawers +

+
+
+
-
-

Modals

-

Open Modal

+
+
+ +
+
+ +
+
+
+

Modals

+

Open Modal

+
+
+

Skip Links

-

Skip Links

-
-
- - -
+
+
+

Images

-

Images

-
-
-
-
- -
-
- -
-
- -
-
- -
+
+
+
+
-
-
- -
-
- -
-
- -
+
+ +
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+
-
-

Tiles

-
-
-

2-up

-
    -
    • -
    • -
    • -
    • -
    • -
    • -
-
-
-

3-up

-
    -
    • -
    • -
    • -
    • -
    • -
    • -
-
-
-

4-up

-
    -
    • -
    • -
    • -
    • -
    • -
    • -
    • -
    • -
-
+
+
+

Tiles

+
+
+

2-up

+
    +
    • +
    • +
    • +
    • +
    • +
    • +
-
-
-

5-up

-
    -
    • -
    • -
    • -
    • -
    • -
    • -
    • -
    • -
    • -
    • -
-
+
+

3-up

+
    +
    • +
    • +
    • +
    • +
    • +
    • +
+
+
+

4-up

+
    +
    • +
    • +
    • +
    • +
    • +
    • +
    • +
    • +
-
-

Intrinsic Ratio Video Embed

-
-
-
- -
-
-
-
- -
-
+
+
+

5-up

+
    +
    • +
    • +
    • +
    • +
    • +
    • +
    • +
    • +
    • +
    • +
-
-
-
- -
-
+
+
+
+

Intrinsic Ratio Video Embed

+
+
+
+ +
+
+
+
+ +
-
-
-

Icon Map

-

All icons are (class="icon-*")

+
+
+
+ +
-
    -
  • note
    • -
  • note-beamed
    • -
  • music
    • -
  • search
    • -
  • flashlight
    • -
  • mail
    • -
-
    -
  • heart
    • -
  • heart-empty
    • -
  • star
    • -
  • star-empty
    • -
  • user
    • -
  • users
    • -
-
    -
  • user-add
    • -
  • video
    • -
  • picture
    • -
  • camera
    • -
  • layout
    • -
  • menu
    • -
-
    -
  • check
    • -
  • cancel
    • -
  • cancel-circled
    • -
  • cancel-square
    • -
  • plus
    • -
  • plus-circled
    • -
-
    -
  • plus-squared
    • -
  • minus
    • -
  • minus-circled
    • -
  • minus-square
    • -
  • help
    • -
  • help-circled
    • -
-
    -
  • info
    • -
  • info-circled
    • -
  • back
    • -
  • home
    • -
  • link
    • -
  • attach
    • -
-
    -
  • lock
    • -
  • lock-open
    • -
  • eye
    • -
  • tag
    • -
  • bookmark
    • -
  • bookmarks
    • -
-
    -
  • flag
    • -
  • thumbs-up
    • -
  • thumbs-down
    • -
  • download
    • -
  • upload
    • -
  • upload-cloud
    • -
-
    -
  • reply
    • -
  • reply-all
    • -
  • forward
    • -
  • quote
    • -
  • code
    • -
  • export
    • -
-
    -
  • pencil
    • -
  • feather
    • -
  • print
    • -
  • retweet
    • -
  • keyboard
    • -
  • comment
    • -
-
    -
  • chat
    • -
  • bell
    • -
  • attention
    • -
  • alert
    • -
  • vcard
    • -
  • address
    • -
-
    -
  • location
    • -
  • map
    • -
  • direction
    • -
  • compass
    • -
  • cup
    • -
  • trash
    • -
-
    -
  • doc
    • -
  • docs
    • -
  • doc-landscape
    • -
  • doc-text
    • -
  • doc-text-inv
    • -
  • newspaper
    • -
-
    -
  • book
    • -
  • book-open
    • -
  • folder
    • -
  • archive
    • -
  • box
    • -
  • rss
    • -
-
    -
  • phone
    • -
  • cog
    • -
  • tools
    • -
  • share
    • -
  • shareable
    • -
  • basket
    • -
-
    -
  • bag
    • -
  • calendar
    • -
  • login
    • -
  • logout
    • -
  • mic
    • -
  • mute
    • -
-
    -
  • sound
    • -
  • volume
    • -
  • clock
    • -
  • hourglass
    • -
  • lamp
    • -
  • light-down
    • -
-
    -
  • light-up
    • -
  • adjust
    • -
  • block
    • -
  • resize-full
    • -
  • resize-small
    • -
  • popup
    • -
-
    -
  • publish
    • -
  • window
    • -
  • arrow-combo
    • -
  • down-circled
    • -
  • left-circled
    • -
  • right-circled
    • -
-
    -
  • up-circled
    • -
  • up-open
    • -
  • down-open
    • -
  • left-open
    • -
  • right-open
    • -
  • up-open-mini
    • -
-
    -
  • down-open-mini
    • -
  • left-open-mini
    • -
  • right-open-mini
    • -
  • up-open-big
    • -
  • down-open-big
    • -
  • left-open-big
    • -
-
    -
  • right-open-big
    • -
  • down
    • -
  • arrow-left
    • -
  • arrow-right
    • -
  • up
    • -
  • up-dir
    • -
-
    -
  • down-dir
    • -
  • left-dir
    • -
  • right-dir
    • -
  • up-bold
    • -
  • down-bold
    • -
  • left-bold
    • -
-
    -
  • right-bold
    • -
  • up-thin
    • -
  • down-thin
    • -
  • left-thin
    • -
  • right-thin
    • -
  • ccw
    • -
-
    -
  • cw
    • -
  • arrows-ccw
    • -
  • level-down
    • -
  • level-up
    • -
  • shuffle
    • -
  • loop
    • -
-
    -
  • switch
    • -
  • play
    • -
  • stop
    • -
  • pause
    • -
  • record
    • -
  • to-end
    • -
+
+
+
+
+

Icon Map

+

All icons are (class="icon-*")

+
+
    +
  • note
    • +
  • note-beamed
    • +
  • music
    • +
  • search
    • +
  • flashlight
    • +
  • mail
    • +
+
    +
  • heart
    • +
  • heart-empty
    • +
  • star
    • +
  • star-empty
    • +
  • user
    • +
  • users
    • +
+
    +
  • user-add
    • +
  • video
    • +
  • picture
    • +
  • camera
    • +
  • layout
    • +
  • menu
    • +
+
    +
  • check
    • +
  • cancel
    • +
  • cancel-circled
    • +
  • cancel-square
    • +
  • plus
    • +
  • plus-circled
    • +
+
    +
  • plus-squared
    • +
  • minus
    • +
  • minus-circled
    • +
  • minus-square
    • +
  • help
    • +
  • help-circled
    • +
+
    +
  • info
    • +
  • info-circled
    • +
  • back
    • +
  • home
    • +
  • link
    • +
  • attach
    • +
+
    +
  • lock
    • +
  • lock-open
    • +
  • eye
    • +
  • tag
    • +
  • bookmark
    • +
  • bookmarks
    • +
+
    +
  • flag
    • +
  • thumbs-up
    • +
  • thumbs-down
    • +
  • download
    • +
  • upload
    • +
  • upload-cloud
    • +
+
    +
  • reply
    • +
  • reply-all
    • +
  • forward
    • +
  • quote
    • +
  • code
    • +
  • export
    • +
+
    +
  • pencil
    • +
  • feather
    • +
  • print
    • +
  • retweet
    • +
  • keyboard
    • +
  • comment
    • +
+
    +
  • chat
    • +
  • bell
    • +
  • attention
    • +
  • alert
    • +
  • vcard
    • +
  • address
    • +
+
    +
  • location
    • +
  • map
    • +
  • direction
    • +
  • compass
    • +
  • cup
    • +
  • trash
    • +
+
    +
  • doc
    • +
  • docs
    • +
  • doc-landscape
    • +
  • doc-text
    • +
  • doc-text-inv
    • +
  • newspaper
    • +
+
    +
  • book
    • +
  • book-open
    • +
  • folder
    • +
  • archive
    • +
  • box
    • +
  • rss
    • +
+
    +
  • phone
    • +
  • cog
    • +
  • tools
    • +
  • share
    • +
  • shareable
    • +
  • basket
    • +
+
    +
  • bag
    • +
  • calendar
    • +
  • login
    • +
  • logout
    • +
  • mic
    • +
  • mute
    • +
+
    +
  • sound
    • +
  • volume
    • +
  • clock
    • +
  • hourglass
    • +
  • lamp
    • +
  • light-down
    • +
+
    +
  • light-up
    • +
  • adjust
    • +
  • block
    • +
  • resize-full
    • +
  • resize-small
    • +
  • popup
    • +
+
    +
  • publish
    • +
  • window
    • +
  • arrow-combo
    • +
  • down-circled
    • +
  • left-circled
    • +
  • right-circled
    • +
+
    +
  • up-circled
    • +
  • up-open
    • +
  • down-open
    • +
  • left-open
    • +
  • right-open
    • +
  • up-open-mini
    • +
+
    +
  • down-open-mini
    • +
  • left-open-mini
    • +
  • right-open-mini
    • +
  • up-open-big
    • +
  • down-open-big
    • +
  • left-open-big
    • +
+
    +
  • right-open-big
    • +
  • down
    • +
  • arrow-left
    • +
  • arrow-right
    • +
  • up
    • +
  • up-dir
    • +
+
    +
  • down-dir
    • +
  • left-dir
    • +
  • right-dir
    • +
  • up-bold
    • +
  • down-bold
    • +
  • left-bold
    • +
+
    +
  • right-bold
    • +
  • up-thin
    • +
  • down-thin
    • +
  • left-thin
    • +
  • right-thin
    • +
  • ccw
    • +
+
    +
  • cw
    • +
  • arrows-ccw
    • +
  • level-down
    • +
  • level-up
    • +
  • shuffle
    • +
  • loop
    • +
+
    +
  • switch
    • +
  • play
    • +
  • stop
    • +
  • pause
    • +
  • record
    • +
  • to-end
    • +
-
    -
  • to-start
    • -
  • fast-forward
    • -
  • fast-backward
    • -
  • progress-0
    • -
  • progress-1
    • -
  • progress-2
    • -
-
    -
  • progress-3
    • -
  • target
    • -
  • palette
    • -
  • list
    • -
  • list-add
    • -
  • signal
    • -
-
    -
  • trophy
    • -
  • battery
    • -
  • back-in-time
    • -
  • monitor
    • -
  • mobile
    • -
  • network
    • -
-
    -
  • cd
    • -
  • inbox
    • -
  • install
    • -
  • globe
    • -
  • cloud
    • -
  • cloud-thunder
    • -
-
    -
  • flash
    • -
  • moon
    • -
  • flight
    • -
  • paper-plane
    • -
  • leaf
    • -
  • lifebuoy
    • -
-
    -
  • mouse
    • -
  • briefcase
    • -
  • suitcase
    • -
  • dot
    • -
  • dot-2
    • -
  • dot-3
    • -
-
    -
  • brush
    • -
  • magnet
    • -
  • infinity
    • -
  • erase
    • -
  • chart-pie
    • -
  • chart-line
    • -
-
    -
  • chart-bar
    • -
  • chart-area
    • -
  • tape
    • -
  • graduation-cap
    • -
  • language
    • -
  • ticket
    • -
-
    -
  • water
    • -
  • droplet
    • -
  • air
    • -
  • credit-card
    • -
  • floppy
    • -
  • clipboard
    • -
-
    -
  • megaphone
    • -
  • database
    • -
  • drive
    • -
  • bucket
    • -
  • thermometer
    • -
  • key
    • -
-
    -
  • flow-cascade
    • -
  • flow-branch
    • -
  • flow-tree
    • -
  • flow-line
    • -
  • flow-parallel
    • -
  • rocket
    • -
+
    +
  • to-start
    • +
  • fast-forward
    • +
  • fast-backward
    • +
  • progress-0
    • +
  • progress-1
    • +
  • progress-2
    • +
+
    +
  • progress-3
    • +
  • target
    • +
  • palette
    • +
  • list
    • +
  • list-add
    • +
  • signal
    • +
+
    +
  • trophy
    • +
  • battery
    • +
  • back-in-time
    • +
  • monitor
    • +
  • mobile
    • +
  • network
    • +
+
    +
  • cd
    • +
  • inbox
    • +
  • install
    • +
  • globe
    • +
  • cloud
    • +
  • cloud-thunder
    • +
+
    +
  • flash
    • +
  • moon
    • +
  • flight
    • +
  • paper-plane
    • +
  • leaf
    • +
  • lifebuoy
    • +
+
    +
  • mouse
    • +
  • briefcase
    • +
  • suitcase
    • +
  • dot
    • +
  • dot-2
    • +
  • dot-3
    • +
+
    +
  • brush
    • +
  • magnet
    • +
  • infinity
    • +
  • erase
    • +
  • chart-pie
    • +
  • chart-line
    • +
+
    +
  • chart-bar
    • +
  • chart-area
    • +
  • tape
    • +
  • graduation-cap
    • +
  • language
    • +
  • ticket
    • +
+
    +
  • water
    • +
  • droplet
    • +
  • air
    • +
  • credit-card
    • +
  • floppy
    • +
  • clipboard
    • +
+
    +
  • megaphone
    • +
  • database
    • +
  • drive
    • +
  • bucket
    • +
  • thermometer
    • +
  • key
    • +
+
    +
  • flow-cascade
    • +
  • flow-branch
    • +
  • flow-tree
    • +
  • flow-line
    • +
  • flow-parallel
    • +
  • rocket
    • +
-
    -
  • gauge
    • -
  • traffic-cone
    • -
  • cc
    • -
  • cc-by
    • -
  • cc-nc
    • -
  • cc-nc-eu
    • -
-
    -
  • cc-nc-jp
    • -
  • cc-sa
    • -
  • cc-nd
    • -
  • cc-pd
    • -
  • cc-zero
    • -
  • cc-share
    • -
-
    -
  • cc-remix
    • -
  • github
    • -
  • github-circled
    • -
  • flickr
    • -
  • flickr-circled
    • -
  • vimeo
    • -
-
    -
  • vimeo-circled
    • -
  • gplus
    • -
  • gplus-circled
    • -
  • pinterest
    • -
  • pinterest-circled
    • -
  • tumblr
    • -
-
    -
  • tumblr-circled
    • -
  • linkedin
    • -
  • linkedin-circled
    • -
  • dribbble
    • -
  • dribbble-circled
    • -
  • facebook
    • -
-
    -
  • facebook-circled
    • -
  • facebook-squared
    • -
  • twitter
    • -
  • twitter-circled
    • -
  • lastfm
    • -
  • lastfm-circled
    • -
-
    -
  • rdio
    • -
  • rdio-circled
    • -
  • spotify
    • -
  • spotify-circled
    • -
  • instagram
    • -
  • qq
    • -
-
    -
  • dropbox
    • -
  • evernote
    • -
  • skype
    • -
  • skype-circled
    • -
  • flattr
    • -
  • renren
    • -
-
    -
  • sina-weibo
    • -
  • paypal
    • -
  • picasa
    • -
  • soundcloud
    • -
  • mixi
    • -
  • behance
    • -
-
    -
  • google-circles
    • -
  • vkontakte
    • -
  • smashing
    • -
  • sweden
    • -
  • db-shape
    • -
  • logo-db
    • -
+
    +
  • gauge
    • +
  • traffic-cone
    • +
  • cc
    • +
  • cc-by
    • +
  • cc-nc
    • +
  • cc-nc-eu
    • +
+
    +
  • cc-nc-jp
    • +
  • cc-sa
    • +
  • cc-nd
    • +
  • cc-pd
    • +
  • cc-zero
    • +
  • cc-share
    • +
+
    +
  • cc-remix
    • +
  • github
    • +
  • github-circled
    • +
  • flickr
    • +
  • flickr-circled
    • +
  • vimeo
    • +
+
    +
  • vimeo-circled
    • +
  • gplus
    • +
  • gplus-circled
    • +
  • pinterest
    • +
  • pinterest-circled
    • +
  • tumblr
    • +
+
    +
  • tumblr-circled
    • +
  • linkedin
    • +
  • linkedin-circled
    • +
  • dribbble
    • +
  • dribbble-circled
    • +
  • facebook
    • +
+
    +
  • facebook-circled
    • +
  • facebook-squared
    • +
  • twitter
    • +
  • twitter-circled
    • +
  • lastfm
    • +
  • lastfm-circled
    • +
+
    +
  • rdio
    • +
  • rdio-circled
    • +
  • spotify
    • +
  • spotify-circled
    • +
  • instagram
    • +
  • qq
    • +
+
    +
  • dropbox
    • +
  • evernote
    • +
  • skype
    • +
  • skype-circled
    • +
  • flattr
    • +
  • renren
    • +
+
    +
  • sina-weibo
    • +
  • paypal
    • +
  • picasa
    • +
  • soundcloud
    • +
  • mixi
    • +
  • behance
    • +
+
    +
  • google-circles
    • +
  • vkontakte
    • +
  • smashing
    • +
  • sweden
    • +
  • db-shape
    • +
  • logo-db
    • +
-
-
+ + @@ -1191,9 +1195,10 @@

Icon Map

+ --> - + @@ -1214,4 +1219,4 @@

Icon Map

- + \ No newline at end of file From c8b243794a1110a5f61d8d7a7fdfc54c7217a78c Mon Sep 17 00:00:00 2001 From: caouecs Date: Thu, 13 Jun 2013 14:02:34 +0200 Subject: [PATCH 06/57] Revert "ui.html up-to-date with text-center" This reverts commit 88b66ff064bb6a5c4c52960cea31f396ddb219e3. --- ui.html | 1213 +++++++++++++++++++++++++++---------------------------- 1 file changed, 604 insertions(+), 609 deletions(-) diff --git a/ui.html b/ui.html index b674695..c1e15f1 100644 --- a/ui.html +++ b/ui.html @@ -57,7 +57,7 @@
-
+

This is a modal.

Gumby modals are easy to make using Toggles & Switches. The .modal class already has the required styles which you can open and close using Toggles & Switches.

@@ -212,9 +212,6 @@
My Cool Fifth Level Headline
My Cool Sixth Level Headline

This is my awesome paragraph text, it is the base style/size for paragraph text. We love 16px for body copy as it provides for a more consistent cross browser experience. It is also digitally equivalent to to 12pt standard set in print design. We also love the golden ratio, all of the type set here is based off of that deliciously elegant ratio. Enjoy!

-
-

Responsive text will expand to fill the available space

-

ul.disc

@@ -541,643 +538,642 @@

Check Boxes

-
-
-

Tabs

-
-
-

Basic Tabs

- -
-

Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.

-
-
-

Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.

-
-
-

Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.

-

Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio.

-
My cool button
-
-
-
-
-
-

Pill Tabs

- -
-

Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.

-
My cool button
-
-
-

Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.

-
-
-

Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.

-

Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.

-
-
-
-
-
-
-
-

Vertical Tabs

- -
-

Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.

-
-
-

Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.

-
-
My cool button
+

Tabs

+
+
+
+

Basic Tabs

+ +
+

Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.

-
-
-

Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.

-

Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio.

-
-
-
-
-
-
-

Drawers

-

- Open Top Drawer -

-

- Toggle Bottom Drawers -

-

- Close All Drawers -

-
-
-
-

Digital Surgeons

+
+

Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.

+
+
+

Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.

+

Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio.

+
My cool button
+
+
-
-
-
-
-
-

Digital Surgeons

+
+
+

Pill Tabs

+ +
+

Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.

+
My cool button
+
+
+

Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.

+
+
+

Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.

+

Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.

+
+
-
-
-

Digital Surgeons

+
+
+
+

Vertical Tabs

+ +
+

Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.

+
+
+

Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.

+
+
My cool button
+
+
+
+

Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.

+

Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio.

+
+
-
-
-

Modals

-

Open Modal

-
-
-

Skip Links

-
-
-