Adds fixes/updates for radio buttons with checkbox.js, adds fixes to gruntfile so it watches js file changes, adds fixes to menu dropdowns, adds fixes to menu labels, adds fixes to segment variations, adds fixes to header spacing and new header variations

build/minified/elements/header.min.css

@@ -1 +1 @@
-.ui.header{line-height:1.33;font-size:1.33em;font-weight:700;padding:0;border:0}.ui.header:first-child{margin-top:0}.ui.header+p{margin-top:0}h1.ui.header{min-height:1rem;margin:2rem 0rem 1.5rem;line-height:1.33;font-size:2rem}h2.ui.header{margin:1.5rem 0rem 1rem;line-height:1.33;font-size:1.5rem}h3.ui.header{margin:1.3rem 0rem 1rem;line-height:1.33;font-size:1.33rem}h4.ui.header{margin:.75rem 0rem .3rem;line-height:1.33;font-size:1.1rem}h5.ui.header{margin:0rem 0rem .2rem;line-height:1.2;font-size:1rem}.huge.ui.header{min-height:1em;line-height:1.33em;font-size:2em}.large.ui.header{line-height:1.33em;font-size:1.5em}.medium.ui.header{margin-bottom:.25em;line-height:1.33em;font-size:1.25em}.small.ui.header{margin-bottom:.25em;line-height:1.33em;font-size:1.1em}.tiny.ui.header{margin-bottom:0;line-height:1.2em;font-size:1em}.ui.disabled.header{opacity:.5}.ui.inverted.header{background-color:#222;padding:.7em 1em;color:#FFF}.ui.blue.header{color:#6ECFF5!important}.ui.black.header{color:#5C6166!important}.ui.green.header{color:#A1CF64!important}.ui.red.header{color:#EF4D6D!important}.ui.purple.header{color:#564F8A!important}.ui.teal.header{color:#00B5AD!important}.ui.inverted.black.header{background-color:#5C6166!important;color:#FFF!important}.ui.inverted.blue.header{background-color:#6ECFF5!important;color:#FFF!important}.ui.inverted.green.header{background-color:#A1CF64!important;color:#FFF!important}.ui.inverted.red.header{background-color:#EF4D6D!important;color:#FFF!important}.ui.inverted.purple.header{background-color:#564F8A!important;color:#FFF!important}.ui.inverted.teal.header{background-color:#00B5AD!important;color:#FFF!important}.ui.left.aligned.header{text-align:left}.ui.right.aligned.header{text-align:right}.ui.center.aligned.header{text-align:center}.ui.floated.header,.ui.left.floated.header{float:left}.ui.right.floated.header{float:right}.ui.attached.header{padding:.7em 1rem;-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.1);-moz-box-shadow:0 0 0 1px rgba(0,0,0,.1);box-shadow:0 0 0 1px rgba(0,0,0,.1)}.ui.top.attached.header{margin-bottom:0;-webkit-border-radius:.3125em .3125em 0 0;-moz-border-radius:.3125em .3125em 0 0;border-radius:.3125em .3125em 0 0}.ui.bottom.attached.header{margin-top:0;-webkit-border-radius:0 0 .3125em .3125em;-moz-border-radius:0 0 .3125em .3125em;border-radius:0 0 .3125em .3125em}.ui.header.icon{display:inline-block;text-align:center}.ui.header.icon .icon{display:block;font-size:4em;width:auto;margin:0rem auto 2rem;padding:0}
+.ui.header{border:0;margin:1em 0 1rem;padding:0;font-size:1.33em;font-weight:700;line-height:1.33}.ui.header .ui.sub.header,.ui.header .sub.header{font-size:1rem;font-weight:400;margin:0;padding:0;line-height:1.2;color:rgba(0,0,0,.5)}.ui.header:first-child{margin-top:0}.ui.header+p{margin-top:0}h1.ui.header{min-height:1rem;line-height:1.33;font-size:2rem}h2.ui.header{line-height:1.33;font-size:1.75rem}h3.ui.header{line-height:1.33;font-size:1.33rem}h4.ui.header{line-height:1.33;font-size:1.1rem}h5.ui.header{line-height:1.2;font-size:1rem}.ui.huge.header{min-height:1em;font-size:2em}.ui.large.header{font-size:1.75em}.ui.medium.header{font-size:1.33em}.ui.small.header{font-size:1.1em}.ui.tiny.header{font-size:1em}.ui.disabled.header{opacity:.5}.ui.blue.header{color:#6ECFF5!important}.ui.black.header{color:#5C6166!important}.ui.green.header{color:#A1CF64!important}.ui.red.header{color:#EF4D6D!important}.ui.purple.header{color:#564F8A!important}.ui.teal.header{color:#00B5AD!important}.ui.blue.block.header{background-color:#E6EEF1;border-left:.2em solid #6ECFF5}.ui.black.block.header{background-color:#EAEAEA;border-left:.2em solid #5C6166}.ui.green.block.header{background-color:#EFF8E4;border-left:.2em solid #A1CF64}.ui.red.block.header{background-color:#F6E5E8;border-left:.2em solid #EF4D6D}.ui.purple.block.header{background-color:#EFEDF8;border-left:.2em solid #564F8A}.ui.teal.block.header{background-color:#E9F7F6;border-left:.2em solid #00B5AD}.ui.inverted.header{background-color:#222;color:#FFF}.ui.inverted.black.header{background-color:#5C6166!important;color:#FFF!important}.ui.inverted.blue.header{background-color:#6ECFF5!important;color:#FFF!important}.ui.inverted.green.header{background-color:#A1CF64!important;color:#FFF!important}.ui.inverted.red.header{background-color:#EF4D6D!important;color:#FFF!important}.ui.inverted.purple.header{background-color:#564F8A!important;color:#FFF!important}.ui.inverted.teal.header{background-color:#00B5AD!important;color:#FFF!important}.ui.inverted.block.header{border-left:0}.ui.left.aligned.header{text-align:left}.ui.right.aligned.header{text-align:right}.ui.center.aligned.header{text-align:center}.ui.floated.header,.ui.left.floated.header{float:left}.ui.right.floated.header{float:right}.ui.block.header{background-color:#F0F0F0;padding:.5em 1em}.ui.dividing.header{padding-bottom:.2rem;border-bottom:1px solid rgba(0,0,0,.1)}.ui.attached.header{padding:.7em 1rem;-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.1);-moz-box-shadow:0 0 0 1px rgba(0,0,0,.1);box-shadow:0 0 0 1px rgba(0,0,0,.1)}.ui.top.attached.header{margin-bottom:0;-webkit-border-radius:.3125em .3125em 0 0;-moz-border-radius:.3125em .3125em 0 0;border-radius:.3125em .3125em 0 0}.ui.bottom.attached.header{margin-top:0;-webkit-border-radius:0 0 .3125em .3125em;-moz-border-radius:0 0 .3125em .3125em;border-radius:0 0 .3125em .3125em}.ui.header.icon{display:inline-block;text-align:center}.ui.header.icon .icon{display:block;font-size:4em;width:auto;margin:0rem auto 2rem;padding:0}

build/minified/elements/segment.min.css

@@ -1 +1 @@
-.ui.segment{position:relative;background-color:#FFF;-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.1);-moz-box-shadow:0 0 0 1px rgba(0,0,0,.1);box-shadow:0 0 0 1px rgba(0,0,0,.1);margin:1em 0;padding:1.3em 1em;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;overflow:hidden}.ui.vertical.segment{margin:0;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;-webkit-box-shadow:0 1px 0 rgba(0,0,0,.1),0 -1px 0 rgba(0,0,0,.1);-moz-box-shadow:0 1px 0 rgba(0,0,0,.1),0 -1px 0 rgba(0,0,0,.1);box-shadow:0 1px 0 rgba(0,0,0,.1),0 -1px 0 rgba(0,0,0,.1)}.ui.horizontal.segment{margin:0;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;-webkit-box-shadow:1px 0 0 rgba(0,0,0,.1),-1px 0 0 rgba(0,0,0,.1);-moz-box-shadow:1px 0 0 rgba(0,0,0,.1),-1px 0 0 rgba(0,0,0,.1);box-shadow:1px 0 0 rgba(0,0,0,.1),-1px 0 0 rgba(0,0,0,.1)}.ui.segment>:first-child{margin-top:0}.ui.segment>:last-child{margin-bottom:0}.ui.segment>:only-child{margin:0}.ui.segment>.attached.label:first-child+*{margin-top:2em}.ui.segment>.bottom.attached.label:first-child+*{margin-top:0}.ui.disabled.segment{opacity:.8;color:#DDD}.ui.basic.segment{position:relative;background-color:transparent;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.ui.basic.segment:before{position:absolute;top:0;width:100%;content:'';height:1px;background-color:rgba(0,0,0,.05);border-top:1px solid rgba(255,255,255,.8)}.ui.blue.segment{border-top:.2em solid #6ECFF5}.ui.green.segment{border-top:.2em solid #A1CF64}.ui.red.segment{border-top:.2em solid #EF4D6D}.ui.purple.segment{border-top:.2em solid #564F8A}.ui.teal.segment{border-top:.2em solid #00B5AD}.ui.inverted.black.segment{background-color:#5C6166!important;color:#FFF!important}.ui.inverted.blue.segment{background-color:#6ECFF5!important;color:#FFF!important}.ui.inverted.green.segment{background-color:#A1CF64!important;color:#FFF!important}.ui.inverted.red.segment{background-color:#EF4D6D!important;color:#FFF!important}.ui.inverted.purple.segment{background-color:#564F8A!important;color:#FFF!important}.ui.inverted.teal.segment{background-color:#00B5AD!important;color:#FFF!important}.ui.left.aligned.segment{text-align:left}.ui.right.aligned.segment{text-align:right}.ui.center.aligned.segment{text-align:center}.ui.floated.segment,.ui.left.floated.segment{float:left}.ui.right.floated.segment{float:right}.ui.stacked.segment{padding-bottom:1.7em}.ui.stacked.segment:after,.ui.stacked.segment:before{content:'';position:absolute;bottom:-3px;left:0;border-top:1px solid rgba(0,0,0,.1);background-color:#F8F8F8;width:100%;height:5px}.ui.stacked.segment:before{bottom:0}.ui.raised.segment{-webkit-box-shadow:0 1px 2px 1px rgba(0,0,0,.1);-moz-box-shadow:0 1px 2px 1px rgba(0,0,0,.1);box-shadow:0 1px 2px 1px rgba(0,0,0,.1)}.ui.inverted.segment{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.ui.inverted.segment,.ui.primary.inverted.segment{background-color:#555;color:#FFF}.ui.secondary.inverted.segment{background-color:#777;color:#E2E2E2}.ui.tertiary.inverted.segment{background-color:#B0B0B0;color:#EBEBEB}.ui.primary.segment{background-color:#FFF;color:#555}.ui.secondary.segment{background-color:#F5F5F5;color:#777}.ui.tertiary.segment{background-color:#EBEBEB;color:#B0B0B0}.ui.segment.attached{top:-1px;bottom:-1px;-moz-border-radius:0;-webkit-border-radius:0;border-radius:0;margin:0;-moz-box-shadow:0 0 0 1px #DDD;-webkit-box-shadow:0 0 0 1px #DDD;box-shadow:0 0 0 1px #DDD}.ui.top.attached.segment{top:0;bottom:-1px;margin-top:0;-moz-border-radius:5px 5px 0 0;-webkit-border-radius:5px 5px 0 0;border-radius:5px 5px 0 0}.ui.segment.bottom.attached{top:-1px;bottom:0;margin-bottom:0;-moz-border-radius:0 0 5px 5px;-webkit-border-radius:0 0 5px 5px;border-radius:0 0 5px 5px}
+.ui.segment{position:relative;background-color:#FFF;-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.1);-moz-box-shadow:0 0 0 1px rgba(0,0,0,.1);box-shadow:0 0 0 1px rgba(0,0,0,.1);margin:1em 0;padding:1.3em 1em;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;overflow:hidden}.ui.vertical.segment{margin:0;padding-left:0;padding-right:0;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;-webkit-box-shadow:0 1px 0 rgba(0,0,0,.1),0 -1px 0 rgba(0,0,0,.1);-moz-box-shadow:0 1px 0 rgba(0,0,0,.1),0 -1px 0 rgba(0,0,0,.1);box-shadow:0 1px 0 rgba(0,0,0,.1),0 -1px 0 rgba(0,0,0,.1)}.ui.horizontal.segment{margin:0;padding-top:0;padding-bottom:0;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;-webkit-box-shadow:1px 0 0 rgba(0,0,0,.1),-1px 0 0 rgba(0,0,0,.1);-moz-box-shadow:1px 0 0 rgba(0,0,0,.1),-1px 0 0 rgba(0,0,0,.1);box-shadow:1px 0 0 rgba(0,0,0,.1),-1px 0 0 rgba(0,0,0,.1)}.ui.segment>:first-child{margin-top:0}.ui.segment>:last-child{margin-bottom:0}.ui.segment>:only-child{margin:0}.ui.segment>.attached.label:first-child+*{margin-top:2em}.ui.segment>.bottom.attached.label:first-child+*{margin-top:0}.ui.disabled.segment{opacity:.8;color:#DDD}.ui.basic.segment{position:relative;background-color:transparent;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.ui.basic.segment:before{position:absolute;top:0;width:100%;content:'';height:1px;background-color:rgba(0,0,0,.05);border-top:1px solid rgba(255,255,255,.8)}.ui.blue.segment{border-top:.2em solid #6ECFF5}.ui.green.segment{border-top:.2em solid #A1CF64}.ui.red.segment{border-top:.2em solid #EF4D6D}.ui.purple.segment{border-top:.2em solid #564F8A}.ui.teal.segment{border-top:.2em solid #00B5AD}.ui.inverted.black.segment{background-color:#5C6166!important;color:#FFF!important}.ui.inverted.blue.segment{background-color:#6ECFF5!important;color:#FFF!important}.ui.inverted.green.segment{background-color:#A1CF64!important;color:#FFF!important}.ui.inverted.red.segment{background-color:#EF4D6D!important;color:#FFF!important}.ui.inverted.purple.segment{background-color:#564F8A!important;color:#FFF!important}.ui.inverted.teal.segment{background-color:#00B5AD!important;color:#FFF!important}.ui.left.aligned.segment{text-align:left}.ui.right.aligned.segment{text-align:right}.ui.center.aligned.segment{text-align:center}.ui.floated.segment,.ui.left.floated.segment{float:left}.ui.right.floated.segment{float:right}.ui.stacked.segment{padding-bottom:1.7em}.ui.stacked.segment:after,.ui.stacked.segment:before{content:'';position:absolute;bottom:-3px;left:0;border-top:1px solid rgba(0,0,0,.1);background-color:#F8F8F8;width:100%;height:5px}.ui.stacked.segment:before{bottom:0}.ui.raised.segment{-webkit-box-shadow:0 1px 2px 1px rgba(0,0,0,.1);-moz-box-shadow:0 1px 2px 1px rgba(0,0,0,.1);box-shadow:0 1px 2px 1px rgba(0,0,0,.1)}.ui.inverted.segment{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.ui.inverted.segment,.ui.primary.inverted.segment{background-color:#555;color:#FFF}.ui.secondary.inverted.segment{background-color:#777;color:#E2E2E2}.ui.tertiary.inverted.segment{background-color:#B0B0B0;color:#EBEBEB}.ui.primary.segment{background-color:#FFF;color:#555}.ui.secondary.segment{background-color:#F5F5F5;color:#777}.ui.tertiary.segment{background-color:#EBEBEB;color:#B0B0B0}.ui.segment.attached{top:-1px;bottom:-1px;-moz-border-radius:0;-webkit-border-radius:0;border-radius:0;margin:0;-moz-box-shadow:0 0 0 1px #DDD;-webkit-box-shadow:0 0 0 1px #DDD;box-shadow:0 0 0 1px #DDD}.ui.top.attached.segment{top:0;bottom:-1px;margin-top:0;-moz-border-radius:5px 5px 0 0;-webkit-border-radius:5px 5px 0 0;border-radius:5px 5px 0 0}.ui.segment.bottom.attached{top:-1px;bottom:0;margin-bottom:0;-moz-border-radius:0 0 5px 5px;-webkit-border-radius:0 0 5px 5px;border-radius:0 0 5px 5px}

build/minified/modules/checkbox.js

@@ -66,6 +66,23 @@ $.fn.checkbox = function(parameters) {
           }
         },
 
+        is: {
+          radio: function() {
+            return $module
+              .hasClass(className.radio)
+            ;
+          }
+        },
+
+        can: {
+          disable: function() {
+            return (typeof settings.required === 'boolean')
+              ? settings.required
+              : !module.is.radio()
+            ;
+          }
+        },
+
         destroy: function() {
           module.verbose('Destroying previous module for', $module);
           $module
@@ -98,10 +115,11 @@ $.fn.checkbox = function(parameters) {
         },
 
         toggle: function() {
-          if( $input.prop('checked') === undefined || !$input.prop('checked') ) {
+          if($input.prop('checked') === undefined || !$input.prop('checked')) {
             module.enable();
           }
-          else {
+          else if( module.can.disable() ) {
+            console.log(settings.required, module.can.disable());
             module.disable();
           }
         },
@@ -257,10 +275,11 @@ $.fn.checkbox.settings = {
 
   verbose     : true,
   debug       : true,
-  performance : true,
+  performance : false,
   
   // delegated event context
   context     : false,
+  required    : 'auto',
 
   onChange    : function(){},
   onEnable    : function(){},
@@ -275,7 +294,8 @@ $.fn.checkbox.settings = {
   },
 
   className : {
-    active : 'active'
+    active : 'active',
+    radio  : 'radio'
   }
 
 };

build/minified/modules/checkbox.min.js

@@ -1 +1 @@
-(function(e,t,n,o){e.fn.checkbox=function(t){var n,a=e(this),i=e.extend(!0,{},e.fn.checkbox.settings,t),s="."+i.namespace,r="module-"+i.namespace,l=(a.selector||"",(new Date).getTime()),c=[],u=arguments[0],d="string"==typeof u,f=[].slice.call(arguments,1);return a.each(function(){var t,m=e(this),p=e(this).find(i.selector.input),g=m.selector||"",h=this,v=m.data("module-"+i.namespace),b=i.className,x=i.namespace,y=i.errors;t={initialize:function(){i.context&&""!==g?(t.verbose("Initializing checkbox with delegated events",m),e(h,i.context).on(g,"click"+s,t.toggle).data(r,t)):(t.verbose("Initializing checkbox with bound events",m),m.on("click"+s,t.toggle).data(r,t))},destroy:function(){t.verbose("Destroying previous module for",m),m.off(x)},enable:function(){t.debug("Enabling checkbox"),m.addClass(b.active),p.prop("checked",!0),e.proxy(i.onChange,p.get())(),e.proxy(i.onEnable,p.get())()},disable:function(){t.debug("Disabling checkbox"),m.removeClass(b.active),p.prop("checked",!1),e.proxy(i.onChange,p.get())(),e.proxy(i.onDisable,p.get())()},toggle:function(){p.prop("checked")!==o&&p.prop("checked")?t.disable():t.enable()},setting:function(t,n){return n===o?i[t]:(e.isPlainObject(t)?e.extend(!0,i,t):i[t]=n,o)},internal:function(n,a){return a===o?t[n]:(e.isPlainObject(n)?e.extend(!0,t,n):t[n]=a,o)},debug:function(){i.debug&&(t.performance.log(arguments[0]),t.verbose=Function.prototype.bind.call(console.info,console,i.moduleName+":"))},verbose:function(){i.verbose&&i.debug&&(t.performance.log(arguments[0]),t.verbose=Function.prototype.bind.call(console.info,console,i.moduleName+":"))},error:function(){console.log!==o&&(t.error=Function.prototype.bind.call(console.log,console,i.moduleName+":"))},performance:{log:function(e){var n,o,a;i.performance&&(n=(new Date).getTime(),a=l||n,o=n-a,l=n,c.push({Element:h,Name:e,"Execution Time":o}),clearTimeout(t.performance.timer),t.performance.timer=setTimeout(t.performance.display,100))},display:function(){var t=i.moduleName,n=(i.moduleName+": "+g+"("+a.size()+" elements)",0);g&&(t+="Performance ("+g+")"),(console.group!==o||console.table!==o)&&c.length>0&&(console.groupCollapsed(t),console.table?(e.each(c,function(e,t){n+=t["Execution Time"]}),console.table(c)):e.each(c,function(e,t){n+=t["Execution Time"]}),console.log("Total Execution Time:",n+"ms"),console.groupEnd(),c=[],l=!1)}},invoke:function(n,a,i){var s,r;return a=a||f,i=h||i,"string"==typeof n&&v!==o&&(n=n.split("."),s=n.length-1,e.each(n,function(n,a){return e.isPlainObject(v[a])&&n!=s?(v=v[a],!0):v[a]!==o?(r=v[a],!0):(t.error(y.method),!1)})),e.isFunction(r)?(t.verbose("Executing invoked function",r),r.apply(i,a)):r||!1}},d?(v===o&&t.initialize(),n=t.invoke(u)):(v!==o&&t.destroy(),t.initialize())}),n?n:this},e.fn.checkbox.settings={moduleName:"Checkbox Module",namespace:"checkbox",verbose:!0,debug:!0,performance:!0,context:!1,onChange:function(){},onEnable:function(){},onDisable:function(){},errors:{method:"The method you called is not defined."},selector:{input:"input"},className:{active:"active"}}})(jQuery,window,document);
+(function(e,t,n,o){e.fn.checkbox=function(t){var n,a=e(this),i=e.extend(!0,{},e.fn.checkbox.settings,t),s="."+i.namespace,r="module-"+i.namespace,l=(a.selector||"",(new Date).getTime()),c=[],u=arguments[0],d="string"==typeof u,f=[].slice.call(arguments,1);return a.each(function(){var t,m=e(this),p=e(this).find(i.selector.input),g=m.selector||"",h=this,v=m.data("module-"+i.namespace),b=i.className,x=i.namespace,y=i.errors;t={initialize:function(){i.context&&""!==g?(t.verbose("Initializing checkbox with delegated events",m),e(h,i.context).on(g,"click"+s,t.toggle).data(r,t)):(t.verbose("Initializing checkbox with bound events",m),m.on("click"+s,t.toggle).data(r,t))},is:{radio:function(){return m.hasClass(b.radio)}},can:{disable:function(){return"boolean"==typeof i.required?i.required:!t.is.radio()}},destroy:function(){t.verbose("Destroying previous module for",m),m.off(x)},enable:function(){t.debug("Enabling checkbox"),m.addClass(b.active),p.prop("checked",!0),e.proxy(i.onChange,p.get())(),e.proxy(i.onEnable,p.get())()},disable:function(){t.debug("Disabling checkbox"),m.removeClass(b.active),p.prop("checked",!1),e.proxy(i.onChange,p.get())(),e.proxy(i.onDisable,p.get())()},toggle:function(){p.prop("checked")!==o&&p.prop("checked")?t.can.disable()&&(console.log(i.required,t.can.disable()),t.disable()):t.enable()},setting:function(t,n){return n===o?i[t]:(e.isPlainObject(t)?e.extend(!0,i,t):i[t]=n,o)},internal:function(n,a){return a===o?t[n]:(e.isPlainObject(n)?e.extend(!0,t,n):t[n]=a,o)},debug:function(){i.debug&&(t.performance.log(arguments[0]),t.verbose=Function.prototype.bind.call(console.info,console,i.moduleName+":"))},verbose:function(){i.verbose&&i.debug&&(t.performance.log(arguments[0]),t.verbose=Function.prototype.bind.call(console.info,console,i.moduleName+":"))},error:function(){console.log!==o&&(t.error=Function.prototype.bind.call(console.log,console,i.moduleName+":"))},performance:{log:function(e){var n,o,a;i.performance&&(n=(new Date).getTime(),a=l||n,o=n-a,l=n,c.push({Element:h,Name:e,"Execution Time":o}),clearTimeout(t.performance.timer),t.performance.timer=setTimeout(t.performance.display,100))},display:function(){var t=i.moduleName,n=(i.moduleName+": "+g+"("+a.size()+" elements)",0);g&&(t+="Performance ("+g+")"),(console.group!==o||console.table!==o)&&c.length>0&&(console.groupCollapsed(t),console.table?(e.each(c,function(e,t){n+=t["Execution Time"]}),console.table(c)):e.each(c,function(e,t){n+=t["Execution Time"]}),console.log("Total Execution Time:",n+"ms"),console.groupEnd(),c=[],l=!1)}},invoke:function(n,a,i){var s,r;return a=a||f,i=h||i,"string"==typeof n&&v!==o&&(n=n.split("."),s=n.length-1,e.each(n,function(n,a){return e.isPlainObject(v[a])&&n!=s?(v=v[a],!0):v[a]!==o?(r=v[a],!0):(t.error(y.method),!1)})),e.isFunction(r)?(t.verbose("Executing invoked function",r),r.apply(i,a)):r||!1}},d?(v===o&&t.initialize(),n=t.invoke(u)):(v!==o&&t.destroy(),t.initialize())}),n?n:this},e.fn.checkbox.settings={moduleName:"Checkbox Module",namespace:"checkbox",verbose:!0,debug:!0,performance:!1,context:!1,required:"auto",onChange:function(){},onEnable:function(){},onDisable:function(){},errors:{method:"The method you called is not defined."},selector:{input:"input"},className:{active:"active",radio:"radio"}}})(jQuery,window,document);

build/packaged/modules/checkbox.js

@@ -66,6 +66,23 @@ $.fn.checkbox = function(parameters) {
           }
         },
 
+        is: {
+          radio: function() {
+            return $module
+              .hasClass(className.radio)
+            ;
+          }
+        },
+
+        can: {
+          disable: function() {
+            return (typeof settings.required === 'boolean')
+              ? settings.required
+              : !module.is.radio()
+            ;
+          }
+        },
+
         destroy: function() {
           module.verbose('Destroying previous module for', $module);
           $module
@@ -98,10 +115,11 @@ $.fn.checkbox = function(parameters) {
         },
 
         toggle: function() {
-          if( $input.prop('checked') === undefined || !$input.prop('checked') ) {
+          if($input.prop('checked') === undefined || !$input.prop('checked')) {
             module.enable();
           }
-          else {
+          else if( module.can.disable() ) {
+            console.log(settings.required, module.can.disable());
             module.disable();
           }
         },
@@ -257,10 +275,11 @@ $.fn.checkbox.settings = {
 
   verbose     : true,
   debug       : true,
-  performance : true,
+  performance : false,
   
   // delegated event context
   context     : false,
+  required    : 'auto',
 
   onChange    : function(){},
   onEnable    : function(){},
@@ -275,7 +294,8 @@ $.fn.checkbox.settings = {
   },
 
   className : {
-    active : 'active'
+    active : 'active',
+    radio  : 'radio'
   }
 
 };

build/uncompressed/collections/menu.css

@@ -229,16 +229,11 @@
 .ui.menu .item > a > .label {
   font-size: 0.9em;
   line-height: 1.33;
-  margin: -0.2em 0.6em;
+  margin: 0em 0em -0.3em 0.3em;
   padding: 0.2em 0.6em;
-  vertical-align: top;
+  vertical-align: baseline;
   text-transform: none;
 }
-.ui.vertical.menu .item > .label,
-.ui.vertical.menu .item > a > .label {
-  display: block;
-  float: right;
-}
 /*--------------
       Images
 ---------------*/
@@ -265,8 +260,6 @@
 }
 .ui.menu .dropdown.item.hover,
 .ui.menu .dropdown.item:hover {
-  background-color: rgba(0, 0, 0, 0.05);
-  color: rgba(170, 170, 170, 0.6);
   -webkit-border-bottom-right-radius: 0em;
   -moz-border-bottom-right-radius: 0em;
   border-bottom-right-radius: 0em;
@@ -319,6 +312,11 @@
   -moz-border-radius: 0px 5px 5px 0px;
   border-radius: 0px 5px 5px 0px;
 }
+.ui.vertical.menu .active.item,
+.ui.vertical.menu > .item:first-child,
+.ui.vertical.menu > .item:last-child {
+  border-radius: 0em;
+}
 .ui.vertical.menu .active.item .menu .active.item {
   border-left: none;
 }
@@ -339,9 +337,6 @@
 /*******************************
           Variations
 *******************************/
-/*******************************
-            Types
-*******************************/
 /*--------------
     Vertical
 ---------------*/
@@ -356,6 +351,10 @@
 .ui.vertical.menu > .item:last-child {
   border-radius: 0px 0px 0.325em 0.325em;
 }
+.ui.vertical.menu .item > .icon {
+  float: right;
+  margin: 0em 0em 0em 0.2em;
+}
 /*--- Border ---*/
 .ui.vertical.menu .item:before {
   position: absolute;
@@ -381,7 +380,6 @@
   width: auto;
   top: 0%;
   left: 100%;
-  margin: 0px 0px 0px 1px;
   -moz-border-radius: 0px 5px 5px 0px;
   -webkit-border-radius: 0px 5px 5px 0px;
   border-radius: 0px 5px 5px 0px;
@@ -396,9 +394,6 @@
 .ui.vertical.menu .item > .menu {
   margin: 0.5em -1em 0em;
 }
-.ui.vertical.menu .item > .menu > .item > .icon {
-  margin-right: 0.7em;
-}
 .ui.vertical.menu .item > .menu > .item {
   padding: 0.5rem 1.5rem;
   font-size: 0.85em;
@@ -528,7 +523,6 @@
 .ui.grey.menu {
   background-color: #F0F0F0;
 }
-/*--- Inverted Colors  ---*/
 .ui.green.menu .active.item {
   border-color: #A1CF64;
 }
@@ -693,7 +687,16 @@
   -moz-border-radius: 0px;
   border-radius: 0px;
 }
-.ui.basic.menu .item {
+.ui.basic.menu {
+  background-color: transparent;
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
+  -webkit-border-radius: 0px;
+  -moz-border-radius: 0px;
+  border-radius: 0px;
+}
+.ui.basic.menu > .item {
   -webkit-box-shadow: none;
   -moz-box-shadow: none;
   box-shadow: none;
@@ -703,19 +706,22 @@
   -moz-border-radius: 5px;
   border-radius: 5px;
 }
-.ui.basic.menu .item:before {
+.ui.basic.menu > .item:before {
   display: none;
 }
 /* active */
-.ui.basic.menu .active.item {
+.ui.basic.menu > .active.item {
   border-top: none;
   background-color: rgba(0, 0, 0, 0.08);
 }
-.ui.basic.inverted.menu .active.item {
+.ui.basic.inverted.menu > .active.item {
   background-color: rgba(255, 255, 255, 0.2);
 }
 /* disable variations */
-.ui.basic.pointing.menu item.active:after {
+.ui.basic.item.menu > .item {
+  margin: 0em;
+}
+.ui.basic.pointing.menu > item.active:after {
   -webkit-box-shadow: none;
   -moz-box-shadow: none;
   box-shadow: none;

build/uncompressed/elements/header.css

@@ -14,11 +14,21 @@
 *******************************/
 /* Standard */
 .ui.header {
-  line-height: 1.33;
+  border: none;
+  margin: 1em 0em 1rem;
+  padding: 0em;
   font-size: 1.33em;
   font-weight: bold;
+  line-height: 1.33;
+}
+.ui.header .ui.sub.header,
+.ui.header .sub.header {
+  font-size: 1rem;
+  font-weight: normal;
+  margin: 0em;
   padding: 0em;
-  border: none;
+  line-height: 1.2;
+  color: rgba(0, 0, 0, 0.5);
 }
 /* Positioning */
 .ui.header:first-child {
@@ -32,55 +42,42 @@
 ---------------*/
 h1.ui.header {
   min-height: 1rem;
-  margin: 2rem 0rem 1.5rem;
   line-height: 1.33;
   font-size: 2rem;
 }
 h2.ui.header {
-  margin: 1.5rem 0rem 1rem;
   line-height: 1.33;
-  font-size: 1.5rem;
+  font-size: 1.75rem;
 }
 h3.ui.header {
-  margin: 1.3rem 0rem 1rem;
   line-height: 1.33;
   font-size: 1.33rem;
 }
 h4.ui.header {
-  margin: 0.75rem 0rem 0.3rem;
   line-height: 1.33;
   font-size: 1.1rem;
 }
 h5.ui.header {
-  margin: 0rem 0rem 0.2rem;
   line-height: 1.2;
   font-size: 1rem;
 }
 /*--------------
  Content Heading
 ---------------*/
-.huge.ui.header {
+.ui.huge.header {
   min-height: 1em;
-  line-height: 1.33em;
   font-size: 2em;
 }
-.large.ui.header {
-  line-height: 1.33em;
-  font-size: 1.5em;
+.ui.large.header {
+  font-size: 1.75em;
 }
-.medium.ui.header {
-  margin-bottom: 0.25em;
-  line-height: 1.33em;
-  font-size: 1.25em;
+.ui.medium.header {
+  font-size: 1.33em;
 }
-.small.ui.header {
-  margin-bottom: 0.25em;
-  line-height: 1.33em;
+.ui.small.header {
   font-size: 1.1em;
 }
-.tiny.ui.header {
-  margin-bottom: 0em;
-  line-height: 1.2em;
+.ui.tiny.header {
   font-size: 1em;
 }
 /*******************************
@@ -92,14 +89,6 @@ h5.ui.header {
 /*******************************
            Variations
 *******************************/
-/*-------------------
-      Inverted 
---------------------*/
-.ui.inverted.header {
-  background-color: #222222;
-  padding: 0.7em 1em;
-  color: #FFFFFF;
-}
 /*-------------------
        Colors
 --------------------*/
@@ -121,6 +110,37 @@ h5.ui.header {
 .ui.teal.header {
   color: #00B5AD !important;
 }
+.ui.blue.block.header {
+  background-color: #E6EEF1;
+  border-left: 0.2em solid #6ECFF5;
+}
+.ui.black.block.header {
+  background-color: #EAEAEA;
+  border-left: 0.2em solid #5C6166;
+}
+.ui.green.block.header {
+  background-color: #EFF8E4;
+  border-left: 0.2em solid #A1CF64;
+}
+.ui.red.block.header {
+  background-color: #F6E5E8;
+  border-left: 0.2em solid #EF4D6D;
+}
+.ui.purple.block.header {
+  background-color: #EFEDF8;
+  border-left: 0.2em solid #564F8A;
+}
+.ui.teal.block.header {
+  background-color: #E9F7F6;
+  border-left: 0.2em solid #00B5AD;
+}
+/*-------------------
+      Inverted 
+--------------------*/
+.ui.inverted.header {
+  background-color: #222222;
+  color: #FFFFFF;
+}
 /*-------------------
    Inverted Colors
 --------------------*/
@@ -148,6 +168,9 @@ h5.ui.header {
   background-color: #00B5AD !important;
   color: #FFFFFF !important;
 }
+.ui.inverted.block.header {
+  border-left: none;
+}
 /*-------------------
        Aligned
 --------------------*/
@@ -170,9 +193,20 @@ h5.ui.header {
 .ui.right.floated.header {
   float: right;
 }
+/*-------------------
+        Block
+--------------------*/
+.ui.block.header {
+  background-color: #F0F0F0;
+  padding: 0.5em 1em;
+}
 /*-------------------
       Dividing
 --------------------*/
+.ui.dividing.header {
+  padding-bottom: 0.2rem;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+}
 /*-------------------
        Attached
 --------------------*/

build/uncompressed/elements/segment.css

@@ -31,6 +31,8 @@
 }
 .ui.vertical.segment {
   margin: 0em;
+  padding-left: 0em;
+  padding-right: 0em;
   -webkit-border-radius: 0px;
   -moz-border-radius: 0px;
   border-radius: 0px;
@@ -40,6 +42,8 @@
 }
 .ui.horizontal.segment {
   margin: 0em;
+  padding-top: 0em;
+  padding-bottom: 0em;
   -webkit-border-radius: 0px;
   -moz-border-radius: 0px;
   border-radius: 0px;

build/uncompressed/modules/checkbox.js

@@ -66,6 +66,23 @@ $.fn.checkbox = function(parameters) {
           }
         },
 
+        is: {
+          radio: function() {
+            return $module
+              .hasClass(className.radio)
+            ;
+          }
+        },
+
+        can: {
+          disable: function() {
+            return (typeof settings.required === 'boolean')
+              ? settings.required
+              : !module.is.radio()
+            ;
+          }
+        },
+
         destroy: function() {
           module.verbose('Destroying previous module for', $module);
           $module
@@ -98,10 +115,11 @@ $.fn.checkbox = function(parameters) {
         },
 
         toggle: function() {
-          if( $input.prop('checked') === undefined || !$input.prop('checked') ) {
+          if($input.prop('checked') === undefined || !$input.prop('checked')) {
             module.enable();
           }
-          else {
+          else if( module.can.disable() ) {
+            console.log(settings.required, module.can.disable());
             module.disable();
           }
         },
@@ -257,10 +275,11 @@ $.fn.checkbox.settings = {
 
   verbose     : true,
   debug       : true,
-  performance : true,
+  performance : false,
   
   // delegated event context
   context     : false,
+  required    : 'auto',
 
   onChange    : function(){},
   onEnable    : function(){},
@@ -275,7 +294,8 @@ $.fn.checkbox.settings = {
   },
 
   className : {
-    active : 'active'
+    active : 'active',
+    radio  : 'radio'
   }
 
 };

node/Gruntfile.js

@@ -39,7 +39,8 @@ module.exports = function(grunt) {
     watch: {
       scripts: {
         files: [
-          '../src/**/*.less'
+          '../src/**/*.less',
+          '../src/**/*.js'
         ],
         tasks : tasks
       }

node/src/documents/collection.html

@@ -8,12 +8,12 @@ type   : 'Semantic'
 
 <div class="segment">
   <div class="container">
-    <h1>UI Collection</h1>
+    <h1 class="ui dividing header">UI Collection</h1>
     <p>UI collections are elements which contain other elements which often appear together.<p>
   </div>
 </div>
 <div class="main container">
-  <h2>Types of Collections</h2>
+  <h2 class="ui dividing header">Types of Collections</h2>
   
   <div class="ui horizontal type items">
     <div class="item">

node/src/documents/download.html

@@ -7,7 +7,7 @@ type   : 'Library'
 ---
 <div class="segment">
   <div class="container">
-    <h1>Download</h1>
+    <h1 class="ui dividing header">Download</h1>
     <p>Download semantic</p>
   </div>
 </div>

node/src/documents/element.html

@@ -8,7 +8,7 @@ type   : 'Semantic'
 
 <div class="segment">
   <div class="container">
-    <h1>UI Element</h1>
+    <h1 class="ui dividing header">UI Element</h1>
     <p>UI elements are the basic building blocks of a website. They help to structure content so that information, and possible user interactions on a website are more intuitive.</p>
   </div>
 </div>
@@ -20,10 +20,10 @@ type   : 'Semantic'
       <a class="item">Types</a>
     </div>
   </div>
-  <h2>Definition</h2>
+  <h2 class="ui dividing header">Definition</h2>
   <p>UI Elements are the smallest useful unit for describing page content, and do not contain other elements inside themselves.</p>
   
-  <h3>Plurality</h3>
+  <h3 class="ui header">Plurality</h3>
   <p>Element usually exist by themselves, but they my also be grouped together with other elements of their kind. This forms a plural definition of an element.</p>
   <p>The look and feel of the plural may change to show a relationship, and plural definitions can often share many of the same variations as singular definitions.</p>
 
@@ -45,7 +45,7 @@ type   : 'Semantic'
     </div>
   </div>
   
-  <h2>Types</h2>
+  <h2 class="ui dividing header">Types</h2>
   
   <div class="ui horizontal type items">
     

node/src/documents/elements/button.html

@@ -7,7 +7,7 @@ type   : 'UI Element'
 ---
 <div class="segment">
   <div class="container">
-  <h1>Button</h1>
+  <h1 class="ui dividing header">Button</h1>
   <p>Buttons indicate a possible user action.</p>
   </div>
 </div>
@@ -21,60 +21,60 @@ type   : 'UI Element'
       <a class="item">Groups</a>
     </div>
   </div>
-  <h2>Standard</h2>
+  <h2 class="ui dividing header">Standard</h2>
   
   <div class="example">
-    <h4>Button:</h4>
+    <h4 class="ui header">Button:</h4>
     <p>A standard button</p>
     <div class="ui button">Button</div>
   </div>
 
-  <h2>States</h2>
+  <h2 class="ui dividing header">States</h2>
   
   <div class="example">
-  <h4>Hover</h4>
+  <h4 class="ui header">Hover</h4>
   <p>Changes when a user moves their cursor over it</p>
   <div class="ui hover button">Hovered Button</div>
   </div>
   
   <div class="example">
-  <h4>Down</h4>
+  <h4 class="ui header">Down</h4>
   <p>Changes when pressed using touch or mouse events</p>
   <div class="ui down button">Pressed Button</div>
   </div>
   
   <div class="example">
-  <h4>Active</h4>
+  <h4 class="ui header">Active</h4>
   <p>Changes to show it is currently the selected user action</p>
   <div class="ui active button">Active Button</div>
   </div>
   
   <div class="example">
-  <h4>Disabled</h4>
+  <h4 class="ui header">Disabled</h4>
   <p>Changes to show it is currently unable to be interacted with</p>
   <div class="ui disabled button">Disabled Button</div>
   </div>
   
   <div class="example">
-  <h4>Loading</h4>
+  <h4 class="ui header">Loading</h4>
   <p>Can show a loading indicator:</p>
   <div class="ui loading button">Loading Button</div>
   </div>
   
   <div class="example">
-  <h4>Success</h4>
+  <h4 class="ui header">Success</h4>
   <p>Can alert to a succesful action:</p>
   <div class="ui success button">Successful Button</div>
   </div>
   
   <div class="example">
-  <h4>Error</h4>
+  <h4 class="ui header">Error</h4>
   <p>Can alert user of an error:</p>
   <div class="ui error button">Error</div>
   </div>
     
   <div class="example">
-    <h4>All together:</h4>  
+    <h4 class="ui header">All together:</h4>  
     <div class="ui button">Normal</div>
     <div class="ui button hover">Hover</div>
     <div class="ui button down">Down</div>
@@ -87,11 +87,11 @@ type   : 'UI Element'
     <div class="ui button success">Success</div>
   </div>
 
-  <h2>Variations</h2>
+  <h2 class="ui dividing header">Variations</h2>
   <p>Button variations are used to explain relationships between user actions and other elements, or to show emphasis.</p>
   
   <div class="example">
-    <h4>Sizes</h4>
+    <h4 class="ui header">Sizes</h4>
     <p>Can have different sizes:</p>
     <div class="mini ui button">
       Mini
@@ -121,7 +121,7 @@ type   : 'UI Element'
 
   
   <div class="example">
-    <h4>Colors</h4>
+    <h4 class="ui header">Colors</h4>
     <p>Can have different colors:</p>
     <a class="ui black button">Black Button</a>
     <a class="ui green button">Green BUtton</a>
@@ -132,7 +132,7 @@ type   : 'UI Element'
     <a class="ui teal button">Teal Button</a>
   </div>
   
-  <h4>Feedback</h4>
+  <h4 class="ui header">Feedback</h4>
   <div class="example">
     <p>Can be positive or negative:</p>
     <div class="positive ui button">Positive Button</div>
@@ -140,19 +140,19 @@ type   : 'UI Element'
   </div>
   
   <div class="example">
-    <h4>Fluid</h4>
+    <h4 class="ui header">Fluid</h4>
     <p>Can fit parent container:</p>
     <div class="fluid ui button">Fits container</div>
   </div>
     
   <div class="example">
-    <h4>Bubbly</h4>
+    <h4 class="ui header">Bubbly</h4>
     <p>Can be bubbly:</p>
     <div class="bubbly ui button">More bubbly</div>
   </div>
     
   <div class="example">
-    <h4>Icon</h4>
+    <h4 class="ui header">Icon</h4>
     <p>Can be formatted as an icon toolbar:</p>
     <div class="massive icon ui button">
       <i class="icon cloud"></i>
@@ -160,7 +160,7 @@ type   : 'UI Element'
   </div>
   
   <div class="example">
-    <h4>Vertically Attached</h4>
+    <h4 class="ui header">Vertically Attached</h4>
     <p>Can be attached to the top or bottom of other content</p>
     <div class="ui top attached button">Top</div>
     <div style="border-left: 1px solid #DDDDDD;border-right: 1px solid #DDDDDD;background-color:#FFFFFF;height:200px;"></div>
@@ -168,7 +168,7 @@ type   : 'UI Element'
   </div>
   
   <div class="example">
-    <h4>Horizontally Attached</h4>
+    <h4 class="ui header">Horizontally Attached</h4>
     <p>Can be attached to the left or right of other content</p>
     <div class="ui left attached button">Left</div>
     <div style="width: 200px; display: inline-block; background-color: rgb(255, 255, 255); vertical-align: middle; height: 38px; margin: 0px -4px; border-bottom: 2px solid rgb(221, 221, 221); border-top: 2px solid rgb(221, 221, 221);"></div>
@@ -176,7 +176,7 @@ type   : 'UI Element'
   </div>
 
   <div class="example">
-    <h4>Form Attached</h4>
+    <h4 class="ui header">Form Attached</h4>
     <p>Can be attached to an input field</p>
     <div class="ui form">
       <input type="text" class="attached">
@@ -184,10 +184,10 @@ type   : 'UI Element'
     </div> 
   </div> 
 
-  <h2>Group</h2>
+  <h2 class="ui dividing header">Group</h2>
   
   <div class="example">
-    <h4>Buttons</h4>
+    <h4 class="ui header">Buttons</h4>
     <p>Can exist together as groups</p>
     <div class="ui buttons">
       <div class="ui button">One</div>
@@ -197,7 +197,7 @@ type   : 'UI Element'
   </div>
     
   <div class="example">
-    <h4>Conditionals</h4>
+    <h4 class="ui header">Conditionals</h4>
     <p>Groups can be separated by conditionals</p>
     <div class="ui buttons">
       <div class="ui button">Cancel</div>
@@ -206,13 +206,13 @@ type   : 'UI Element'
     </div>
   </div>
   
-  <h3>Plural Variations</h3>
+  <h3 class="ui header">Plural Variations</h3>
   <p>Singular variations can be applied to groups to infer all elements share the same quality</p>
     
 
 
   <div class="example">
-    <h4>Vertical</h4>
+    <h4 class="ui header">Vertical</h4>
     <p>Groups can be formatted to appear vertically</p>
     <div class="ui vertical buttons">
       <div class="ui button">Top</div>
@@ -222,7 +222,7 @@ type   : 'UI Element'
   </div>
   
   <div class="example">
-    <h4>Icon</h4>
+    <h4 class="ui header">Icon</h4>
     <p>Groups can be formatted as icon toolbars</p>
     <div class="ui icon buttons">
       <div class="ui button"><i class="icon pause"></i></div>
@@ -232,7 +232,7 @@ type   : 'UI Element'
   </div>
     
   <div class="example">
-    <h4>Fluid</h4>
+    <h4 class="ui header">Fluid</h4>
     <p>Groups can be divided evenly to fit parent</p>
     <div class="ui five fluid buttons">
       <div class="ui button">One</div>
@@ -244,7 +244,7 @@ type   : 'UI Element'
   </div>
   
   <div class="example">
-    <h4>Colors</h4>
+    <h4 class="ui header">Colors</h4>
     <p>Groups can have a shared color</p>
     <div class="blue ui buttons">
       <div class="ui button">One</div>
@@ -256,7 +256,7 @@ type   : 'UI Element'
     
     
   <div class="example"></div>
-    <h4>Sizes</h4>
+    <h4 class="ui header">Sizes</h4>
     <p>Groups can have a shared size</p>
     <div class="huge ui buttons">
       <div class="ui button">One</div>

node/src/documents/elements/header.html

@@ -7,7 +7,7 @@ type   : 'UI Element'
 ---
 <div class="segment">
   <div class="container">
-  <h1>Header</h1>
+  <h1 class="ui dividing header">Header</h1>
   <p>Headers provide a short summary of content</p>
   </div>
 </div>
@@ -20,12 +20,12 @@ type   : 'UI Element'
       <a class="item">Variations</a> 
     </div>
   </div>
-  <h2>Standard</h2>
+  <h2 class="ui dividing header">Standard</h2>
   
   <div class="example">
-    <h4>Page Headings</h4>
-    <p>Page headings are ordered headings showing the structure of content on a page. There size is always relative to the page's font size</p>
-    <div class="ui top attached segment">
+    <h4 class="ui header">Page Headings</h4>
+      <p class="header">Page headings are ordered headings showing the structure of content on a page. There size is always relative to the page's font size</p>
+    <div class="ui basic vertical segment">
       <h1 class="ui header">First header</h1>
       <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>
       <h2 class="ui header">Second header</h2>
@@ -37,47 +37,47 @@ type   : 'UI Element'
       <h5 class="ui header">Fifth header</h5>
       <p>Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.</p>
     </div>
-    <div class="ui two item bottom attached small basic font menu">
+    <div class="ui two item font menu">
       <a class="increase item"> <i class="icon plus"></i> Base Font</a>
       <a class="decrease item"> <i class="icon minus"></i> Base Font</a>
     </div>
   </div>
   
   <div class="example">
-    <h4>Content Headings</h4>
+    <h4 class="ui header">Content Headings</h4>
     <p>Content headings are specified by their size and will change their size relative to the font-size of the content that surrounds it.</p>
-    <div class="ui top attached segment">
-      <h3 class="ui huge header">Huge Header</h3>
+    <div class="ui basic vertical segment">
+      <div class="ui huge header">Huge Header</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>
-      <h3 class="ui large header">Large Header</h3>
+      <div class="ui large header">Large Header</div>
       <p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>
-      <h3 class="ui medium header">Medium Header</h3>
+      <div class="ui medium header">Medium Header</div>
       <p>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</p>
-      <h3 class="ui small header">Small Header</h3>
+      <div class="ui small header">Small Header</div>
       <p>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</p>
-      <h3 class="ui tiny header">Tiny Header</h3>
+      <div class="ui tiny header">Tiny Header</div>
       <p>Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.</p>
     </div>
-    <div class="ui two item bottom attached small basic font menu">
+    <div class="ui two item font menu">
       <a class="increase item"> <i class="icon plus"></i> Base Font</a>
       <a class="decrease item"> <i class="icon minus"></i> Base Font</a>
     </div>
   </div>
 
-  <h2>States</h2>
+  <h2 class="ui dividing header">States</h2>
   
   <div class="example">
-    <h4>Disabled</h4>
+    <h4 class="ui header">Disabled</h4>
     <p>A header can show that its inactive</p>
     <div class="ui disabled header">
       Disabled Header
     </div>
   </div>
   
-  <h2>Variations</h2>
+  <h2 class="ui dividing header">Variations</h2>
   
   <div class="example">
-    <h4>Icon</h4>
+    <h4 class="ui header">Icon</h4>
     <p>A header can be formatted to emphasize an icon</p>
     <h1 class="ui icon header">
       <i class="icon mail"></i>
@@ -86,7 +86,7 @@ type   : 'UI Element'
   </div>
   
   <div class="example">
-    <h4>Floating</h4>
+    <h4 class="ui header">Floating</h4>
     <p>A header can sit to the left or right of other content</p>
     <div class="ui segment">
       <h3 class="ui right floated header">
@@ -98,7 +98,7 @@ type   : 'UI Element'
     </div>
   </div>
   <div class="example">
-    <h4>Text Alignment</h4>
+    <h4 class="ui header">Text Alignment</h4>
     <p>A header can have its text aligned to a side</p>
     <div class="ui segment">
       <h3 class="ui right aligned header">
@@ -114,7 +114,7 @@ type   : 'UI Element'
   </div>
   
   <div class="example">
-    <h4>Colors</h4>
+    <h4 class="ui header">Colors</h4>
     <p>A header can be formatted with different colors</p>
     <h5 class="ui black header">
       Black
@@ -135,9 +135,41 @@ type   : 'UI Element'
       Teal
     </h5>
   </div>
+  <div class="another example">
+    <h5 class="ui black block header">
+      Black
+    </h5>
+    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
+    
+    <h5 class="ui blue block header">
+      Blue
+    </h5>
+    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
+    
+    <h5 class="ui red block header">
+      Red
+    </h5>
+    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
+    
+    <h5 class="ui green block header">
+      Green
+    </h5>
+    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
+    
+    <h5 class="ui purple block header">
+      Purple
+    </h5>
+    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
+    
+    <h5 class="ui teal block header">
+      Teal
+    </h5>
+    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
+  </div>
+  
   
   <div class="example">
-    <h4>Inverted</h4>
+    <h4 class="ui header">Inverted</h4>
     <p>A header can have its colors inverted for contrast</p>
     <h5 class="ui inverted black header">
       Black
@@ -158,10 +190,41 @@ type   : 'UI Element'
       Teal
     </h5>
   </div>
+  <div class="another example">
+    <h4 class="ui black inverted block header">
+      Black
+    </h4>
+    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
+    
+    <h4 class="ui blue inverted block header">
+      Blue
+    </h4>
+    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
+    
+    <h4 class="ui red inverted block header">
+      Red
+    </h4>
+    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
+    
+    <h4 class="ui green inverted block header">
+      Green
+    </h4>
+    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
+    
+    <h4 class="ui purple inverted block header">
+      Purple
+    </h4>
+    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
+    
+    <h4 class="ui teal inverted block header">
+      Teal
+    </h4>
+    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
+  </div>
   
 <!--   
 <div class="example">
-  <h4>Dividing</h4>
+  <h4 class="ui header">Dividing</h4>
   <p>A header can be formatted to be displayed with a divider</p>
   <h1 class="ui dividing header">
     <i class="icon easel"></i>
@@ -170,7 +233,7 @@ type   : 'UI Element'
 </div> -->
   
   <div class="example">
-    <h4>Attached</h4>
+    <h4 class="ui header">Attached</h4>
     <p>A header can be attached to other content</p>
     <h3 class="ui top attached header">
       Sign Up For Our Site
@@ -184,10 +247,4 @@ type   : 'UI Element'
     </h3>
     
   </div>
-  
-  
-  <h2>Groups</h2>
-  
-  
-  
 </div>

node/src/documents/elements/icon.html

@@ -7,7 +7,7 @@ type   : 'UI Element'
 ---
 <div class="segment">
   <div class="container">
-  <h1>Icon</h1>
+  <h1 class="ui dividing header">Icon</h1>
   <p>An icon is a glyph used to represent another concept more succinctly.</p>
   </div>
 </div>
@@ -21,17 +21,17 @@ type   : 'UI Element'
     </div>
   </div>
 
-  <h2>Standard</h2>
+  <h2 class="ui dividing header">Standard</h2>
 
 
-    <h4>Icon Set</h4>
+    <h4 class="ui header">Icon Set</h4>
     <p>Icon sets contain an arbitrary number of icons</p>
     <div class="ui ignored warning message">
       Icons serve a very similar function to text in a page. In semantic icons receive a special tag "i" which allow for an abbreviated markup when sitting along-side text.
     </div>
 
   <div class="icon example">
-    <h4>Content</h4>
+    <h4 class="ui header">Content</h4>
     <div class="ui eight column grid">
       <div class="column"><i class="icon attachment"></i> Attachment</div>
       <div class="column"><i class="icon barcode"></i> Barcode</div>
@@ -65,7 +65,7 @@ type   : 'UI Element'
     </div>
   </div>
   <div class="another icon example">
-    <h4>Special Content</h4>
+    <h4 class="ui header">Special Content</h4>
     <div class="ui eight column grid">
       <div class="column"><i class="icon trophy"></i> Trophy</div>
       <div class="column"><i class="icon cloud"></i> Cloud</div>
@@ -78,7 +78,7 @@ type   : 'UI Element'
   </div>
   
   <div class="another icon example">
-    <h4>User Actions</h4>
+    <h4 class="ui header">User Actions</h4>
     <div class="ui eight column grid">
       <div class="column"><i class="icon add user"></i> Add User</div>
       <div class="column"><i class="icon block"></i> Block</div>
@@ -108,7 +108,7 @@ type   : 'UI Element'
   </div>
   
   <div class="another icon example">
-    <h4>View</h4>
+    <h4 class="ui header">View</h4>
     <div class="ui eight column grid">
       <div class="column"><i class="icon content"></i> Content</div>
       <div class="column"><i class="icon grid layout"></i> Grid Layout</div>
@@ -123,7 +123,7 @@ type   : 'UI Element'
     </div>
   </div>
   <div class="another icon example">
-    <h4>Media Actions</h4>
+    <h4 class="ui header">Media Actions</h4>
     <div class="ui eight column grid">
       <div class="column"><i class="icon eject"></i> Eject</div>
       <div class="column"><i class="icon fast-forward"></i> Fast-forward</div>
@@ -138,7 +138,7 @@ type   : 'UI Element'
     </div>
   </div>
   <div class="another icon example">
-    <h4>Objects</h4>
+    <h4 class="ui header">Objects</h4>
     <div class="ui eight column grid">
       <div class="column"><i class="icon book"></i> Book</div>
       <div class="column"><i class="icon calendar"></i> Calendar</div>
@@ -157,7 +157,7 @@ type   : 'UI Element'
   
   
   <div class="another icon example">
-    <h4>Indications</h4>
+    <h4 class="ui header">Indications</h4>
     <div class="ui eight column grid">
       <div class="column"><i class="icon cancel circle"></i> Cancel Circle</div>
       <div class="column"><i class="icon asterisk"></i> Asterisk</div>
@@ -181,7 +181,7 @@ type   : 'UI Element'
   </div>
   
   <div class="another icon example">
-    <h4>Symbols</h4>
+    <h4 class="ui header">Symbols</h4>
     <div class="ui eight column grid">
       <div class="column"><i class="icon left arrow"></i> Left Open</div>
       <div class="column"><i class="icon left triangle"></i> Left Triangle</div>
@@ -202,7 +202,7 @@ type   : 'UI Element'
   </div>
   
   <div class="another icon example">
-    <h4>Social</h4>
+    <h4 class="ui header">Social</h4>
     <div class="ui eight column grid">
       <div class="column"><i class="icon facebook"></i> Facebook</div>
       <div class="column"><i class="icon twitter"></i> Twitter</div>
@@ -210,18 +210,18 @@ type   : 'UI Element'
     </div>
   </div>
 
-  <h2>States</h2>
+  <h2 class="ui dividing header">States</h2>
 
   <div class="example">
-    <h4>Disabled</h4>
+    <h4 class="ui header">Disabled</h4>
     <p>An icon can show that it is disabled</p>
     <i class="disabled users icon"></i>
   </div>
 
-  <h2>Variations</h2>
+  <h2 class="ui dividing header">Variations</h2>
   
   <div class="example">
-    <h4>Size</h4>
+    <h4 class="ui header">Size</h4>
     <p>An icon can vary in size</p>
     <i class="small users icon"></i> Users
     <br>
@@ -235,13 +235,13 @@ type   : 'UI Element'
   </div>
 
   <div class="example">
-    <h4>Emphasized</h4>
+    <h4 class="ui header">Emphasized</h4>
     <p>An icon can be formatted to show emphasis</p>
     <i class="emphasized users icon"></i>
   </div>
   
   <div class="example">
-    <h4>Colors</h4>
+    <h4 class="ui header">Colors</h4>
     <p>An icon can be formatted with different colors</p>
     <i class="black users icon"></i>
     <i class="blue user icon"></i>
@@ -252,7 +252,7 @@ type   : 'UI Element'
   </div>
   
   <div class="example">
-    <h4>Inverted</h4>
+    <h4 class="ui header">Inverted</h4>
     <p>an icon can have its colors inverted for contrast</p>
     <i class="inverted black users icon"></i>
     <i class="inverted blue user icon"></i>

node/src/documents/elements/label.html

@@ -8,7 +8,7 @@ type   : 'UI Element'
 
 <div class="segment">
   <div class="container">
-    <h1>Label</h1>
+    <h1 class="ui dividing header">Label</h1>
     <p>Labels can be used to give descriptions to sections of content. They can be formatted like tags, used to mark separate sections of a group of content.</p>
   </div>
 </div>
@@ -23,9 +23,9 @@ type   : 'UI Element'
     </div>
   </div>
   
-  <h2>Standard</h2>
+  <h2 class="ui dividing header">Standard</h2>
   <div class="example">
-    <h4>Label</h4>
+    <h4 class="ui header">Label</h4>
     <p>A basic label</p>
     <div class="ui segment">
       <div class="ui label">
@@ -35,7 +35,7 @@ type   : 'UI Element'
   </div>
   
   <div class="example">
-    <h4>Linkable Label</h4>
+    <h4 class="ui header">Linkable Label</h4>
     <p>If an a tag is used, a label will be formatted as a link</p>
     <a class="ui label">
       Fun
@@ -43,7 +43,7 @@ type   : 'UI Element'
   </div>
   
   <div class="example">
-    <h4>Label with detail</h4>
+    <h4 class="ui header">Label with detail</h4>
     <p>A tag can optionally display a detail</p>
     <div class="ui segment">
       <div class="ui label">
@@ -60,7 +60,7 @@ type   : 'UI Element'
   </div>
 
   <div class="example">
-    <h4>Removable label</h4>
+    <h4 class="ui header">Removable label</h4>
     <p>A tag can also be removable</p>
     <div class="ui segment">
       <div class="ui label">
@@ -71,12 +71,12 @@ type   : 'UI Element'
   </div>
   
 
-  <h2>States</h2>
+  <h2 class="ui dividing header">States</h2>
   <p>Labels only have a single ui state</p>
   
-  <h2>Variations</h2>
+  <h2 class="ui dividing header">Variations</h2>
   <div class="example">
-    <h4>Colors</h4>
+    <h4 class="ui header">Colors</h4>
     <p>A label can have different colors</p>
     <a class="ui black label">
       First
@@ -98,7 +98,7 @@ type   : 'UI Element'
     </a>
   </div>
   <div class="example">
-    <h4>Floating</h4>
+    <h4 class="ui header">Floating</h4>
     <p>A label can float above another element</p>
     <div class="ui compact menu">
       <a class="item">
@@ -115,7 +115,7 @@ type   : 'UI Element'
   
   
   <div class="example">
-    <h4>Pointing</h4>
+    <h4 class="ui header">Pointing</h4>
     <p>A label can point to content next to it</p>
     <form class="ui fluid form">
       <div class="field">
@@ -149,7 +149,7 @@ type   : 'UI Element'
   </div>
   
   <div class="example">
-    <h4>Attached Label</h4>
+    <h4 class="ui header">Attached Label</h4>
     <p>A label attached to a content segment</p>
     <div class="ui segment">
       <div class="ui attached label">Top Left</div>
@@ -161,7 +161,7 @@ type   : 'UI Element'
   </div>
 
   <div class="example">
-    <h4>Size</h4>
+    <h4 class="ui header">Size</h4>
     <p>A label can be small or large</p>
     <div class="ui small label">
       Fun
@@ -172,10 +172,10 @@ type   : 'UI Element'
     </div>
   </div>
   
-  <h2>Groups</h2>
+  <h2 class="ui dividing header">Groups</h2>
   
   <div class="example">
-    <h4>Label Groups</h4>
+    <h4 class="ui header">Label Groups</h4>
     <p>Labels can share sizes together</p>
     <div class="ui large labels">
       <div class="ui label">

node/src/documents/elements/progress.html

@@ -7,7 +7,7 @@ type   : 'UI Element'
 ---
 <div class="segment">
   <div class="container">
-  <h1>Progress Bar</h1>
+  <h1 class="ui dividing header">Progress Bar</h1>
   <p>Progress bars show the percent of a task complete</p>
   </div>
 </div>
@@ -20,20 +20,20 @@ type   : 'UI Element'
       <a class="item">Variations</a> 
     </div>
   </div>
-  <h2>Standard</h2>
+  <h2 class="ui dividing header">Standard</h2>
   
   <div class="example">
-    <h4>Progress:</h4>
+    <h4 class="ui header">Progress:</h4>
     <p>A standard progress bar</p>
     <div class="ui progress">
       <div class="bar"></div>
     </div>
   </div>
 
-  <h2>States</h2>
+  <h2 class="ui dividing header">States</h2>
   
   <div class="example">
-    <h4>Active</h4>
+    <h4 class="ui header">Active</h4>
     <p>A progress bar can show activity</p>
     <div class="ui active progress">
       <div class="bar"></div>
@@ -42,7 +42,7 @@ type   : 'UI Element'
   
   
   <div class="example">
-  <h4>Successful</h4>
+  <h4 class="ui header">Successful</h4>
   <p>A progress bar can be successful</p>
     <div class="ui successful progress">
       <div class="bar" style="width:100%"></div>
@@ -50,7 +50,7 @@ type   : 'UI Element'
   </div>
   
   <div class="example">
-  <h4>Failed</h4>
+  <h4 class="ui header">Failed</h4>
   <p>A progress bar can be failed</p>
     <div class="ui failed progress">
       <div class="bar" style="width:100%"></div>
@@ -58,17 +58,17 @@ type   : 'UI Element'
   </div>
   
   <div class="example">
-  <h4>Disabled</h4>
+  <h4 class="ui header">Disabled</h4>
   <p>A progress bar can be disabled</p>
     <div class="ui disabled progress">
       <div class="bar" style="width:100%"></div>
     </div>
   </div>
   
-  <h2>Variations</h2>
+  <h2 class="ui dividing header">Variations</h2>
   
   <div class="example">
-    <h4>Color</h4>
+    <h4 class="ui header">Color</h4>
     <p>Can have different colors:</p>
     <div class="ui blue progress">
       <div class="bar"></div>
@@ -101,7 +101,7 @@ type   : 'UI Element'
   </div>
   
   <div class="example">
-    <h4>Striped</h4>
+    <h4 class="ui header">Striped</h4>
     <p>A progress bar can be striped</p>
     <div class="ui striped progress">
       <div class="bar"></div>

node/src/documents/elements/segment.html

@@ -7,7 +7,7 @@ type   : 'UI Element'
 ---
 <div class="segment">
   <div class="container">
-  <h1>Segment</h1>
+  <h1 class="ui dividing header">Segment</h1>
   <p>A segment is used to create a grouping of related content.</p>
   </div>
 </div>
@@ -19,24 +19,24 @@ type   : 'UI Element'
       <a class="item">Variations</a> 
     </div>
   </div>
-  <h2>Standard</h2>
+  <h2 class="ui dividing header">Standard</h2>
   
   <div class="example">
-    <h4>Segment</h4>
+    <h4 class="ui header">Segment</h4>
     <p>A segment of content</p>
     <div class="ui segment">
       <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>
   <div class="example">
-    <h4>Vertical Segment</h4>
+    <h4 class="ui header">Vertical Segment</h4>
     <p>A vertical segment divides content vertically</p>
     <div class="ui vertical segment">
       <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>
   <div class="example">
-    <h4>Horizontal Segment</h4>
+    <h4 class="ui header">Horizontal Segment</h4>
     <p>A horizontal segment divides content horizontally</p>
     <div class="ui horizontal segment">
       <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>
@@ -44,16 +44,16 @@ type   : 'UI Element'
   </div>
 
 
-  <h2>States</h2>
+  <h2 class="ui dividing header">States</h2>
 
   <div class="ui disabled segment">
     <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>
   
-  <h2>Variations</h2>
+  <h2 class="ui dividing header">Variations</h2>
 
   <div class="example">
-    <h4>Inverted</h4>
+    <h4 class="ui header">Inverted</h4>
     <p>A segment can have its colors inverted for contrast</p>
     <div class="ui inverted segment">
       <p>I'm here to tell you something, and you will probably read me first.</p>
@@ -61,7 +61,7 @@ type   : 'UI Element'
   </div>
 
   <div class="example">
-    <h4>Colored</h4>
+    <h4 class="ui header">Colored</h4>
     <p>A segment can be colored</p>
     <div class="ui blue segment">
       <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>
@@ -99,7 +99,7 @@ type   : 'UI Element'
   </div>
   
   <div class="example">
-    <h4>Ordinality</h4>
+    <h4 class="ui header">Ordinality</h4>
     <p>A segment can be formatted to appear more or less noticable</p>
     <div class="ui primary segment">
       <p>I'm here to tell you something, and you will probably read me first.</p>
@@ -124,7 +124,7 @@ type   : 'UI Element'
   </div>
   
   <div class="example">
-    <h4>Floated</h4>
+    <h4 class="ui header">Floated</h4>
     <p>A header can sit to the left or right of other content</p>
     <div class="ui right floated segment">
       <p>This segment will appear to the right
@@ -135,7 +135,7 @@ type   : 'UI Element'
   </div>
   
   <div class="example">
-    <h4>Text Alignment</h4>
+    <h4 class="ui header">Text Alignment</h4>
     <p>A header can have its text aligned to a side</p>
     <div class="ui right aligned segment">
       Right
@@ -149,7 +149,7 @@ type   : 'UI Element'
   </div>
   
   <div class="example">
-    <h4>Basic</h4>
+    <h4 class="ui header">Basic</h4>
     <p>A segment may reduce its complexity to blend in with a page</p>
     <div class="ui basic segment">
       <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
@@ -157,7 +157,7 @@ type   : 'UI Element'
   </div>
   
   <div class="example">
-    <h4>Stacked</h4>
+    <h4 class="ui header">Stacked</h4>
     <p>A segment can be formatted to show it contains multiple pages</p>
     <div class="ui stacked segment">
       <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
@@ -165,7 +165,7 @@ type   : 'UI Element'
   </div>
   
   <div class="example">
-    <h4>Raised</h4>
+    <h4 class="ui header">Raised</h4>
     <p>A segment may be formatted to raise above the page.</p>
     <div class="ui raised segment">
       <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
@@ -174,7 +174,7 @@ type   : 'UI Element'
   
   
   <div class="example">
-    <h4>Attached</h4>
+    <h4 class="ui header">Attached</h4>
     <p>A segment can be attached to other content on a page</p>
     
     <div class="ui top attached segment">

node/src/documents/elements/step.html

@@ -8,7 +8,7 @@ type   : 'UI Element'
 
 <div class="segment">
   <div class="container">
-    <h1>Step</h1>
+    <h1 class="ui dividing header">Step</h1>
     <p>Steps can be used to give descriptions to sections of content. They can be formatted like tags, used to mark separate sections of a group of content.</p>
   </div>
 </div>
@@ -23,9 +23,9 @@ type   : 'UI Element'
     </div>
   </div>
   
-  <h2>Standard</h2>
+  <h2 class="ui dividing header">Standard</h2>
   <div class="example">
-    <h4>Step</h4>
+    <h4 class="ui header">Step</h4>
     <p>A basic set of steps</p>
     <div class="ui steps">
       <div class="ui step">
@@ -43,11 +43,11 @@ type   : 'UI Element'
     </div>
   </div>
 
-  <h2>States</h2>
+  <h2 class="ui dividing header">States</h2>
 
-  <h2>Variations</h2>
+  <h2 class="ui dividing header">Variations</h2>
   <div class="example">
-    <h4>Step</h4>
+    <h4 class="ui header">Step</h4>
     <p>Steps can be divided evenly inside their parent</p>
     <div class="ui four fluid steps">
       <div class="ui active step">
@@ -65,7 +65,7 @@ type   : 'UI Element'
     </div>
   </div>
 
-  <h2>Groups</h2>
+  <h2 class="ui dividing header">Groups</h2>
 
 </div>
 </body>

node/src/documents/index.html

@@ -7,8 +7,8 @@ type   : 'Semantic'
 
 <div class="masthead segment">
   <div class="container">
-    <h1><i class="icon globe"></i>Semantic UI</h1>
-    <h2><strike>HTML</strike> UI is the DNA of the web.</h2>
+    <h1 class="ui dividing header"><i class="icon globe"></i>Semantic UI</h1>
+    <h2 class="ui dividing header"><strike>HTML</strike> UI is the DNA of the web.</h2>
     <p>Semantic empowers designers and developers by creating a shared vocabulary for user interfaces.</p>
     
     <div class="ui large black compact menu">

node/src/documents/module.html

@@ -8,7 +8,7 @@ type   : 'Semantic'
 
 <div class="segment">
   <div class="container">
-    <h1>UI Modules</h1>
+    <h1 class="ui dividing header">UI Modules</h1>
     <p>UI modules are interface elements whose behavior is an essential part of their definition.</p>
   </div>
 </div>
@@ -21,15 +21,15 @@ type   : 'Semantic'
     </div>
   </div>
   
-  <h2>Types</h2>
+  <h2 class="ui dividing header">Types</h2>
   
-  <h2>Usage</h3>
+  <h2 class="ui dividing header">Usage</h3>
   
 
-  <h2>Settings</h2>
+  <h2 class="ui dividing header">Settings</h2>
   <p>Settings in UI widgets are any part of a widget definition which is mutable. Most UI widgets have a set of common settings which are useful across all plugins.
   
-  <h3>Common Settings</h3>
+  <h3 class="ui header">Common Settings</h3>
     <table class="ui table">
       <thead>
         <th>Name</th>
@@ -71,7 +71,7 @@ type   : 'Semantic'
     </tbody>
   </table>
   
-  <h3>Changing Settings</h3> 
+  <h3 class="ui header">Changing Settings</h3> 
   <ol>
     <li>A settings object can be passed in when initializing the plugin
       <br> 
@@ -99,7 +99,7 @@ type   : 'Semantic'
     </div>
     </li>
   </ol>
-  <h3>Reading Settings</h3>
+  <h3 class="ui header">Reading Settings</h3>
   <p>Settings can also be read programmatically: 
   <div class="code">
     $('.foo').module('setting', 'moduleName');

node/src/documents/modules/checkbox.html

@@ -8,7 +8,7 @@ type   : 'UI Module'
 
 <div class="segment">
   <div class="container">
-    <h1>Checkbox</h1>
+    <h1 class="ui dividing header">Checkbox</h1>
     <p>A checkbox is a <a href="/module.html">ui module</a> which indicates a user's selection of a choice.</p>
   </div>
 </div>
@@ -23,10 +23,10 @@ type   : 'UI Module'
     </div>
   </div>
   
-  <h2>Standard</h2>
+  <h2 class="ui dividing header">Standard</h2>
 
   <div class="example">
-    <h4>Check Box</h4>
+    <h4 class="ui header">Check Box</h4>
     <p>A standard checkbox</p>
     <div class="ui checkbox">
       <input type="checkbox" />
@@ -35,7 +35,7 @@ type   : 'UI Module'
   </div>
 
   <div class="example">
-    <h4>Static Check Box</h4>
+    <h4 class="ui header">Static Check Box</h4>
     <p>A checkbox can function without javascript</p>
     <div class="ui checkbox">
       <input type="checkbox" id="unique-id" />
@@ -44,7 +44,7 @@ type   : 'UI Module'
   </div>
   
   <div class="example">
-    <h4>Form Checkbox</h4>
+    <h4 class="ui header">Form Checkbox</h4>
     <p>A checkbox can be found inside a form</p>
     <div class="ui form segment">
       <div class="field">
@@ -62,10 +62,10 @@ type   : 'UI Module'
     </div>
   </div>
   
-  <h2>Variations</h2>
+  <h2 class="ui dividing header">Variations</h2>
   
   <div class="example">
-    <h4>Radio Box</h4>
+    <h4 class="ui header">Radio Box</h4>
     <p>A checkbox can be formatted as a radio element. This means it is an exclusive option.</p>
     <div class="ui radio checkbox">
       <input type="radio" name="foo" />
@@ -78,7 +78,7 @@ type   : 'UI Module'
   </div>
   
   <div class="example">
-    <h4>Size</h4>
+    <h4 class="ui header">Size</h4>
     <p>A checkbox can be a different size.</p>
     <div class="ui large checkbox">
       <input type="checkbox" />
@@ -91,7 +91,7 @@ type   : 'UI Module'
     </div>
   </div>
   
-  <h2>Behavior</h2>
+  <h2 class="ui dividing header">Behavior</h2>
 
   <div class="example">
     <p>A checkbox can be enabled, disabled, or toggled.</p>
@@ -172,20 +172,25 @@ type   : 'UI Module'
     </div>
   </div>
   
-  <h2>Getting Started</h2>
-  <h3>Initializing a check box</h3>
+  <h2 class="ui dividing header">Getting Started</h2>
+  <h3 class="ui header">Initializing a check box</h3>
   <div class="code">
     $('.ui.checkbox')
       .checkbox()
     ;
   </div>
   
-  <h3>Defaults</h3>
+  <h3 class="ui header">Defaults</h3>
   <table class="ui settings celled table">
     <thead>
       <th colspan="3">Checkbox Settings</th>
     </thead>
     <tbody>
+      <tr>
+        <td>required</td>
+        <td>auto</td>
+        <td>Setting to true/false will determine whether an input will allow no selection. Auto will set disallow this behavior only for radio boxes</td>
+      </tr>
       <tr>
         <td>context</td>
         <td>false</td>

node/src/documents/modules/shape.html

@@ -8,7 +8,7 @@ type   : 'UI Module'
 
 <div class="segment">
   <div class="container">
-    <h1>Shape</h1>
+    <h1 class="ui dividing header">Shape</h1>
     <p>Shape is a plugin for 3D transitioning elements.</p>
   </div>
 </div>
@@ -27,9 +27,9 @@ type   : 'UI Module'
     
   <p>Click here to read more</a> about Semantic spec, and the upcoming library.</p>
 
-  <h2>Examples</h2>
+  <h2 class="ui dividing header">Examples</h2>
 
-  <h3>Standard</h3>
+  <h3 class="ui header">Standard</h3>
   <div class="demo square shape module">
     <div class="shape">
       <div class="active jira side">
@@ -44,14 +44,14 @@ type   : 'UI Module'
     </div>
   </div>
 
-  <h3>Shape</h3>
+  <h3 class="ui header">Shape</h3>
   <div class="ui shape buttons">
     <div class="active ui button" data-shape="square">Square</div>
     <div class="ui button" data-shape="rectangle">Rectangle</div>
     <div class="ui button" data-shape="irregular">Irregular</div>
   </div>
 
-  <h3>Flip</h3>
+  <h3 class="ui header">Flip</h3>
   <div class="ui direction buttons">
     <div class="ui button" data-animation="flip" data-direction="left">Left</div>
     <div class="ui button" data-animation="flip" data-direction="right">Right</div>
@@ -60,7 +60,7 @@ type   : 'UI Module'
     <div class="ui button" data-animation="flip" data-direction="over">Over</div>
   </div>
 
-  <h2>Usage</h2>
+  <h2 class="ui dividing header">Usage</h2>
 
   <p>The plugin must be initialized once before methods can be accessed</p>
   <div class="code">$('.shape')
@@ -83,8 +83,8 @@ type   : 'UI Module'
   .shape('repaint')
 ;</div>
 
-  <h2>Settings</h2>
-  <h3>Changing Settings</h3> 
+  <h2 class="ui dividing header">Settings</h2>
+  <h3 class="ui header">Changing Settings</h3> 
   <ol>
     <li>A settings object can be passed in when initializing the plugin
       <br> <div class="code">$('.foo')
@@ -100,9 +100,9 @@ type   : 'UI Module'
       <br><div class="code">$('.foo').shape('setting', 'moduleName', 'Godzilla');</div>
     </li>
   </ol>
-  <h3>Reading Settings</h3>
+  <h3 class="ui header">Reading Settings</h3>
   <p>Settings can also be read programmatically: <div class="code">$('.foo').shape('setting', 'moduleName');</div>
-  <h3>Defaults</h3>
+  <h3 class="ui header">Defaults</h3>
   <table class="ui settings table">
       <thead>
         <th colspan="3">Shape Settings</th>

node/src/documents/sink.html

@@ -7,7 +7,7 @@ type   : 'Other'
 ---
 <div class="segment">
   <div class="container">
-    <h1>Project Roadmap</h1>
+    <h1 class="ui dividing header">Project Roadmap</h1>
   </div>
 </div>
 <div class="main container">

node/src/documents/views/comment.html

@@ -7,7 +7,7 @@ type   : 'UI View'
 ---
 <div class="segment">
   <div class="container">
-  <h1>Comments</h1>
+  <h1 class="ui dividing header">Comments</h1>
   <p>A comment view is used to display lists of user feedback to site content.</p>
   </div>
 </div>
@@ -21,10 +21,10 @@ type   : 'UI View'
     </div>
   </div>
   
-  <h2>Standard</h2>
+  <h2 class="ui dividing header">Standard</h2>
   
   <div class="example">
-    <h4>Comments</h4>
+    <h4 class="ui header">Comments</h4>
     <p>A basic comment with only required sections</p>
     <div class="ui comments">
       <div class="comment">
@@ -36,12 +36,12 @@ type   : 'UI View'
     </div>
   </div>
   
-  <h2>Content</h2>
+  <h2 class="ui dividing header">Content</h2>
   
-  <h3>Comment</h3>
+  <h3 class="ui header">Comment</h3>
   
   <div class="example">
-    <h4>Avatar</h4>
+    <h4 class="ui header">Avatar</h4>
     <p>A comment can optionally contain an image or avatar</p>
     <div class="ui comments">
       <div class="comment">
@@ -59,7 +59,7 @@ type   : 'UI View'
   </div>
   
   <div class="example">
-    <h4>Metadata</h4>
+    <h4 class="ui header">Metadata</h4>
     <p>A comment can optionally contain metadata about the comment, metadata can be an arbitrary length.</p>
     <div class="ui comments">
       <div class="comment">
@@ -80,10 +80,10 @@ type   : 'UI View'
   </div>
   
   
-  <h2>Variations</h2>
+  <h2 class="ui dividing header">Variations</h2>
   
   <div class="example">
-    <h4>Threaded</h4>
+    <h4 class="ui header">Threaded</h4>
     <p>A comment list can be threaded to showing the relationship between conversations</p>
     <div class="ui threaded comments">
       <div class="comment">

node/src/files/components/semantic/collections/menu.css

@@ -229,16 +229,11 @@
 .ui.menu .item > a > .label {
   font-size: 0.9em;
   line-height: 1.33;
-  margin: -0.2em 0.6em;
+  margin: 0em 0em -0.3em 0.3em;
   padding: 0.2em 0.6em;
-  vertical-align: top;
+  vertical-align: baseline;
   text-transform: none;
 }
-.ui.vertical.menu .item > .label,
-.ui.vertical.menu .item > a > .label {
-  display: block;
-  float: right;
-}
 /*--------------
       Images
 ---------------*/
@@ -265,8 +260,6 @@
 }
 .ui.menu .dropdown.item.hover,
 .ui.menu .dropdown.item:hover {
-  background-color: rgba(0, 0, 0, 0.05);
-  color: rgba(170, 170, 170, 0.6);
   -webkit-border-bottom-right-radius: 0em;
   -moz-border-bottom-right-radius: 0em;
   border-bottom-right-radius: 0em;
@@ -319,6 +312,11 @@
   -moz-border-radius: 0px 5px 5px 0px;
   border-radius: 0px 5px 5px 0px;
 }
+.ui.vertical.menu .active.item,
+.ui.vertical.menu > .item:first-child,
+.ui.vertical.menu > .item:last-child {
+  border-radius: 0em;
+}
 .ui.vertical.menu .active.item .menu .active.item {
   border-left: none;
 }
@@ -339,9 +337,6 @@
 /*******************************
           Variations
 *******************************/
-/*******************************
-            Types
-*******************************/
 /*--------------
     Vertical
 ---------------*/
@@ -356,6 +351,10 @@
 .ui.vertical.menu > .item:last-child {
   border-radius: 0px 0px 0.325em 0.325em;
 }
+.ui.vertical.menu .item > .icon {
+  float: right;
+  margin: 0em 0em 0em 0.2em;
+}
 /*--- Border ---*/
 .ui.vertical.menu .item:before {
   position: absolute;
@@ -381,7 +380,6 @@
   width: auto;
   top: 0%;
   left: 100%;
-  margin: 0px 0px 0px 1px;
   -moz-border-radius: 0px 5px 5px 0px;
   -webkit-border-radius: 0px 5px 5px 0px;
   border-radius: 0px 5px 5px 0px;
@@ -396,9 +394,6 @@
 .ui.vertical.menu .item > .menu {
   margin: 0.5em -1em 0em;
 }
-.ui.vertical.menu .item > .menu > .item > .icon {
-  margin-right: 0.7em;
-}
 .ui.vertical.menu .item > .menu > .item {
   padding: 0.5rem 1.5rem;
   font-size: 0.85em;
@@ -528,7 +523,6 @@
 .ui.grey.menu {
   background-color: #F0F0F0;
 }
-/*--- Inverted Colors  ---*/
 .ui.green.menu .active.item {
   border-color: #A1CF64;
 }
@@ -693,7 +687,16 @@
   -moz-border-radius: 0px;
   border-radius: 0px;
 }
-.ui.basic.menu .item {
+.ui.basic.menu {
+  background-color: transparent;
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
+  -webkit-border-radius: 0px;
+  -moz-border-radius: 0px;
+  border-radius: 0px;
+}
+.ui.basic.menu > .item {
   -webkit-box-shadow: none;
   -moz-box-shadow: none;
   box-shadow: none;
@@ -703,19 +706,22 @@
   -moz-border-radius: 5px;
   border-radius: 5px;
 }
-.ui.basic.menu .item:before {
+.ui.basic.menu > .item:before {
   display: none;
 }
 /* active */
-.ui.basic.menu .active.item {
+.ui.basic.menu > .active.item {
   border-top: none;
   background-color: rgba(0, 0, 0, 0.08);
 }
-.ui.basic.inverted.menu .active.item {
+.ui.basic.inverted.menu > .active.item {
   background-color: rgba(255, 255, 255, 0.2);
 }
 /* disable variations */
-.ui.basic.pointing.menu item.active:after {
+.ui.basic.item.menu > .item {
+  margin: 0em;
+}
+.ui.basic.pointing.menu > item.active:after {
   -webkit-box-shadow: none;
   -moz-box-shadow: none;
   box-shadow: none;

node/src/files/components/semantic/elements/header.css

@@ -14,11 +14,21 @@
 *******************************/
 /* Standard */
 .ui.header {
-  line-height: 1.33;
+  border: none;
+  margin: 1em 0em 1rem;
+  padding: 0em;
   font-size: 1.33em;
   font-weight: bold;
+  line-height: 1.33;
+}
+.ui.header .ui.sub.header,
+.ui.header .sub.header {
+  font-size: 1rem;
+  font-weight: normal;
+  margin: 0em;
   padding: 0em;
-  border: none;
+  line-height: 1.2;
+  color: rgba(0, 0, 0, 0.5);
 }
 /* Positioning */
 .ui.header:first-child {
@@ -32,55 +42,42 @@
 ---------------*/
 h1.ui.header {
   min-height: 1rem;
-  margin: 2rem 0rem 1.5rem;
   line-height: 1.33;
   font-size: 2rem;
 }
 h2.ui.header {
-  margin: 1.5rem 0rem 1rem;
   line-height: 1.33;
-  font-size: 1.5rem;
+  font-size: 1.75rem;
 }
 h3.ui.header {
-  margin: 1.3rem 0rem 1rem;
   line-height: 1.33;
   font-size: 1.33rem;
 }
 h4.ui.header {
-  margin: 0.75rem 0rem 0.3rem;
   line-height: 1.33;
   font-size: 1.1rem;
 }
 h5.ui.header {
-  margin: 0rem 0rem 0.2rem;
   line-height: 1.2;
   font-size: 1rem;
 }
 /*--------------
  Content Heading
 ---------------*/
-.huge.ui.header {
+.ui.huge.header {
   min-height: 1em;
-  line-height: 1.33em;
   font-size: 2em;
 }
-.large.ui.header {
-  line-height: 1.33em;
-  font-size: 1.5em;
+.ui.large.header {
+  font-size: 1.75em;
 }
-.medium.ui.header {
-  margin-bottom: 0.25em;
-  line-height: 1.33em;
-  font-size: 1.25em;
+.ui.medium.header {
+  font-size: 1.33em;
 }
-.small.ui.header {
-  margin-bottom: 0.25em;
-  line-height: 1.33em;
+.ui.small.header {
   font-size: 1.1em;
 }
-.tiny.ui.header {
-  margin-bottom: 0em;
-  line-height: 1.2em;
+.ui.tiny.header {
   font-size: 1em;
 }
 /*******************************
@@ -92,14 +89,6 @@ h5.ui.header {
 /*******************************
            Variations
 *******************************/
-/*-------------------
-      Inverted 
---------------------*/
-.ui.inverted.header {
-  background-color: #222222;
-  padding: 0.7em 1em;
-  color: #FFFFFF;
-}
 /*-------------------
        Colors
 --------------------*/
@@ -121,6 +110,37 @@ h5.ui.header {
 .ui.teal.header {
   color: #00B5AD !important;
 }
+.ui.blue.block.header {
+  background-color: #E6EEF1;
+  border-left: 0.2em solid #6ECFF5;
+}
+.ui.black.block.header {
+  background-color: #EAEAEA;
+  border-left: 0.2em solid #5C6166;
+}
+.ui.green.block.header {
+  background-color: #EFF8E4;
+  border-left: 0.2em solid #A1CF64;
+}
+.ui.red.block.header {
+  background-color: #F6E5E8;
+  border-left: 0.2em solid #EF4D6D;
+}
+.ui.purple.block.header {
+  background-color: #EFEDF8;
+  border-left: 0.2em solid #564F8A;
+}
+.ui.teal.block.header {
+  background-color: #E9F7F6;
+  border-left: 0.2em solid #00B5AD;
+}
+/*-------------------
+      Inverted 
+--------------------*/
+.ui.inverted.header {
+  background-color: #222222;
+  color: #FFFFFF;
+}
 /*-------------------
    Inverted Colors
 --------------------*/
@@ -148,6 +168,9 @@ h5.ui.header {
   background-color: #00B5AD !important;
   color: #FFFFFF !important;
 }
+.ui.inverted.block.header {
+  border-left: none;
+}
 /*-------------------
        Aligned
 --------------------*/
@@ -170,9 +193,20 @@ h5.ui.header {
 .ui.right.floated.header {
   float: right;
 }
+/*-------------------
+        Block
+--------------------*/
+.ui.block.header {
+  background-color: #F0F0F0;
+  padding: 0.5em 1em;
+}
 /*-------------------
       Dividing
 --------------------*/
+.ui.dividing.header {
+  padding-bottom: 0.2rem;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+}
 /*-------------------
        Attached
 --------------------*/

node/src/files/components/semantic/elements/segment.css

@@ -31,6 +31,8 @@
 }
 .ui.vertical.segment {
   margin: 0em;
+  padding-left: 0em;
+  padding-right: 0em;
   -webkit-border-radius: 0px;
   -moz-border-radius: 0px;
   border-radius: 0px;
@@ -40,6 +42,8 @@
 }
 .ui.horizontal.segment {
   margin: 0em;
+  padding-top: 0em;
+  padding-bottom: 0em;
   -webkit-border-radius: 0px;
   -moz-border-radius: 0px;
   border-radius: 0px;

node/src/files/components/semantic/modules/checkbox.js

@@ -66,6 +66,23 @@ $.fn.checkbox = function(parameters) {
           }
         },
 
+        is: {
+          radio: function() {
+            return $module
+              .hasClass(className.radio)
+            ;
+          }
+        },
+
+        can: {
+          disable: function() {
+            return (typeof settings.required === 'boolean')
+              ? settings.required
+              : !module.is.radio()
+            ;
+          }
+        },
+
         destroy: function() {
           module.verbose('Destroying previous module for', $module);
           $module
@@ -98,10 +115,11 @@ $.fn.checkbox = function(parameters) {
         },
 
         toggle: function() {
-          if( $input.prop('checked') === undefined || !$input.prop('checked') ) {
+          if($input.prop('checked') === undefined || !$input.prop('checked')) {
             module.enable();
           }
-          else {
+          else if( module.can.disable() ) {
+            console.log(settings.required, module.can.disable());
             module.disable();
           }
         },
@@ -257,10 +275,11 @@ $.fn.checkbox.settings = {
 
   verbose     : true,
   debug       : true,
-  performance : true,
+  performance : false,
   
   // delegated event context
   context     : false,
+  required    : 'auto',
 
   onChange    : function(){},
   onEnable    : function(){},
@@ -275,7 +294,8 @@ $.fn.checkbox.settings = {
   },
 
   className : {
-    active : 'active'
+    active : 'active',
+    radio  : 'radio'
   }
 
 };

node/src/files/javascript/semantic.js

@@ -3,6 +3,24 @@ window.semantic = {
   handler: {}
 };
 
+// Allow for console.log to not break IE
+if (typeof window.console == "undefined" || typeof window.console.log == "undefined") {
+  window.console = {
+    log  : function() {},
+    info : function(){},
+    warn : function(){}
+  };
+}
+if(typeof window.console.group == 'undefined' || typeof window.console.groupEnd == 'undefined' || typeof window.console.groupCollapsed == 'undefined') {
+  window.console.group = function(){};
+  window.console.groupEnd = function(){};
+  window.console.groupCollapsed = function(){};
+}
+if(typeof window.console.markTimeline == 'undefined') {
+  window.console.markTimeline = function(){};
+}
+window.console.clear = function(){};
+
 // ready event
 semantic.ready = function() {
 
@@ -96,7 +114,8 @@ semantic.ready = function() {
     createCode: function(type) {
       var
         $example   = $(this).closest('.example'),
-        $demo      = $example.children().not('p:not(.ui), h4:not(.ui), i.code, .annotated, .ignore'),
+        $header    = $example.children('.ui.header:first-of-type, p:first-of-type'),
+        $demo      = $example.children().not($header).not('i.code:first-child, .annotated, .ignore'),
         $annotated = $example.find('.annotated'),
         $code      = $annotated.find('.code'),
         whiteSpace = new RegExp('\\n\\s{4}', 'g'),
@@ -132,6 +151,7 @@ semantic.ready = function() {
       }
       if( ($demo.first().is(':visible') || type == 'developer') && type != 'designer' ) {
         $demo.hide();
+        $header.show();
         $annotated.fadeIn(500);
       }
       else {

node/src/files/stylesheets/semantic.css

@@ -167,7 +167,7 @@ h1 {
   padding: 50px 0px 5px;
   border-bottom: 1px solid rgba(0, 0, 0, 0.1);
 }
-h1 {
+/* h1 {
   margin: 0px auto;
   font-size: 38px;
 }
@@ -190,7 +190,7 @@ h4 {
   font-size: 18px;
   font-weight: bold;
   color: #555555;
-}
+} */
 h4 + p {
   margin: 0px 0px 20px;
 }
@@ -763,6 +763,9 @@ box-shadow: 3px 0px 2px rgba(0, 0, 0, 0.2); */
 #example h4 + .example i.code {
   top: 0px;
 }
+#example .example h4 {
+  margin-bottom: 0em;
+}
 #example .example {
   margin: 1em 0em;
   padding: 1em 0em;

src/collections/menu.less

@@ -313,16 +313,11 @@
 .ui.menu .item > a > .label {
   font-size: 0.9em;
   line-height: 1.33;
-  margin: -0.2em 0.6em;
+  margin: 0em 0em -0.3em 0.3em;
   padding: 0.2em 0.6em;
-  vertical-align: top;
+  vertical-align: baseline;
   text-transform: none;
 }
-.ui.vertical.menu .item > .label,
-.ui.vertical.menu .item > a > .label {
-  display: block;
-  float: right;
-}
 
 /*--------------
       Images
@@ -355,8 +350,6 @@
 
 .ui.menu .dropdown.item.hover,
 .ui.menu .dropdown.item:hover {
-  background-color: rgba(0, 0, 0, 0.05);
-  color: rgba(170, 170, 170, 0.6);
 
   -webkit-border-bottom-right-radius: 0em;
   -moz-border-bottom-right-radius: 0em;
@@ -421,6 +414,14 @@
   -moz-border-radius: 0px 5px 5px 0px;
   border-radius: 0px 5px 5px 0px;
 }
+
+.ui.vertical.menu .active.item,
+.ui.vertical.menu > .item:first-child,
+.ui.vertical.menu > .item:last-child {
+  border-radius: 0em;
+}
+
+
 .ui.vertical.menu .active.item .menu .active.item {
   border-left: none;
 }
@@ -446,11 +447,6 @@
           Variations
 *******************************/
 
-
-/*******************************
-            Types
-*******************************/
-
 /*--------------
     Vertical
 ---------------*/
@@ -467,6 +463,11 @@
   border-radius: 0px 0px 0.325em 0.325em;
 }
 
+.ui.vertical.menu .item > .icon {
+  float: right;
+  margin: 0em 0em 0em 0.2em;
+}
+
 /*--- Border ---*/
 .ui.vertical.menu .item:before {
   position: absolute;
@@ -514,8 +515,6 @@
   width: auto;
   top: 0%;
   left: 100%;
-  margin: 0px 0px 0px 1px;
-
 
   -moz-border-radius: 0px 5px 5px 0px;
   -webkit-border-radius: 0px 5px 5px 0px;
@@ -534,9 +533,6 @@
 .ui.vertical.menu .item > .menu {
   margin: 0.5em -1em 0em;
 }
-.ui.vertical.menu .item > .menu > .item > .icon {
-  margin-right: 0.7em;
-}
 .ui.vertical.menu .item > .menu > .item {
   padding: 0.5rem 1.5rem;
   font-size: 0.85em;
@@ -720,8 +716,6 @@
 .ui.grey.menu {
   background-color: #F0F0F0;
 }
-
-/*--- Inverted Colors  ---*/
 .ui.green.menu .active.item {
   border-color: #A1CF64;
 }
@@ -918,33 +912,44 @@
   -moz-border-radius: 0px;
   border-radius: 0px;
 }
-.ui.basic.menu .item {
+
+.ui.basic.menu {
+  background-color: transparent;
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
+  -webkit-border-radius: 0px;
+  -moz-border-radius: 0px;
+  border-radius: 0px;
+}
+.ui.basic.menu > .item {
   -webkit-box-shadow: none;
   -moz-box-shadow: none;
   box-shadow: none;
-
   padding: 0.4em 1.3em;
   margin: 0em 0.2em;
-
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   border-radius: 5px;
 }
-.ui.basic.menu .item:before {
+.ui.basic.menu > .item:before {
   display: none;
 }
 
 /* active */
-.ui.basic.menu .active.item {
+.ui.basic.menu > .active.item {
   border-top: none;
   background-color: rgba(0, 0, 0, 0.08);
 }
-.ui.basic.inverted.menu .active.item {
+.ui.basic.inverted.menu > .active.item {
   background-color: rgba(255, 255, 255, 0.2);
 }
 
 /* disable variations */
-.ui.basic.pointing.menu item.active:after {
+.ui.basic.item.menu > .item {
+  margin: 0em;
+}
+.ui.basic.pointing.menu > item.active:after {
   -webkit-box-shadow: none;
   -moz-box-shadow: none;
   box-shadow: none;

src/elements/header.less

@@ -16,13 +16,25 @@
 
 /* Standard */
 .ui.header {
-  line-height: 1.33;
 
+  border: none;
+  margin: 1em 0em 1rem;
+  padding: 0em;
+  
   font-size: 1.33em;
   font-weight: bold;
+  line-height: 1.33;
+}
 
+.ui.header .ui.sub.header,
+.ui.header .sub.header {
+  font-size: 1rem;
+  font-weight: normal;
+  margin: 0em;
   padding: 0em;
-  border: none;
+
+  line-height: 1.2;
+  color: rgba(0, 0, 0, 0.5);
 }
 
 /* Positioning */
@@ -40,27 +52,22 @@
 
 h1.ui.header {
   min-height: 1rem;
-  margin: 2rem 0rem 1.5rem;
   line-height: 1.33;
   font-size: 2rem;
 }
 h2.ui.header {
-  margin: 1.5rem 0rem 1rem;
   line-height: 1.33;
-  font-size: 1.5rem;
+  font-size: 1.75rem;
 }
 h3.ui.header {
-  margin: 1.3rem 0rem 1rem;
   line-height: 1.33;
   font-size: 1.33rem;
 }
 h4.ui.header {
-  margin: 0.75rem 0rem 0.3rem;
   line-height: 1.33;
   font-size: 1.1rem;
 }
 h5.ui.header {
-  margin: 0rem 0rem 0.2rem;
   line-height: 1.2;
   font-size: 1rem;
 }
@@ -69,28 +76,20 @@ h5.ui.header {
  Content Heading
 ---------------*/
 
-.huge.ui.header {
+.ui.huge.header {
   min-height: 1em;
-  line-height: 1.33em;
   font-size: 2em;
 }
-.large.ui.header {
-  line-height: 1.33em;
-  font-size: 1.5em;
+.ui.large.header {
+  font-size: 1.75em;
 }
-.medium.ui.header {
-  margin-bottom: 0.25em;
-  line-height: 1.33em;
-  font-size: 1.25em;
+.ui.medium.header {
+  font-size: 1.33em;
 }
-.small.ui.header {
-  margin-bottom: 0.25em;
-  line-height: 1.33em;
+.ui.small.header {
   font-size: 1.1em;
 }
-.tiny.ui.header {
-  margin-bottom: 0em;
-  line-height: 1.2em;
+.ui.tiny.header {
   font-size: 1em;
 }
 
@@ -107,18 +106,6 @@ h5.ui.header {
            Variations
 *******************************/
 
-
-/*-------------------
-      Inverted 
---------------------*/
-
-.ui.inverted.header {
-  background-color: #222222;
-  padding: 0.7em 1em;
-  color: #FFFFFF;
-}
-
-
 /*-------------------
        Colors
 --------------------*/
@@ -142,6 +129,41 @@ h5.ui.header {
   color: #00B5AD !important;
 }
 
+.ui.blue.block.header {
+  background-color: #E6EEF1;
+  border-left: 0.2em solid #6ECFF5;
+}
+.ui.black.block.header {
+  background-color: #EAEAEA;
+  border-left: 0.2em solid #5C6166;
+}
+.ui.green.block.header {
+  background-color: #EFF8E4;
+  border-left: 0.2em solid #A1CF64;
+}
+.ui.red.block.header {
+  background-color: #F6E5E8;
+  border-left: 0.2em solid #EF4D6D;
+}
+.ui.purple.block.header {
+  background-color: #EFEDF8;
+  border-left: 0.2em solid #564F8A;
+}
+.ui.teal.block.header {
+  background-color: #E9F7F6;
+  border-left: 0.2em solid #00B5AD;
+}
+
+/*-------------------
+      Inverted 
+--------------------*/
+
+.ui.inverted.header {
+  background-color: #222222;
+  color: #FFFFFF;
+}
+
+
 /*-------------------
    Inverted Colors
 --------------------*/
@@ -171,6 +193,10 @@ h5.ui.header {
   color: #FFFFFF !important;
 }
 
+.ui.inverted.block.header {
+  border-left: none;
+}
+
 /*-------------------
        Aligned
 --------------------*/
@@ -197,10 +223,23 @@ h5.ui.header {
   float: right;
 }
 
+/*-------------------
+        Block
+--------------------*/
+
+.ui.block.header {
+  background-color: #F0F0F0;
+  padding: 0.5em 1em;  
+}
+
 /*-------------------
       Dividing
 --------------------*/
 
+.ui.dividing.header {
+  padding-bottom: 0.2rem;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+}
 
 /*-------------------
        Attached
@@ -243,5 +282,4 @@ h5.ui.header {
   width: auto;
   margin: 0rem auto 2rem;
   padding: 0em;
-}
-
+}

src/elements/segment.less

@@ -40,6 +40,8 @@
 
 .ui.vertical.segment {
   margin: 0em;
+  padding-left: 0em;
+  padding-right: 0em;
 
   -webkit-border-radius: 0px;
   -moz-border-radius: 0px;
@@ -61,6 +63,8 @@
 
 .ui.horizontal.segment {
   margin: 0em;
+  padding-top: 0em;
+  padding-bottom: 0em;
 
   -webkit-border-radius: 0px;
   -moz-border-radius: 0px;

src/modules/checkbox.js

@@ -66,6 +66,23 @@ $.fn.checkbox = function(parameters) {
           }
         },
 
+        is: {
+          radio: function() {
+            return $module
+              .hasClass(className.radio)
+            ;
+          }
+        },
+
+        can: {
+          disable: function() {
+            return (typeof settings.required === 'boolean')
+              ? settings.required
+              : !module.is.radio()
+            ;
+          }
+        },
+
         destroy: function() {
           module.verbose('Destroying previous module for', $module);
           $module
@@ -98,10 +115,11 @@ $.fn.checkbox = function(parameters) {
         },
 
         toggle: function() {
-          if( $input.prop('checked') === undefined || !$input.prop('checked') ) {
+          if($input.prop('checked') === undefined || !$input.prop('checked')) {
             module.enable();
           }
-          else {
+          else if( module.can.disable() ) {
+            console.log(settings.required, module.can.disable());
             module.disable();
           }
         },
@@ -257,10 +275,11 @@ $.fn.checkbox.settings = {
 
   verbose     : true,
   debug       : true,
-  performance : true,
+  performance : false,
   
   // delegated event context
   context     : false,
+  required    : 'auto',
 
   onChange    : function(){},
   onEnable    : function(){},
@@ -275,7 +294,8 @@ $.fn.checkbox.settings = {
   },
 
   className : {
-    active : 'active'
+    active : 'active',
+    radio  : 'radio'
   }
 
 };