First version of dimmer added

12 years ago · 7cc76a6b6e
27 changed files with 754 additions and 1618 deletions
--- a/build/minified/collections/grid.min.css
+++ b/build/minified/collections/grid.min.css
--- a/build/minified/modules/dimmer.js
+++ b/build/minified/modules/dimmer.js
@ -13,16 +13,21 @@ $.fn.dimmer = function(parameters) {
  var
    $allModules     = $(this),
    $document       = $(document),
-    
+
    settings        = $.extend(true, {}, $.fn.dimmer.settings, parameters),

    eventNamespace  = '.' + settings.namespace,
    moduleNamespace = 'module-' + settings.namespace,
+    moduleSelector  = $allModules.selector || '',

    selector        = $allModules.selector || '',
    time            = new Date().getTime(),
    performance     = [],

+    namespace       = settings.namespace,
+    className       = settings.className,
+    errors          = settings.errors,
+
    query           = arguments[0],
    methodInvoked   = (typeof query == 'string'),
    queryArguments  = [].slice.call(arguments, 1),
@ -33,61 +38,27 @@ $.fn.dimmer = function(parameters) {
  $allModules
    .each(function() {
      var
-        $module       = $(this),
-        $menu         = $(this).find(settings.selector.menu),
-        $item         = $(this).find(settings.selector.item),
-        $text         = $(this).find(settings.selector.text),
-        $input        = $(this).find(settings.selector.input),
-        
-        isTouchDevice = ('ontouchstart' in document.documentElement),
-        
-        selector      = $module.selector || '',
-        element       = this,
-        instance      = $module.data('module-' + settings.namespace),
-        
-        className     = settings.className,
-        metadata      = settings.metadata,
-        namespace     = settings.namespace,
-        animation     = settings.animation,
-        
-        errors        = settings.errors,
+        $module   = $(this),
+        $dimmer   = $module.children(selector.dimmer),
+
+        element   = this,
+        instance  = $module.data('module-' + namespace),
        module
      ;

      module      = {

        initialize: function() {
-          module.verbose('Initializing dimmer with bound events', $module);
-          if(isTouchDevice) {
-            $module
-              .on('touchstart' + eventNamespace, module.event.test.toggle)
-            ;
-          }
-          else if(settings.on == 'click') {
-            $module
-              .on('click' + eventNamespace, module.event.test.toggle)
-            ;
-          }
-          else if(settings.on == 'hover') {
-            $module
-              .on('mouseenter' + eventNamespace, module.show)
-              .on('mouseleave' + eventNamespace, module.delayedHide)
-            ;
+          if( $module.is(settings.selector.dimmer) ) {
+            $dimmer = $module;
          }
          else {
-            $module
-              .on(settings.on + eventNamespace, module.toggle)
-            ;
-          }
-          if(settings.action == 'form') {
-            module.set.selected();
+            if($dimmer.size() === 0) {
+              module.create();
+            }
+            $dimmer = $module.find(selector.dimmer);
          }
-          $item
-            .on(module.get.selectEvent() + eventNamespace, module.event.item.click)
-          ;
-          $module
-            .data(moduleNamespace, module)
-          ;
+          module.debug('Module initialized with dimmer', $dimmer);
        },

        destroy: function() {
@ -97,290 +68,85 @@ $.fn.dimmer = function(parameters) {
          ;
        },

-        event: {
-
-          stopPropagation: function(event) {
-            event.stopPropagation();
-          },
-
-          test: {
-            toggle: function(event) {
-              module.intent.test(event, module.toggle);
-              event.stopPropagation();
-            },
-            hide: function(event) {
-              module.intent.test(event, module.hide);
-              event.stopPropagation();
-            }
-          },
-
-          item: {
-
-            click: function (event) {
-              var
-                $choice = $(this),
-                text    = $choice.data(metadata.text)  || $choice.text(),
-                value   = $choice.data(metadata.value) || text
-              ;
-              module.verbose('Adding active state to selected item');
-              $item
-                .removeClass(className.active)
-              ;
-              $choice
+        animate: {
+          show: function() {
+            if(settings.animation.show == 'css') {
+              $dimmer
                .addClass(className.active)
              ;
-              module.action.determine(text, value);
-              $.proxy(settings.onChange, $menu.get())(text, value);
-              event.stopPropagation();
            }
-
-          }
-
-        },
-
-        intent: {
-
-          test: function(event, callback) {
-            module.debug('Determining whether event occurred in dimmer', event.target);
-            callback = callback || function(){};
-            if( $(event.target).closest($menu).size() === 0 ) {
-              module.verbose('Triggering event', callback);
-              callback();
-            }
-            else {
-              module.verbose('Event occurred in dimmer, canceling callback');
-            }
-          },
-
-          bind: function() {
-            module.verbose('Binding hide intent event to document');
-            $document
-              .on(module.get.selectEvent(), module.event.test.hide)
-            ;
-          },
-
-          unbind: function() {
-            module.verbose('Removing hide intent event from document');
-            $document
-              .off(module.get.selectEvent())
-            ;
-          }
-
-        },
-
-        action: {
-
-          determine: function(text, value) {
-            if( $.isFunction( module.action[settings.action] ) ) {
-              module.verbose('Triggering preset action', settings.action);
-              module.action[ settings.action ](text, value);
-            }
-            else if( $.isFunction(settings.action) ) {
-              module.verbose('Triggering user action', settings.action);
-              settings.action(text, value);
-            }
-            else {
-              module.error(errors.action);
+            else if(settings.animation.show == 'fade') {
+              $dimmer
+                .fadeTo(settings.duration, settings.opacity)
+              ;
            }
          },
-
-          nothing: function() {},
-
          hide: function() {
-            module.hide();
-          },
-
-          changeText: function(text, value) {
-            module.set.text(text);
-            module.hide();
-          },
-
-          form: function(text, value) {
-            module.set.text(text);
-            module.set.value(value);
-            module.hide();
-          }
-
-        },
-
-        get: {
-          selectEvent: function() {
-            return (isTouchDevice)
-              ? 'touchstart'
-              : 'click'
-            ;
-          },
-          text: function() {
-            return $text.text();
-          },
-          value: function() {
-            return $input.val();
-          },
-          item: function(value) {
-            var 
-              $selectedItem
-            ;
-            value = value || $input.val();
-            $item
-              .each(function() {
-                if( $(this).data(metadata.value) == value ) {
-                  $selectedItem = $(this);
-                }
-              })
-            ;
-            return $selectedItem || false;
-          }
-        },
-
-        set: {
-          text: function(text) {
-            module.debug('Changing text', text);
-            $text.text(text);
-          },
-          value: function(value) {
-            module.debug('Adding selected value to hidden input', value);
-            $input.val(value);
-          },
-          selected: function(value) {
-            var
-              selectedValue = value || $input.val(),
-              $selectedItem = module.get.item(value),
-              selectedText
-            ;
-            if($selectedItem) {
-              module.debug('Setting selected menu item to', $selectedItem);
-              selectedText = $selectedItem.data(metadata.text) || $selectedItem.text();
-              $item
-                .removeClass(className.active)
-              ;
-              $selectedItem 
+            if(settings.animation.show == 'css') {
+              $dimmer
                .addClass(className.active)
              ;
-              module.set.text(selectedText);
+            }
+            else if(settings.animation.show == 'fade') {
+              $dimmer
+                .fadeOut(settings.duration)
+              ;
+            }
+            else if( $.isFunction(settings.animation.hide) ) {
+              $.proxy(settings.animation.hide, $dimmer)();
            }
          }
        },

        is: {
+          enabled: function() {
+            return !$module.hasClass(className.disabled);
+          },
+          disabled: function() {
+            return $module.hasClass(className.disabled);
+          },
          visible: function() {
-            return $menu.is(':visible');
+            return $dimmer.is(':visible');
          },
          hidden: function() {
-            return $menu.is(':not(:visible)');
+            return $dimmer.is(':not(:visible)');
          }
        },

        can: {
-          click: function() {
-            return (isTouchDevice || settings.on == 'click');
-          },
          show: function() {
-            return !$module.hasClass(className.disabled);
-          }
-        },
-
-        animate: {
-          show: function() {
-            module.verbose('Doing menu showing animation');
-            if(animation.show == 'show') {
-              $menu
-                .show()
-              ;
-            }
-            else if(animation.show == 'slide') {
-              $menu
-                .clearQueue()
-                .children()
-                  .clearQueue()
-                  .css('opacity', 0)
-                  .delay(100)
-                  .animate({
-                    opacity : 1
-                  }, 300, 'easeOutQuad')
-                  .end()
-                .slideDown(200, 'easeOutQuad')
-              ;
-            }
-          },
-          hide: function() {
-            module.verbose('Doing menu hiding animation');
-            if(animation.hide == 'hide') {
-              $menu
-                .hide()
-              ;
-            }
-            else if(animation.hide == 'slide') {
-              $menu
-                .clearQueue()
-                .children()
-                  .clearQueue()
-                  .css('opacity', 1)
-                  .animate({
-                    opacity : 0
-                  }, 300, 'easeOutQuad')
-                  .end()
-                .delay(100)
-                .slideUp(200, 'easeOutQuad')
-              ;
-            }
+            return !$dimmer.hasClass(className.disabled);
          }
        },

        show: function() {
-          module.debug('Checking if dimmer can show');
-          clearTimeout(module.graceTimer);
-          if( !module.is.visible() ) {
-            module.hideOthers();
-            $module
-              .addClass(className.visible)
-            ;
+          module.debug('Showing dimmer', $dimmer);
+          if( !module.is.visible() && module.is.enabled() ) {
            module.animate.show();
-            if( module.can.click() ) {
-              module.intent.bind();
-            }
-            $.proxy(settings.onShow, $menu.get())();
+            $.proxy(settings.onShow, $module.get())();
+            $.proxy(settings.onChange, $module.get())();
          }
        },

        hide: function() {
          if( !module.is.hidden() ) {
-            module.debug('Hiding dimmer');
-            $module
-              .removeClass(className.visible)
-            ;
-            if( module.can.click() ) {
-              module.intent.unbind();
-            }
+            module.debug('Hiding dimmer', $dimmer);
            module.animate.hide();
-            $.proxy(settings.onHide, $menu.get())();
+            $.proxy(settings.onHide, $module.get())();
+            $.proxy(settings.onChange, $module.get())();
          }
        },

-        delayedHide: function() {
-          module.verbose('User moused away setting timer to hide dimmer');
-          module.graceTimer = setTimeout(module.hide, settings.gracePeriod);
-        },
-
-        hideOthers: function() {
-          module.verbose('Finding other dimmers to hide');
-          $allModules
-            .not($module)
-              .has(settings.selector.menu + ':visible')
-              .dimmer('hide')
-          ;
-          console.log($allModules.not($module).has(settings.selector.menu + ':visible'));
-        },
-
        toggle: function() {
-          module.verbose('Toggling menu visibility');
-          if(module.can.show()) {
+          module.verbose('Toggling dimmer visibility', $dimmer);
+          if( module.is.hidden() ) {
            module.show();
          }
          else {
            module.hide();
          }
        },
-
+        
        setting: function(name, value) {
          if(value !== undefined) {
            if( $.isPlainObject(name) ) {
@ -442,9 +208,9 @@ $.fn.dimmer = function(parameters) {
              previousTime  = time || currentTime,
              executionTime = currentTime - previousTime;
              time          = currentTime;
-              performance.push({ 
+              performance.push({
                'Element'        : element,
-                'Name'           : message[0], 
+                'Name'           : message[0],
                'Arguments'      : message[1] || 'None',
                'Execution Time' : executionTime
              });
@ -455,11 +221,11 @@ $.fn.dimmer = function(parameters) {
          display: function() {
            var
              title              = settings.moduleName,
-              caption            = settings.moduleName + ': ' + selector + '(' + $allModules.size() + ' elements)',
+              caption            = settings.moduleName + ': ' + moduleSelector + '(' + $allModules.size() + ' elements)',
              totalExecutionTime = 0
            ;
-            if(selector) {
-              title += ' Performance (' + selector + ')';
+            if(moduleSelector) {
+              title += ' Performance (' + moduleSelector + ')';
            }
            if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) {
              console.groupCollapsed(title);
@ -520,7 +286,7 @@ $.fn.dimmer = function(parameters) {
        invokedResponse = module.invoke(query);
      }
      else {
-        if(instance !== undefined) {
+        if(instance === undefined) {
          module.destroy();
        }
        module.initialize();
@ -535,47 +301,37 @@ $.fn.dimmer = function(parameters) {

 $.fn.dimmer.settings = {

-  moduleName  : 'Dropdown Module',
+  moduleName  : 'Dimmer Module',
  namespace   : 'dimmer',
-  
+
  verbose     : true,
  debug       : true,
  performance : false,
-  
-  on          : 'click',
-  gracePeriod : 300,
-  action      : 'hide',
-  
+
  animation   : {
-    show: 'slide',
-    hide: 'slide'
+    show: 'css',
+    hide: 'css'
  },
-  
+
+  duration : 500,
+  opacity  : 0.85,
+
  onChange : function(){},
  onShow   : function(){},
  onHide   : function(){},
-  
+
  errors   : {
-    action   : 'You called a dimmer action that was not defined',
    method   : 'The method you called is not defined.'
  },

-  metadata: {
-    text  : 'text',
-    value : 'value'
-  },
-
-  selector : {
-    menu  : '.menu',
-    item  : '.menu > .item',
-    text  : '> .text',
-    input : '> input[type="hidden"]'
+  selector: {
+    dimmer  : '.ui.dimmer'
  },

  className : {
+    dimmed   : 'dimmed',
    active   : 'active',
-    disabled : 'disabled',
-    visible  : 'visible'
+    disabled : 'disabled'
  }

 };
--- a/build/minified/modules/dimmer.min.css
+++ b/build/minified/modules/dimmer.min.css
@ -0,0 +1 @@
+.ui.dimmer{display:none;position:absolute;top:0;left:0;width:100%;height:100%;background-color:#000;opacity:0;line-height:1;-webkit-transition:background-color .5s ease;-moz-transition:background-color .5s ease;-o-transition:background-color .5s ease;-ms-transition:background-color .5s ease;transition:background-color .5s ease;z-index:100}body>.ui.dimmer{position:fixed}.ui.dimmer.active{opacity:.85;display:block}.ui.disabled.dimmer{display:none!important}.ui.page.dimmer{position:fixed}.ui.inverted.dimmer{background-color:#FFF}.ui.simple.dimmer{display:block;overflow:hidden;opacity:1;height:0;width:0;background-color:rgba(0,0,0,0)}.dimmed>.ui.simple.dimmer{overflow:visible;opacity:1;width:100%;height:100%;background-color:rgba(0,0,0,.85)}.ui.simple.inverted.dimmer{background-color:rgba(255,255,255,0)}.dimmed>.ui.simple.inverted.dimmer{background-color:rgba(255,255,255,.85)}
--- a/build/minified/modules/dimmer.min.js
+++ b/build/minified/modules/dimmer.min.js
--- a/build/minified/modules/dropdown.js
+++ b/build/minified/modules/dropdown.js
@ -373,7 +373,7 @@ $.fn.dropdown = function(parameters) {

        toggle: function() {
          module.verbose('Toggling menu visibility');
-          if(module.can.show()) {
+          if( module.is.hidden() ) {
            module.show();
          }
          else {
--- a/build/minified/modules/dropdown.min.js
+++ b/build/minified/modules/dropdown.min.js
--- a/build/minified/modules/tab.min.js
+++ b/build/minified/modules/tab.min.js
--- a/build/minified/modules/video.min.js
+++ b/build/minified/modules/video.min.js
@ -1 +1 @@
-(function(e,t,n,o){e.fn.video=function(t){var n,i=e.extend(!0,{},e.fn.video.settings,t),a=arguments||!1;return e(this).each(function(){var r,s=e(this),c=s.find(i.selector.placeholder),l=s.find(i.selector.playButton),u=s.find(i.selector.embed),d=s.data("module-"+i.namespace),m="string"==typeof t,f=i.namespace,p=i.metadata,g=i.className;r={initialize:function(){r.debug("Initializing video"),c.off(".video").on("click."+f,r.play),l.off(".video").on("click."+f,r.play),s.data("module-"+f,r)},change:function(e,t){r.debug("Changing video to ",t),s.data(p.source,e).data(p.flv,t),i.onChange()},reset:function(){r.debug("Clearing video embed and showing placeholder"),s.removeClass(g.active),u.html(" "),c.show(),i.onReset()},play:function(){r.debug("Playing video");var e=s.data(p.source),t=s.data(p.flv);u.html(r.generate.html(e,t)),s.addClass(g.active),i.onPlay()},generate:{html:function(e,t){r.debug("Generating embed html");var n,o="auto"==i.width?s.width():i.width,a="auto"==i.height?s.height():i.height;return"vimeo"==e?n='<iframe src="http://player.vimeo.com/video/'+t+"?="+r.generate.url(e)+'"'+' width="'+o+'" height="'+a+'"'+' frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>':"youtube"==e&&(n='<iframe src="http://www.youtube.com/embed/'+t+"?="+r.generate.url(e)+'"'+' width="'+o+'" height="'+a+'"'+' frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>'),n},url:function(e){var t=i.api?1:0,n=i.autoplay?1:0,o=i.hd?1:0,a=i.showUI?1:0,r=i.showUI?0:1,s="";return"vimeo"==e?(s="api="+t+"&amp;title="+a+"&amp;byline="+a+"&amp;portrait="+a+"&amp;autoplay="+n,i.color&&(s+="&amp;color="+i.color)):"youtube"==e&&(s="enablejsapi="+t+"&amp;autoplay="+n+"&amp;autohide="+r+"&amp;hq="+o+"&amp;modestbranding=1",i.color&&(s+="&amp;color="+i.color)),s}},debug:function(e,t){i.debug&&(t!==o?console.info(i.moduleName+": "+e,t):console.info(i.moduleName+": "+e))},error:function(e){console.warn(i.moduleName+": "+e)},invoke:function(t,n,a){var s;return a=a||Array.prototype.slice.call(arguments,2),"string"==typeof t&&d!==o&&(t=t.split("."),e.each(t,function(t,n){return e.isPlainObject(d[n])?(d=d[n],!0):e.isFunction(d[n])?(s=d[n],!0):(r.error(i.errors.method),!1)})),e.isFunction(s)?s.apply(n,a):s}},m?n=r.invoke(a[0],this,Array.prototype.slice.call(a,1)):(d&&r.destroy(),r.initialize())}),n!==o?n:this},e.fn.videoPlaylist=function(t,n){var o=e(this),i=e(t),a=i.find(".embed iframe"),r=e.extend({},e.fn.videoPlaylist.settings,n,!0);o.each(function(){var t=e(this),n=r.metadata,a=r.namespace,s=r.className,c={initialize:function(){t.on("click."+a,c.changeVideo)},changeVideo:function(){var a=t.data(n.flv)||!1,c=t.data(n.source)||!1,l=t.data(n.placeholder)||!1;if(a&&c){if(i.data(n.source,c).data(n.flv,a),r.showPlaceholder)i.removeClass(s.active).find(e.fn.video.selector.placeholder).attr("src",l);else try{i.video("play")}catch(u){console.warn("Video Playlist Module: "+r.error.init)}o.removeClass(s.active),t.addClass(s.active)}}};c.initialize()}),r.playFirst&&(o.eq(0).trigger("click"),a.size()>0&&a.attr("src",a.attr("src").replace("autoplay=1","autoplay=0")))},e.fn.video.settings={moduleName:"Video",namespace:"video",debug:!1,metadata:{source:"source",flv:"flv"},onPlay:function(){},onReset:function(){},onChange:function(){},play:function(){},pause:function(){},stop:function(){},width:"auto",height:"auto",autoplay:!1,color:"#442359",hd:!0,showUI:!1,api:!0,errors:{method:"The method you called is not defined"},className:{active:"active"},selector:{embed:".embed",placeholder:".placeholder",playButton:".play"}},e.fn.videoPlaylist.settings={moduleName:"Video Playlist",namespace:"videoPlaylist",source:"vimeo",showPlaceholder:!1,playFirst:!0,metadata:{flv:"flv",source:"source",placeholder:"placeholder"},errors:{init:"The video player you specified was not yet initialized"},className:{active:"active"}}})(jQuery,window,document);
+(function(e,t,n,o){e.fn.video=function(t){var n,i=e.extend(!0,{},e.fn.video.settings,t),a=arguments||!1;return e(this).each(function(){var r,s=e(this),l=s.find(i.selector.placeholder),c=s.find(i.selector.playButton),u=s.find(i.selector.embed),d=s.data("module-"+i.namespace),m="string"==typeof t,f=i.namespace,p=i.metadata,g=i.className;r={initialize:function(){r.debug("Initializing video"),l.off(".video").on("click."+f,r.play),c.off(".video").on("click."+f,r.play),s.data("module-"+f,r)},change:function(e,t){r.debug("Changing video to ",t),s.data(p.source,e).data(p.flv,t),i.onChange()},reset:function(){r.debug("Clearing video embed and showing placeholder"),s.removeClass(g.active),u.html(" "),l.show(),i.onReset()},play:function(){r.debug("Playing video");var e=s.data(p.source),t=s.data(p.flv);u.html(r.generate.html(e,t)),s.addClass(g.active),i.onPlay()},generate:{html:function(e,t){r.debug("Generating embed html");var n,o="auto"==i.width?s.width():i.width,a="auto"==i.height?s.height():i.height;return"vimeo"==e?n='<iframe src="http://player.vimeo.com/video/'+t+"?="+r.generate.url(e)+'"'+' width="'+o+'" height="'+a+'"'+' frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>':"youtube"==e&&(n='<iframe src="http://www.youtube.com/embed/'+t+"?="+r.generate.url(e)+'"'+' width="'+o+'" height="'+a+'"'+' frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>'),n},url:function(e){var t=i.api?1:0,n=i.autoplay?1:0,o=i.hd?1:0,a=i.showUI?1:0,r=i.showUI?0:1,s="";return"vimeo"==e?(s="api="+t+"&amp;title="+a+"&amp;byline="+a+"&amp;portrait="+a+"&amp;autoplay="+n,i.color&&(s+="&amp;color="+i.color)):"youtube"==e&&(s="enablejsapi="+t+"&amp;autoplay="+n+"&amp;autohide="+r+"&amp;hq="+o+"&amp;modestbranding=1",i.color&&(s+="&amp;color="+i.color)),s}},debug:function(e,t){i.debug&&(t!==o?console.info(i.moduleName+": "+e,t):console.info(i.moduleName+": "+e))},error:function(e){console.warn(i.moduleName+": "+e)},invoke:function(t,n,a){var s;return a=a||Array.prototype.slice.call(arguments,2),"string"==typeof t&&d!==o&&(t=t.split("."),e.each(t,function(t,n){return e.isPlainObject(d[n])?(d=d[n],!0):e.isFunction(d[n])?(s=d[n],!0):(r.error(i.errors.method),!1)})),e.isFunction(s)?s.apply(n,a):s}},m?n=r.invoke(a[0],this,Array.prototype.slice.call(a,1)):(d&&r.destroy(),r.initialize())}),n!==o?n:this},e.fn.videoPlaylist=function(t,n){var o=e(this),i=e(t),a=i.find(".embed iframe"),r=e.extend({},e.fn.videoPlaylist.settings,n,!0);o.each(function(){var t=e(this),n=r.metadata,a=r.namespace,s=r.className,l={initialize:function(){t.on("click."+a,l.changeVideo)},changeVideo:function(){var a=t.data(n.flv)||!1,l=t.data(n.source)||!1,c=t.data(n.placeholder)||!1;if(a&&l){if(i.data(n.source,l).data(n.flv,a),r.showPlaceholder)i.removeClass(s.active).find(e.fn.video.selector.placeholder).attr("src",c);else try{i.video("play")}catch(u){console.warn("Video Playlist Module: "+r.error.init)}o.removeClass(s.active),t.addClass(s.active)}}};l.initialize()}),r.playFirst&&(o.eq(0).trigger("click"),a.size()>0&&a.attr("src",a.attr("src").replace("autoplay=1","autoplay=0")))},e.fn.video.settings={moduleName:"Video",namespace:"video",debug:!1,metadata:{source:"source",flv:"flv"},onPlay:function(){},onReset:function(){},onChange:function(){},play:function(){},pause:function(){},stop:function(){},width:"auto",height:"auto",autoplay:!1,color:"#442359",hd:!0,showUI:!1,api:!0,errors:{method:"The method you called is not defined"},className:{active:"active"},selector:{embed:".embed",placeholder:".placeholder",playButton:".play"}},e.fn.videoPlaylist.settings={moduleName:"Video Playlist",namespace:"videoPlaylist",source:"vimeo",showPlaceholder:!1,playFirst:!0,metadata:{flv:"flv",source:"source",placeholder:"placeholder"},errors:{init:"The video player you specified was not yet initialized"},className:{active:"active"}}})(jQuery,window,document);
--- a/build/packaged/modules/dimmer.js
+++ b/build/packaged/modules/dimmer.js
@ -13,16 +13,21 @@ $.fn.dimmer = function(parameters) {
  var
    $allModules     = $(this),
    $document       = $(document),
-    
+
    settings        = $.extend(true, {}, $.fn.dimmer.settings, parameters),

    eventNamespace  = '.' + settings.namespace,
    moduleNamespace = 'module-' + settings.namespace,
+    moduleSelector  = $allModules.selector || '',

    selector        = $allModules.selector || '',
    time            = new Date().getTime(),
    performance     = [],

+    namespace       = settings.namespace,
+    className       = settings.className,
+    errors          = settings.errors,
+
    query           = arguments[0],
    methodInvoked   = (typeof query == 'string'),
    queryArguments  = [].slice.call(arguments, 1),
@ -33,61 +38,27 @@ $.fn.dimmer = function(parameters) {
  $allModules
    .each(function() {
      var
-        $module       = $(this),
-        $menu         = $(this).find(settings.selector.menu),
-        $item         = $(this).find(settings.selector.item),
-        $text         = $(this).find(settings.selector.text),
-        $input        = $(this).find(settings.selector.input),
-        
-        isTouchDevice = ('ontouchstart' in document.documentElement),
-        
-        selector      = $module.selector || '',
-        element       = this,
-        instance      = $module.data('module-' + settings.namespace),
-        
-        className     = settings.className,
-        metadata      = settings.metadata,
-        namespace     = settings.namespace,
-        animation     = settings.animation,
-        
-        errors        = settings.errors,
+        $module   = $(this),
+        $dimmer   = $module.children(selector.dimmer),
+
+        element   = this,
+        instance  = $module.data('module-' + namespace),
        module
      ;

      module      = {

        initialize: function() {
-          module.verbose('Initializing dimmer with bound events', $module);
-          if(isTouchDevice) {
-            $module
-              .on('touchstart' + eventNamespace, module.event.test.toggle)
-            ;
-          }
-          else if(settings.on == 'click') {
-            $module
-              .on('click' + eventNamespace, module.event.test.toggle)
-            ;
-          }
-          else if(settings.on == 'hover') {
-            $module
-              .on('mouseenter' + eventNamespace, module.show)
-              .on('mouseleave' + eventNamespace, module.delayedHide)
-            ;
+          if( $module.is(settings.selector.dimmer) ) {
+            $dimmer = $module;
          }
          else {
-            $module
-              .on(settings.on + eventNamespace, module.toggle)
-            ;
-          }
-          if(settings.action == 'form') {
-            module.set.selected();
+            if($dimmer.size() === 0) {
+              module.create();
+            }
+            $dimmer = $module.find(selector.dimmer);
          }
-          $item
-            .on(module.get.selectEvent() + eventNamespace, module.event.item.click)
-          ;
-          $module
-            .data(moduleNamespace, module)
-          ;
+          module.debug('Module initialized with dimmer', $dimmer);
        },

        destroy: function() {
@ -97,290 +68,85 @@ $.fn.dimmer = function(parameters) {
          ;
        },

-        event: {
-
-          stopPropagation: function(event) {
-            event.stopPropagation();
-          },
-
-          test: {
-            toggle: function(event) {
-              module.intent.test(event, module.toggle);
-              event.stopPropagation();
-            },
-            hide: function(event) {
-              module.intent.test(event, module.hide);
-              event.stopPropagation();
-            }
-          },
-
-          item: {
-
-            click: function (event) {
-              var
-                $choice = $(this),
-                text    = $choice.data(metadata.text)  || $choice.text(),
-                value   = $choice.data(metadata.value) || text
-              ;
-              module.verbose('Adding active state to selected item');
-              $item
-                .removeClass(className.active)
-              ;
-              $choice
+        animate: {
+          show: function() {
+            if(settings.animation.show == 'css') {
+              $dimmer
                .addClass(className.active)
              ;
-              module.action.determine(text, value);
-              $.proxy(settings.onChange, $menu.get())(text, value);
-              event.stopPropagation();
            }
-
-          }
-
-        },
-
-        intent: {
-
-          test: function(event, callback) {
-            module.debug('Determining whether event occurred in dimmer', event.target);
-            callback = callback || function(){};
-            if( $(event.target).closest($menu).size() === 0 ) {
-              module.verbose('Triggering event', callback);
-              callback();
-            }
-            else {
-              module.verbose('Event occurred in dimmer, canceling callback');
-            }
-          },
-
-          bind: function() {
-            module.verbose('Binding hide intent event to document');
-            $document
-              .on(module.get.selectEvent(), module.event.test.hide)
-            ;
-          },
-
-          unbind: function() {
-            module.verbose('Removing hide intent event from document');
-            $document
-              .off(module.get.selectEvent())
-            ;
-          }
-
-        },
-
-        action: {
-
-          determine: function(text, value) {
-            if( $.isFunction( module.action[settings.action] ) ) {
-              module.verbose('Triggering preset action', settings.action);
-              module.action[ settings.action ](text, value);
-            }
-            else if( $.isFunction(settings.action) ) {
-              module.verbose('Triggering user action', settings.action);
-              settings.action(text, value);
-            }
-            else {
-              module.error(errors.action);
+            else if(settings.animation.show == 'fade') {
+              $dimmer
+                .fadeTo(settings.duration, settings.opacity)
+              ;
            }
          },
-
-          nothing: function() {},
-
          hide: function() {
-            module.hide();
-          },
-
-          changeText: function(text, value) {
-            module.set.text(text);
-            module.hide();
-          },
-
-          form: function(text, value) {
-            module.set.text(text);
-            module.set.value(value);
-            module.hide();
-          }
-
-        },
-
-        get: {
-          selectEvent: function() {
-            return (isTouchDevice)
-              ? 'touchstart'
-              : 'click'
-            ;
-          },
-          text: function() {
-            return $text.text();
-          },
-          value: function() {
-            return $input.val();
-          },
-          item: function(value) {
-            var 
-              $selectedItem
-            ;
-            value = value || $input.val();
-            $item
-              .each(function() {
-                if( $(this).data(metadata.value) == value ) {
-                  $selectedItem = $(this);
-                }
-              })
-            ;
-            return $selectedItem || false;
-          }
-        },
-
-        set: {
-          text: function(text) {
-            module.debug('Changing text', text);
-            $text.text(text);
-          },
-          value: function(value) {
-            module.debug('Adding selected value to hidden input', value);
-            $input.val(value);
-          },
-          selected: function(value) {
-            var
-              selectedValue = value || $input.val(),
-              $selectedItem = module.get.item(value),
-              selectedText
-            ;
-            if($selectedItem) {
-              module.debug('Setting selected menu item to', $selectedItem);
-              selectedText = $selectedItem.data(metadata.text) || $selectedItem.text();
-              $item
-                .removeClass(className.active)
-              ;
-              $selectedItem 
+            if(settings.animation.show == 'css') {
+              $dimmer
                .addClass(className.active)
              ;
-              module.set.text(selectedText);
+            }
+            else if(settings.animation.show == 'fade') {
+              $dimmer
+                .fadeOut(settings.duration)
+              ;
+            }
+            else if( $.isFunction(settings.animation.hide) ) {
+              $.proxy(settings.animation.hide, $dimmer)();
            }
          }
        },

        is: {
+          enabled: function() {
+            return !$module.hasClass(className.disabled);
+          },
+          disabled: function() {
+            return $module.hasClass(className.disabled);
+          },
          visible: function() {
-            return $menu.is(':visible');
+            return $dimmer.is(':visible');
          },
          hidden: function() {
-            return $menu.is(':not(:visible)');
+            return $dimmer.is(':not(:visible)');
          }
        },

        can: {
-          click: function() {
-            return (isTouchDevice || settings.on == 'click');
-          },
          show: function() {
-            return !$module.hasClass(className.disabled);
-          }
-        },
-
-        animate: {
-          show: function() {
-            module.verbose('Doing menu showing animation');
-            if(animation.show == 'show') {
-              $menu
-                .show()
-              ;
-            }
-            else if(animation.show == 'slide') {
-              $menu
-                .clearQueue()
-                .children()
-                  .clearQueue()
-                  .css('opacity', 0)
-                  .delay(100)
-                  .animate({
-                    opacity : 1
-                  }, 300, 'easeOutQuad')
-                  .end()
-                .slideDown(200, 'easeOutQuad')
-              ;
-            }
-          },
-          hide: function() {
-            module.verbose('Doing menu hiding animation');
-            if(animation.hide == 'hide') {
-              $menu
-                .hide()
-              ;
-            }
-            else if(animation.hide == 'slide') {
-              $menu
-                .clearQueue()
-                .children()
-                  .clearQueue()
-                  .css('opacity', 1)
-                  .animate({
-                    opacity : 0
-                  }, 300, 'easeOutQuad')
-                  .end()
-                .delay(100)
-                .slideUp(200, 'easeOutQuad')
-              ;
-            }
+            return !$dimmer.hasClass(className.disabled);
          }
        },

        show: function() {
-          module.debug('Checking if dimmer can show');
-          clearTimeout(module.graceTimer);
-          if( !module.is.visible() ) {
-            module.hideOthers();
-            $module
-              .addClass(className.visible)
-            ;
+          module.debug('Showing dimmer', $dimmer);
+          if( !module.is.visible() && module.is.enabled() ) {
            module.animate.show();
-            if( module.can.click() ) {
-              module.intent.bind();
-            }
-            $.proxy(settings.onShow, $menu.get())();
+            $.proxy(settings.onShow, $module.get())();
+            $.proxy(settings.onChange, $module.get())();
          }
        },

        hide: function() {
          if( !module.is.hidden() ) {
-            module.debug('Hiding dimmer');
-            $module
-              .removeClass(className.visible)
-            ;
-            if( module.can.click() ) {
-              module.intent.unbind();
-            }
+            module.debug('Hiding dimmer', $dimmer);
            module.animate.hide();
-            $.proxy(settings.onHide, $menu.get())();
+            $.proxy(settings.onHide, $module.get())();
+            $.proxy(settings.onChange, $module.get())();
          }
        },

-        delayedHide: function() {
-          module.verbose('User moused away setting timer to hide dimmer');
-          module.graceTimer = setTimeout(module.hide, settings.gracePeriod);
-        },
-
-        hideOthers: function() {
-          module.verbose('Finding other dimmers to hide');
-          $allModules
-            .not($module)
-              .has(settings.selector.menu + ':visible')
-              .dimmer('hide')
-          ;
-          console.log($allModules.not($module).has(settings.selector.menu + ':visible'));
-        },
-
        toggle: function() {
-          module.verbose('Toggling menu visibility');
-          if(module.can.show()) {
+          module.verbose('Toggling dimmer visibility', $dimmer);
+          if( module.is.hidden() ) {
            module.show();
          }
          else {
            module.hide();
          }
        },
-
+        
        setting: function(name, value) {
          if(value !== undefined) {
            if( $.isPlainObject(name) ) {
@ -442,9 +208,9 @@ $.fn.dimmer = function(parameters) {
              previousTime  = time || currentTime,
              executionTime = currentTime - previousTime;
              time          = currentTime;
-              performance.push({ 
+              performance.push({
                'Element'        : element,
-                'Name'           : message[0], 
+                'Name'           : message[0],
                'Arguments'      : message[1] || 'None',
                'Execution Time' : executionTime
              });
@ -455,11 +221,11 @@ $.fn.dimmer = function(parameters) {
          display: function() {
            var
              title              = settings.moduleName,
-              caption            = settings.moduleName + ': ' + selector + '(' + $allModules.size() + ' elements)',
+              caption            = settings.moduleName + ': ' + moduleSelector + '(' + $allModules.size() + ' elements)',
              totalExecutionTime = 0
            ;
-            if(selector) {
-              title += ' Performance (' + selector + ')';
+            if(moduleSelector) {
+              title += ' Performance (' + moduleSelector + ')';
            }
            if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) {
              console.groupCollapsed(title);
@ -520,7 +286,7 @@ $.fn.dimmer = function(parameters) {
        invokedResponse = module.invoke(query);
      }
      else {
-        if(instance !== undefined) {
+        if(instance === undefined) {
          module.destroy();
        }
        module.initialize();
@ -535,47 +301,37 @@ $.fn.dimmer = function(parameters) {

 $.fn.dimmer.settings = {

-  moduleName  : 'Dropdown Module',
+  moduleName  : 'Dimmer Module',
  namespace   : 'dimmer',
-  
+
  verbose     : true,
  debug       : true,
  performance : false,
-  
-  on          : 'click',
-  gracePeriod : 300,
-  action      : 'hide',
-  
+
  animation   : {
-    show: 'slide',
-    hide: 'slide'
+    show: 'css',
+    hide: 'css'
  },
-  
+
+  duration : 500,
+  opacity  : 0.85,
+
  onChange : function(){},
  onShow   : function(){},
  onHide   : function(){},
-  
+
  errors   : {
-    action   : 'You called a dimmer action that was not defined',
    method   : 'The method you called is not defined.'
  },

-  metadata: {
-    text  : 'text',
-    value : 'value'
-  },
-
-  selector : {
-    menu  : '.menu',
-    item  : '.menu > .item',
-    text  : '> .text',
-    input : '> input[type="hidden"]'
+  selector: {
+    dimmer  : '.ui.dimmer'
  },

  className : {
+    dimmed   : 'dimmed',
    active   : 'active',
-    disabled : 'disabled',
-    visible  : 'visible'
+    disabled : 'disabled'
  }

 };
--- a/build/packaged/modules/dropdown.js
+++ b/build/packaged/modules/dropdown.js
@ -373,7 +373,7 @@ $.fn.dropdown = function(parameters) {

        toggle: function() {
          module.verbose('Toggling menu visibility');
-          if(module.can.show()) {
+          if( module.is.hidden() ) {
            module.show();
          }
          else {
--- a/build/packaged/semantic.min.css
+++ b/build/packaged/semantic.min.css
--- a/build/packaged/semantic.min.js
+++ b/build/packaged/semantic.min.js
--- a/build/uncompressed/collections/grid.css
+++ b/build/uncompressed/collections/grid.css
@ -252,6 +252,8 @@
 .ui.divided.grid,
 .ui.divided.grid > .row {
  display: table;
+  margin-left: 0%;
+  margin-right: 0%;
 }
 .ui.divided.grid > .column,
 .ui.divided.grid > .row > .column {
@ -271,6 +273,8 @@
 -----------------------*/
 .ui.celled.grid {
  display: table;
+  margin-left: 0%;
+  margin-right: 0%;
  -webkit-box-shadow: 0px 0px 0px 1px #DFDFDF;
  -moz-box-shadow: 0px 0px 0px 1px #DFDFDF;
  box-shadow: 0px 0px 0px 1px #DFDFDF;
--- a/build/uncompressed/modules/dimmer.css
+++ b/build/uncompressed/modules/dimmer.css
@ -0,0 +1,84 @@
+/*
+ * # Semantic Dimmer
+ * http://github.com/quirkyinc/semantic
+ *
+ *
+ * Copyright 2013 Contributors
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ * Released: April 17 2013
+ */
+/*******************************
+            Dimmer
+*******************************/
+.ui.dimmer {
+  display: none;
+  position: absolute;
+  top: 0em;
+  left: 0em;
+  width: 100%;
+  height: 100%;
+  background-color: #000000;
+  opacity: 0;
+  line-height: 1;
+  -webkit-transition: background-color 0.5s ease;
+  -moz-transition: background-color 0.5s ease;
+  -o-transition: background-color 0.5s ease;
+  -ms-transition: background-color 0.5s ease;
+  transition: background-color 0.5s ease;
+  z-index: 100;
+}
+body > .ui.dimmer {
+  position: fixed;
+}
+/*******************************
+            States
+*******************************/
+.ui.dimmer.active {
+  opacity: 0.85;
+  display: block;
+}
+.ui.disabled.dimmer {
+  display: none !important;
+}
+/*******************************
+           Variations
+*******************************/
+/*--------------
+    Page
+---------------*/
+.ui.page.dimmer {
+  position: fixed;
+}
+/*--------------
+    Inverted
+---------------*/
+.ui.inverted.dimmer {
+  background-color: #FFFFFF;
+}
+/*--------------
+     Simple
+---------------*/
+/* Displays without javascript */
+.ui.simple.dimmer {
+  display: block;
+  overflow: hidden;
+  opacity: 1;
+  height: 0px;
+  width: 0px;
+  background-color: rgba(0, 0, 0, 0);
+}
+.dimmed > .ui.simple.dimmer {
+  overflow: visible;
+  opacity: 1;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.85);
+}
+.ui.simple.inverted.dimmer {
+  background-color: rgba(255, 255, 255, 0);
+}
+.dimmed > .ui.simple.inverted.dimmer {
+  background-color: rgba(255, 255, 255, 0.85);
+}
--- a/build/uncompressed/modules/dimmer.js
+++ b/build/uncompressed/modules/dimmer.js
@ -13,16 +13,21 @@ $.fn.dimmer = function(parameters) {
  var
    $allModules     = $(this),
    $document       = $(document),
-    
+
    settings        = $.extend(true, {}, $.fn.dimmer.settings, parameters),

    eventNamespace  = '.' + settings.namespace,
    moduleNamespace = 'module-' + settings.namespace,
+    moduleSelector  = $allModules.selector || '',

    selector        = $allModules.selector || '',
    time            = new Date().getTime(),
    performance     = [],

+    namespace       = settings.namespace,
+    className       = settings.className,
+    errors          = settings.errors,
+
    query           = arguments[0],
    methodInvoked   = (typeof query == 'string'),
    queryArguments  = [].slice.call(arguments, 1),
@ -33,61 +38,27 @@ $.fn.dimmer = function(parameters) {
  $allModules
    .each(function() {
      var
-        $module       = $(this),
-        $menu         = $(this).find(settings.selector.menu),
-        $item         = $(this).find(settings.selector.item),
-        $text         = $(this).find(settings.selector.text),
-        $input        = $(this).find(settings.selector.input),
-        
-        isTouchDevice = ('ontouchstart' in document.documentElement),
-        
-        selector      = $module.selector || '',
-        element       = this,
-        instance      = $module.data('module-' + settings.namespace),
-        
-        className     = settings.className,
-        metadata      = settings.metadata,
-        namespace     = settings.namespace,
-        animation     = settings.animation,
-        
-        errors        = settings.errors,
+        $module   = $(this),
+        $dimmer   = $module.children(selector.dimmer),
+
+        element   = this,
+        instance  = $module.data('module-' + namespace),
        module
      ;

      module      = {

        initialize: function() {
-          module.verbose('Initializing dimmer with bound events', $module);
-          if(isTouchDevice) {
-            $module
-              .on('touchstart' + eventNamespace, module.event.test.toggle)
-            ;
-          }
-          else if(settings.on == 'click') {
-            $module
-              .on('click' + eventNamespace, module.event.test.toggle)
-            ;
-          }
-          else if(settings.on == 'hover') {
-            $module
-              .on('mouseenter' + eventNamespace, module.show)
-              .on('mouseleave' + eventNamespace, module.delayedHide)
-            ;
+          if( $module.is(settings.selector.dimmer) ) {
+            $dimmer = $module;
          }
          else {
-            $module
-              .on(settings.on + eventNamespace, module.toggle)
-            ;
-          }
-          if(settings.action == 'form') {
-            module.set.selected();
+            if($dimmer.size() === 0) {
+              module.create();
+            }
+            $dimmer = $module.find(selector.dimmer);
          }
-          $item
-            .on(module.get.selectEvent() + eventNamespace, module.event.item.click)
-          ;
-          $module
-            .data(moduleNamespace, module)
-          ;
+          module.debug('Module initialized with dimmer', $dimmer);
        },

        destroy: function() {
@ -97,290 +68,85 @@ $.fn.dimmer = function(parameters) {
          ;
        },

-        event: {
-
-          stopPropagation: function(event) {
-            event.stopPropagation();
-          },
-
-          test: {
-            toggle: function(event) {
-              module.intent.test(event, module.toggle);
-              event.stopPropagation();
-            },
-            hide: function(event) {
-              module.intent.test(event, module.hide);
-              event.stopPropagation();
-            }
-          },
-
-          item: {
-
-            click: function (event) {
-              var
-                $choice = $(this),
-                text    = $choice.data(metadata.text)  || $choice.text(),
-                value   = $choice.data(metadata.value) || text
-              ;
-              module.verbose('Adding active state to selected item');
-              $item
-                .removeClass(className.active)
-              ;
-              $choice
+        animate: {
+          show: function() {
+            if(settings.animation.show == 'css') {
+              $dimmer
                .addClass(className.active)
              ;
-              module.action.determine(text, value);
-              $.proxy(settings.onChange, $menu.get())(text, value);
-              event.stopPropagation();
            }
-
-          }
-
-        },
-
-        intent: {
-
-          test: function(event, callback) {
-            module.debug('Determining whether event occurred in dimmer', event.target);
-            callback = callback || function(){};
-            if( $(event.target).closest($menu).size() === 0 ) {
-              module.verbose('Triggering event', callback);
-              callback();
-            }
-            else {
-              module.verbose('Event occurred in dimmer, canceling callback');
-            }
-          },
-
-          bind: function() {
-            module.verbose('Binding hide intent event to document');
-            $document
-              .on(module.get.selectEvent(), module.event.test.hide)
-            ;
-          },
-
-          unbind: function() {
-            module.verbose('Removing hide intent event from document');
-            $document
-              .off(module.get.selectEvent())
-            ;
-          }
-
-        },
-
-        action: {
-
-          determine: function(text, value) {
-            if( $.isFunction( module.action[settings.action] ) ) {
-              module.verbose('Triggering preset action', settings.action);
-              module.action[ settings.action ](text, value);
-            }
-            else if( $.isFunction(settings.action) ) {
-              module.verbose('Triggering user action', settings.action);
-              settings.action(text, value);
-            }
-            else {
-              module.error(errors.action);
+            else if(settings.animation.show == 'fade') {
+              $dimmer
+                .fadeTo(settings.duration, settings.opacity)
+              ;
            }
          },
-
-          nothing: function() {},
-
          hide: function() {
-            module.hide();
-          },
-
-          changeText: function(text, value) {
-            module.set.text(text);
-            module.hide();
-          },
-
-          form: function(text, value) {
-            module.set.text(text);
-            module.set.value(value);
-            module.hide();
-          }
-
-        },
-
-        get: {
-          selectEvent: function() {
-            return (isTouchDevice)
-              ? 'touchstart'
-              : 'click'
-            ;
-          },
-          text: function() {
-            return $text.text();
-          },
-          value: function() {
-            return $input.val();
-          },
-          item: function(value) {
-            var 
-              $selectedItem
-            ;
-            value = value || $input.val();
-            $item
-              .each(function() {
-                if( $(this).data(metadata.value) == value ) {
-                  $selectedItem = $(this);
-                }
-              })
-            ;
-            return $selectedItem || false;
-          }
-        },
-
-        set: {
-          text: function(text) {
-            module.debug('Changing text', text);
-            $text.text(text);
-          },
-          value: function(value) {
-            module.debug('Adding selected value to hidden input', value);
-            $input.val(value);
-          },
-          selected: function(value) {
-            var
-              selectedValue = value || $input.val(),
-              $selectedItem = module.get.item(value),
-              selectedText
-            ;
-            if($selectedItem) {
-              module.debug('Setting selected menu item to', $selectedItem);
-              selectedText = $selectedItem.data(metadata.text) || $selectedItem.text();
-              $item
-                .removeClass(className.active)
-              ;
-              $selectedItem 
+            if(settings.animation.show == 'css') {
+              $dimmer
                .addClass(className.active)
              ;
-              module.set.text(selectedText);
+            }
+            else if(settings.animation.show == 'fade') {
+              $dimmer
+                .fadeOut(settings.duration)
+              ;
+            }
+            else if( $.isFunction(settings.animation.hide) ) {
+              $.proxy(settings.animation.hide, $dimmer)();
            }
          }
        },

        is: {
+          enabled: function() {
+            return !$module.hasClass(className.disabled);
+          },
+          disabled: function() {
+            return $module.hasClass(className.disabled);
+          },
          visible: function() {
-            return $menu.is(':visible');
+            return $dimmer.is(':visible');
          },
          hidden: function() {
-            return $menu.is(':not(:visible)');
+            return $dimmer.is(':not(:visible)');
          }
        },

        can: {
-          click: function() {
-            return (isTouchDevice || settings.on == 'click');
-          },
          show: function() {
-            return !$module.hasClass(className.disabled);
-          }
-        },
-
-        animate: {
-          show: function() {
-            module.verbose('Doing menu showing animation');
-            if(animation.show == 'show') {
-              $menu
-                .show()
-              ;
-            }
-            else if(animation.show == 'slide') {
-              $menu
-                .clearQueue()
-                .children()
-                  .clearQueue()
-                  .css('opacity', 0)
-                  .delay(100)
-                  .animate({
-                    opacity : 1
-                  }, 300, 'easeOutQuad')
-                  .end()
-                .slideDown(200, 'easeOutQuad')
-              ;
-            }
-          },
-          hide: function() {
-            module.verbose('Doing menu hiding animation');
-            if(animation.hide == 'hide') {
-              $menu
-                .hide()
-              ;
-            }
-            else if(animation.hide == 'slide') {
-              $menu
-                .clearQueue()
-                .children()
-                  .clearQueue()
-                  .css('opacity', 1)
-                  .animate({
-                    opacity : 0
-                  }, 300, 'easeOutQuad')
-                  .end()
-                .delay(100)
-                .slideUp(200, 'easeOutQuad')
-              ;
-            }
+            return !$dimmer.hasClass(className.disabled);
          }
        },

        show: function() {
-          module.debug('Checking if dimmer can show');
-          clearTimeout(module.graceTimer);
-          if( !module.is.visible() ) {
-            module.hideOthers();
-            $module
-              .addClass(className.visible)
-            ;
+          module.debug('Showing dimmer', $dimmer);
+          if( !module.is.visible() && module.is.enabled() ) {
            module.animate.show();
-            if( module.can.click() ) {
-              module.intent.bind();
-            }
-            $.proxy(settings.onShow, $menu.get())();
+            $.proxy(settings.onShow, $module.get())();
+            $.proxy(settings.onChange, $module.get())();
          }
        },

        hide: function() {
          if( !module.is.hidden() ) {
-            module.debug('Hiding dimmer');
-            $module
-              .removeClass(className.visible)
-            ;
-            if( module.can.click() ) {
-              module.intent.unbind();
-            }
+            module.debug('Hiding dimmer', $dimmer);
            module.animate.hide();
-            $.proxy(settings.onHide, $menu.get())();
+            $.proxy(settings.onHide, $module.get())();
+            $.proxy(settings.onChange, $module.get())();
          }
        },

-        delayedHide: function() {
-          module.verbose('User moused away setting timer to hide dimmer');
-          module.graceTimer = setTimeout(module.hide, settings.gracePeriod);
-        },
-
-        hideOthers: function() {
-          module.verbose('Finding other dimmers to hide');
-          $allModules
-            .not($module)
-              .has(settings.selector.menu + ':visible')
-              .dimmer('hide')
-          ;
-          console.log($allModules.not($module).has(settings.selector.menu + ':visible'));
-        },
-
        toggle: function() {
-          module.verbose('Toggling menu visibility');
-          if(module.can.show()) {
+          module.verbose('Toggling dimmer visibility', $dimmer);
+          if( module.is.hidden() ) {
            module.show();
          }
          else {
            module.hide();
          }
        },
-
+        
        setting: function(name, value) {
          if(value !== undefined) {
            if( $.isPlainObject(name) ) {
@ -442,9 +208,9 @@ $.fn.dimmer = function(parameters) {
              previousTime  = time || currentTime,
              executionTime = currentTime - previousTime;
              time          = currentTime;
-              performance.push({ 
+              performance.push({
                'Element'        : element,
-                'Name'           : message[0], 
+                'Name'           : message[0],
                'Arguments'      : message[1] || 'None',
                'Execution Time' : executionTime
              });
@ -455,11 +221,11 @@ $.fn.dimmer = function(parameters) {
          display: function() {
            var
              title              = settings.moduleName,
-              caption            = settings.moduleName + ': ' + selector + '(' + $allModules.size() + ' elements)',
+              caption            = settings.moduleName + ': ' + moduleSelector + '(' + $allModules.size() + ' elements)',
              totalExecutionTime = 0
            ;
-            if(selector) {
-              title += ' Performance (' + selector + ')';
+            if(moduleSelector) {
+              title += ' Performance (' + moduleSelector + ')';
            }
            if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) {
              console.groupCollapsed(title);
@ -520,7 +286,7 @@ $.fn.dimmer = function(parameters) {
        invokedResponse = module.invoke(query);
      }
      else {
-        if(instance !== undefined) {
+        if(instance === undefined) {
          module.destroy();
        }
        module.initialize();
@ -535,47 +301,37 @@ $.fn.dimmer = function(parameters) {

 $.fn.dimmer.settings = {

-  moduleName  : 'Dropdown Module',
+  moduleName  : 'Dimmer Module',
  namespace   : 'dimmer',
-  
+
  verbose     : true,
  debug       : true,
  performance : false,
-  
-  on          : 'click',
-  gracePeriod : 300,
-  action      : 'hide',
-  
+
  animation   : {
-    show: 'slide',
-    hide: 'slide'
+    show: 'css',
+    hide: 'css'
  },
-  
+
+  duration : 500,
+  opacity  : 0.85,
+
  onChange : function(){},
  onShow   : function(){},
  onHide   : function(){},
-  
+
  errors   : {
-    action   : 'You called a dimmer action that was not defined',
    method   : 'The method you called is not defined.'
  },

-  metadata: {
-    text  : 'text',
-    value : 'value'
-  },
-
-  selector : {
-    menu  : '.menu',
-    item  : '.menu > .item',
-    text  : '> .text',
-    input : '> input[type="hidden"]'
+  selector: {
+    dimmer  : '.ui.dimmer'
  },

  className : {
+    dimmed   : 'dimmed',
    active   : 'active',
-    disabled : 'disabled',
-    visible  : 'visible'
+    disabled : 'disabled'
  }

 };
--- a/build/uncompressed/modules/dropdown.js
+++ b/build/uncompressed/modules/dropdown.js
@ -373,7 +373,7 @@ $.fn.dropdown = function(parameters) {

        toggle: function() {
          module.verbose('Toggling menu visibility');
-          if(module.can.show()) {
+          if( module.is.hidden() ) {
            module.show();
          }
          else {
--- a/node/src/documents/modules/dimmer.html
+++ b/node/src/documents/modules/dimmer.html
@ -3,8 +3,12 @@ layout : 'default'
 css    : 'dimmer'

 title  : 'Dimmer'
-type   : 'UI Element'
+type   : 'UI Module'
 ---
+
+<script src="/components/semantic/modules/dimmer.js"></script>
+<script src="/javascript/dimmer.js"></script>
+
 <div class="segment">
  <div class="container">
    <div class="ui small download menu">
@ -44,10 +48,11 @@ type   : 'UI Element'
    <div class="ui segment">
      <div class="ui dimmer"></div>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
+      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
    </div>
    <div class="ignore ui icon buttons">
-      <div class="ui button"><i class="plus icon"></i></div>
-      <div class="ui button"><i class="minus icon"></i></div>
+      <div class="ui show button"><i class="plus icon"></i></div>
+      <div class="ui hide button"><i class="minus icon"></i></div>
    </div>
  </div>

@ -58,14 +63,18 @@ type   : 'UI Element'

  <div class="example">
    <h4 class="ui header">Active</h4>
-    <p>A dimmer can dim content</p>
-    <div class="ui active dimmer"></div>
+    <p>An active dimmer will dim its parent container</p>
+    <div class="ui segment">
+      <div class="ui active dimmer"></div>
+    </div>
  </div>
  
  <div class="example">
    <h4 class="ui header">Disabled</h4>
    <p>A disabled dimmer cannot be activated</p>
-    <div class="ui error dimmer"></div>
+    <div class="ui segment">
+      <div class="ui disabled dimmer"></div>
+    </div>
  </div>
  
  <h2 class="ui dividing header">Variations</h2>
@ -73,13 +82,19 @@ type   : 'UI Element'
  <div class="example">
    <h4 class="ui header">Simple Dimmer</h4>
    <p>A dimmer can be controlled without javascript</p>
-    <i class="ignored info message">Having any parent element receive the class "dimmed" will trigger the dimmer to display.</i>
+    <div class="ignored ui info message">Having any parent element receive the class "dimmed" will trigger the dimmer to display.</div>
    <div class="ui simple dimmer"></div>
  </div>
  
+  <div class="example">
+    <h4 class="ui header">Inverted Dimmer</h4>
+    <p>A dimmer can have its colors inverted</p>
+    <div class="ui inverted dimmer"></div>
+  </div>
+  
  <div class="example">
    <h4 class="ui header">Page Dimmer</h4>
-    <p>A dimmer can be formatted with an icon</p>
+    <p>A dimmer can be formatted to be fixed to the page</p>
    <div class="ui page dimmer"></div>
  </div>

--- a/node/src/files/components/semantic/collections/grid.css
+++ b/node/src/files/components/semantic/collections/grid.css
@ -252,6 +252,8 @@
 .ui.divided.grid,
 .ui.divided.grid > .row {
  display: table;
+  margin-left: 0%;
+  margin-right: 0%;
 }
 .ui.divided.grid > .column,
 .ui.divided.grid > .row > .column {
@ -271,6 +273,8 @@
 -----------------------*/
 .ui.celled.grid {
  display: table;
+  margin-left: 0%;
+  margin-right: 0%;
  -webkit-box-shadow: 0px 0px 0px 1px #DFDFDF;
  -moz-box-shadow: 0px 0px 0px 1px #DFDFDF;
  box-shadow: 0px 0px 0px 1px #DFDFDF;
--- a/node/src/files/components/semantic/modules/dimmer.css
+++ b/node/src/files/components/semantic/modules/dimmer.css
@ -0,0 +1,84 @@
+/*
+ * # Semantic Dimmer
+ * http://github.com/quirkyinc/semantic
+ *
+ *
+ * Copyright 2013 Contributors
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ * Released: April 17 2013
+ */
+/*******************************
+            Dimmer
+*******************************/
+.ui.dimmer {
+  display: none;
+  position: absolute;
+  top: 0em;
+  left: 0em;
+  width: 100%;
+  height: 100%;
+  background-color: #000000;
+  opacity: 0;
+  line-height: 1;
+  -webkit-transition: background-color 0.5s ease;
+  -moz-transition: background-color 0.5s ease;
+  -o-transition: background-color 0.5s ease;
+  -ms-transition: background-color 0.5s ease;
+  transition: background-color 0.5s ease;
+  z-index: 100;
+}
+body > .ui.dimmer {
+  position: fixed;
+}
+/*******************************
+            States
+*******************************/
+.ui.dimmer.active {
+  opacity: 0.85;
+  display: block;
+}
+.ui.disabled.dimmer {
+  display: none !important;
+}
+/*******************************
+           Variations
+*******************************/
+/*--------------
+    Page
+---------------*/
+.ui.page.dimmer {
+  position: fixed;
+}
+/*--------------
+    Inverted
+---------------*/
+.ui.inverted.dimmer {
+  background-color: #FFFFFF;
+}
+/*--------------
+     Simple
+---------------*/
+/* Displays without javascript */
+.ui.simple.dimmer {
+  display: block;
+  overflow: hidden;
+  opacity: 1;
+  height: 0px;
+  width: 0px;
+  background-color: rgba(0, 0, 0, 0);
+}
+.dimmed > .ui.simple.dimmer {
+  overflow: visible;
+  opacity: 1;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.85);
+}
+.ui.simple.inverted.dimmer {
+  background-color: rgba(255, 255, 255, 0);
+}
+.dimmed > .ui.simple.inverted.dimmer {
+  background-color: rgba(255, 255, 255, 0.85);
+}
--- a/node/src/files/components/semantic/modules/dimmer.js
+++ b/node/src/files/components/semantic/modules/dimmer.js
@ -13,16 +13,21 @@ $.fn.dimmer = function(parameters) {
  var
    $allModules     = $(this),
    $document       = $(document),
-    
+
    settings        = $.extend(true, {}, $.fn.dimmer.settings, parameters),

    eventNamespace  = '.' + settings.namespace,
    moduleNamespace = 'module-' + settings.namespace,
+    moduleSelector  = $allModules.selector || '',

    selector        = $allModules.selector || '',
    time            = new Date().getTime(),
    performance     = [],

+    namespace       = settings.namespace,
+    className       = settings.className,
+    errors          = settings.errors,
+
    query           = arguments[0],
    methodInvoked   = (typeof query == 'string'),
    queryArguments  = [].slice.call(arguments, 1),
@ -33,61 +38,27 @@ $.fn.dimmer = function(parameters) {
  $allModules
    .each(function() {
      var
-        $module       = $(this),
-        $menu         = $(this).find(settings.selector.menu),
-        $item         = $(this).find(settings.selector.item),
-        $text         = $(this).find(settings.selector.text),
-        $input        = $(this).find(settings.selector.input),
-        
-        isTouchDevice = ('ontouchstart' in document.documentElement),
-        
-        selector      = $module.selector || '',
-        element       = this,
-        instance      = $module.data('module-' + settings.namespace),
-        
-        className     = settings.className,
-        metadata      = settings.metadata,
-        namespace     = settings.namespace,
-        animation     = settings.animation,
-        
-        errors        = settings.errors,
+        $module   = $(this),
+        $dimmer   = $module.children(selector.dimmer),
+
+        element   = this,
+        instance  = $module.data('module-' + namespace),
        module
      ;

      module      = {

        initialize: function() {
-          module.verbose('Initializing dimmer with bound events', $module);
-          if(isTouchDevice) {
-            $module
-              .on('touchstart' + eventNamespace, module.event.test.toggle)
-            ;
-          }
-          else if(settings.on == 'click') {
-            $module
-              .on('click' + eventNamespace, module.event.test.toggle)
-            ;
-          }
-          else if(settings.on == 'hover') {
-            $module
-              .on('mouseenter' + eventNamespace, module.show)
-              .on('mouseleave' + eventNamespace, module.delayedHide)
-            ;
+          if( $module.is(settings.selector.dimmer) ) {
+            $dimmer = $module;
          }
          else {
-            $module
-              .on(settings.on + eventNamespace, module.toggle)
-            ;
-          }
-          if(settings.action == 'form') {
-            module.set.selected();
+            if($dimmer.size() === 0) {
+              module.create();
+            }
+            $dimmer = $module.find(selector.dimmer);
          }
-          $item
-            .on(module.get.selectEvent() + eventNamespace, module.event.item.click)
-          ;
-          $module
-            .data(moduleNamespace, module)
-          ;
+          module.debug('Module initialized with dimmer', $dimmer);
        },

        destroy: function() {
@ -97,290 +68,85 @@ $.fn.dimmer = function(parameters) {
          ;
        },

-        event: {
-
-          stopPropagation: function(event) {
-            event.stopPropagation();
-          },
-
-          test: {
-            toggle: function(event) {
-              module.intent.test(event, module.toggle);
-              event.stopPropagation();
-            },
-            hide: function(event) {
-              module.intent.test(event, module.hide);
-              event.stopPropagation();
-            }
-          },
-
-          item: {
-
-            click: function (event) {
-              var
-                $choice = $(this),
-                text    = $choice.data(metadata.text)  || $choice.text(),
-                value   = $choice.data(metadata.value) || text
-              ;
-              module.verbose('Adding active state to selected item');
-              $item
-                .removeClass(className.active)
-              ;
-              $choice
+        animate: {
+          show: function() {
+            if(settings.animation.show == 'css') {
+              $dimmer
                .addClass(className.active)
              ;
-              module.action.determine(text, value);
-              $.proxy(settings.onChange, $menu.get())(text, value);
-              event.stopPropagation();
            }
-
-          }
-
-        },
-
-        intent: {
-
-          test: function(event, callback) {
-            module.debug('Determining whether event occurred in dimmer', event.target);
-            callback = callback || function(){};
-            if( $(event.target).closest($menu).size() === 0 ) {
-              module.verbose('Triggering event', callback);
-              callback();
-            }
-            else {
-              module.verbose('Event occurred in dimmer, canceling callback');
-            }
-          },
-
-          bind: function() {
-            module.verbose('Binding hide intent event to document');
-            $document
-              .on(module.get.selectEvent(), module.event.test.hide)
-            ;
-          },
-
-          unbind: function() {
-            module.verbose('Removing hide intent event from document');
-            $document
-              .off(module.get.selectEvent())
-            ;
-          }
-
-        },
-
-        action: {
-
-          determine: function(text, value) {
-            if( $.isFunction( module.action[settings.action] ) ) {
-              module.verbose('Triggering preset action', settings.action);
-              module.action[ settings.action ](text, value);
-            }
-            else if( $.isFunction(settings.action) ) {
-              module.verbose('Triggering user action', settings.action);
-              settings.action(text, value);
-            }
-            else {
-              module.error(errors.action);
+            else if(settings.animation.show == 'fade') {
+              $dimmer
+                .fadeTo(settings.duration, settings.opacity)
+              ;
            }
          },
-
-          nothing: function() {},
-
          hide: function() {
-            module.hide();
-          },
-
-          changeText: function(text, value) {
-            module.set.text(text);
-            module.hide();
-          },
-
-          form: function(text, value) {
-            module.set.text(text);
-            module.set.value(value);
-            module.hide();
-          }
-
-        },
-
-        get: {
-          selectEvent: function() {
-            return (isTouchDevice)
-              ? 'touchstart'
-              : 'click'
-            ;
-          },
-          text: function() {
-            return $text.text();
-          },
-          value: function() {
-            return $input.val();
-          },
-          item: function(value) {
-            var 
-              $selectedItem
-            ;
-            value = value || $input.val();
-            $item
-              .each(function() {
-                if( $(this).data(metadata.value) == value ) {
-                  $selectedItem = $(this);
-                }
-              })
-            ;
-            return $selectedItem || false;
-          }
-        },
-
-        set: {
-          text: function(text) {
-            module.debug('Changing text', text);
-            $text.text(text);
-          },
-          value: function(value) {
-            module.debug('Adding selected value to hidden input', value);
-            $input.val(value);
-          },
-          selected: function(value) {
-            var
-              selectedValue = value || $input.val(),
-              $selectedItem = module.get.item(value),
-              selectedText
-            ;
-            if($selectedItem) {
-              module.debug('Setting selected menu item to', $selectedItem);
-              selectedText = $selectedItem.data(metadata.text) || $selectedItem.text();
-              $item
-                .removeClass(className.active)
-              ;
-              $selectedItem 
+            if(settings.animation.show == 'css') {
+              $dimmer
                .addClass(className.active)
              ;
-              module.set.text(selectedText);
+            }
+            else if(settings.animation.show == 'fade') {
+              $dimmer
+                .fadeOut(settings.duration)
+              ;
+            }
+            else if( $.isFunction(settings.animation.hide) ) {
+              $.proxy(settings.animation.hide, $dimmer)();
            }
          }
        },

        is: {
+          enabled: function() {
+            return !$module.hasClass(className.disabled);
+          },
+          disabled: function() {
+            return $module.hasClass(className.disabled);
+          },
          visible: function() {
-            return $menu.is(':visible');
+            return $dimmer.is(':visible');
          },
          hidden: function() {
-            return $menu.is(':not(:visible)');
+            return $dimmer.is(':not(:visible)');
          }
        },

        can: {
-          click: function() {
-            return (isTouchDevice || settings.on == 'click');
-          },
          show: function() {
-            return !$module.hasClass(className.disabled);
-          }
-        },
-
-        animate: {
-          show: function() {
-            module.verbose('Doing menu showing animation');
-            if(animation.show == 'show') {
-              $menu
-                .show()
-              ;
-            }
-            else if(animation.show == 'slide') {
-              $menu
-                .clearQueue()
-                .children()
-                  .clearQueue()
-                  .css('opacity', 0)
-                  .delay(100)
-                  .animate({
-                    opacity : 1
-                  }, 300, 'easeOutQuad')
-                  .end()
-                .slideDown(200, 'easeOutQuad')
-              ;
-            }
-          },
-          hide: function() {
-            module.verbose('Doing menu hiding animation');
-            if(animation.hide == 'hide') {
-              $menu
-                .hide()
-              ;
-            }
-            else if(animation.hide == 'slide') {
-              $menu
-                .clearQueue()
-                .children()
-                  .clearQueue()
-                  .css('opacity', 1)
-                  .animate({
-                    opacity : 0
-                  }, 300, 'easeOutQuad')
-                  .end()
-                .delay(100)
-                .slideUp(200, 'easeOutQuad')
-              ;
-            }
+            return !$dimmer.hasClass(className.disabled);
          }
        },

        show: function() {
-          module.debug('Checking if dimmer can show');
-          clearTimeout(module.graceTimer);
-          if( !module.is.visible() ) {
-            module.hideOthers();
-            $module
-              .addClass(className.visible)
-            ;
+          module.debug('Showing dimmer', $dimmer);
+          if( !module.is.visible() && module.is.enabled() ) {
            module.animate.show();
-            if( module.can.click() ) {
-              module.intent.bind();
-            }
-            $.proxy(settings.onShow, $menu.get())();
+            $.proxy(settings.onShow, $module.get())();
+            $.proxy(settings.onChange, $module.get())();
          }
        },

        hide: function() {
          if( !module.is.hidden() ) {
-            module.debug('Hiding dimmer');
-            $module
-              .removeClass(className.visible)
-            ;
-            if( module.can.click() ) {
-              module.intent.unbind();
-            }
+            module.debug('Hiding dimmer', $dimmer);
            module.animate.hide();
-            $.proxy(settings.onHide, $menu.get())();
+            $.proxy(settings.onHide, $module.get())();
+            $.proxy(settings.onChange, $module.get())();
          }
        },

-        delayedHide: function() {
-          module.verbose('User moused away setting timer to hide dimmer');
-          module.graceTimer = setTimeout(module.hide, settings.gracePeriod);
-        },
-
-        hideOthers: function() {
-          module.verbose('Finding other dimmers to hide');
-          $allModules
-            .not($module)
-              .has(settings.selector.menu + ':visible')
-              .dimmer('hide')
-          ;
-          console.log($allModules.not($module).has(settings.selector.menu + ':visible'));
-        },
-
        toggle: function() {
-          module.verbose('Toggling menu visibility');
-          if(module.can.show()) {
+          module.verbose('Toggling dimmer visibility', $dimmer);
+          if( module.is.hidden() ) {
            module.show();
          }
          else {
            module.hide();
          }
        },
-
+        
        setting: function(name, value) {
          if(value !== undefined) {
            if( $.isPlainObject(name) ) {
@ -442,9 +208,9 @@ $.fn.dimmer = function(parameters) {
              previousTime  = time || currentTime,
              executionTime = currentTime - previousTime;
              time          = currentTime;
-              performance.push({ 
+              performance.push({
                'Element'        : element,
-                'Name'           : message[0], 
+                'Name'           : message[0],
                'Arguments'      : message[1] || 'None',
                'Execution Time' : executionTime
              });
@ -455,11 +221,11 @@ $.fn.dimmer = function(parameters) {
          display: function() {
            var
              title              = settings.moduleName,
-              caption            = settings.moduleName + ': ' + selector + '(' + $allModules.size() + ' elements)',
+              caption            = settings.moduleName + ': ' + moduleSelector + '(' + $allModules.size() + ' elements)',
              totalExecutionTime = 0
            ;
-            if(selector) {
-              title += ' Performance (' + selector + ')';
+            if(moduleSelector) {
+              title += ' Performance (' + moduleSelector + ')';
            }
            if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) {
              console.groupCollapsed(title);
@ -520,7 +286,7 @@ $.fn.dimmer = function(parameters) {
        invokedResponse = module.invoke(query);
      }
      else {
-        if(instance !== undefined) {
+        if(instance === undefined) {
          module.destroy();
        }
        module.initialize();
@ -535,47 +301,37 @@ $.fn.dimmer = function(parameters) {

 $.fn.dimmer.settings = {

-  moduleName  : 'Dropdown Module',
+  moduleName  : 'Dimmer Module',
  namespace   : 'dimmer',
-  
+
  verbose     : true,
  debug       : true,
  performance : false,
-  
-  on          : 'click',
-  gracePeriod : 300,
-  action      : 'hide',
-  
+
  animation   : {
-    show: 'slide',
-    hide: 'slide'
+    show: 'css',
+    hide: 'css'
  },
-  
+
+  duration : 500,
+  opacity  : 0.85,
+
  onChange : function(){},
  onShow   : function(){},
  onHide   : function(){},
-  
+
  errors   : {
-    action   : 'You called a dimmer action that was not defined',
    method   : 'The method you called is not defined.'
  },

-  metadata: {
-    text  : 'text',
-    value : 'value'
-  },
-
-  selector : {
-    menu  : '.menu',
-    item  : '.menu > .item',
-    text  : '> .text',
-    input : '> input[type="hidden"]'
+  selector: {
+    dimmer  : '.ui.dimmer'
  },

  className : {
+    dimmed   : 'dimmed',
    active   : 'active',
-    disabled : 'disabled',
-    visible  : 'visible'
+    disabled : 'disabled'
  }

 };
--- a/node/src/files/components/semantic/modules/dropdown.js
+++ b/node/src/files/components/semantic/modules/dropdown.js
@ -373,7 +373,7 @@ $.fn.dropdown = function(parameters) {

        toggle: function() {
          module.verbose('Toggling menu visibility');
-          if(module.can.show()) {
+          if( module.is.hidden() ) {
            module.show();
          }
          else {
--- a/node/src/files/javascript/dimmer.js
+++ b/node/src/files/javascript/dimmer.js
@ -0,0 +1,44 @@
+semantic.dimmer = {};
+
+// ready event
+semantic.dimmer.ready = function() {
+
+  // selector cache
+  var
+    $examples   = $('.example'),
+    $showButton = $examples.find('.show.button'),
+    $hideButton = $examples.find('.hide.button'),
+    // alias
+    handler
+  ;
+
+  // event handlers
+  handler = {
+    show: function() {
+      console.log($(this).closest('.example'));
+      $(this)
+        .closest('.example')
+        .dimmer('show')
+      ;
+    },
+    hide: function() {
+      $(this)
+        .closest('.example')
+        .dimmer('hide')
+      ;
+    }
+  };
+
+  $showButton
+    .on('click', handler.show)
+  ;
+  $hideButton
+    .on('click', handler.hide)
+  ;
+};
+
+
+// attach ready event
+$(document)
+  .ready(semantic.dimmer.ready)
+;
--- a/node/src/layouts/default.html.eco
+++ b/node/src/layouts/default.html.eco
@ -50,6 +50,7 @@
  <link rel="stylesheet" type="text/css" class="ui" href="/components/semantic/modules/popup.css">
  <link rel="stylesheet" type="text/css" class="ui" href="/components/semantic/modules/shape.css">
  <link rel="stylesheet" type="text/css" class="ui" href="/components/semantic/modules/checkbox.css">
+  <link rel="stylesheet" type="text/css" class="ui" href="/components/semantic/modules/dimmer.css">

  <link rel="stylesheet" type="text/css" href="/stylesheets/library/sidr.css">
  <link rel="stylesheet" type="text/css" href="/stylesheets/semantic.css">
--- a/src/collections/grid.less
+++ b/src/collections/grid.less
@ -309,6 +309,8 @@
 .ui.divided.grid,
 .ui.divided.grid > .row {
  display: table;
+  margin-left: 0%;
+  margin-right: 0%;
 }
 .ui.divided.grid > .column,
 .ui.divided.grid > .row > .column {
@ -340,6 +342,8 @@

 .ui.celled.grid {
  display: table;
+  margin-left: 0%;
+  margin-right: 0%;
  -webkit-box-shadow: 0px 0px 0px 1px #DFDFDF;
  -moz-box-shadow: 0px 0px 0px 1px #DFDFDF;
  box-shadow: 0px 0px 0px 1px #DFDFDF;
--- a/src/modules/dimmer.js
+++ b/src/modules/dimmer.js
@ -13,16 +13,21 @@ $.fn.dimmer = function(parameters) {
  var
    $allModules     = $(this),
    $document       = $(document),
-    
+
    settings        = $.extend(true, {}, $.fn.dimmer.settings, parameters),

    eventNamespace  = '.' + settings.namespace,
    moduleNamespace = 'module-' + settings.namespace,
+    moduleSelector  = $allModules.selector || '',

    selector        = $allModules.selector || '',
    time            = new Date().getTime(),
    performance     = [],

+    namespace       = settings.namespace,
+    className       = settings.className,
+    errors          = settings.errors,
+
    query           = arguments[0],
    methodInvoked   = (typeof query == 'string'),
    queryArguments  = [].slice.call(arguments, 1),
@ -33,61 +38,27 @@ $.fn.dimmer = function(parameters) {
  $allModules
    .each(function() {
      var
-        $module       = $(this),
-        $menu         = $(this).find(settings.selector.menu),
-        $item         = $(this).find(settings.selector.item),
-        $text         = $(this).find(settings.selector.text),
-        $input        = $(this).find(settings.selector.input),
-        
-        isTouchDevice = ('ontouchstart' in document.documentElement),
-        
-        selector      = $module.selector || '',
-        element       = this,
-        instance      = $module.data('module-' + settings.namespace),
-        
-        className     = settings.className,
-        metadata      = settings.metadata,
-        namespace     = settings.namespace,
-        animation     = settings.animation,
-        
-        errors        = settings.errors,
+        $module   = $(this),
+        $dimmer   = $module.children(selector.dimmer),
+
+        element   = this,
+        instance  = $module.data('module-' + namespace),
        module
      ;

      module      = {

        initialize: function() {
-          module.verbose('Initializing dimmer with bound events', $module);
-          if(isTouchDevice) {
-            $module
-              .on('touchstart' + eventNamespace, module.event.test.toggle)
-            ;
-          }
-          else if(settings.on == 'click') {
-            $module
-              .on('click' + eventNamespace, module.event.test.toggle)
-            ;
-          }
-          else if(settings.on == 'hover') {
-            $module
-              .on('mouseenter' + eventNamespace, module.show)
-              .on('mouseleave' + eventNamespace, module.delayedHide)
-            ;
+          if( $module.is(settings.selector.dimmer) ) {
+            $dimmer = $module;
          }
          else {
-            $module
-              .on(settings.on + eventNamespace, module.toggle)
-            ;
-          }
-          if(settings.action == 'form') {
-            module.set.selected();
+            if($dimmer.size() === 0) {
+              module.create();
+            }
+            $dimmer = $module.find(selector.dimmer);
          }
-          $item
-            .on(module.get.selectEvent() + eventNamespace, module.event.item.click)
-          ;
-          $module
-            .data(moduleNamespace, module)
-          ;
+          module.debug('Module initialized with dimmer', $dimmer);
        },

        destroy: function() {
@ -97,290 +68,85 @@ $.fn.dimmer = function(parameters) {
          ;
        },

-        event: {
-
-          stopPropagation: function(event) {
-            event.stopPropagation();
-          },
-
-          test: {
-            toggle: function(event) {
-              module.intent.test(event, module.toggle);
-              event.stopPropagation();
-            },
-            hide: function(event) {
-              module.intent.test(event, module.hide);
-              event.stopPropagation();
-            }
-          },
-
-          item: {
-
-            click: function (event) {
-              var
-                $choice = $(this),
-                text    = $choice.data(metadata.text)  || $choice.text(),
-                value   = $choice.data(metadata.value) || text
-              ;
-              module.verbose('Adding active state to selected item');
-              $item
-                .removeClass(className.active)
-              ;
-              $choice
+        animate: {
+          show: function() {
+            if(settings.animation.show == 'css') {
+              $dimmer
                .addClass(className.active)
              ;
-              module.action.determine(text, value);
-              $.proxy(settings.onChange, $menu.get())(text, value);
-              event.stopPropagation();
            }
-
-          }
-
-        },
-
-        intent: {
-
-          test: function(event, callback) {
-            module.debug('Determining whether event occurred in dimmer', event.target);
-            callback = callback || function(){};
-            if( $(event.target).closest($menu).size() === 0 ) {
-              module.verbose('Triggering event', callback);
-              callback();
-            }
-            else {
-              module.verbose('Event occurred in dimmer, canceling callback');
-            }
-          },
-
-          bind: function() {
-            module.verbose('Binding hide intent event to document');
-            $document
-              .on(module.get.selectEvent(), module.event.test.hide)
-            ;
-          },
-
-          unbind: function() {
-            module.verbose('Removing hide intent event from document');
-            $document
-              .off(module.get.selectEvent())
-            ;
-          }
-
-        },
-
-        action: {
-
-          determine: function(text, value) {
-            if( $.isFunction( module.action[settings.action] ) ) {
-              module.verbose('Triggering preset action', settings.action);
-              module.action[ settings.action ](text, value);
-            }
-            else if( $.isFunction(settings.action) ) {
-              module.verbose('Triggering user action', settings.action);
-              settings.action(text, value);
-            }
-            else {
-              module.error(errors.action);
+            else if(settings.animation.show == 'fade') {
+              $dimmer
+                .fadeTo(settings.duration, settings.opacity)
+              ;
            }
          },
-
-          nothing: function() {},
-
          hide: function() {
-            module.hide();
-          },
-
-          changeText: function(text, value) {
-            module.set.text(text);
-            module.hide();
-          },
-
-          form: function(text, value) {
-            module.set.text(text);
-            module.set.value(value);
-            module.hide();
-          }
-
-        },
-
-        get: {
-          selectEvent: function() {
-            return (isTouchDevice)
-              ? 'touchstart'
-              : 'click'
-            ;
-          },
-          text: function() {
-            return $text.text();
-          },
-          value: function() {
-            return $input.val();
-          },
-          item: function(value) {
-            var 
-              $selectedItem
-            ;
-            value = value || $input.val();
-            $item
-              .each(function() {
-                if( $(this).data(metadata.value) == value ) {
-                  $selectedItem = $(this);
-                }
-              })
-            ;
-            return $selectedItem || false;
-          }
-        },
-
-        set: {
-          text: function(text) {
-            module.debug('Changing text', text);
-            $text.text(text);
-          },
-          value: function(value) {
-            module.debug('Adding selected value to hidden input', value);
-            $input.val(value);
-          },
-          selected: function(value) {
-            var
-              selectedValue = value || $input.val(),
-              $selectedItem = module.get.item(value),
-              selectedText
-            ;
-            if($selectedItem) {
-              module.debug('Setting selected menu item to', $selectedItem);
-              selectedText = $selectedItem.data(metadata.text) || $selectedItem.text();
-              $item
-                .removeClass(className.active)
-              ;
-              $selectedItem 
+            if(settings.animation.show == 'css') {
+              $dimmer
                .addClass(className.active)
              ;
-              module.set.text(selectedText);
+            }
+            else if(settings.animation.show == 'fade') {
+              $dimmer
+                .fadeOut(settings.duration)
+              ;
+            }
+            else if( $.isFunction(settings.animation.hide) ) {
+              $.proxy(settings.animation.hide, $dimmer)();
            }
          }
        },

        is: {
+          enabled: function() {
+            return !$module.hasClass(className.disabled);
+          },
+          disabled: function() {
+            return $module.hasClass(className.disabled);
+          },
          visible: function() {
-            return $menu.is(':visible');
+            return $dimmer.is(':visible');
          },
          hidden: function() {
-            return $menu.is(':not(:visible)');
+            return $dimmer.is(':not(:visible)');
          }
        },

        can: {
-          click: function() {
-            return (isTouchDevice || settings.on == 'click');
-          },
          show: function() {
-            return !$module.hasClass(className.disabled);
-          }
-        },
-
-        animate: {
-          show: function() {
-            module.verbose('Doing menu showing animation');
-            if(animation.show == 'show') {
-              $menu
-                .show()
-              ;
-            }
-            else if(animation.show == 'slide') {
-              $menu
-                .clearQueue()
-                .children()
-                  .clearQueue()
-                  .css('opacity', 0)
-                  .delay(100)
-                  .animate({
-                    opacity : 1
-                  }, 300, 'easeOutQuad')
-                  .end()
-                .slideDown(200, 'easeOutQuad')
-              ;
-            }
-          },
-          hide: function() {
-            module.verbose('Doing menu hiding animation');
-            if(animation.hide == 'hide') {
-              $menu
-                .hide()
-              ;
-            }
-            else if(animation.hide == 'slide') {
-              $menu
-                .clearQueue()
-                .children()
-                  .clearQueue()
-                  .css('opacity', 1)
-                  .animate({
-                    opacity : 0
-                  }, 300, 'easeOutQuad')
-                  .end()
-                .delay(100)
-                .slideUp(200, 'easeOutQuad')
-              ;
-            }
+            return !$dimmer.hasClass(className.disabled);
          }
        },

        show: function() {
-          module.debug('Checking if dimmer can show');
-          clearTimeout(module.graceTimer);
-          if( !module.is.visible() ) {
-            module.hideOthers();
-            $module
-              .addClass(className.visible)
-            ;
+          module.debug('Showing dimmer', $dimmer);
+          if( !module.is.visible() && module.is.enabled() ) {
            module.animate.show();
-            if( module.can.click() ) {
-              module.intent.bind();
-            }
-            $.proxy(settings.onShow, $menu.get())();
+            $.proxy(settings.onShow, $module.get())();
+            $.proxy(settings.onChange, $module.get())();
          }
        },

        hide: function() {
          if( !module.is.hidden() ) {
-            module.debug('Hiding dimmer');
-            $module
-              .removeClass(className.visible)
-            ;
-            if( module.can.click() ) {
-              module.intent.unbind();
-            }
+            module.debug('Hiding dimmer', $dimmer);
            module.animate.hide();
-            $.proxy(settings.onHide, $menu.get())();
+            $.proxy(settings.onHide, $module.get())();
+            $.proxy(settings.onChange, $module.get())();
          }
        },

-        delayedHide: function() {
-          module.verbose('User moused away setting timer to hide dimmer');
-          module.graceTimer = setTimeout(module.hide, settings.gracePeriod);
-        },
-
-        hideOthers: function() {
-          module.verbose('Finding other dimmers to hide');
-          $allModules
-            .not($module)
-              .has(settings.selector.menu + ':visible')
-              .dimmer('hide')
-          ;
-          console.log($allModules.not($module).has(settings.selector.menu + ':visible'));
-        },
-
        toggle: function() {
-          module.verbose('Toggling menu visibility');
-          if(module.can.show()) {
+          module.verbose('Toggling dimmer visibility', $dimmer);
+          if( module.is.hidden() ) {
            module.show();
          }
          else {
            module.hide();
          }
        },
-
+        
        setting: function(name, value) {
          if(value !== undefined) {
            if( $.isPlainObject(name) ) {
@ -442,9 +208,9 @@ $.fn.dimmer = function(parameters) {
              previousTime  = time || currentTime,
              executionTime = currentTime - previousTime;
              time          = currentTime;
-              performance.push({ 
+              performance.push({
                'Element'        : element,
-                'Name'           : message[0], 
+                'Name'           : message[0],
                'Arguments'      : message[1] || 'None',
                'Execution Time' : executionTime
              });
@ -455,11 +221,11 @@ $.fn.dimmer = function(parameters) {
          display: function() {
            var
              title              = settings.moduleName,
-              caption            = settings.moduleName + ': ' + selector + '(' + $allModules.size() + ' elements)',
+              caption            = settings.moduleName + ': ' + moduleSelector + '(' + $allModules.size() + ' elements)',
              totalExecutionTime = 0
            ;
-            if(selector) {
-              title += ' Performance (' + selector + ')';
+            if(moduleSelector) {
+              title += ' Performance (' + moduleSelector + ')';
            }
            if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) {
              console.groupCollapsed(title);
@ -520,7 +286,7 @@ $.fn.dimmer = function(parameters) {
        invokedResponse = module.invoke(query);
      }
      else {
-        if(instance !== undefined) {
+        if(instance === undefined) {
          module.destroy();
        }
        module.initialize();
@ -535,47 +301,37 @@ $.fn.dimmer = function(parameters) {

 $.fn.dimmer.settings = {

-  moduleName  : 'Dropdown Module',
+  moduleName  : 'Dimmer Module',
  namespace   : 'dimmer',
-  
+
  verbose     : true,
  debug       : true,
  performance : false,
-  
-  on          : 'click',
-  gracePeriod : 300,
-  action      : 'hide',
-  
+
  animation   : {
-    show: 'slide',
-    hide: 'slide'
+    show: 'css',
+    hide: 'css'
  },
-  
+
+  duration : 500,
+  opacity  : 0.85,
+
  onChange : function(){},
  onShow   : function(){},
  onHide   : function(){},
-  
+
  errors   : {
-    action   : 'You called a dimmer action that was not defined',
    method   : 'The method you called is not defined.'
  },

-  metadata: {
-    text  : 'text',
-    value : 'value'
-  },
-
-  selector : {
-    menu  : '.menu',
-    item  : '.menu > .item',
-    text  : '> .text',
-    input : '> input[type="hidden"]'
+  selector: {
+    dimmer  : '.ui.dimmer'
  },

  className : {
+    dimmed   : 'dimmed',
    active   : 'active',
-    disabled : 'disabled',
-    visible  : 'visible'
+    disabled : 'disabled'
  }

 };
--- a/src/modules/dimmer.less
+++ b/src/modules/dimmer.less
@ -0,0 +1,115 @@
+/*
+ * # Semantic Dimmer
+ * http://github.com/quirkyinc/semantic
+ *
+ *
+ * Copyright 2013 Contributors
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ * Released: April 17 2013
+ */
+
+
+/*******************************
+            Dimmer
+*******************************/
+
+.ui.dimmer {
+  display: none;
+  position: absolute;
+  top: 0em;
+  left: 0em;
+
+  width: 100%;
+  height: 100%;
+
+  background-color: #000000;
+  opacity: 0;
+  line-height: 1;
+
+  -webkit-transition:
+    background-color 0.5s ease
+  ;
+  -moz-transition:
+    background-color 0.5s ease
+  ;
+  -o-transition:
+    background-color 0.5s ease
+  ;
+  -ms-transition:
+    background-color 0.5s ease
+  ;
+  transition:
+    background-color 0.5s ease
+  ;
+  z-index: 100;
+}
+
+body > .ui.dimmer {
+  position: fixed;
+}
+
+
+/*******************************
+            States
+*******************************/
+
+.ui.dimmer.active {
+  opacity: 0.85;
+  display: block;
+}
+
+.ui.disabled.dimmer {
+  display: none !important;
+}
+
+
+/*******************************
+           Variations
+*******************************/
+
+
+/*--------------
+    Page
+---------------*/
+.ui.page.dimmer {
+  position: fixed;
+}
+
+/*--------------
+    Inverted
+---------------*/
+
+.ui.inverted.dimmer {
+  background-color: #FFFFFF;
+}
+
+/*--------------
+     Simple
+---------------*/
+/* Displays without javascript */
+
+.ui.simple.dimmer {
+  display: block;
+  overflow: hidden;
+  opacity: 1;
+  height: 0px;
+  width: 0px;
+  background-color: rgba(0, 0, 0, 0);
+}
+.dimmed > .ui.simple.dimmer {
+  overflow: visible;
+  opacity: 1;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.85);
+}
+
+.ui.simple.inverted.dimmer {
+  background-color: rgba(255, 255, 255, 0);
+}
+.dimmed > .ui.simple.inverted.dimmer {
+  background-color: rgba(255, 255, 255, 0.85)
+}
+
--- a/src/modules/dropdown.js
+++ b/src/modules/dropdown.js
@ -373,7 +373,7 @@ $.fn.dropdown = function(parameters) {

        toggle: function() {
          module.verbose('Toggling menu visibility');
-          if(module.can.show()) {
+          if( module.is.hidden() ) {
            module.show();
          }
          else {