Update Semantic to 2.1

Ticket #56

web/semantic/examples/assets/library/iframe-content.js

@@ -0,0 +1,707 @@
+/*
+ * File: iframeResizer.contentWindow.js
+ * Desc: Include this file in any page being loaded into an iframe
+ *       to force the iframe to resize to the content size.
+ * Requires: iframeResizer.js on host page.
+ * Author: David J. Bradshaw - dave@bradshaw.net
+ * Contributor: Jure Mav - jure.mav@gmail.com
+ * Contributor: Ian Caunce - ian@hallnet.co.uk
+ */
+
+;(function() {
+  'use strict';
+
+  var
+    autoResize            = true,
+    base                  = 10,
+    bodyBackground        = '',
+    bodyMargin            = 0,
+    bodyMarginStr         = '',
+    bodyPadding           = '',
+    calculateWidth        = false,
+    doubleEventList       = {'resize':1,'click':1},
+    eventCancelTimer      = 128,
+    height                = 1,
+    firstRun              = true,
+    heightCalcModeDefault = 'offset',
+    heightCalcMode        = heightCalcModeDefault,
+    initLock              = true,
+    initMsg               = '',
+    inPageLinks           = {},
+    interval              = 32,
+    logging               = false,
+    msgID                 = '[iFrameSizer]',  //Must match host page msg ID
+    msgIdLen              = msgID.length,
+    myID                  = '',
+    publicMethods         = false,
+    resetRequiredMethods  = {max:1,scroll:1,bodyScroll:1,documentElementScroll:1},
+    resizeFrom            = 'parent',
+    targetOriginDefault   = '*',
+    target                = window.parent,
+    tolerance             = 0,
+    triggerLocked         = false,
+    triggerLockedTimer    = null,
+    width                 = 1;
+
+
+  function addEventListener(el,evt,func){
+    if ('addEventListener' in window){
+      el.addEventListener(evt,func, false);
+    } else if ('attachEvent' in window){ //IE
+      el.attachEvent('on'+evt,func);
+    }
+  }
+
+  function formatLogMsg(msg){
+    return msgID + '[' + myID + ']' + ' ' + msg;
+  }
+
+  function log(msg){
+    if (logging && ('object' === typeof window.console)){
+      console.log(formatLogMsg(msg));
+    }
+  }
+
+  function warn(msg){
+    if ('object' === typeof window.console){
+      console.warn(formatLogMsg(msg));
+    }
+  }
+
+
+  function init(){
+    log('Initialising iFrame');
+    readData();
+    setMargin();
+    setBodyStyle('background',bodyBackground);
+    setBodyStyle('padding',bodyPadding);
+    injectClearFixIntoBodyElement();
+    checkHeightMode();
+    stopInfiniteResizingOfIFrame();
+    setupPublicMethods();
+    startEventListeners();
+    inPageLinks = setupInPageLinks();
+    sendSize('init','Init message from host page');
+  }
+
+  function readData(){
+
+    var data = initMsg.substr(msgIdLen).split(':');
+
+    function strBool(str){
+      return 'true' === str ? true : false;
+    }
+
+    myID               = data[0];
+    bodyMargin         = (undefined !== data[1]) ? Number(data[1])   : bodyMargin; //For V1 compatibility
+    calculateWidth     = (undefined !== data[2]) ? strBool(data[2])  : calculateWidth;
+    logging            = (undefined !== data[3]) ? strBool(data[3])  : logging;
+    interval           = (undefined !== data[4]) ? Number(data[4])   : interval;
+    publicMethods      = (undefined !== data[5]) ? strBool(data[5])  : publicMethods;
+    autoResize         = (undefined !== data[6]) ? strBool(data[6])  : autoResize;
+    bodyMarginStr      = data[7];
+    heightCalcMode     = (undefined !== data[8]) ? data[8]           : heightCalcMode;
+    bodyBackground     = data[9];
+    bodyPadding        = data[10];
+    tolerance          = (undefined !== data[11]) ? Number(data[11]) : tolerance;
+    inPageLinks.enable = (undefined !== data[12]) ? strBool(data[12]): false;
+    resizeFrom         = data[13];
+  }
+
+  function chkCSS(attr,value){
+    if (-1 !== value.indexOf('-')){
+      warn('Negative CSS value ignored for '+attr);
+      value='';
+    }
+    return value;
+  }
+
+  function setBodyStyle(attr,value){
+    if ((undefined !== value) && ('' !== value) && ('null' !== value)){
+      document.body.style[attr] = value;
+      log('Body '+attr+' set to "'+value+'"');
+    }
+  }
+
+  function setMargin(){
+    //If called via V1 script, convert bodyMargin from int to str
+    if (undefined === bodyMarginStr){
+      bodyMarginStr = bodyMargin+'px';
+    }
+    chkCSS('margin',bodyMarginStr);
+    setBodyStyle('margin',bodyMarginStr);
+  }
+
+  function stopInfiniteResizingOfIFrame(){
+    document.documentElement.style.height = '';
+    document.body.style.height = '';
+    log('HTML & body height set to "auto"');
+  }
+
+
+  function addTriggerEvent(options){
+    function addListener(eventName){
+      addEventListener(window,eventName,function(e){
+        sendSize(options.eventName,options.eventType);
+      });
+    }
+
+    if(options.eventNames && Array.prototype.map){
+      options.eventName = options.eventNames[0];
+      options.eventNames.map(addListener);
+    } else {
+      addListener(options.eventName);
+    }
+
+    log('Added event listener: ' + options.eventType);
+  }
+
+  function initEventListeners(){
+    addTriggerEvent({ eventType: 'Animation Start',           eventNames: ['animationstart','webkitAnimationStart'] });
+    addTriggerEvent({ eventType: 'Animation Iteration',       eventNames: ['animationiteration','webkitAnimationIteration'] });
+    addTriggerEvent({ eventType: 'Animation End',             eventNames: ['animationend','webkitAnimationEnd'] });
+    addTriggerEvent({ eventType: 'Device Orientation Change', eventName:  'deviceorientation' });
+    addTriggerEvent({ eventType: 'Transition End',            eventNames: ['transitionend','webkitTransitionEnd','MSTransitionEnd','oTransitionEnd','otransitionend'] });
+    addTriggerEvent({ eventType: 'Window Clicked',            eventName:  'click' });
+    //addTriggerEvent({ eventType: 'Window Mouse Down',         eventName:  'mousedown' });
+    //addTriggerEvent({ eventType: 'Window Mouse Up',           eventName:  'mouseup' });
+    if('child' === resizeFrom){
+      addTriggerEvent({ eventType: 'IFrame Resized',        eventName:  'resize' });
+    }
+  }
+
+  function checkHeightMode(){
+    if (heightCalcModeDefault !== heightCalcMode){
+      if (!(heightCalcMode in getHeight)){
+        warn(heightCalcMode + ' is not a valid option for heightCalculationMethod.');
+        heightCalcMode='bodyScroll';
+      }
+      log('Height calculation method set to "'+heightCalcMode+'"');
+    }
+  }
+
+  function startEventListeners(){
+    if ( true === autoResize ) {
+      initEventListeners();
+      setupMutationObserver();
+    }
+    else {
+      log('Auto Resize disabled');
+    }
+  }
+
+  function injectClearFixIntoBodyElement(){
+    var clearFix = document.createElement('div');
+    clearFix.style.clear = 'both';
+    clearFix.style.display = 'block'; //Guard against this having been globally redefined in CSS.
+    document.body.appendChild(clearFix);
+  }
+
+  function setupInPageLinks(){
+
+    function getPagePosition (){
+      return {
+        x: (window.pageXOffset !== undefined) ? window.pageXOffset : document.documentElement.scrollLeft,
+        y: (window.pageYOffset !== undefined) ? window.pageYOffset : document.documentElement.scrollTop
+      };
+    }
+
+    function getElementPosition(el){
+      var
+        elPosition   = el.getBoundingClientRect(),
+        pagePosition = getPagePosition();
+
+      return {
+        x: parseInt(elPosition.left,10) + parseInt(pagePosition.x,10),
+        y: parseInt(elPosition.top,10)  + parseInt(pagePosition.y,10)
+      };
+    }
+
+    function findTarget(location){
+      var hash = location.split("#")[1] || "";
+      var hashData = decodeURIComponent(hash);
+
+      function jumpToTarget(target){
+        var jumpPosition = getElementPosition(target);
+
+        log('Moving to in page link (#'+hash+') at x: '+jumpPosition.x+' y: '+jumpPosition.y);
+        sendMsg(jumpPosition.y, jumpPosition.x, 'scrollToOffset'); // X&Y reversed at sendMsg uses height/width
+      }
+
+      var target = document.getElementById(hashData) || document.getElementsByName(hashData)[0];
+
+      if (target){
+        jumpToTarget(target);
+      } else {
+        log('In page link (#' + hash + ') not found in iFrame, so sending to parent');
+        sendMsg(0,0,'inPageLink','#'+hash);
+      }
+    }
+
+    function checkLocationHash(){
+      if ('' !== location.hash && '#' !== location.hash){
+        findTarget(location.href);
+      }
+    }
+
+    function bindAnchors(){
+      function setupLink(el){
+        function linkClicked(e){
+          e.preventDefault();
+
+          /*jshint validthis:true */
+          findTarget(this.getAttribute('href'));
+        }
+
+        if ('#' !== el.getAttribute('href')){
+          addEventListener(el,'click',linkClicked);
+        }
+      }
+
+      Array.prototype.forEach.call( document.querySelectorAll( 'a[href^="#"]' ), setupLink );
+    }
+
+    function bindLocationHash(){
+      addEventListener(window,'hashchange',checkLocationHash);
+    }
+
+    function initCheck(){ //check if page loaded with location hash after init resize
+      setTimeout(checkLocationHash,eventCancelTimer);
+    }
+
+    function enableInPageLinks(){
+      if(Array.prototype.forEach && document.querySelectorAll){
+        log('Setting up location.hash handlers');
+        bindAnchors();
+        bindLocationHash();
+        initCheck();
+      } else {
+        warn('In page linking not fully supported in this browser! (See README.md for IE8 workaround)');
+      }
+    }
+
+    if(inPageLinks.enable){
+      enableInPageLinks();
+    } else {
+      log('In page linking not enabled');
+    }
+
+    return {
+      findTarget:findTarget
+    };
+  }
+
+  function setupPublicMethods(){
+    if (publicMethods) {
+      log('Enable public methods');
+
+      window.parentIFrame = {
+        close: function closeF(){
+          sendMsg(0,0,'close');
+        },
+        getId: function getIdF(){
+          return myID;
+        },
+        moveToAnchor: function moveToAnchorF(hash){
+          inPageLinks.findTarget(hash);
+        },
+        reset: function resetF(){
+          resetIFrame('parentIFrame.reset');
+        },
+        scrollTo: function scrollToF(x,y){
+          sendMsg(y,x,'scrollTo'); // X&Y reversed at sendMsg uses height/width
+        },
+        scrollToOffset: function scrollToF(x,y){
+          sendMsg(y,x,'scrollToOffset'); // X&Y reversed at sendMsg uses height/width
+        },
+        sendMessage: function sendMessageF(msg,targetOrigin){
+          sendMsg(0,0,'message',JSON.stringify(msg),targetOrigin);
+        },
+        setHeightCalculationMethod: function setHeightCalculationMethodF(heightCalculationMethod){
+          heightCalcMode = heightCalculationMethod;
+          checkHeightMode();
+        },
+        setTargetOrigin: function setTargetOriginF(targetOrigin){
+          log('Set targetOrigin: '+targetOrigin);
+          targetOriginDefault = targetOrigin;
+        },
+        size: function sizeF(customHeight, customWidth){
+          var valString = ''+(customHeight?customHeight:'')+(customWidth?','+customWidth:'');
+          lockTrigger();
+          sendSize('size','parentIFrame.size('+valString+')', customHeight, customWidth);
+        }
+      };
+    }
+  }
+
+  function initInterval(){
+    if ( 0 !== interval ){
+      log('setInterval: '+interval+'ms');
+      setInterval(function(){
+        sendSize('interval','setInterval: '+interval);
+      },Math.abs(interval));
+    }
+  }
+
+  function setupInjectElementLoadListners(mutations){
+    function addLoadListener(element){
+      if (element.height === undefined || element.width === undefined || 0 === element.height || 0 === element.width){
+        log('Attach listerner to '+element.src);
+        addEventListener(element,'load', function imageLoaded(){
+          sendSize('imageLoad','Image loaded');
+        });
+      }
+    }
+
+    mutations.forEach(function (mutation) {
+      if (mutation.type === 'attributes' && mutation.attributeName === 'src'){
+        addLoadListener(mutation.target);
+      } else if (mutation.type === 'childList'){
+        var images = mutation.target.querySelectorAll('img');
+        Array.prototype.forEach.call(images,function (image) {
+          addLoadListener(image);
+        });
+      }
+    });
+  }
+
+  function setupMutationObserver(){
+
+    var MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
+
+    function createMutationObserver(){
+      var
+        target = document.querySelector('body'),
+
+        config = {
+          attributes            : true,
+          attributeOldValue     : false,
+          characterData         : true,
+          characterDataOldValue : false,
+          childList             : true,
+          subtree               : true
+        },
+
+        observer = new MutationObserver(function(mutations) {
+          sendSize('mutationObserver','mutationObserver: ' + mutations[0].target + ' ' + mutations[0].type);
+          setupInjectElementLoadListners(mutations); //Deal with WebKit asyncing image loading when tags are injected into the page
+        });
+
+      log('Enable MutationObserver');
+      observer.observe(target, config);
+    }
+
+    if (MutationObserver){
+      if (0 > interval) {
+        initInterval();
+      } else {
+        createMutationObserver();
+      }
+    }
+    else {
+      warn('MutationObserver not supported in this browser!');
+      initInterval();
+    }
+  }
+
+
+  // document.documentElement.offsetHeight is not reliable, so
+  // we have to jump through hoops to get a better value.
+  function getBodyOffsetHeight(){
+    function getComputedBodyStyle(prop) {
+      function convertUnitsToPxForIE8(value) {
+        var PIXEL = /^\d+(px)?$/i;
+
+        if (PIXEL.test(value)) {
+          return parseInt(value,base);
+        }
+
+        var
+          style = el.style.left,
+          runtimeStyle = el.runtimeStyle.left;
+
+        el.runtimeStyle.left = el.currentStyle.left;
+        el.style.left = value || 0;
+        value = el.style.pixelLeft;
+        el.style.left = style;
+        el.runtimeStyle.left = runtimeStyle;
+
+        return value;
+      }
+
+      var
+        el = document.body,
+        retVal = 0;
+
+      if (('defaultView' in document) && ('getComputedStyle' in document.defaultView)) {
+        retVal = document.defaultView.getComputedStyle(el, null);
+        retVal = (null !== retVal) ? retVal[prop] : 0;
+      } else {//IE8
+        retVal =  convertUnitsToPxForIE8(el.currentStyle[prop]);
+      }
+
+      return parseInt(retVal,base);
+    }
+
+    return  document.body.offsetHeight +
+        getComputedBodyStyle('marginTop') +
+        getComputedBodyStyle('marginBottom');
+  }
+
+  function getBodyScrollHeight(){
+    return document.body.scrollHeight;
+  }
+
+  function getDEOffsetHeight(){
+    return document.documentElement.offsetHeight;
+  }
+
+  function getDEScrollHeight(){
+    return document.documentElement.scrollHeight;
+  }
+
+  //From https://github.com/guardian/iframe-messenger
+  function getLowestElementHeight() {
+    var
+      allElements       = document.querySelectorAll('body *'),
+      allElementsLength = allElements.length,
+      maxBottomVal      = 0,
+      timer             = new Date().getTime();
+
+    for (var i = 0; i < allElementsLength; i++) {
+      if (allElements[i].getBoundingClientRect().bottom > maxBottomVal) {
+        maxBottomVal = allElements[i].getBoundingClientRect().bottom;
+      }
+    }
+
+    timer = new Date().getTime() - timer;
+
+    log('Parsed '+allElementsLength+' HTML elements');
+    log('LowestElement bottom position calculated in ' + timer + 'ms');
+
+    return maxBottomVal;
+  }
+
+  function getAllHeights(){
+    return [
+      getBodyOffsetHeight(),
+      getBodyScrollHeight(),
+      getDEOffsetHeight(),
+      getDEScrollHeight()
+    ];
+  }
+
+  function getMaxHeight(){
+    return Math.max.apply(null,getAllHeights());
+  }
+
+  function getMinHeight(){
+    return Math.min.apply(null,getAllHeights());
+  }
+
+  function getBestHeight(){
+    return Math.max(getBodyOffsetHeight(),getLowestElementHeight());
+  }
+
+  var getHeight = {
+    offset                : getBodyOffsetHeight, //Backward compatability
+    bodyOffset            : getBodyOffsetHeight,
+    bodyScroll            : getBodyScrollHeight,
+    documentElementOffset : getDEOffsetHeight,
+    scroll                : getDEScrollHeight, //Backward compatability
+    documentElementScroll : getDEScrollHeight,
+    max                   : getMaxHeight,
+    min                   : getMinHeight,
+    grow                  : getMaxHeight,
+    lowestElement         : getBestHeight
+  };
+
+  function getWidth(){
+    return Math.max(
+      document.documentElement.scrollWidth,
+      document.body.scrollWidth
+    );
+  }
+
+  function sendSize(triggerEvent, triggerEventDesc, customHeight, customWidth){
+
+    var currentHeight,currentWidth;
+
+    function recordTrigger(){
+      if (!(triggerEvent in {'reset':1,'resetPage':1,'init':1})){
+        log( 'Trigger event: ' + triggerEventDesc );
+      }
+    }
+
+    function resizeIFrame(){
+      height = currentHeight;
+      width  = currentWidth;
+
+      sendMsg(height,width,triggerEvent);
+    }
+
+    function isDoubleFiredEvent(){
+      return  triggerLocked && (triggerEvent in doubleEventList);
+    }
+
+    function isSizeChangeDetected(){
+      function checkTolarance(a,b){
+        var retVal = Math.abs(a-b) <= tolerance;
+        return !retVal;
+      }
+
+      currentHeight = (undefined !== customHeight)  ? customHeight : getHeight[heightCalcMode]();
+      currentWidth  = (undefined !== customWidth )  ? customWidth  : getWidth();
+
+      return  checkTolarance(height,currentHeight) ||
+          (calculateWidth && checkTolarance(width,currentWidth));
+    }
+
+    function isForceResizableEvent(){
+      return !(triggerEvent in {'init':1,'interval':1,'size':1});
+    }
+
+    function isForceResizableHeightCalcMode(){
+      return (heightCalcMode in resetRequiredMethods);
+    }
+
+    function logIgnored(){
+      log('No change in size detected');
+    }
+
+    function checkDownSizing(){
+      if (isForceResizableEvent() && isForceResizableHeightCalcMode()){
+        resetIFrame(triggerEventDesc);
+      } else if (!(triggerEvent in {'interval':1})){
+        recordTrigger();
+        logIgnored();
+      }
+    }
+
+    if (!isDoubleFiredEvent()){
+      if (isSizeChangeDetected()){
+        recordTrigger();
+        lockTrigger();
+        resizeIFrame();
+      } else {
+        checkDownSizing();
+      }
+    } else {
+      log('Trigger event cancelled: '+triggerEvent);
+    }
+  }
+
+  function lockTrigger(){
+    if (!triggerLocked){
+      triggerLocked = true;
+      log('Trigger event lock on');
+    }
+    clearTimeout(triggerLockedTimer);
+    triggerLockedTimer = setTimeout(function(){
+      triggerLocked = false;
+      log('Trigger event lock off');
+      log('--');
+    },eventCancelTimer);
+  }
+
+  function triggerReset(triggerEvent){
+    height = getHeight[heightCalcMode]();
+    width  = getWidth();
+
+    sendMsg(height,width,triggerEvent);
+  }
+
+  function resetIFrame(triggerEventDesc){
+    var hcm = heightCalcMode;
+    heightCalcMode = heightCalcModeDefault;
+
+    log('Reset trigger event: ' + triggerEventDesc);
+    lockTrigger();
+    triggerReset('reset');
+
+    heightCalcMode = hcm;
+  }
+
+  function sendMsg(height,width,triggerEvent,msg,targetOrigin){
+    function setTargetOrigin(){
+      if (undefined === targetOrigin){
+        targetOrigin = targetOriginDefault;
+      } else {
+        log('Message targetOrigin: '+targetOrigin);
+      }
+    }
+
+    function sendToParent(){
+      var
+        size  = height + ':' + width,
+        message = myID + ':' +  size + ':' + triggerEvent + (undefined !== msg ? ':' + msg : '');
+
+      log('Sending message to host page (' + message + ')');
+      target.postMessage( msgID + message, targetOrigin);
+    }
+
+    setTargetOrigin();
+    sendToParent();
+  }
+
+  function receiver(event) {
+    function isMessageForUs(){
+      return msgID === (''+event.data).substr(0,msgIdLen); //''+ Protects against non-string messages
+    }
+
+    function initFromParent(){
+      initMsg = event.data;
+      target  = event.source;
+
+      init();
+      firstRun = false;
+      setTimeout(function(){ initLock = false;},eventCancelTimer);
+    }
+
+    function resetFromParent(){
+      if (!initLock){
+        log('Page size reset by host page');
+        triggerReset('resetPage');
+      } else {
+        log('Page reset ignored by init');
+      }
+    }
+
+    function resizeFromParent(){
+      sendSize('resizeParent','Parent window resized');
+    }
+
+    function getMessageType(){
+      return event.data.split(']')[1];
+    }
+
+    function isMiddleTier(){
+      return ('iFrameResize' in window);
+    }
+
+    function isInitMsg(){
+      //test if this message is from a child below us. This is an ugly test, however, updating
+      //the message format would break backwards compatibity.
+      return event.data.split(':')[2] in {'true':1,'false':1};
+    }
+
+    if (isMessageForUs()){
+      if (firstRun === false) {
+        if ('reset' === getMessageType()){
+          resetFromParent();
+        } else if ('resize' === getMessageType()){
+          resizeFromParent();
+        } else if (event.data !== initMsg && !isMiddleTier()){
+          warn('Unexpected message ('+event.data+')');
+        }
+      } else if (isInitMsg()) {
+        initFromParent();
+      } else {
+        warn('Received message of type ('+getMessageType()+') before initialization.');
+      }
+    }
+  }
+
+  addEventListener(window, 'message', receiver);
+
+})();

web/semantic/examples/assets/library/iframe.js

@@ -0,0 +1,642 @@
+/*
+ * File: iframeResizer.js
+ * Desc: Force iframes to size to content.
+ * Requires: iframeResizer.contentWindow.js to be loaded into the target frame.
+ * Author: David J. Bradshaw - dave@bradshaw.net
+ * Contributor: Jure Mav - jure.mav@gmail.com
+ * Contributor: Reed Dadoune - reed@dadoune.com
+ */
+;(function() {
+  'use strict';
+
+  var
+    count                 = 0,
+    firstRun              = true,
+    logEnabled            = false,
+    msgHeader             = 'message',
+    msgHeaderLen          = msgHeader.length,
+    msgId                 = '[iFrameSizer]', //Must match iframe msg ID
+    msgIdLen              = msgId.length,
+    pagePosition          = null,
+    requestAnimationFrame = window.requestAnimationFrame,
+    resetRequiredMethods  = {max:1,scroll:1,bodyScroll:1,documentElementScroll:1},
+    settings              = {},
+    timer                 = null,
+
+    defaults              = {
+      autoResize                : true,
+      bodyBackground            : null,
+      bodyMargin                : null,
+      bodyMarginV1              : 8,
+      bodyPadding               : null,
+      checkOrigin               : true,
+      enableInPageLinks         : false,
+      enablePublicMethods       : false,
+      heightCalculationMethod   : 'offset',
+      interval                  : 32,
+      log                       : false,
+      maxHeight                 : Infinity,
+      maxWidth                  : Infinity,
+      minHeight                 : 0,
+      minWidth                  : 0,
+      resizeFrom                : 'parent',
+      scrolling                 : false,
+      sizeHeight                : true,
+      sizeWidth                 : false,
+      tolerance                 : 0,
+      closedCallback            : function(){},
+      initCallback              : function(){},
+      messageCallback           : function(){},
+      resizedCallback           : function(){},
+      scrollCallback            : function(){return true;}
+    };
+
+  function addEventListener(obj,evt,func){
+    if ('addEventListener' in window){
+      obj.addEventListener(evt,func, false);
+    } else if ('attachEvent' in window){//IE
+      obj.attachEvent('on'+evt,func);
+    }
+  }
+
+  function setupRequestAnimationFrame(){
+    var
+      vendors = ['moz', 'webkit', 'o', 'ms'],
+      x;
+
+    // Remove vendor prefixing if prefixed and break early if not
+    for (x = 0; x < vendors.length && !requestAnimationFrame; x += 1) {
+      requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
+    }
+
+    if (!(requestAnimationFrame)){
+      log(' RequestAnimationFrame not supported');
+    }
+  }
+
+  function getMyID(){
+    var retStr = 'Host page';
+
+    if (window.top!==window.self){
+      if (window.parentIFrame){
+        retStr = window.parentIFrame.getId();
+      } else {
+        retStr = 'Nested host page';
+      }
+    }
+
+    return retStr;
+  }
+
+  function formatLogMsg(msg){
+    return msgId + '[' + getMyID() + ']' + msg;
+  }
+
+  function log(msg){
+    if (logEnabled && ('object' === typeof window.console)){
+      console.log(formatLogMsg(msg));
+    }
+  }
+
+  function warn(msg){
+    if ('object' === typeof window.console){
+      console.warn(formatLogMsg(msg));
+    }
+  }
+
+  function iFrameListener(event){
+    function resizeIFrame(){
+      function resize(){
+        setSize(messageData);
+        setPagePosition();
+        settings[iframeID].resizedCallback(messageData);
+      }
+
+      ensureInRange('Height');
+      ensureInRange('Width');
+
+      syncResize(resize,messageData,'resetPage');
+    }
+
+    function closeIFrame(iframe){
+      var iframeID = iframe.id;
+
+      log(' Removing iFrame: '+iframeID);
+      iframe.parentNode.removeChild(iframe);
+      settings[iframeID].closedCallback(iframeID);
+      delete settings[iframeID];
+      log(' --');
+    }
+
+    function processMsg(){
+      var data = msg.substr(msgIdLen).split(':');
+
+      return {
+        iframe: document.getElementById(data[0]),
+        id:     data[0],
+        height: data[1],
+        width:  data[2],
+        type:   data[3]
+      };
+    }
+
+    function ensureInRange(Dimension){
+      var
+        max  = Number(settings[iframeID]['max'+Dimension]),
+        min  = Number(settings[iframeID]['min'+Dimension]),
+        dimension = Dimension.toLowerCase(),
+        size = Number(messageData[dimension]);
+
+      if (min>max){
+        throw new Error('Value for min'+Dimension+' can not be greater than max'+Dimension);
+      }
+
+      log(' Checking '+dimension+' is in range '+min+'-'+max);
+
+      if (size<min) {
+        size=min;
+        log(' Set '+dimension+' to min value');
+      }
+
+      if (size>max) {
+        size=max;
+        log(' Set '+dimension+' to max value');
+      }
+
+      messageData[dimension]=''+size;
+    }
+
+
+    function isMessageFromIFrame(){
+      function checkAllowedOrigin(){
+        function checkList(){
+          log(' Checking connection is from allowed list of origins: ' + checkOrigin);
+          var i;
+          for (i = 0; i < checkOrigin.length; i++) {
+            if (checkOrigin[i] === origin) {
+              return true;
+            }
+          }
+          return false;
+        }
+
+        function checkSingle(){
+          log(' Checking connection is from: '+remoteHost);
+          return origin == remoteHost;
+        }
+
+        return checkOrigin.constructor === Array ? checkList() : checkSingle();
+      }
+
+      var
+        origin     = event.origin,
+        checkOrigin = settings[iframeID].checkOrigin,
+        remoteHost = messageData.iframe.src.split('/').slice(0,3).join('/');
+
+      if (checkOrigin) {
+        if ((''+origin !== 'null') && !checkAllowedOrigin()) {
+          throw new Error(
+            'Unexpected message received from: ' + origin +
+            ' for ' + messageData.iframe.id +
+            '. Message was: ' + event.data +
+            '. This error can be disabled by setting the checkOrigin: false option or by providing of array of trusted domains.'
+          );
+        }
+      }
+
+      return true;
+    }
+
+    function isMessageForUs(){
+      return msgId === ('' + msg).substr(0,msgIdLen); //''+Protects against non-string msg
+    }
+
+    function isMessageFromMetaParent(){
+      //test if this message is from a parent above us. This is an ugly test, however, updating
+      //the message format would break backwards compatibity.
+      var retCode = messageData.type in {'true':1,'false':1,'undefined':1};
+
+      if (retCode){
+        log(' Ignoring init message from meta parent page');
+      }
+
+      return retCode;
+    }
+
+    function getMsgBody(offset){
+      return msg.substr(msg.indexOf(':')+msgHeaderLen+offset);
+    }
+
+    function forwardMsgFromIFrame(msgBody){
+      log(' MessageCallback passed: {iframe: '+ messageData.iframe.id + ', message: ' + msgBody + '}');
+      settings[iframeID].messageCallback({
+        iframe: messageData.iframe,
+        message: JSON.parse(msgBody)
+      });
+      log(' --');
+    }
+
+    function checkIFrameExists(){
+      if (null === messageData.iframe) {
+        warn(' IFrame ('+messageData.id+') not found');
+        return false;
+      }
+      return true;
+    }
+
+    function getElementPosition(target){
+      var
+        iFramePosition = target.getBoundingClientRect();
+
+      getPagePosition();
+
+      return {
+        x: parseInt(iFramePosition.left, 10) + parseInt(pagePosition.x, 10),
+        y: parseInt(iFramePosition.top, 10)  + parseInt(pagePosition.y, 10)
+      };
+    }
+
+    function scrollRequestFromChild(addOffset){
+      function reposition(){
+        pagePosition = newPosition;
+
+        scrollTo();
+
+        log(' --');
+      }
+
+      function calcOffset(){
+        return {
+          x: Number(messageData.width) + offset.x,
+          y: Number(messageData.height) + offset.y
+        };
+      }
+
+      var
+        offset = addOffset ? getElementPosition(messageData.iframe) : {x:0,y:0},
+        newPosition = calcOffset();
+
+      log(' Reposition requested from iFrame (offset x:'+offset.x+' y:'+offset.y+')');
+
+      if(window.top!==window.self){
+        if (window.parentIFrame){
+          if (addOffset){
+            parentIFrame.scrollToOffset(newPosition.x,newPosition.y);
+          } else {
+            parentIFrame.scrollTo(messageData.width,messageData.height);
+          }
+        } else {
+          warn(' Unable to scroll to requested position, window.parentIFrame not found');
+        }
+      } else {
+        reposition();
+      }
+
+    }
+
+    function scrollTo(){
+      if (false !== settings[iframeID].scrollCallback(pagePosition)){
+        setPagePosition();
+      }
+    }
+
+    function findTarget(location){
+      var hash = location.split("#")[1] || "";
+      var hashData = decodeURIComponent(hash);
+
+      function jumpToTarget(target){
+        var jumpPosition = getElementPosition(target);
+
+        log(' Moving to in page link (#'+hash+') at x: '+jumpPosition.x+' y: '+jumpPosition.y);
+        pagePosition = {
+          x: jumpPosition.x,
+          y: jumpPosition.y
+        };
+
+        scrollTo();
+        log(' --');
+      }
+
+      var target = document.getElementById(hashData) || document.getElementsByName(hashData)[0];
+
+      if(window.top!==window.self){
+        if (window.parentIFrame){
+          parentIFrame.moveToAnchor(hash);
+        } else {
+          log(' In page link #'+hash+' not found and window.parentIFrame not found');
+        }
+      } else if (target){
+        jumpToTarget(target);
+      } else {
+        log(' In page link #'+hash+' not found');
+      }
+    }
+
+    function actionMsg(){
+      switch(messageData.type){
+        case 'close':
+          closeIFrame(messageData.iframe);
+          break;
+        case 'message':
+          forwardMsgFromIFrame(getMsgBody(6));
+          break;
+        case 'scrollTo':
+          scrollRequestFromChild(false);
+          break;
+        case 'scrollToOffset':
+          scrollRequestFromChild(true);
+          break;
+        case 'inPageLink':
+          findTarget(getMsgBody(9));
+          break;
+        case 'reset':
+          resetIFrame(messageData);
+          break;
+        case 'init':
+          resizeIFrame();
+          settings[iframeID].initCallback(messageData.iframe);
+          break;
+        default:
+          resizeIFrame();
+      }
+    }
+
+    function hasSettings(iframeID){
+      var retBool = true;
+
+      if (!settings[iframeID]){
+        retBool = false;
+        warn(messageData.type + ' No settings for ' + iframeID + '. Message was: ' + msg);
+      }
+
+      return retBool;
+    }
+
+    var
+      msg = event.data,
+      messageData = {},
+      iframeID = null;
+
+    if (isMessageForUs()){
+      messageData = processMsg();
+      iframeID    = messageData.id;
+
+      if (!isMessageFromMetaParent() && hasSettings(iframeID)){
+        logEnabled  = settings[iframeID].log;
+        log(' Received: '+msg);
+
+        if ( checkIFrameExists() && isMessageFromIFrame() ){
+          actionMsg();
+          firstRun = false;
+        }
+      }
+    }
+  }
+
+
+  function getPagePosition (){
+    if(null === pagePosition){
+      pagePosition = {
+        x: (window.pageXOffset !== undefined) ? window.pageXOffset : document.documentElement.scrollLeft,
+        y: (window.pageYOffset !== undefined) ? window.pageYOffset : document.documentElement.scrollTop
+      };
+      log(' Get page position: '+pagePosition.x+','+pagePosition.y);
+    }
+  }
+
+  function setPagePosition(){
+    if(null !== pagePosition){
+      window.scrollTo(pagePosition.x,pagePosition.y);
+      log(' Set page position: '+pagePosition.x+','+pagePosition.y);
+      pagePosition = null;
+    }
+  }
+
+  function resetIFrame(messageData){
+    function reset(){
+      setSize(messageData);
+      trigger('reset','reset',messageData.iframe,messageData.id);
+    }
+
+    log(' Size reset requested by '+('init'===messageData.type?'host page':'iFrame'));
+    getPagePosition();
+    syncResize(reset,messageData,'init');
+  }
+
+  function setSize(messageData){
+    function setDimension(dimension){
+      messageData.iframe.style[dimension] = messageData[dimension] + 'px';
+      log(
+        ' IFrame (' + iframeID +
+        ') ' + dimension +
+        ' set to ' + messageData[dimension] + 'px'
+      );
+    }
+    var iframeID = messageData.iframe.id;
+    if( settings[iframeID].sizeHeight) { setDimension('height'); }
+    if( settings[iframeID].sizeWidth ) { setDimension('width'); }
+  }
+
+  function syncResize(func,messageData,doNotSync){
+    if(doNotSync!==messageData.type && requestAnimationFrame){
+      log(' Requesting animation frame');
+      requestAnimationFrame(func);
+    } else {
+      func();
+    }
+  }
+
+  function trigger(calleeMsg,msg,iframe,id){
+    if(iframe && iframe.contentWindow){
+      log('[' + calleeMsg + '] Sending msg to iframe ('+msg+')');
+      iframe.contentWindow.postMessage( msgId + msg, '*' );
+    } else {
+      warn('[' + calleeMsg + '] IFrame not found');
+      if(settings[id]) delete settings[id];
+    }
+  }
+
+
+  function setupIFrame(options){
+    function setLimits(){
+      function addStyle(style){
+        if ((Infinity !== settings[iframeID][style]) && (0 !== settings[iframeID][style])){
+          iframe.style[style] = settings[iframeID][style] + 'px';
+          log(' Set '+style+' = '+settings[iframeID][style]+'px');
+        }
+      }
+
+      addStyle('maxHeight');
+      addStyle('minHeight');
+      addStyle('maxWidth');
+      addStyle('minWidth');
+    }
+
+    function ensureHasId(iframeID){
+      if (''===iframeID){
+        iframe.id = iframeID = 'iFrameResizer' + count++;
+        logEnabled = (options || {}).log;
+        log(' Added missing iframe ID: '+ iframeID +' (' + iframe.src + ')');
+      }
+
+      return iframeID;
+    }
+
+    function setScrolling(){
+      log(' IFrame scrolling ' + (settings[iframeID].scrolling ? 'enabled' : 'disabled') + ' for ' + iframeID);
+      iframe.style.overflow = false === settings[iframeID].scrolling ? 'hidden' : 'auto';
+      iframe.scrolling      = false === settings[iframeID].scrolling ? 'no' : 'yes';
+    }
+
+    //The V1 iFrame script expects an int, where as in V2 expects a CSS
+    //string value such as '1px 3em', so if we have an int for V2, set V1=V2
+    //and then convert V2 to a string PX value.
+    function setupBodyMarginValues(){
+      if (('number'===typeof(settings[iframeID].bodyMargin)) || ('0'===settings[iframeID].bodyMargin)){
+        settings[iframeID].bodyMarginV1 = settings[iframeID].bodyMargin;
+        settings[iframeID].bodyMargin   = '' + settings[iframeID].bodyMargin + 'px';
+      }
+    }
+
+    function createOutgoingMsg(){
+      return iframeID +
+        ':' + settings[iframeID].bodyMarginV1 +
+        ':' + settings[iframeID].sizeWidth +
+        ':' + settings[iframeID].log +
+        ':' + settings[iframeID].interval +
+        ':' + settings[iframeID].enablePublicMethods +
+        ':' + settings[iframeID].autoResize +
+        ':' + settings[iframeID].bodyMargin +
+        ':' + settings[iframeID].heightCalculationMethod +
+        ':' + settings[iframeID].bodyBackground +
+        ':' + settings[iframeID].bodyPadding +
+        ':' + settings[iframeID].tolerance +
+        ':' + settings[iframeID].enableInPageLinks +
+        ':' + settings[iframeID].resizeFrom;
+    }
+
+    function init(msg){
+      //We have to call trigger twice, as we can not be sure if all
+      //iframes have completed loading when this code runs. The
+      //event listener also catches the page changing in the iFrame.
+      addEventListener(iframe,'load',function(){
+        var fr = firstRun;   // Reduce scope of var to function, because IE8's JS execution
+                                     // context stack is borked and this value gets externally
+                                     // changed midway through running this function.
+        trigger('iFrame.onload',msg,iframe);
+        if (!fr && settings[iframeID].heightCalculationMethod in resetRequiredMethods){
+          resetIFrame({
+            iframe:iframe,
+            height:0,
+            width:0,
+            type:'init'
+          });
+        }
+      });
+      trigger('init',msg,iframe);
+    }
+
+    function checkOptions(options){
+      if ('object' !== typeof options){
+        throw new TypeError('Options is not an object.');
+      }
+    }
+
+    function processOptions(options){
+      options = options || {};
+      settings[iframeID] = {};
+
+      checkOptions(options);
+
+      for (var option in defaults) {
+        if (defaults.hasOwnProperty(option)){
+          settings[iframeID][option] = options.hasOwnProperty(option) ? options[option] : defaults[option];
+        }
+      }
+
+      logEnabled = settings[iframeID].log;
+    }
+
+    var
+      /*jshint validthis:true */
+      iframe   = this,
+      iframeID = ensureHasId(iframe.id);
+
+    processOptions(options);
+    setScrolling();
+    setLimits();
+    setupBodyMarginValues();
+    init(createOutgoingMsg());
+  }
+
+  function throttle(fn,time){
+    if (null === timer){
+      timer = setTimeout(function(){
+        timer = null;
+        fn();
+      }, time);
+    }
+  }
+
+  function winResize(){
+    throttle(function(){
+      for (var iframeId in settings){
+        if('parent' === settings[iframeId].resizeFrom){
+          trigger('Window resize','resize',document.getElementById(iframeId),iframeId);
+        }
+      }
+    },66);
+  }
+
+  function factory(){
+
+    setupRequestAnimationFrame();
+    addEventListener(window,'message',iFrameListener);
+    addEventListener(window,'resize', winResize);
+
+    function init(element, options){
+      if(!element.tagName) {
+        throw new TypeError('Object is not a valid DOM element');
+      } else if ('IFRAME' !== element.tagName.toUpperCase()) {
+        throw new TypeError('Expected <IFRAME> tag, found <'+element.tagName+'>.');
+      } else {
+        setupIFrame.call(element, options);
+      }
+    }
+
+    return function iFrameResizeF(options,target){
+      switch (typeof(target)){
+        case 'undefined':
+        case 'string':
+          Array.prototype.forEach.call( document.querySelectorAll( target || 'iframe' ), function (element) {
+            init(element, options);
+          });
+          break;
+        case 'object':
+          init(target, options);
+          break;
+        default:
+          throw new TypeError('Unexpected data type ('+typeof(target)+').');
+      }
+    };
+  }
+
+  function createJQueryPublicMethod($){
+    $.fn.iFrameResize = function $iFrameResizeF(options) {
+      return this.filter('iframe').each(function (index, element) {
+        setupIFrame.call(element, options);
+      }).end();
+    };
+  }
+
+  if (window.jQuery) { createJQueryPublicMethod(jQuery); }
+
+  if (typeof define === 'function' && define.amd) {
+    define([],factory);
+  } else if (typeof module === 'object' && typeof module.exports === 'object') { //Node for browserfy
+    module.exports = factory();
+  } else {
+    window.iFrameResize = window.iFrameResize || factory();
+  }
+
+})();

web/semantic/examples/assets/show-examples.js

@@ -0,0 +1,15 @@
+$(document)
+  .ready(function() {
+      // add popup to show name
+      $('.ui:not(.container, .grid)').each(function() {
+        $(this)
+          .popup({
+            on        : 'hover',
+            variation : 'small inverted',
+            exclusive : true,
+            content   : $(this).attr('class')
+          })
+        ;
+      });
+  })
+;

web/semantic/examples/attached.html

@@ -0,0 +1,381 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <!-- Standard Meta -->
+  <meta charset="utf-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
+
+  <!-- Site Properties -->
+  <title>Attached - Semantic</title>
+  <link rel="stylesheet" type="text/css" href="../dist/components/reset.css">
+  <link rel="stylesheet" type="text/css" href="../dist/components/site.css">
+
+  <link rel="stylesheet" type="text/css" href="../dist/components/container.css">
+  <link rel="stylesheet" type="text/css" href="../dist/components/divider.css">
+  <link rel="stylesheet" type="text/css" href="../dist/components/grid.css">
+
+  <link rel="stylesheet" type="text/css" href="../dist/components/header.css">
+  <link rel="stylesheet" type="text/css" href="../dist/components/segment.css">
+  <link rel="stylesheet" type="text/css" href="../dist/components/table.css">
+  <link rel="stylesheet" type="text/css" href="../dist/components/icon.css">
+  <link rel="stylesheet" type="text/css" href="../dist/components/menu.css">
+  <link rel="stylesheet" type="text/css" href="../dist/components/message.css">
+
+  <style type="text/css">
+  h2 {
+    margin: 2em 0em;
+  }
+  .ui.container {
+    padding-top: 5em;
+    padding-bottom: 5em;
+  }
+  </style>
+</head>
+<body>
+
+<div class="ui container">
+
+  <h2 class="ui header">Attached Content</h2>
+  <div class="ui three column grid">
+    <div class="column">
+      <div class="top attached ui segment">
+        Segment 1
+      </div>
+      <div class="attached ui segment">
+        Segment 2
+      </div>
+      <div class="attached ui segment">
+        Segment 2
+      </div>
+      <div class="bottom attached ui segment">
+        Segment 3
+      </div>
+      <div class="ui segments">
+        <div class="ui segment">
+          <p>Top</p>
+        </div>
+        <div class="ui segments">
+          <div class="ui segment">
+            <p>Nested Top</p>
+          </div>
+          <div class="ui segment">
+            <p>Nested Middle</p>
+          </div>
+          <div class="ui segment">
+            <p>Nested Bottom</p>
+          </div>
+        </div>
+        <div class="ui segment">
+          <p>Middle</p>
+        </div>
+        <div class="ui horizontal segments">
+          <div class="ui segment">
+            <p>Top</p>
+          </div>
+          <div class="ui segment">
+            <p>Middle</p>
+          </div>
+          <div class="ui segment">
+            <p>Bottom</p>
+          </div>
+        </div>
+        <div class="ui segment">
+          <p>Bottom</p>
+        </div>
+      </div>
+    </div>
+    <div class="column">
+      <table class="top attached ui basic table">
+        <thead>
+          <th>Header</th>
+          <th>Header</th>
+          <th>Header</th>
+        </thead>
+        <tbody>
+          <tr>
+            <td>Cell</td>
+            <td>Cell</td>
+            <td>Cell</td>
+          </tr>
+          <tr>
+            <td>Cell</td>
+            <td>Cell</td>
+            <td>Cell</td>
+          </tr>
+          <tr>
+            <td>Cell</td>
+            <td>Cell</td>
+            <td>Cell</td>
+          </tr>
+        </tbody>
+      </table>
+      <table class="attached ui table">
+        <tbody>
+          <tr>
+            <td>Cell</td>
+            <td>Cell</td>
+            <td>Cell</td>
+          </tr>
+          <tr>
+            <td>Cell</td>
+            <td>Cell</td>
+            <td>Cell</td>
+          </tr>
+          <tr>
+            <td>Cell</td>
+            <td>Cell</td>
+            <td>Cell</td>
+          </tr>
+        </tbody>
+      </table>
+      <table class="attached ui celled selectable table">
+        <tbody>
+          <tr>
+            <td>Cell</td>
+            <td>Cell</td>
+            <td>Cell</td>
+          </tr>
+          <tr>
+            <td>Cell</td>
+            <td>Cell</td>
+            <td>Cell</td>
+          </tr>
+          <tr>
+            <td>Cell</td>
+            <td>Cell</td>
+            <td>Cell</td>
+          </tr>
+        </tbody>
+      </table>
+      <table class="bottom attached ui celled table">
+        <thead>
+          <th>Header</th>
+          <th>Header</th>
+          <th>Header</th>
+        </thead>
+        <tbody>
+          <tr>
+            <td>Cell</td>
+            <td>Cell</td>
+            <td>Cell</td>
+          </tr>
+          <tr>
+            <td>Cell</td>
+            <td>Cell</td>
+            <td>Cell</td>
+          </tr>
+          <tr>
+            <td>Cell</td>
+            <td>Cell</td>
+            <td>Cell</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <div class="column">
+      <div class="top attached ui three item menu">
+        <a class="item">Item</a>
+        <a class="item">Item</a>
+        <a class="item">Item</a>
+      </div>
+      <div class="attached ui three item menu">
+        <a class="item">Item</a>
+        <a class="item">Item</a>
+        <a class="item">Item</a>
+      </div>
+      <div class="attached ui three item menu">
+        <a class="item">Item</a>
+        <a class="item">Item</a>
+        <a class="item">Item</a>
+      </div>
+      <div class="bottom attached ui three item menu">
+        <a class="item">Item</a>
+        <a class="item">Item</a>
+        <a class="item">Item</a>
+      </div>
+
+      <div class="ui top attached tabular menu">
+        <a class="active item">Active Item</a>
+        <a class="item">Item</a>
+        <a class="item">Item</a>
+      </div>
+      <div class="ui bottom attached segment">
+        Segment
+      </div>
+
+      <div class="ui top attached menu">
+        <a class="active item">Active Item</a>
+        <a class="item">Item</a>
+        <a class="item">Item</a>
+      </div>
+      <div class="ui bottom attached segment">
+        Segment
+      </div>
+
+    </div>
+  </div>
+</div>
+
+<div class="ui text container">
+
+  <h2 class="ui header">Header Groups</h2>
+
+  <h4 class="ui top attached block header">
+    Top Block Header
+  </h4>
+  <div class="ui bottom attached segment">
+    Segment
+  </div>
+
+  <div class="ui section divider"></div>
+
+  <div class="ui top attached segment">
+    Segment
+  </div>
+  <h4 class="ui bottom attached block header">
+    Bottom Block Header
+  </h4>
+
+  <div class="ui section divider"></div>
+
+  <h4 class="ui top attached block header">
+    Top Block Header
+  </h4>
+  <div class="ui attached segment">
+    Segment
+  </div>
+  <h4 class="ui attached block header">
+    Middle Block Header
+  </h4>
+  <div class="ui attached segment">
+    Segment
+  </div>
+  <h4 class="ui bottom attached block header">
+    Bottom Block Header
+  </h4>
+
+
+  <h2 class="ui header">Mixed Attached Content</h2>
+
+  <div class="ui section divider"></div>
+
+  <div class="ui top attached segment">Segment</div>
+  <div class="ui attached three item menu">
+    <a class="item">Item</a>
+    <a class="item">Item</a>
+    <a class="item">Item</a>
+  </div>
+  <div class="ui attached segment">
+    1
+  </div>
+  <div class="ui attached icon info message">
+    <i class="help circle icon"></i>
+    <div class="content">
+      Message
+    </div>
+  </div>
+  <table class="ui bottom attached table">
+    <thead>
+      <th>Header</th>
+      <th>Header</th>
+      <th>Header</th>
+    </thead>
+    <tbody>
+      <tr>
+        <td>Cell</td>
+        <td>Cell</td>
+        <td>Cell</td>
+      </tr>
+      <tr>
+        <td>Cell</td>
+        <td>Cell</td>
+        <td>Cell</td>
+      </tr>
+      <tr>
+        <td>Cell</td>
+        <td>Cell</td>
+        <td>Cell</td>
+      </tr>
+    </tbody>
+  </table>
+
+  <div class="ui section divider"></div>
+
+  <div class="ui top attached warning icon message">
+    <i class="attention icon"></i>
+    <div class="content">
+      Message
+    </div>
+  </div>
+  <table class="ui attached table">
+    <thead>
+      <th>Header</th>
+      <th>Header</th>
+      <th>Header</th>
+    </thead>
+    <tbody>
+      <tr>
+        <td>Cell</td>
+        <td>Cell</td>
+        <td>Cell</td>
+      </tr>
+      <tr>
+        <td>Cell</td>
+        <td>Cell</td>
+        <td>Cell</td>
+      </tr>
+      <tr>
+        <td>Cell</td>
+        <td>Cell</td>
+        <td>Cell</td>
+      </tr>
+    </tbody>
+  </table>
+  <div class="ui bottom attached three item menu">
+    <a class="item">Item</a>
+    <a class="item">Item</a>
+    <a class="item">Item</a>
+  </div>
+
+  <div class="ui section divider"></div>
+
+  <div class="ui top attached three item inverted menu">
+    <a class="item">Item</a>
+    <a class="item">Item</a>
+    <a class="item">Item</a>
+  </div>
+  <table class="ui attached inverted table">
+    <thead>
+      <th>Header</th>
+      <th>Header</th>
+      <th>Header</th>
+    </thead>
+    <tbody>
+      <tr>
+        <td>Cell</td>
+        <td>Cell</td>
+        <td>Cell</td>
+      </tr>
+      <tr>
+        <td>Cell</td>
+        <td>Cell</td>
+        <td>Cell</td>
+      </tr>
+      <tr>
+        <td>Cell</td>
+        <td>Cell</td>
+        <td>Cell</td>
+      </tr>
+    </tbody>
+  </table>
+  <div class="ui bottom attached inverted segment">
+    Segment
+  </div>
+
+
+</div>
+
+</body>
+
+</html>

web/semantic/examples/bootstrap.html

@@ -0,0 +1,453 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <!-- Standard Meta -->
+  <meta charset="utf-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
+
+  <!-- Site Properties -->
+  <title>Bootstrap - Semantic</title>
+  <link rel="stylesheet" type="text/css" href="../dist/semantic.css">
+
+  <script src="assets/library/jquery.min.js"></script>
+  <script src="../dist/semantic.js"></script>
+
+  <script>
+  $(document)
+    .ready(function() {
+      $('.ui.selection.dropdown').dropdown();
+      $('.ui.menu .ui.dropdown').dropdown({
+        on: 'hover'
+      });
+    })
+  ;
+  </script>
+</head>
+<body>
+
+<div class="ui grid container">
+  <div class="row">
+    <div class="column">
+      <h1 class="ui header">Bootstrap Migration</h1>
+    </div>
+  </div>
+  <div class="row">
+    <div class="column">
+      <div class="ui message">
+        <h1 class="ui header">Hello, world!</h1>
+        <p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
+        <a class="ui blue button">Learn more &raquo;</a>
+      </div>
+    </div>
+  </div>
+  <div class="row">
+    <div class="column">
+      <h1 class="ui header">Buttons</h1>
+      <a class="ui button" tabindex="0">
+        Default
+      </a>
+      <a class="ui primary button" tabindex="0">
+        Primary
+      </a>
+      <a class="ui basic button" tabindex="0">
+        Basic
+      </a>
+      <a class="ui positive button" tabindex="0">
+        Success
+      </a>
+      <a class="ui negative button" tabindex="0">
+        Error
+      </a>
+    </div>
+  </div>
+  <div class="row">
+    <div class="column">
+      <h1 class="ui header">Thumbnails</h1>
+      <div class="ui divider"></div>
+      <img class="ui small image" src="assets/images/wireframe/image.png">
+    </div>
+  </div>
+  <div class="row">
+    <div class="column">
+      <h1 class="ui header">Dropdown</h1>
+      <div class="ui divider"></div>
+      <div class="ui selection dropdown">
+        <input type="hidden" name="selection">
+        <i class="dropdown icon"></i>
+        <div class="default text">Select</div>
+        <div class="menu">
+          <div class="item" data-value="male">Male</div>
+          <div class="item" data-value="female">Female</div>
+        </div>
+      </div>
+      <div class="ui vertical menu">
+        <a class="active item">
+          Friends
+        </a>
+        <a class="item">
+          Messages
+        </a>
+        <div class="ui dropdown item">
+          <i class="dropdown icon"></i>
+          More
+          <div class="menu">
+            <a class="item">Edit Profile</a>
+            <a class="item">Choose Language</a>
+            <a class="item">Account Settings</a>
+          </div>
+        </div>
+      </div>
+
+      <div class="ui dropdown">
+        <div class="visible menu">
+          <div class="header">Categories</div>
+          <div class="item">
+            <i class="dropdown icon"></i>
+            <span class="text">Clothing</span>
+            <div class="menu">
+              <div class="header">Mens</div>
+              <div class="item">Shirts</div>
+              <div class="item">Pants</div>
+              <div class="item">Jeans</div>
+              <div class="item">Shoes</div>
+              <div class="divider"></div>
+              <div class="header">Womens</div>
+              <div class="item">Dresses</div>
+              <div class="item">Shoes</div>
+              <div class="item">Bags</div>
+            </div>
+          </div>
+          <div class="item">Home Goods</div>
+          <div class="item">Bedroom</div>
+          <div class="divider"></div>
+          <div class="header">Order</div>
+          <div class="item">Status</div>
+          <div class="item">Cancellations</div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="row">
+    <div class="column">
+      <h1 class="ui header">Badges</h1>
+      <div class="ui divider"></div>
+      <div class="ui vertical menu">
+        <div class="item">
+          One <span class="ui label">2</span>
+        </div>
+        <div class="item">
+          Two <span class="ui label">2</span>
+        </div>
+        <div class="item">
+          Three <span class="ui label">2</span>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="row">
+    <div class="column">
+      <h1 class="ui header">Tables</h1>
+      <div class="ui two column grid">
+        <div class="column">
+          <table class="ui table">
+            <thead>
+              <tr>
+                <th>Name</th>
+                <th>Premium Plan</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td>John</td>
+                <td>No</td>
+              </tr>
+              <tr>
+                <td>Jamie</td>
+                <td>Yes</td>
+              </tr>
+              <tr>
+                <td>Jill</td>
+                <td>Yes</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        <div class="column">
+          <table class="ui basic table">
+            <thead>
+              <tr>
+                <th>Name</th>
+                <th>Premium Plan</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td>John</td>
+                <td>No</td>
+              </tr>
+              <tr>
+                <td>Jamie</td>
+                <td>Yes</td>
+              </tr>
+              <tr>
+                <td>Jill</td>
+                <td>Yes</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        <div class="column">
+          <table class="ui definition table">
+            <thead>
+              <tr>
+                <th>Name</th>
+                <th>Premium Plan</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td>John</td>
+                <td>No</td>
+              </tr>
+              <tr>
+                <td>Jamie</td>
+                <td>Yes</td>
+              </tr>
+              <tr>
+                <td>Jill</td>
+                <td>Yes</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        <div class="column">
+          <table class="ui very basic table">
+            <thead>
+              <tr>
+                <th>Name</th>
+                <th>Premium Plan</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td>John</td>
+                <td>No</td>
+              </tr>
+              <tr>
+                <td>Jamie</td>
+                <td>Yes</td>
+              </tr>
+              <tr>
+                <td>Jill</td>
+                <td>Yes</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        <div class="sixteen wide column">
+          <table class="ui celled structured table">
+            <thead>
+              <tr>
+                <th rowspan="2">Name</th>
+                <th rowspan="2">Type</th>
+                <th rowspan="2">Files</th>
+                <th colspan="3">Languages</th>
+              </tr>
+              <tr>
+                <th>Ruby</th>
+                <th>JavaScript</th>
+                <th>Python</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td>Alpha Team</td>
+                <td>Project 1</td>
+                <td>2</td>
+                <td>
+                  <i class="large green checkmark icon"></i>
+                </td>
+                <td></td>
+                <td></td>
+              </tr>
+              <tr>
+                <td rowspan="3">Beta Team</td>
+                <td>Project 1</td>
+                <td>52</td>
+                <td>
+                  <i class="large green checkmark icon"></i>
+                </td>
+                <td></td>
+                <td></td>
+              </tr>
+              <tr>
+                <td>Project 2</td>
+                <td>12</td>
+                <td></td>
+                <td>
+                  <i class="large green checkmark icon"></i>
+                </td>
+                <td></td>
+              </tr>
+              <tr>
+                <td>Project 3</td>
+                <td>21</td>
+                <td>
+                  <i class="large green checkmark icon"></i>
+                </td>
+                <td></td>
+                <td></td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="row">
+    <div class="column">
+      <h1 class="ui header">Alerts</h1>
+      <div class="ui divider"></div>
+      <div class="ui positive message">Well done! You successfully read this important alert message.</div>
+      <div class="ui info message">Heads up! This alert needs your attention, but it's not super important.</div>
+      <div class="ui warning message">Warning! Best check yo self, you're not looking too good.</div>
+      <div class="ui error message">Oh snap! Change a few things up and try submitting again.</div>
+    </div>
+  </div>
+  <div class="row">
+    <div class="column">
+      <h1 class="ui header">List groups</h1>
+      <div class="ui divider"></div>
+      <div class="ui three column grid">
+        <div class="column">
+          <div class="ui segments">
+            <div class="ui segment">
+              <p>Cras justo odio</p>
+            </div>
+            <div class="ui segment">
+              <p>Dapibus ac facilisis in</p>
+            </div>
+            <div class="ui segment">
+              <p>Morbi leo risus</p>
+            </div>
+            <div class="ui segment">
+              <p>Porta ac consectetur ac</p>
+            </div>
+            <div class="ui segment">
+             <p>Vestibulum at eros</p>
+           </div>
+         </div>
+        </div>
+        <div class="column">
+          <div class="ui fluid vertical menu">
+            <a class="item">
+              <p>Cras justo odio</p>
+            </a>
+            <a class="item">
+             <p>Vestibulum at eros</p>
+            </a>
+          </div>
+        </div>
+        <div class="column">
+          <div class="ui fluid vertical menu">
+            <a class="item">
+              <h1 class="ui medium header">List group item heading</h1>
+              <p>Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
+            </a>
+            <a class="item">
+              <h1 class="ui medium header">List group item heading</h1>
+              <p>Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
+            </a>
+            <a class="item">
+              <h1 class="ui medium header">List group item heading</h1>
+              <p>Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="row">
+    <div class="column">
+      <h1 class="ui header">Panels</h1>
+      <div class="ui divider"></div>
+      <div class="ui three column grid">
+        <div class="column">
+          <div class="ui segments">
+            <div class="ui red segment">One</div>
+            <div class="ui blue segment">Two</div>
+            <div class="ui green segment">Three</div>
+          </div>
+        </div>
+        <div class="column">
+          <div class="ui raised segments">
+            <div class="ui segment">One</div>
+            <div class="ui segment">Two</div>
+            <div class="ui segment">Three</div>
+          </div>
+        </div>
+        <div class="column">
+          <div class="ui stacked segments">
+            <div class="ui segment">One</div>
+            <div class="ui segment">Two</div>
+            <div class="ui segment">Three</div>
+          </div>
+        </div>
+        <div class="column">
+          <div class="ui top attached error message">Error</div>
+          <div class="ui bottom attached segment">Panel content</div>
+        </div>
+        <div class="column">
+          <div class="ui top attached info message">Info</div>
+          <div class="ui bottom attached segment">Panel content</div>
+        </div>
+        <div class="column">
+          <div class="ui top attached success message">Success</div>
+          <div class="ui bottom attached segment">Panel content</div>
+        </div>
+        <div class="column">
+          <h4 class="ui top attached inverted header">Header</h4>
+          <div class="ui buttom attached segment">Panel content</div>
+        </div>
+        <div class="column">
+          <h4 class="ui top attached block header">Header</h4>
+          <div class="ui bottom attached segment">Panel content</div>
+        </div>
+        <div class="column">
+          <h4 class="ui top attached header">Header</h4>
+          <div class="ui bottom attached segment">Panel content</div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="row">
+    <div class="column">
+      <h1 class="ui header">Wells</h1>
+      <div class="ui divider"></div>
+      <div class="ui segment">
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.</p>
+      </div>
+      <div class="ui secondary segment">
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.</p>
+      </div>
+      <div class="ui tertiary segment">
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.</p>
+      </div>
+      <div class="ui inverted segment">
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.</p>
+      </div>
+      <div class="ui secondary inverted segment">
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.</p>
+      </div>
+      <div class="ui tertiary inverted segment">
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.</p>
+      </div>
+    </div>
+  </div>
+</div>
+
+</body>
+
+</html>

web/semantic/examples/components/button.html

@@ -0,0 +1,222 @@
+<!DOCTYPE html>
+<html>
+<head>
+
+  <meta charset="utf-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
+  <title>Theming - Semantic</title>
+
+  <!--- Site CSS -->
+  <link rel="stylesheet" type="text/css" href="../../dist/components/reset.css">
+  <link rel="stylesheet" type="text/css" href="../../dist/components/site.css">
+  <link rel="stylesheet" type="text/css" href="../../dist/components/grid.css">
+
+  <!--- Component CSS -->
+  <link rel="stylesheet" type="text/css" href="../../dist/components/dropdown.css">
+  <link rel="stylesheet" type="text/css" href="../../dist/components/icon.css">
+  <link rel="stylesheet" type="text/css" href="../../dist/components/card.css">
+  <link rel="stylesheet" type="text/css" href="../../dist/components/image.css">
+  <link rel="stylesheet" type="text/css" href="../../dist/components/button.css">
+  <link rel="stylesheet" type="text/css" href="../../dist/components/segment.css">
+  <link rel="stylesheet" type="text/css" href="../../dist/components/divider.css">
+  <link rel="stylesheet" type="text/css" href="../../dist/components/transition.css">
+
+  <!--- Example Libs -->
+  <link rel="stylesheet" type="text/css" href="../../dist/components/popup.css">
+  <script src="../assets/library/jquery.min.js"></script>
+  <script src="../assets/library/iframe-content.js"></script>
+  <script src="../assets/show-examples.js"></script>
+  <script type="text/javascript" src="../../dist/components/popup.js"></script>
+
+  <!--- Component JS -->
+  <script type="text/javascript" src="../../dist/components/transition.js"></script>
+  <script type="text/javascript" src="../../dist/components/dropdown.js"></script>
+
+  <!--- Example CSS -->
+  <style>
+  body {
+    padding: 1em;
+  }
+  .spaced > .button {
+    margin-bottom: 1em;
+  }
+  </style>
+
+  <!--- Example Javascript -->
+  <script>
+  $(document)
+    .ready(function() {
+      $('.ui.dropdown').dropdown();
+
+      $('.ui.buttons .dropdown.button').dropdown({
+        action: 'combo'
+      });
+    })
+  ;
+  </script>
+</head>
+
+<body>
+
+<div class="ui stackable equal width grid">
+  <div class="column">
+    <button class="ui button">Default</button>
+    <button class="ui primary button">Primary</button>
+    <button class="ui secondary button">Secondary</button>
+    <button class="ui basic button">Basic</button>
+    <button class="ui compact button">
+      Compact
+    </button>
+
+    <div class="ui divider"></div>
+    <button class="ui icon button">
+      <i class="heart icon"></i>
+    </button>
+    <button class="ui labeled icon button">
+      <i class="heart icon"></i>
+      Labeled
+    </button>
+    <button class="ui right labeled icon button">
+      <i class="heart icon"></i>
+      Labeled
+    </button>
+
+    <div class="ui divider"></div>
+
+    <div class="ui buttons">
+      <button class="ui button">Combo</button>
+      <div class="ui floating dropdown icon button">
+        <i class="dropdown icon"></i>
+        <div class="menu">
+          <div class="item">Choice 1</div>
+          <div class="item">Choice 2</div>
+          <div class="item">Choice 3</div>
+        </div>
+      </div>
+    </div>
+
+    <div class="ui floating search dropdown button">
+      <span class="text">Search Dropdown</span>
+      <div class="menu">
+        <div class="item">Arabic</div>
+        <div class="item">Chinese</div>
+        <div class="item">Danish</div>
+        <div class="item">Dutch</div>
+        <div class="item">English</div>
+        <div class="item">French</div>
+        <div class="item">German</div>
+        <div class="item">Greek</div>
+        <div class="item">Hungarian</div>
+        <div class="item">Italian</div>
+        <div class="item">Japanese</div>
+        <div class="item">Korean</div>
+        <div class="item">Lithuanian</div>
+        <div class="item">Persian</div>
+        <div class="item">Polish</div>
+        <div class="item">Portuguese</div>
+        <div class="item">Russian</div>
+        <div class="item">Spanish</div>
+        <div class="item">Swedish</div>
+        <div class="item">Turkish</div>
+        <div class="item">Vietnamese</div>
+      </div>
+    </div>
+
+    <div class="ui divider"></div>
+
+    <div class="ui animated button" tabindex="0">
+      <div class="visible content">Horizontal</div>
+      <div class="hidden content">
+        Hidden
+      </div>
+    </div>
+    <div class="ui vertical animated button" tabindex="0">
+      <div class="visible content">Vertical</div>
+      <div class="hidden content">
+        Hidden
+      </div>
+    </div>
+    <div class="ui animated fade button" tabindex="0">
+      <div class="visible content">Fade In</div>
+      <div class="hidden content">
+        Hidden
+      </div>
+    </div>
+
+    <div class="ui divider"></div>
+    <button class="ui disabled button">Disabled</button>
+    <button class="ui loading button">Loading</button>
+
+    <div class="ui divider"></div>
+
+    <div class="ui buttons">
+      <button class="ui button">1</button>
+      <button class="ui button">2</button>
+      <button class="ui button">3</button>
+    </div>
+
+    <div class="ui icon buttons">
+      <button class="ui button"><i class="align left icon"></i></button>
+      <button class="ui button"><i class="align center icon"></i></button>
+      <button class="ui button"><i class="align right icon"></i></button>
+      <button class="ui button"><i class="align justify icon"></i></button>
+    </div>
+
+    <div class="ui buttons">
+      <button class="ui button">1</button>
+      <div class="or"></div>
+      <button class="ui button">2</button>
+    </div>
+
+    <div class="ui divider"></div>
+
+    <div class="ui two top attached buttons">
+      <div class="ui button">One</div>
+      <div class="ui button">Two</div>
+    </div>
+    <div class="ui attached segment">
+      <img src="../assets/images/wireframe/paragraph.png" class="ui wireframe image">
+    </div>
+    <div class="ui two bottom attached buttons">
+      <div class="ui button">One</div>
+      <div class="ui button">Two</div>
+    </div>
+
+  </div>
+  <div class="column">
+    <button class="ui mini button">Mini</button>
+    <button class="ui tiny button">Tiny</button>
+    <button class="ui small button">Small</button>
+    <button class="ui large button">Large</button>
+    <button class="ui big button">Big</button>
+    <button class="ui huge button">Huge</button>
+    <button class="ui massive button">Massive</button>
+    <div class="ui divider"></div>
+    <div class="spaced">
+      <button class="yellow ui button">Yellow</button>
+      <button class="orange ui button">Orange</button>
+      <button class="green ui button">Green</button>
+      <button class="teal ui button">Teal</button>
+      <button class="blue ui button">Blue</button>
+      <button class="purple ui button">Purple</button>
+      <button class="pink ui button">Pink</button>
+      <button class="red ui button">Red</button>
+      <button class="black ui button">Black</button>
+    </div>
+
+
+    <div class="ui divider"></div>
+
+    <div class="ui inverted segment">
+      <button class="ui inverted button">Inverted</button>
+      <button class="ui inverted basic button">Basic</button>
+      <button class="ui inverted blue button">Colored</button>
+      <button class="ui inverted blue basic button">Basic Colored</button>
+    </div>
+
+  </div>
+</div>
+
+</body>
+</html>

web/semantic/examples/components/card.html

@@ -0,0 +1,313 @@
+<!DOCTYPE html>
+<html>
+<head>
+
+  <meta charset="utf-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
+  <title>Theming - Semantic</title>
+
+  <!--- Site CSS -->
+  <link rel="stylesheet" type="text/css" href="../../dist/components/reset.css">
+  <link rel="stylesheet" type="text/css" href="../../dist/components/site.css">
+  <link rel="stylesheet" type="text/css" href="../../dist/components/grid.css">
+
+  <!--- Component CSS -->
+  <link rel="stylesheet" type="text/css" href="../../dist/components/icon.css">
+  <link rel="stylesheet" type="text/css" href="../../dist/components/button.css">
+  <link rel="stylesheet" type="text/css" href="../../dist/components/card.css">
+  <link rel="stylesheet" type="text/css" href="../../dist/components/label.css">
+  <link rel="stylesheet" type="text/css" href="../../dist/components/image.css">
+  <link rel="stylesheet" type="text/css" href="../../dist/components/reveal.css">
+  <link rel="stylesheet" type="text/css" href="../../dist/components/dimmer.css">
+  <link rel="stylesheet" type="text/css" href="../../dist/components/rating.css">
+  <link rel="stylesheet" type="text/css" href="../../dist/components/transition.css">
+  <link rel="stylesheet" type="text/css" href="../../dist/components/popup.css">
+
+  <!--- Component JS -->
+  <script src="../assets/library/jquery.min.js"></script>
+  <script src="../assets/library/iframe-content.js"></script>
+  <script type="text/javascript" src="../../dist/components/popup.js"></script>
+  <script type="text/javascript" src="../../dist/components/dimmer.js"></script>
+  <script type="text/javascript" src="../../dist/components/rating.js"></script>
+  <script type="text/javascript" src="../../dist/components/transition.js"></script>
+
+  <!--- Show Names -->
+  <script src="../assets/show-examples.js"></script>
+
+  <!--- Example CSS -->
+  <style>
+    body {
+      padding: 1em;
+    }
+  </style>
+
+  <!--- Example Javascript -->
+  <script>
+  $(document)
+    .ready(function() {
+      $('.special.card .image').dimmer({
+        on: 'hover'
+      });
+      $('.star.rating')
+        .rating()
+      ;
+      $('.card .dimmer')
+        .dimmer({
+          on: 'hover'
+        })
+      ;
+    })
+  ;
+  </script>
+</head>
+
+<body>
+
+<div class="ui four cards">
+  <div class="ui card">
+    <div class="image">
+      <div class="ui blurring inverted dimmer">
+        <div class="content">
+          <div class="center">
+            <div class="ui teal button">Add Friend</div>
+          </div>
+        </div>
+      </div>
+      <img src="../assets/images/wireframe/image.png">
+    </div>
+    <div class="content">
+      <div class="header">Title</div>
+      <div class="meta">
+        <a class="group">Meta</a>
+      </div>
+      <div class="description">One or two sentence description that may go to several lines</div>
+    </div>
+    <div class="extra content">
+      <a class="right floated created">Arbitrary</a>
+      <a class="friends">
+        Arbitrary</a>
+    </div>
+  </div>
+  <div class="ui card">
+    <div class="blurring dimmable image">
+      <div class="ui dimmer">
+        <div class="content">
+          <div class="center">
+            <div class="ui inverted button">Call to Action</div>
+          </div>
+        </div>
+      </div>
+      <img src="../assets/images/wireframe/image.png">
+    </div>
+    <div class="content">
+      <a class="header">Name</a>
+      <div class="meta">
+        <span class="date">Date</span>
+      </div>
+    </div>
+    <div class="extra content">
+      <a>
+        <i class="users icon"></i>
+        Users
+      </a>
+    </div>
+  </div>
+  <div class="ui card">
+    <div class="ui slide right reveal image">
+      <div class="visible content">
+        <img class="ui fluid image" src="../assets/images/avatar/nan.jpg">
+      </div>
+      <div class="hidden content">
+        <img class="ui fluid image" src="../assets/images/avatar/tom.jpg">
+      </div>
+    </div>
+    <div class="content">
+      <img src="../assets/images/wireframe/paragraph.png" class="ui wireframe image">
+    </div>
+  </div>
+  <div class="ui card">
+    <div class="ui move reveal image">
+      <div class="visible content">
+        <img class="ui fluid image" src="../assets/images/avatar/tom.jpg">
+      </div>
+      <div class="hidden content">
+        <img class="ui fluid image" src="../assets/images/avatar/nan.jpg">
+      </div>
+    </div>
+    <div class="content">
+      <img src="../assets/images/wireframe/paragraph.png" class="ui wireframe image">
+    </div>
+  </div>
+</div>
+<div class="ui four cards">
+  <div class="ui card">
+    <div class="extra content">
+      <span class="left floated like">
+        <i class="like icon"></i>
+        Like
+      </span>
+      <span class="right floated star">
+        <i class="star icon"></i>
+        Favorite
+      </span>
+    </div>
+    <div class="content">
+      <img src="../assets/images/wireframe/paragraph.png" class="ui wireframe image">
+    </div>
+  </div>
+  <div class="ui card">
+    <div class="content">
+      <div class="header">
+        <img src="../assets/images/wireframe/square-image.png" class="ui avatar right spaced image">
+        Abbreviated Header
+      </div>
+      <div class="description">
+        <img src="../assets/images/wireframe/paragraph.png" class="ui wireframe image">
+      </div>
+    </div>
+    <div class="ui two bottom attached buttons">
+      <div class="ui button">
+        Action 1
+      </div>
+      <div class="ui button">
+        Action 2
+      </div>
+    </div>
+  </div>
+  <a href="#" class="ui card">
+    <div class="content">
+      <div class="header">Cute Dog</div>
+      <div class="meta">
+        <span class="category">Animals</span>
+      </div>
+      <div class="description">
+        <img src="../assets/images/wireframe/paragraph.png" class="ui wireframe image">
+      </div>
+    </div>
+    <div class="extra content">
+      <div class="right floated author">
+        <img src="../assets/images/wireframe/square-image.png" class="ui avatar image"> Username
+      </div>
+    </div>
+  </a>
+  <div class="ui card">
+    <div class="ui two top attached basic buttons">
+      <div class="ui button">
+        Action 1
+      </div>
+      <div class="ui button">
+        Action 2
+      </div>
+    </div>
+    <div class="content">
+      <img src="../assets/images/wireframe/paragraph.png" class="ui wireframe image">
+    </div>
+    <div class="ui two bottom attached basic buttons">
+      <div class="ui button">
+        Action 3
+      </div>
+      <div class="ui button">
+        Action 4
+      </div>
+    </div>
+  </div>
+</div>
+
+
+<div class="ui four cards">
+  <div class="card">
+    <div class="content">
+      Content 1
+    </div>
+    <div class="content">
+      Content 2
+    </div>
+    <div class="content">
+      Content 3
+    </div>
+    <div class="extra content">
+      Extra Content
+    </div>
+  </div>
+  <div class="card">
+    <div class="content">
+      Content 1
+    </div>
+    <div class="content">
+      Content 2
+    </div>
+    <div class="content">
+      Content 3
+    </div>
+    <div class="extra content">
+      Extra Content
+    </div>
+  </div>
+  <div class="card">
+    <div class="content">
+      Content 1
+    </div>
+    <div class="content">
+      Content 2
+    </div>
+    <div class="content">
+      Content 3
+    </div>
+    <div class="extra content">
+      Extra Content
+    </div>
+  </div>
+  <div class="card">
+    <div class="content">
+      Content 1
+    </div>
+    <div class="content">
+      Content 2
+    </div>
+    <div class="content">
+      Content 3
+    </div>
+    <div class="extra content">
+      Extra Content
+    </div>
+  </div>
+</div>
+
+<div class="ui four cards">
+  <div class="card">
+    <div class="image">
+      <img src="../assets/images/wireframe/image.png">
+    </div>
+    <div class="extra center aligned">
+      <div data-rating="4" class="ui star rating"></div>
+    </div>
+  </div>
+  <div class="card">
+    <div class="image">
+      <img src="../assets/images/wireframe/image.png">
+    </div>
+    <div class="extra center aligned">
+      <div data-rating="2" class="ui star rating"></div>
+    </div>
+  </div>
+  <div class="card">
+    <div class="image">
+      <img src="../assets/images/wireframe/image.png">
+    </div>
+    <div class="extra center aligned">
+      <div data-rating="3" class="ui star rating"></div>
+    </div>
+  </div>
+  <div class="card">
+    <div class="image">
+      <img src="../assets/images/wireframe/image.png">
+    </div>
+    <div class="extra center aligned">
+      <div data-rating="4" class="ui star rating"></div>
+    </div>
+  </div>
+</div>
+
+</body>
+</html>

web/semantic/examples/components/input.html

@@ -0,0 +1,159 @@
+<!DOCTYPE html>
+<html>
+<head>
+
+  <meta charset="utf-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
+  <title>Theming - Semantic</title>
+
+  <!--- Site CSS -->
+  <link rel="stylesheet" type="text/css" href="../../dist/components/reset.css">
+  <link rel="stylesheet" type="text/css" href="../../dist/components/site.css">
+  <link rel="stylesheet" type="text/css" href="../../dist/components/grid.css">
+
+  <!--- Component CSS -->
+  <link rel="stylesheet" type="text/css" href="../../dist/components/icon.css">
+  <link rel="stylesheet" type="text/css" href="../../dist/components/input.css">
+  <link rel="stylesheet" type="text/css" href="../../dist/components/button.css">
+  <link rel="stylesheet" type="text/css" href="../../dist/components/divider.css">
+  <link rel="stylesheet" type="text/css" href="../../dist/components/label.css">
+  <link rel="stylesheet" type="text/css" href="../../dist/components/dropdown.css">
+  <link rel="stylesheet" type="text/css" href="../../dist/components/transition.css">
+  <link rel="stylesheet" type="text/css" href="../../dist/components/popup.css">
+
+  <!--- Component JS -->
+  <script src="../assets/library/jquery.min.js"></script>
+  <script src="../assets/library/iframe-content.js"></script>
+  <script type="text/javascript" src="../../dist/components/popup.js"></script>
+  <script type="text/javascript" src="../../dist/components/dropdown.js"></script>
+  <script type="text/javascript" src="../../dist/components/transition.js"></script>
+
+  <!--- Show Names -->
+  <script src="../assets/show-examples.js"></script>
+
+  <!--- Example CSS -->
+  <style>
+  body {
+    padding: 1em;
+  }
+  .ui.input + .ui.input {
+    margin-left: 1em;
+  }
+  </style>
+
+  <!--- Example Javascript -->
+  <script>
+  $(document)
+    .ready(function() {
+      $('.ui.dropdown')
+        .dropdown({
+          on: 'click'
+        })
+      ;
+    })
+  ;
+  </script>
+</head>
+
+<body>
+
+<div class="ui two column stackable grid">
+  <div class="column">
+
+    <div class="ui action left icon input">
+      <i class="search icon"></i>
+      <input type="text" placeholder="Search...">
+      <div class="ui teal button">Search</div>
+    </div>
+
+    <div class="ui divider"></div>
+    <div class="ui input error">
+      <input placeholder="Search..." type="text">
+    </div>
+    <div class="ui divider"></div>
+
+    <div class="ui right labeled input">
+      <input placeholder="Placeholder" type="text">
+      <div class="ui dropdown label">
+        <div class="text">Dropdown</div>
+        <i class="dropdown icon"></i>
+        <div class="menu">
+          <div class="item">Choice 1</div>
+          <div class="item">Choice 2</div>
+          <div class="item">Choice 3</div>
+        </div>
+      </div>
+    </div>
+    <div class="ui divider"></div>
+
+    <div class="ui transparent icon input">
+      <input placeholder="Search..." type="text">
+      <i class="search icon"></i>
+    </div>
+    <div class="ui transparent left icon input">
+      <input placeholder="Search..." type="text">
+      <i class="search icon"></i>
+    </div>
+    <div class="ui divider"></div>
+    <div class="ui left icon input loading">
+      <input placeholder="Loading..." type="text">
+      <i class="search icon"></i>
+    </div>
+
+    <div class="ui icon input loading">
+      <input placeholder="Loading..." type="text">
+      <i class="search icon"></i>
+    </div>
+
+  </div>
+  <div class="column">
+    <div class="ui right labeled left icon input">
+      <i class="tags icon"></i>
+      <input placeholder="Enter tags" type="text">
+      <a class="ui tag label">
+        Add Tag
+      </a>
+    </div>
+    <div class="ui divider"></div>
+    <div class="ui labeled input">
+      <a class="ui label">
+        Label
+      </a>
+      <input type="text" placeholder="Placeholder...">
+    </div>
+    <div class="ui divider"></div>
+    <div class="ui right labeled input">
+      <input type="text" placeholder="Placeholder...">
+      <a class="ui label">
+        Label
+      </a>
+    </div>
+    <div class="ui divider"></div>
+    <div class="ui labeled icon input">
+      <div class="ui label">
+        http://
+      </div>
+      <input type="text" placeholder="domain.com">
+      <i class="add circle link icon"></i>
+    </div>
+    <div class="ui right action input">
+      <input type="text" placeholder="domain.com">
+      <div class="ui teal button">
+        <i class="add icon"></i>
+        Add
+      </div>
+    </div>
+    <div class="ui divider"></div>
+    <div class="ui corner labeled input">
+      <input type="text" placeholder="Required Field">
+      <div class="ui corner label">
+        <i class="asterisk icon"></i>
+      </div>
+    </div>
+
+  </div>
+</div>
+
+</body>
+</html>

web/semantic/examples/components/menu.html

@@ -0,0 +1,183 @@
+<!DOCTYPE html>
+<html>
+<head>
+
+  <meta charset="utf-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
+  <title>Theming - Semantic</title>
+
+  <!--- Site CSS -->
+  <link rel="stylesheet" type="text/css" href="../../dist/components/reset.css">
+  <link rel="stylesheet" type="text/css" href="../../dist/components/site.css">
+  <link rel="stylesheet" type="text/css" href="../../dist/components/grid.css">
+
+  <!--- Component CSS -->
+  <link rel="stylesheet" type="text/css" href="../../dist/components/menu.css">
+  <link rel="stylesheet" type="text/css" href="../../dist/components/input.css">
+  <link rel="stylesheet" type="text/css" href="../../dist/components/dropdown.css">
+  <link rel="stylesheet" type="text/css" href="../../dist/components/icon.css">
+  <link rel="stylesheet" type="text/css" href="../../dist/components/button.css">
+  <link rel="stylesheet" type="text/css" href="../../dist/components/transition.css">
+
+  <!--- Example Libs -->
+  <link rel="stylesheet" type="text/css" href="../../dist/components/popup.css">
+  <script src="../assets/library/jquery.min.js"></script>
+  <script src="../assets/library/iframe-content.js"></script>
+  <script src="../assets/show-examples.js"></script>
+  <script type="text/javascript" src="../../dist/components/popup.js"></script>
+
+  <!--- Component JS -->
+  <script type="text/javascript" src="../../dist/components/transition.js"></script>
+  <script type="text/javascript" src="../../dist/components/dropdown.js"></script>
+
+  <!--- Example CSS -->
+  <style>
+  body {
+    padding: 1em;
+  }
+  .ui.menu {
+    margin: 3em 0em;
+  }
+  .ui.menu:last-child {
+    margin-bottom: 110px;
+  }
+  </style>
+
+  <!--- Example Javascript -->
+  <script>
+  $(document)
+    .ready(function() {
+      $('.ui.menu .ui.dropdown').dropdown({
+        on: 'hover'
+      });
+      $('.ui.menu a.item')
+        .on('click', function() {
+          $(this)
+            .addClass('active')
+            .siblings()
+            .removeClass('active')
+          ;
+        })
+      ;
+    })
+  ;
+  </script>
+</head>
+<body>
+
+<div class="ui menu">
+  <div class="header item">Brand</div>
+  <a class="active item">Link</a>
+  <a class="item">Link</a>
+  <div class="ui dropdown item">
+    Dropdown
+    <i class="dropdown icon"></i>
+    <div class="menu">
+      <div class="item">Action</div>
+      <div class="item">Another Action</div>
+      <div class="item">Something else here</div>
+      <div class="divider"></div>
+      <div class="item">Separated Link</div>
+      <div class="divider"></div>
+      <div class="item">One more separated link</div>
+    </div>
+  </div>
+  <div class="right menu">
+    <div class="item">
+      <div class="ui action left icon input">
+        <i class="search icon"></i>
+        <input type="text" placeholder="Search">
+        <button class="ui button">Submit</button>
+      </div>
+    </div>
+    <a class="item">Link</a>
+  </div>
+</div>
+
+<div class="ui inverted menu">
+  <div class="header item">Brand</div>
+  <div class="active item">Link</div>
+  <a class="item">Link</a>
+  <div class="ui dropdown item">
+    Dropdown
+    <i class="dropdown icon"></i>
+    <div class="menu">
+      <div class="item">Action</div>
+      <div class="item">Another Action</div>
+      <div class="item">Something else here</div>
+      <div class="divider"></div>
+      <div class="item">Separated Link</div>
+      <div class="divider"></div>
+      <div class="item">One more separated link</div>
+    </div>
+  </div>
+  <div class="right menu">
+    <div class="item">
+      <div class="ui transparent inverted icon input">
+        <i class="search icon"></i>
+        <input type="text" placeholder="Search">
+      </div>
+    </div>
+    <a class="item">Link</a>
+  </div>
+</div>
+
+<div class="ui secondary menu">
+  <div class="active item">Link</div>
+  <a class="item">Link</a>
+  <div class="ui dropdown item">
+    Dropdown
+    <i class="dropdown icon"></i>
+    <div class="menu">
+      <div class="item">Action</div>
+      <div class="item">Another Action</div>
+      <div class="item">Something else here</div>
+      <div class="divider"></div>
+      <div class="item">Separated Link</div>
+      <div class="divider"></div>
+      <div class="item">One more separated link</div>
+    </div>
+  </div>
+  <div class="right menu">
+    <div class="item">
+      <div class="ui action left icon input">
+        <i class="search icon"></i>
+        <input type="text" placeholder="Search">
+        <button class="ui button">Submit</button>
+      </div>
+    </div>
+    <a class="item">Link</a>
+  </div>
+</div>
+
+<div class="ui three column doubling grid">
+  <div class="column">
+    <div class="ui secondary pointing menu">
+      <div class="active item">Link</div>
+      <a class="item">Link</a>
+      <a class="item">Link</a>
+    </div>
+  </div>
+
+  <div class="column">
+    <div class="ui tabular menu">
+      <div class="active item">Link</div>
+      <a class="item">Link</a>
+      <a class="item">Link</a>
+    </div>
+  </div>
+
+  <div class="column">
+    <div class="ui pointing menu">
+      <div class="active item">Link</div>
+      <a class="item">Link</a>
+      <div class="right item">
+        Right Text
+      </div>
+    </div>
+  </div>
+</div>
+
+</body>
+</html>

web/semantic/examples/components/site.html

@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <!-- Standard Meta -->
+  <meta charset="utf-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
+
+  <!-- Site Properties -->
+  <title>Theming - Semantic</title>
+  <link rel="stylesheet" type="text/css" href="../../dist/components/reset.css">
+  <link rel="stylesheet" type="text/css" href="../../dist/components/site.css">
+  <link rel="stylesheet" type="text/css" href="../../dist/components/grid.css">
+
+  <script src="../assets/library/iframe-content.js"></script>
+
+  <style>
+  body {
+    padding: 1em;
+  }
+  .color.grid {
+    margin: -1.5em;
+    width: 400px;
+  }
+  .ui.table {
+    table-layout: fixed;
+  }
+  .color.grid .column {
+    margin: 0.5em;
+    width: 50px;
+    height: 50px;
+  }
+  </style>
+</head>
+
+<body>
+<div class="ui three column stackable grid">
+  <div class="column">
+    <h1>Heading 1</h1>
+    <h2>Heading 2</h2>
+    <h3>Heading 3</h3>
+    <h4>Heading 4</h4>
+    <h5>Heading 5</h5>
+    <p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p>
+  </div>
+  <div class="column">
+    <h2>Example body text</h2>
+    <p>Nullam quis risus eget <a href="#">urna mollis ornare</a> vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p>
+    <p><small>This line of text is meant to be treated as fine print.</small></p>
+    <p>The following snippet of text is <strong>rendered as bold text</strong>.</p>
+    <p>The following snippet of text is <em>rendered as italicized text</em>.</p>
+    <p>An abbreviation of the word attribute is <abbr title="attribute">attr</abbr>.</p>
+  </div>
+  <div class="column">
+    <div class="ui three column stackable padded middle aligned centered color grid">
+      <div class="red column">Red</div>
+      <div class="orange column">Orange</div>
+      <div class="yellow column">Yellow</div>
+      <div class="olive column">Olive</div>
+      <div class="green column">Green</div>
+      <div class="teal column">Teal</div>
+      <div class="blue column">Blue</div>
+      <div class="violet column">Violet</div>
+      <div class="purple column">Purple</div>
+      <div class="pink column">Pink</div>
+      <div class="brown column">Brown</div>
+      <div class="grey column">Grey</div>
+      <div class="black column">Black</div>
+    </div>
+  </div>
+</div>
+
+</body>
+</html>

web/semantic/examples/components/table.html

@@ -0,0 +1,471 @@
+<!DOCTYPE html>
+<html>
+<head>
+
+  <meta charset="utf-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
+  <title>Theming - Semantic</title>
+
+  <!--- Site CSS -->
+  <link rel="stylesheet" type="text/css" href="../../dist/components/reset.css">
+  <link rel="stylesheet" type="text/css" href="../../dist/components/site.css">
+  <link rel="stylesheet" type="text/css" href="../../dist/components/grid.css">
+
+  <!--- Component CSS -->
+  <link rel="stylesheet" type="text/css" href="../../dist/components/icon.css">
+  <link rel="stylesheet" type="text/css" href="../../dist/components/table.css">
+  <link rel="stylesheet" type="text/css" href="../../dist/components/button.css">
+  <link rel="stylesheet" type="text/css" href="../../dist/components/transition.css">
+  <link rel="stylesheet" type="text/css" href="../../dist/components/popup.css">
+
+  <!--- Component JS -->
+  <script src="../assets/library/jquery.min.js"></script>
+  <script src="../assets/library/iframe-content.js"></script>
+  <script type="text/javascript" src="../../dist/components/popup.js"></script>
+  <script type="text/javascript" src="../../dist/components/transition.js"></script>
+
+  <!--- Show Names -->
+  <script src="../assets/show-examples.js"></script>
+
+  <!--- Example CSS -->
+  <style>
+  body {
+    padding: 1em;
+  }
+  .ui.table {
+    table-layout: fixed;
+  }
+  </style>
+
+  <!--- Example Javascript -->
+  <script>
+  </script>
+</head>
+
+<body>
+
+<div class="ui two column relaxed grid">
+  <div class="column">
+    <table class="ui right aligned table">
+      <thead>
+        <th class="left aligned">Person</th>
+        <th>Calories</th>
+        <th>Fat</th>
+        <th>Protein</th>
+      </thead>
+      <tbody>
+        <tr>
+          <td class="left aligned">Delmar</td>
+          <td>36</td>
+          <td>36g</td>
+          <td>2g</td>
+        </tr>
+        <tr>
+          <td class="left aligned">Louise</td>
+          <td>24</td>
+          <td>24g</td>
+          <td>29g</td>
+        </tr>
+        <tr>
+          <td class="left aligned">Terrell</td>
+          <td>22</td>
+          <td>11g</td>
+          <td>9g</td>
+        </tr>
+        <tr>
+          <td class="left aligned">Marion</td>
+          <td>7</td>
+          <td>35g</td>
+          <td>3g</td>
+        </tr>
+        <tr>
+          <td class="left aligned">Clayton</td>
+          <td>7</td>
+          <td>38g</td>
+          <td>20g</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+  <div class="column">
+    <table class="ui right aligned celled table">
+      <thead>
+        <th class="left aligned">Person</th>
+        <th>Calories</th>
+        <th>Fat</th>
+        <th>Protein</th>
+      </thead>
+      <tbody>
+        <tr>
+          <td class="left aligned">Drema</td>
+          <td class="positive">15</td>
+          <td class="negative">26g</td>
+          <td class="warning">8g</td>
+        </tr>
+        <tr class="positive">
+          <td class="left aligned">Nona</td>
+          <td>11</td>
+          <td>21g</td>
+          <td>16g</td>
+        </tr>
+        <tr class="negative">
+          <td class="left aligned">Isidra</td>
+          <td>34</td>
+          <td>43g</td>
+          <td>11g</td>
+        </tr>
+        <tr class="warning">
+          <td class="left aligned">Bart</td>
+          <td>41</td>
+          <td>40g</td>
+          <td>30g</td>
+        </tr>
+        <tr class="selected">
+          <td class="left aligned">Nguyet</td>
+          <td>41</td>
+          <td>44g</td>
+          <td>28g</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+  <div class="column">
+    <table class="ui basic right aligned table">
+      <thead>
+        <th class="left aligned">Person</th>
+        <th>Calories</th>
+        <th>Fat</th>
+        <th>Protein</th>
+      </thead>
+      <tbody>
+        <tr>
+          <td class="left aligned">Mirna</td>
+          <td>1</td>
+          <td>28g</td>
+          <td>29g</td>
+        </tr>
+        <tr>
+          <td class="left aligned">Fernando</td>
+          <td>38</td>
+          <td>2g</td>
+          <td>48g</td>
+        </tr>
+        <tr>
+          <td class="left aligned">Lisette</td>
+          <td>18</td>
+          <td>9g</td>
+          <td>23g</td>
+        </tr>
+        <tr>
+          <td class="left aligned">Ahmad</td>
+          <td>42</td>
+          <td>26g</td>
+          <td>49g</td>
+        </tr>
+        <tr>
+          <td class="left aligned">Laquanda</td>
+          <td>27</td>
+          <td>27g</td>
+          <td>49g</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+  <div class="column">
+    <table class="ui very basic right aligned table">
+      <thead>
+        <th class="left aligned">Person</th>
+        <th>Calories</th>
+        <th>Fat</th>
+        <th>Protein</th>
+      </thead>
+      <tbody>
+        <tr>
+          <td class="left aligned">Drema</td>
+          <td>15</td>
+          <td>26g</td>
+          <td>8g</td>
+        </tr>
+        <tr>
+          <td class="left aligned">Nona</td>
+          <td>11</td>
+          <td>21g</td>
+          <td>16g</td>
+        </tr>
+        <tr>
+          <td class="left aligned">Isidra</td>
+          <td>34</td>
+          <td>43g</td>
+          <td>11g</td>
+        </tr>
+        <tr>
+          <td class="left aligned">Bart</td>
+          <td>41</td>
+          <td>40g</td>
+          <td>30g</td>
+        </tr>
+        <tr>
+          <td class="left aligned">Nguyet</td>
+          <td>41</td>
+          <td>44g</td>
+          <td>28g</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+  <div class="column">
+    <table class="ui celled selectable right aligned table">
+      <thead>
+        <th class="left aligned">Person</th>
+        <th>Calories</th>
+        <th>Fat</th>
+        <th>Protein</th>
+      </thead>
+      <tbody>
+        <tr>
+          <td class="left aligned">Tasia</td>
+          <td>12</td>
+          <td>7g</td>
+          <td>21g</td>
+        </tr>
+        <tr>
+          <td class="left aligned">Ronnie</td>
+          <td>38</td>
+          <td>37g</td>
+          <td>38g</td>
+        </tr>
+        <tr>
+          <td class="left aligned">Gabriel</td>
+          <td>30</td>
+          <td>46g</td>
+          <td>46g</td>
+        </tr>
+        <tr>
+          <td class="left aligned">Logan</td>
+          <td>12</td>
+          <td>21g</td>
+          <td>39g</td>
+        </tr>
+        <tr>
+          <td class="left aligned">Clare</td>
+          <td>39</td>
+          <td>41g</td>
+          <td>2g</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+  <div class="column">
+    <table class="ui striped right aligned table">
+      <thead>
+        <th class="left aligned">Person</th>
+        <th>Calories</th>
+        <th>Fat</th>
+        <th>Protein</th>
+      </thead>
+      <tbody>
+        <tr>
+          <td class="left aligned">Rosaline</td>
+          <td>5</td>
+          <td>35g</td>
+          <td>6g</td>
+        </tr>
+        <tr>
+          <td class="left aligned">Barrie</td>
+          <td>27</td>
+          <td>23g</td>
+          <td>28g</td>
+        </tr>
+        <tr>
+          <td class="left aligned">Trinidad</td>
+          <td>14</td>
+          <td>50g</td>
+          <td>7g</td>
+        </tr>
+        <tr>
+          <td class="left aligned">Jaqueline</td>
+          <td>31</td>
+          <td>30g</td>
+          <td>50g</td>
+        </tr>
+        <tr>
+          <td class="left aligned">Tamala</td>
+          <td>18</td>
+          <td>6g</td>
+          <td>13g</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+  <div class="column">
+    <table class="ui padded celled right aligned table">
+      <thead>
+        <th class="left aligned">Person</th>
+        <th>Calories</th>
+        <th>Fat</th>
+        <th>Protein</th>
+      </thead>
+      <tbody>
+        <tr>
+          <td class="left aligned">Lianne</td>
+          <td>23</td>
+          <td>32g</td>
+          <td>43g</td>
+        </tr>
+        <tr>
+          <td class="left aligned">Joette</td>
+          <td>21</td>
+          <td>13g</td>
+          <td>31g</td>
+        </tr>
+        <tr>
+          <td class="left aligned">Le</td>
+          <td>28</td>
+          <td>39g</td>
+          <td>23g</td>
+        </tr>
+        <tr>
+          <td class="left aligned">Sacha</td>
+          <td>46</td>
+          <td>43g</td>
+          <td>13g</td>
+        </tr>
+        <tr>
+          <td class="left aligned">Bruna</td>
+          <td>9</td>
+          <td>47g</td>
+          <td>12g</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+  <div class="column">
+    <table class="ui definition celled right aligned table">
+      <thead>
+        <th></th>
+        <th>Calories</th>
+        <th>Fat</th>
+        <th>Protein</th>
+      </thead>
+      <tbody>
+        <tr>
+          <td class="left aligned">Lianne</td>
+          <td>23</td>
+          <td>32g</td>
+          <td>43g</td>
+        </tr>
+        <tr>
+          <td class="left aligned">Joette</td>
+          <td>21</td>
+          <td>13g</td>
+          <td>31g</td>
+        </tr>
+        <tr>
+          <td class="left aligned">Le</td>
+          <td>28</td>
+          <td>39g</td>
+          <td>23g</td>
+        </tr>
+        <tr>
+          <td class="left aligned">Sacha</td>
+          <td>46</td>
+          <td>43g</td>
+          <td>13g</td>
+        </tr>
+        <tr>
+          <td class="left aligned">Bruna</td>
+          <td>9</td>
+          <td>47g</td>
+          <td>12g</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+  <div class="column">
+    <table class="ui inverted right aligned table">
+      <thead>
+        <th class="left aligned">Person</th>
+        <th>Calories</th>
+        <th>Fat</th>
+        <th>Protein</th>
+      </thead>
+      <tbody>
+        <tr>
+          <td class="left aligned">Lianne</td>
+          <td>23</td>
+          <td>32g</td>
+          <td>43g</td>
+        </tr>
+        <tr>
+          <td class="left aligned">Joette</td>
+          <td>21</td>
+          <td>13g</td>
+          <td>31g</td>
+        </tr>
+        <tr>
+          <td class="left aligned">Le</td>
+          <td>28</td>
+          <td>39g</td>
+          <td>23g</td>
+        </tr>
+        <tr>
+          <td class="left aligned">Sacha</td>
+          <td>46</td>
+          <td>43g</td>
+          <td>13g</td>
+        </tr>
+        <tr>
+          <td class="left aligned">Bruna</td>
+          <td>9</td>
+          <td>47g</td>
+          <td>12g</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+  <div class="column">
+    <table class="ui inverted blue selectable celled right aligned table">
+      <thead>
+        <th class="left aligned">Person</th>
+        <th>Calories</th>
+        <th>Fat</th>
+        <th>Protein</th>
+      </thead>
+      <tbody>
+        <tr>
+          <td class="left aligned">Lianne</td>
+          <td>23</td>
+          <td>32g</td>
+          <td>43g</td>
+        </tr>
+        <tr>
+          <td class="left aligned">Joette</td>
+          <td>21</td>
+          <td>13g</td>
+          <td>31g</td>
+        </tr>
+        <tr>
+          <td class="left aligned">Le</td>
+          <td>28</td>
+          <td>39g</td>
+          <td>23g</td>
+        </tr>
+        <tr>
+          <td class="left aligned">Sacha</td>
+          <td>46</td>
+          <td>43g</td>
+          <td>13g</td>
+        </tr>
+        <tr>
+          <td class="left aligned">Bruna</td>
+          <td>9</td>
+          <td>47g</td>
+          <td>12g</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+
+</body>
+</html>

web/semantic/examples/feed.css

@@ -1,74 +0,0 @@
-/*******************************
-            Global
-*******************************/
-
-/*-------------------
-        Sidebar
---------------------*/
-
-#feed .sidebar {
-  overflow: visible;
-}
-
-/*-------------------
-        Grid
---------------------*/
-
-#feed .pusher,
-#feed .grid,
-#feed .grid > .column {
-  height: 100%;
-}
-
-/*-------------------
-       Inbox
---------------------*/
-
-#feed .pusher {
-  background-color: #FFFFFF;
-}
-
-#feed .tab .item .description {
-  margin-left: 2em;
-}
-
-#feed .current {
-  float: right;
-  margin: 0.5em 0em 0em 1em;
-}
-
-#feed .left.column {
-  background-color: #F7F7F7;
-  padding: 1em 2em;
-  max-width: 600px;
-}
-#feed .left.column .menu {
-  margin-top: 5rem;
-}
-
-#feed .right.column {
-  padding: 1em 2em;
-  background-color: #FFFFFF;
-}
-
-#feed .right.column {
-  font-size: 16px;
-  max-width: 800px;
-}
-
-/*******************************
-          Responsive
-*******************************/
-
-@media only screen and (max-width : 1000px) {
-  #feed .inbox .date {
-    float: none;
-    margin-bottom: 0.5em;
-  }
-}
-
-@media only screen and (max-width : 1250px) {
-  #feed .left.column > .menu .item {
-    font-size: 1rem;
-  }
-}

web/semantic/examples/feed.html

@@ -1,183 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <!-- Standard Meta -->
-  <meta charset="utf-8" />
-  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
-
-  <!-- Site Properities -->
-  <title>Feed Example - Semantic</title>
-
-  <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700|Open+Sans:300italic,400,300,700' rel='stylesheet' type='text/css'>
-  <link rel="stylesheet" type="text/css" href="../dist/semantic.css">
-
-  <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.js"></script>
-  <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.address/1.6/jquery.address.js"></script>
-  <script src="../dist/semantic.js"></script>
-
-  <link rel="stylesheet" type="text/css" href="feed.css">
-  <script src="feed.js"></script>
-</head>
-<body id="feed">
-  <div class="ui large inverted vertical sidebar menu">
-    <a class="active item">
-      Dogs Weekly <span class="ui label">213</span>
-    </a>
-    <a class="item">
-      Joystiq <span class="ui label">113</span>
-    </a>
-    <div class="item">
-      <b>Archived Feeds</b>
-      <div class="menu">
-        <a class="item">
-          Engadget <span class="ui label">11</span>
-        </a>
-        <a class="item">
-          NY Times Tech Blog <span class="ui label">21</span>
-        </a>
-      </div>
-    </div>
-    <a class="item">
-      <i class="bookmark icon"></i> Favorites
-    </a>
-    <div class="ui dropdown item">
-      <i class="add icon"></i> New
-      <div class="menu">
-        <a class="item"><i class="rss icon"></i> Feed</a>
-        <a class="item"><i class="tag icon"></i> Tag</a>
-        <a class="item"><i class="folder icon"></i> Group</a>
-      </div>
-    </div>
-  </div>
-  <div class="ui divided two column padded grid">
-    <div class="left column">
-      <div class="ui left floated launch icon button">
-        <i class="sidebar icon"></i>
-      </div>
-      <div class="ui right floated launch primary button">
-        <i class="mail icon"></i> Compose
-      </div>
-      <div class="ui secondary pointing filter menu">
-        <a class="active red item" data-tab="unread">Unread</a>
-        <a class="blue item" data-tab="saved">Saved</a>
-        <a class="green item" data-tab="all">All</a>
-      </div>
-
-      <div class="ui active tab" data-tab="unread">
-        <div class="ui very relaxed divided link list">
-          <a class="item">
-            <div class="left floated ui star rating">
-              <i class="icon"></i>
-            </div>
-            <div class="right floated date">Sep 14, 2013</div>
-            <div class="description">Scientists discover new breed of dog</div>
-          </a>
-          <a class="active item">
-            <div class="left floated ui star rating">
-              <i class="icon"></i>
-            </div>
-            <div class="right floated date">Sep 14, 2013</div>
-            <div class="description">Weekly Webcomic Wrapup fought the law, and the law won</div>
-          </a>
-          <a class="item">
-            <div class="left floated ui star rating">
-              <i class="icon"></i>
-            </div>
-            <div class="right floated date">Sep 10, 2013</div>
-            <div class="description">Dogs colony in Antarctica</div>
-          </a>
-          <a class="item">
-            <div class="left floated ui star rating">
-              <i class="icon"></i>
-            </div>
-            <div class="right floated date">Sep 09, 2013</div>
-            <div class="description">Famous dog whisperer Chakotay dies today at 104</div>
-          </a>
-          <a class="item">
-            <div class="left floated ui star rating">
-              <i class="icon"></i>
-            </div>
-            <div class="right floated date">Sep 07, 2013</div>
-            <div class="description">Top 10 Things to Know about Labradoodles</div>
-          </a>
-          <a class="item">
-            <div class="left floated ui star rating">
-              <i class="icon"></i>
-            </div>
-            <div class="right floated date">Sep 05, 2013</div>
-            <div class="description">Study shows children enjoy the company of animals</div>
-          </a>
-        </div>
-      </div>
-
-      <div class="ui tab" data-tab="saved">
-        <div class="ui very relaxed divided link list">
-          <a class="item">
-            <div class="left floated ui star rating">
-              <i class="icon"></i>
-            </div>
-            <div class="right floated date">Sep 14, 2013</div>
-            <div class="description">Your favorite saved article</div>
-          </a>
-          <a class="item">
-            <div class="left floated ui star rating">
-              <i class="icon"></i>
-            </div>
-            <div class="right floated date">Sep 14, 2013</div>
-            <div class="description">Your favorite saved article</div>
-          </a>
-          <a class="item">
-            <div class="left floated ui star rating">
-              <i class="icon"></i>
-            </div>
-            <div class="right floated date">Sep 14, 2013</div>
-            <div class="description">Your favorite saved article</div>
-          </a>
-        </div>
-      </div>
-
-      <div class="ui tab" data-tab="all">
-        <div class="ui very relaxed divided link list">
-          <a class="item">
-            <div class="left floated ui star rating">
-              <i class="link icon"></i>
-            </div>
-            <div class="right floated date">Sep 14, 2013</div>
-            <div class="description">There turns out there is only one article under all.</div>
-          </a>
-        </div>
-      </div>
-
-      <div class="ui divider"></div>
-
-      <div class="current">Showing <b>6</b> of 213</div>
-
-      <div class="ui text menu">
-        <a class="icon item"><i class="icon left chevron"></i></a>
-        <a class="active item">1</a>
-        <div class="disabled item">...</div>
-        <a class="item">10</a>
-        <a class="item">11</a>
-        <a class="item">12</a>
-        <a class="icon item"><i class="icon right chevron"></i></a>
-      </div>
-    </div>
-    <div class="right column">
-      <h1 class="ui header">Weekly Webcomic Wrapup fought the law, and the law won</h1>
-
-      <a class="ui label">Unread</a>
-      <a class="ui label">Comics</a>
-
-      <div class="ui divider"></div>
-      <p>So there's this video game coming out Tuesday called Grand Theft Auto 5. Don't know if you've heard of it. Anyways, it's all about crime and gangs and some roughneck ne'er-do-wells, so I thought this would be the perfect time to talk about times when we've been... well, less than perfect.</p>
-      <p>When I was a young'un, I was a frequent visitor to the local swimming pool. I was also a frequent lover of AirHeads candy, which the pool happened to sell. Waiting, watching, stalking the counter like a big cat in the savannah, I waited for the perfect opportunity to strike. While the lifeguards were busy, I snuck through the gate, reached up and took both cherry and "mystery white" AirHeads. I quickly ran out to the sidewalk and reveled in my sweet, delicious victory... for all of ten seconds, before I felt guilty enough to sneak back in and return the .20 worth of candy I had stolen.</p>
-      <p>While you confess your crimes - hopefully minor, and nothing you can be persecuted for - take a moment to enjoy this week's webcomics, and vote for your favorite after the jump.</p>
-      <div class="ui divider"></div>
-      <div class="ui basic button">Save</div>
-      <div class="ui basic button">Delete</div>
-    </div>
-  </div>
-</body>
-
-</html>

web/semantic/examples/feed.js

@@ -1,23 +0,0 @@
-$(document)
-  .ready(function() {
-
-    $('.filter.menu .item')
-      .tab()
-    ;
-
-    $('.ui.rating')
-      .rating({
-        clearable: true
-      })
-    ;
-
-    $('.ui.sidebar')
-      .sidebar('attach events', '.launch.button')
-    ;
-
-    $('.ui.dropdown')
-      .dropdown()
-    ;
-
-  })
-;

web/semantic/examples/fixed.html

@@ -0,0 +1,137 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <!-- Standard Meta -->
+  <meta charset="utf-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
+
+  <!-- Site Properties -->
+  <title>Fixed Menu Example - Semantic</title>
+
+  <link rel="stylesheet" type="text/css" href="../dist/components/reset.css">
+  <link rel="stylesheet" type="text/css" href="../dist/components/site.css">
+
+  <link rel="stylesheet" type="text/css" href="../dist/components/container.css">
+  <link rel="stylesheet" type="text/css" href="../dist/components/grid.css">
+  <link rel="stylesheet" type="text/css" href="../dist/components/header.css">
+  <link rel="stylesheet" type="text/css" href="../dist/components/image.css">
+  <link rel="stylesheet" type="text/css" href="../dist/components/menu.css">
+
+  <link rel="stylesheet" type="text/css" href="../dist/components/divider.css">
+  <link rel="stylesheet" type="text/css" href="../dist/components/list.css">
+  <link rel="stylesheet" type="text/css" href="../dist/components/segment.css">
+  <link rel="stylesheet" type="text/css" href="../dist/components/dropdown.css">
+  <link rel="stylesheet" type="text/css" href="../dist/components/icon.css">
+
+  <style type="text/css">
+  body {
+    background-color: #FFFFFF;
+  }
+  .ui.menu .item img.logo {
+    margin-right: 1.5em;
+  }
+  .main.container {
+    margin-top: 7em;
+  }
+  .wireframe {
+    margin-top: 2em;
+  }
+  .ui.footer.segment {
+    margin: 5em 0em 0em;
+    padding: 5em 0em;
+  }
+  </style>
+
+</head>
+<body>
+
+  <div class="ui fixed inverted menu">
+    <div class="ui container">
+      <a href="#" class="header item">
+        <img class="logo" src="assets/images/logo.png">
+        Project Name
+      </a>
+      <a href="#" class="item">Home</a>
+      <div class="ui simple dropdown item">
+        Dropdown <i class="dropdown icon"></i>
+        <div class="menu">
+          <a class="item" href="#">Link Item</a>
+          <a class="item" href="#">Link Item</a>
+          <div class="divider"></div>
+          <div class="header">Header Item</div>
+          <div class="item">
+            <i class="dropdown icon"></i>
+            Sub Menu
+            <div class="menu">
+              <a class="item" href="#">Link Item</a>
+              <a class="item" href="#">Link Item</a>
+            </div>
+          </div>
+          <a class="item" href="#">Link Item</a>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="ui main text container">
+    <h1 class="ui header">Semantic UI Fixed Template</h1>
+    <p>This is a basic fixed menu template using fixed size containers.</p>
+    <p>A text container is used for the main container, which is useful for single column layouts</p>
+    <img class="wireframe" src="assets/images/wireframe/media-paragraph.png">
+    <img class="wireframe" src="assets/images/wireframe/paragraph.png">
+    <img class="wireframe" src="assets/images/wireframe/paragraph.png">
+    <img class="wireframe" src="assets/images/wireframe/paragraph.png">
+    <img class="wireframe" src="assets/images/wireframe/paragraph.png">
+    <img class="wireframe" src="assets/images/wireframe/paragraph.png">
+    <img class="wireframe" src="assets/images/wireframe/paragraph.png">
+  </div>
+
+  <div class="ui inverted vertical footer segment">
+    <div class="ui center aligned container">
+      <div class="ui stackable inverted divided grid">
+        <div class="three wide column">
+          <h4 class="ui inverted header">Group 1</h4>
+          <div class="ui inverted link list">
+            <a href="#" class="item">Link One</a>
+            <a href="#" class="item">Link Two</a>
+            <a href="#" class="item">Link Three</a>
+            <a href="#" class="item">Link Four</a>
+          </div>
+        </div>
+        <div class="three wide column">
+          <h4 class="ui inverted header">Group 2</h4>
+          <div class="ui inverted link list">
+            <a href="#" class="item">Link One</a>
+            <a href="#" class="item">Link Two</a>
+            <a href="#" class="item">Link Three</a>
+            <a href="#" class="item">Link Four</a>
+          </div>
+        </div>
+        <div class="three wide column">
+          <h4 class="ui inverted header">Group 3</h4>
+          <div class="ui inverted link list">
+            <a href="#" class="item">Link One</a>
+            <a href="#" class="item">Link Two</a>
+            <a href="#" class="item">Link Three</a>
+            <a href="#" class="item">Link Four</a>
+          </div>
+        </div>
+        <div class="seven wide column">
+          <h4 class="ui inverted header">Footer Header</h4>
+          <p>Extra space for a call to action inside the footer that could help re-engage users.</p>
+        </div>
+      </div>
+      <div class="ui inverted section divider"></div>
+      <img src="assets/images/logo.png" class="ui centered mini image">
+      <div class="ui horizontal inverted small divided link list">
+        <a class="item" href="#">Site Map</a>
+        <a class="item" href="#">Contact Us</a>
+        <a class="item" href="#">Terms and Conditions</a>
+        <a class="item" href="#">Privacy Policy</a>
+      </div>
+    </div>
+  </div>
+</body>
+
+</html>

web/semantic/examples/grid.css

@@ -1,103 +0,0 @@
-#grid {
-  background-color: #1B1C1D;
-  padding: 0em 3em;
-}
-
-#grid h2 {
-  margin: 2em 0em 1.5em;
-}
-
-/* Shaded */
-#grid .shaded.examples .row {
-  position: relative;
-}
-#grid .shaded.examples .grid > .column {
-  position: relative;
-  z-index: 11;
-}
-#grid .shaded.examples .grid .column:not(.row):after {
-  background-color: #FFFFFF;
-  box-shadow: 0px 0px 0px 1px #DDD inset;
-  content: "";
-  display: block;
-  min-height: 3em;
-}
-
-
-#grid .divided.examples .grid .column:not(.row):after {
-  background-color: rgba(255, 255, 255, 0.1);
-  content: "";
-  display: block;
-  min-height: 3em;
-}
-
-#grid .nested.examples .grid .grid {
-  box-shadow: 0px 0px 0px 1px #AAA inset;
-}
-#grid .nested.examples .grid .grid .column:after {
-  background-color: #FFFFFF;
-  box-shadow: 0px 0px 0px 1px #DDD inset;
-  content: "";
-  display: block;
-  min-height: 3em;
-}
-
-#grid .simple.examples .grid .column:not(.row):not(.grid):after {
-  content: "";
-  display: block;
-  min-height: 50px;
-}
-
-
-
-/* Uncomment to animate examples
-#grid .examples {
-  margin: 0 auto;
-  -webkit-animation: grid 7s ease infinite;
-  -moz-animation: grid 7s ease infinite;
-  animation: grid 7s ease infinite;
-}
-
-@-webkit-keyframes grid {
-  0% {
-    width: 100%;
-  }
-  45% {
-    width: 85%;
-  }
-  55% {
-    width: 85%;
-  }
-  100% {
-    width: 100%;
-  }
-}
-@-moz-keyframes grid {
-  0% {
-    width: 100%;
-  }
-  45% {
-    width: 85%;
-  }
-  55% {
-    width: 85%;
-  }
-  100% {
-    width: 100%;
-  }
-}
-@keyframes grid {
-  0% {
-    width: 100%;
-  }
-  45% {
-    width: 85%;
-  }
-  55% {
-    width: 85%;
-  }
-  100% {
-    width: 100%;
-  }
-}
-*/

web/semantic/examples/homepage.css

@@ -1,134 +0,0 @@
-/*******************************
-            Global
-*******************************/
-
-html {
-  font-size: 14px;
-}
-
-
-/*******************************
-            Global
-*******************************/
-
-#home .menu .right.menu > .mobile.item {
-  display: none;
-}
-
-/*--------------
-    Masthead
----------------*/
-
-#home .masthead {
-  background-image: url(images/bg.jpg);
-  margin: 0em;
-  padding: 5rem 0rem;
-}
-#home .masthead .column {
-  position: relative;
-}
-#home .masthead .information {
-  margin: 10em 1em 1em 350px;
-}
-#home .masthead .information p {
-  max-width: 600px;
-}
-#home .masthead .image {
-  position: absolute;
-  left: 0%;
-  bottom: -110px;
-}
-
-/*--------------
-    Ribbons
----------------*/
-
-#home .segment h1 {
-  font-size: 3em;
-  margin-bottom: 1em;
-}
-
-#home .vertical.segment {
-  padding: 12rem 0rem;
-}
-
-#home .feature.segment {
-  margin: 0em;
-  padding: 6rem 0rem;
-}
-#home .feature.segment p {
-  min-height: 50px;
-}
-
-#home .selection.list {
-  margin: 0em -0.5em;
-}
-
-#home .logo.row {
-  height: 10rem;
-}
-
-/*--------------
-    Footer
----------------*/
-
-#home .footer.segment {
-  background-color: #000000;
-  padding: 3rem 0rem;
-}
-
-
-/*******************************
-          Responsive
-*******************************/
-
-/* Mobile Only */
-@media only screen and (max-width : 768px) {
-
-  #home .menu .right.menu > .item {
-    display: none;
-  }
-
-  #home .menu .right.menu > .mobile.item {
-    display: block;
-  }
-  #home .menu .right.menu > .mobile.item .menu {
-    left: auto;
-    right: 0em;
-  }
-
-  #home h1 {
-    font-size: 1.5em;
-  }
-  #home .masthead.segment .information {
-    margin-left: 170px;
-  }
-
-  #home .masthead.segment .image {
-    width: 170px;
-  }
-
-  #home .masthead.segment .button {
-    font-size: 1rem;
-  }
-
-  #home .overview .divided.grid .header .icon {
-    font-size: 1.5em;
-  }
-
-  #home .overview .divided.grid .header + p {
-    min-height: 0px;
-  }
-
-  #home .masthead.segment .column {
-    font-size: 0.7rem;
-  }
-
-  #home .masthead.segment .column p {
-    display: none;
-  }
-
-  #home .selection.list .right.floated {
-    display: none;
-  }
-}

web/semantic/examples/homepage.html

@@ -6,310 +6,291 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
 
-  <!-- Site Properities -->
-  <title>Homepage Example - Semantic</title>
+  <!-- Site Properties -->
+  <title>Homepage - Semantic</title>
+  <link rel="stylesheet" type="text/css" href="../dist/components/reset.css">
+  <link rel="stylesheet" type="text/css" href="../dist/components/site.css">
 
-  <link rel="stylesheet" type="text/css" href="../dist/semantic.css">
-  <link rel="stylesheet" type="text/css" href="homepage.css">
+  <link rel="stylesheet" type="text/css" href="../dist/components/container.css">
+  <link rel="stylesheet" type="text/css" href="../dist/components/grid.css">
+  <link rel="stylesheet" type="text/css" href="../dist/components/header.css">
+  <link rel="stylesheet" type="text/css" href="../dist/components/image.css">
+  <link rel="stylesheet" type="text/css" href="../dist/components/menu.css">
 
-  <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.js"></script>
-  <script src="../dist/semantic.js"></script>
-  <script src="homepage.js"></script>
+  <link rel="stylesheet" type="text/css" href="../dist/components/divider.css">
+  <link rel="stylesheet" type="text/css" href="../dist/components/dropdown.css">
+  <link rel="stylesheet" type="text/css" href="../dist/components/segment.css">
+  <link rel="stylesheet" type="text/css" href="../dist/components/button.css">
+  <link rel="stylesheet" type="text/css" href="../dist/components/list.css">
+  <link rel="stylesheet" type="text/css" href="../dist/components/icon.css">
+  <link rel="stylesheet" type="text/css" href="../dist/components/sidebar.css">
+  <link rel="stylesheet" type="text/css" href="../dist/components/transition.css">
 
+  <style type="text/css">
+
+    .hidden.menu {
+      display: none;
+    }
+
+    .masthead.segment {
+      min-height: 700px;
+      padding: 1em 0em;
+    }
+    .masthead .logo.item img {
+      margin-right: 1em;
+    }
+    .masthead .ui.menu .ui.button {
+      margin-left: 0.5em;
+    }
+    .masthead h1.ui.header {
+      margin-top: 3em;
+      margin-bottom: 0em;
+      font-size: 4em;
+      font-weight: normal;
+    }
+    .masthead h2 {
+      font-size: 1.7em;
+      font-weight: normal;
+    }
+
+    .ui.vertical.stripe {
+      padding: 8em 0em;
+    }
+    .ui.vertical.stripe h3 {
+      font-size: 2em;
+    }
+    .ui.vertical.stripe .button + h3,
+    .ui.vertical.stripe p + h3 {
+      margin-top: 3em;
+    }
+    .ui.vertical.stripe .floated.image {
+      clear: both;
+    }
+    .ui.vertical.stripe p {
+      font-size: 1.33em;
+    }
+    .ui.vertical.stripe .horizontal.divider {
+      margin: 3em 0em;
+    }
+
+    .quote.stripe.segment {
+      padding: 0em;
+    }
+    .quote.stripe.segment .grid .column {
+      padding-top: 5em;
+      padding-bottom: 5em;
+    }
+
+    .footer.segment {
+      padding: 5em 0em;
+    }
+
+    .secondary.pointing.menu .toc.item {
+      display: none;
+    }
+
+    @media only screen and (max-width: 700px) {
+      .ui.fixed.menu {
+        display: none !important;
+      }
+      .secondary.pointing.menu .item,
+      .secondary.pointing.menu .menu {
+        display: none;
+      }
+      .secondary.pointing.menu .toc.item {
+        display: block;
+      }
+      .masthead.segment {
+        min-height: 350px;
+      }
+      .masthead h1.ui.header {
+        font-size: 2em;
+        margin-top: 1.5em;
+      }
+      .masthead h2 {
+        margin-top: 0.5em;
+        font-size: 1.5em;
+      }
+    }
+
+
+  </style>
+
+  <script src="assets/library/jquery.min.js"></script>
+  <script src="../dist/components/visibility.js"></script>
+  <script src="../dist/components/sidebar.js"></script>
+  <script src="../dist/components/transition.js"></script>
+  <script>
+  $(document)
+    .ready(function() {
+
+      // fix menu when passed
+      $('.masthead')
+        .visibility({
+          once: false,
+          onBottomPassed: function() {
+            $('.fixed.menu').transition('fade in');
+          },
+          onBottomPassedReverse: function() {
+            $('.fixed.menu').transition('fade out');
+          }
+        })
+      ;
+
+      // create sidebar and attach to menu open
+      $('.ui.sidebar')
+        .sidebar('attach events', '.toc.item')
+      ;
+
+    })
+  ;
+  </script>
 </head>
-<body id="home">
-  <div class="ui inverted masthead segment">
-    <div class="ui page grid">
-      <div class="column">
-        <div class="ui inverted blue menu">
-          <div class="header item">Cat University</div>
-          <div class="right menu">
-            <div class="ui mobile dropdown link item">
-              Menu
-              <i class="dropdown icon"></i>
-              <div class="menu">
-                <a class="item">Classes</a>
-                <a class="item">Cocktail Hours</a>
-                <a class="item">Community</a>
-              </div>
-            </div>
-            <div class="ui dropdown link item">
-              Courses
-              <i class="dropdown icon"></i>
-              <div class="menu">
-                <a class="item">Petting</a>
-                <a class="item">Feeding</a>
-                <a class="item">Mind Reading</a>
-              </div>
-            </div>
-            <a class="item">Library</a>
-            <a class="item">Community</a>
-          </div>
-        </div>
-        <img src="images/cat.png" class="ui medium image">
-        <div class="ui hidden transition information">
-          <h1 class="ui inverted header">
-            An Old Cat Can Learn New Tricks
-          </h1>
-          <p>At least he won't reach his highest potential unless you enroll him in Cat University's 2013 class.</p>
-          <div class="large basic inverted animated fade ui button">
-            <div class="visible content">Come to ICU 2013</div>
-            <div class="hidden content">Register Now</div>
-          </div>
-        </div>
+<body>
+
+<!-- Following Menu -->
+<div class="ui large top fixed hidden menu">
+  <div class="ui container">
+    <a class="active item">Home</a>
+    <a class="item">Work</a>
+    <a class="item">Company</a>
+    <a class="item">Careers</a>
+    <div class="right menu">
+      <div class="item">
+        <a class="ui button">Log in</a>
+      </div>
+      <div class="item">
+        <a class="ui primary button">Sign Up</a>
       </div>
     </div>
   </div>
-  <div class="ui vertical feature segment">
-    <div class="ui centered page grid">
-      <div class="fourteen wide column">
-        <div class="ui three column center aligned stackable divided grid">
-          <div class="column">
-            <div class="ui icon header">
-              <i class="student icon"></i>
-              Courses
-            </div>
-            <p>Take your kitty to a cat-ducation course and learn how to treat her well.</p>
-            <p>
-              <a class="ui button" href="#">
-                Learn
-              </a>
-            </p>
-          </div>
-          <div class="column">
-            <div class="ui icon header">
-              <i class="code icon"></i>
-              Library
-            </div>
-            <p>Dig through our cat library to found out amazing things you can do with your kitty.</p>
-            <p>
-              <a class="ui blue right labeled icon button" href="#">
-                Research
-                <i class="right chevron icon"></i>
-              </a>
-            </p>
-          </div>
-          <div class="column">
-            <div class="ui icon header">
-              <i class="user icon"></i>
-              Community
-            </div>
-            <p>Get feedback on your cat from a community of loving pet owners on our online bulletin board system.</p>
-            <p>
-              <a class="ui button" href="#">
-                Share
-              </a>
-            </p>
-          </div>
+</div>
+
+<!-- Sidebar Menu -->
+<div class="ui vertical inverted sidebar menu">
+  <a class="active item">Home</a>
+  <a class="item">Work</a>
+  <a class="item">Company</a>
+  <a class="item">Careers</a>
+  <a class="item">Login</a>
+  <a class="item">Signup</a>
+</div>
+
+
+<!-- Page Contents -->
+<div class="pusher">
+  <div class="ui inverted vertical masthead center aligned segment">
+
+    <div class="ui container">
+      <div class="ui large secondary inverted pointing menu">
+        <a class="toc item">
+          <i class="sidebar icon"></i>
+        </a>
+        <a class="active item">Home</a>
+        <a class="item">Work</a>
+        <a class="item">Company</a>
+        <a class="item">Careers</a>
+        <div class="right item">
+          <a class="ui inverted button">Log in</a>
+          <a class="ui inverted button">Sign Up</a>
+        </div>
+      </div>
+    </div>
+
+    <div class="ui text container">
+      <h1 class="ui inverted header">
+        Imagine-a-Company
+      </h1>
+      <h2>Do whatever you want when you want to.</h2>
+      <div class="ui huge primary button">Get Started <i class="right arrow icon"></i></div>
+    </div>
+
+  </div>
+
+  <div class="ui vertical stripe segment">
+    <div class="ui middle aligned stackable grid container">
+      <div class="row">
+        <div class="eight wide column">
+          <h3 class="ui header">We Help Companies and Companions</h3>
+          <p>We can give your company superpowers to do things that they never thought possible. Let us delight your customers and empower your needs...through pure data analytics.</p>
+          <h3 class="ui header">We Make Bananas That Can Dance</h3>
+          <p>Yes that's right, you thought it was the stuff of dreams, but even bananas can be bioengineered.</p>
+        </div>
+        <div class="six wide right floated column">
+          <img src="assets/images/wireframe/white-image.png" class="ui large bordered rounded image">
+        </div>
+      </div>
+      <div class="row">
+        <div class="center aligned column">
+          <a class="ui huge button">Check Them Out</a>
         </div>
       </div>
     </div>
   </div>
 
-  <div class="ui inverted vertical segment">
-    <div class="ui very relaxed stackable page grid">
-      <div class="row">
+
+  <div class="ui vertical stripe quote segment">
+    <div class="ui equal width stackable internally celled grid">
+      <div class="center aligned row">
         <div class="column">
-          <h1 class="center aligned ui inverted header">
-            The Best Cat Articles
-          </h1>
+          <h3>"What a Company"</h3>
+          <p>That is what they all say about us</p>
         </div>
-      </div>
-      <div class="row">
-        <div class="ten wide column">
-          <h3 class="ui inverted header">How to Win Your Cats Attention</h3>
-          <p>Getting your cat to notice you is a large part of being a pet owner. Although I have a lot of patience for writing things about cats, perhaps this might be enough body copy to make this section of text look filled out.</p>
-          <p>This and other tips can be found in our newsletter, amazing right?</p>
-          <div class="ui basic inverted animated button button">
-            <div class="visible content">Read More</div>
-            <div class="hidden content"><i class="right arrow icon"></i></div>
-          </div>
-          <div class="ui inverted section divider"></div>
-          <h3 class="ui inverted header">More articles</h3>
-          <div class="ui inverted animated selection list">
-            <div class="item">
-              How to win in a fight with a cat
-              <div class="right floated">Jan 20, 2023</div>
-            </div>
-            <div class="item">
-              A Supposedly Fun Cat Toy I will Never Buy Again
-              <div class="right floated">Jan 1, 2023</div>
-            </div>
-            <div class="item">
-              Much ado about yarn
-              <div class="right floated">Dec 20, 2022</div>
-            </div>
-          </div>
-        </div>
-        <div class="six wide column">
-          <div class="ui form segment">
-            <h3 class="ui header">Bi-Daily Newsletter</h3>
-            <p>Sign up and get spammed with cats every day. We have no unsubscribe button!</p>
-            <div class="field">
-              <div class="ui left icon action input">
-                <i class="user icon"></i>
-                <input name="email" type="text" placeholder="name@email.com">
-                <div class="ui black submit button">Sign up</div>
-              </div>
-            </div>
-            <div class="ui error message"></div>
-          </div>
+        <div class="column">
+          <h3>"I shouldn't have gone with their competitor."</h3>
+          <p>
+            <img src="assets/images/avatar/nan.jpg" class="ui avatar image"> <b>Nan</b> Chief Fun Officer Acme Toys
+          </p>
         </div>
       </div>
     </div>
   </div>
 
-  <div class="ui vertical segment">
-    <div class="ui stackable center aligned page grid">
-      <div class="row">
-        <div class="column">
-          <h1 class="ui header">
-            Many Companies Rely on Our Cat Knowledge
-          </h1>
-          <div class="ui horizontal divider"><i class="heart icon"></i></div>
-        </div>
-      </div>
-      <div class="four column logo row">
-        <div class="column">
-          <div class="ui shape">
-            <div class="sides">
-              <div class="active side">
-                <i class="huge github icon"></i>
-              </div>
-              <div class="side">
-                <i class="huge facebook icon"></i>
-              </div>
-              <div class="side">
-                <i class="huge maxcdn icon"></i>
-              </div>
-              <div class="side">
-                <i class="huge pinterest icon"></i>
-              </div>
-              <div class="side">
-                <i class="huge weibo icon"></i>
-              </div>
-              <div class="side">
-                <i class="huge flickr icon"></i>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="column">
-          <div class="ui shape">
-            <div class="sides">
-              <div class="side">
-                <i class="huge github icon"></i>
-              </div>
-              <div class="side">
-                <i class="huge facebook icon"></i>
-              </div>
-              <div class="active side">
-                <i class="huge maxcdn icon"></i>
-              </div>
-              <div class="side">
-                <i class="huge pinterest icon"></i>
-              </div>
-              <div class="side">
-                <i class="huge weibo icon"></i>
-              </div>
-              <div class="side">
-                <i class="huge flickr icon"></i>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="column">
-          <div class="ui shape">
-            <div class="sides">
-              <div class="side">
-                <i class="huge github icon"></i>
-              </div>
-              <div class="side">
-                <i class="huge facebook icon"></i>
-              </div>
-              <div class="side">
-                <i class="huge maxcdn icon"></i>
-              </div>
-              <div class="side">
-                <i class="huge pinterest icon"></i>
-              </div>
-              <div class="active side">
-                <i class="huge weibo icon"></i>
-              </div>
-              <div class="side">
-                <i class="huge flickr icon"></i>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="column">
-          <div class="ui shape">
-            <div class="sides">
-              <div class="side">
-                <i class="huge github icon"></i>
-              </div>
-              <div class="side">
-                <i class="huge facebook icon"></i>
-              </div>
-              <div class="side">
-                <i class="huge maxcdn icon"></i>
-              </div>
-              <div class="side">
-                <i class="huge pinterest icon"></i>
-              </div>
-              <div class="side">
-                <i class="huge weibo icon"></i>
-              </div>
-              <div class="active side">
-                <i class="huge flickr icon"></i>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
+  <div class="ui vertical stripe segment">
+    <div class="ui text container">
+      <h3 class="ui header">Breaking The Grid, Grabs Your Attention</h3>
+      <p>Instead of focusing on content creation and hard work, we have learned how to master the art of doing nothing by providing massive amounts of whitespace and generic content that can seem massive, monolithic and worth your attention.</p>
+      <a class="ui large button">Read More</a>
+      <h4 class="ui horizontal header divider">
+        <a href="#">Case Studies</a>
+      </h4>
+      <h3 class="ui header">Did We Tell You About Our Bananas?</h3>
+      <p>Yes I know you probably disregarded the earlier boasts as non-sequitor filler content, but its really true. It took years of gene splicing and combinatory DNA research, but our bananas can really dance.</p>
+      <a class="ui large button">I'm Still Quite Interested</a>
     </div>
   </div>
 
-  <div class="ui inverted footer vertical segment">
-    <div class="ui stackable center aligned page grid">
-      <div class="ten wide column">
-        <div class="ui three column center aligned stackable grid">
-          <div class="column">
-            <h5 class="ui inverted header">Courses</h5>
-            <div class="ui inverted link list">
-              <a class="item">Registration</a>
-              <a class="item">Course Calendar</a>
-              <a class="item">Professors</a>
-            </div>
-          </div>
-          <div class="column">
-            <h5 class="ui inverted header">Library</h5>
-            <div class="ui inverted link list">
-              <a class="item">A-Z</a>
-              <a class="item">Most Popular</a>
-              <a class="item">Recently Changed</a>
-            </div>
-          </div>
-          <div class="column">
-            <h5 class="ui inverted header">Community</h5>
-            <div class="ui inverted link list">
-              <a class="item">BBS</a>
-              <a class="item">Careers</a>
-              <a class="item">Privacy Policy</a>
-            </div>
+
+  <div class="ui inverted vertical footer segment">
+    <div class="ui container">
+      <div class="ui stackable inverted divided equal height stackable grid">
+        <div class="three wide column">
+          <h4 class="ui inverted header">About</h4>
+          <div class="ui inverted link list">
+            <a href="#" class="item">Sitemap</a>
+            <a href="#" class="item">Contact Us</a>
+            <a href="#" class="item">Religious Ceremonies</a>
+            <a href="#" class="item">Gazebo Plans</a>
           </div>
         </div>
-      </div>
-      <div class="six wide column">
-        <h5 class="ui inverted header">Contact Us</h5>
-        <addr>
-          237 Catberry Road <br>
-          Milton Keynes, London <br>
-        </addr>
-        <p>(404) 867-5309</p>
+        <div class="three wide column">
+          <h4 class="ui inverted header">Services</h4>
+          <div class="ui inverted link list">
+            <a href="#" class="item">Banana Pre-Order</a>
+            <a href="#" class="item">DNA FAQ</a>
+            <a href="#" class="item">How To Access</a>
+            <a href="#" class="item">Favorite X-Men</a>
+          </div>
+        </div>
+        <div class="seven wide column">
+          <h4 class="ui inverted header">Footer Header</h4>
+          <p>Extra space for a call to action inside the footer that could help re-engage users.</p>
+        </div>
       </div>
     </div>
   </div>
+</div>
+
 </body>
 
 </html>

web/semantic/examples/homepage.js

@@ -1,57 +0,0 @@
-$(document)
-  .ready(function() {
-
-    var
-      changeSides = function() {
-        $('.ui.shape')
-          .eq(0)
-            .shape('flip over')
-            .end()
-          .eq(1)
-            .shape('flip over')
-            .end()
-          .eq(2)
-            .shape('flip back')
-            .end()
-          .eq(3)
-            .shape('flip back')
-            .end()
-        ;
-      },
-      validationRules = {
-        firstName: {
-          identifier  : 'email',
-          rules: [
-            {
-              type   : 'empty',
-              prompt : 'Please enter an e-mail'
-            },
-            {
-              type   : 'email',
-              prompt : 'Please enter a valid e-mail'
-            }
-          ]
-        }
-      }
-    ;
-
-    $('.ui.dropdown')
-      .dropdown({
-        on: 'hover'
-      })
-    ;
-
-    $('.ui.form')
-      .form(validationRules, {
-        on: 'blur'
-      })
-    ;
-
-    $('.masthead .information')
-      .transition('scale in', 1000)
-    ;
-
-    setInterval(changeSides, 3000);
-
-  })
-;

web/semantic/examples/kitchensink.css

@@ -1,49 +0,0 @@
-/*******************************
-            Global
-*******************************/
-
-/*--------------
-      Demo
----------------*/
-
-#sink {
-  background-color: #FFFFFF;
-}
-
-#sink .demo.container {
-  width: 700px;
-  margin: 0px auto;
-}
-
-#sink .demo.container .example {
-  padding: 2em 0em;
-  margin: 2em 0em;
-  border-top: 1px solid #DDD;
-}
-
-#sink .demo h4 {
-  font-size: 1.5em;
-  margin: 2em 0em 1em;
-}
-#sink .demo.container .button.demo > .buttons,
-#sink .demo.container .button.demo > .button,
-#sink .demo.container .button.demo > .segment > .button {
-  margin-bottom: 0.5em;
-}
-#sink .demo.container h4:first-child {
-  font-weight: bold !important;
-  margin: 0em 0em 1em !important;
-}
-#sink .demo.container .example:first-child {
-  margin-top: 0;
-  padding-top: 0;
-}
-#sink .demo.container .segment.example {
-  z-index: 1;
-}
-#sink .demo.container .ui.label:not(.empty) {
-  margin-bottom: 1em;
-}
-#sink .demo.container .segment .ui.label {
-  margin-bottom: 0em;
-}

web/semantic/examples/login.html

@@ -0,0 +1,125 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <!-- Standard Meta -->
+  <meta charset="utf-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
+
+  <!-- Site Properties -->
+  <title>Login Example - Semantic</title>
+  <link rel="stylesheet" type="text/css" href="../dist/components/reset.css">
+  <link rel="stylesheet" type="text/css" href="../dist/components/site.css">
+
+  <link rel="stylesheet" type="text/css" href="../dist/components/container.css">
+  <link rel="stylesheet" type="text/css" href="../dist/components/grid.css">
+  <link rel="stylesheet" type="text/css" href="../dist/components/header.css">
+  <link rel="stylesheet" type="text/css" href="../dist/components/image.css">
+  <link rel="stylesheet" type="text/css" href="../dist/components/menu.css">
+
+  <link rel="stylesheet" type="text/css" href="../dist/components/divider.css">
+  <link rel="stylesheet" type="text/css" href="../dist/components/segment.css">
+  <link rel="stylesheet" type="text/css" href="../dist/components/form.css">
+  <link rel="stylesheet" type="text/css" href="../dist/components/input.css">
+  <link rel="stylesheet" type="text/css" href="../dist/components/button.css">
+  <link rel="stylesheet" type="text/css" href="../dist/components/list.css">
+  <link rel="stylesheet" type="text/css" href="../dist/components/message.css">
+  <link rel="stylesheet" type="text/css" href="../dist/components/icon.css">
+
+  <script src="assets/library/jquery.min.js"></script>
+  <script src="../dist/components/form.js"></script>
+  <script src="../dist/components/transition.js"></script>
+
+  <style type="text/css">
+    body {
+      background-color: #DADADA;
+    }
+    body > .grid {
+      height: 100%;
+    }
+    .image {
+      margin-top: -100px;
+    }
+    .column {
+      max-width: 450px;
+    }
+  </style>
+  <script>
+  $(document)
+    .ready(function() {
+      $('.ui.form')
+        .form({
+          fields: {
+            email: {
+              identifier  : 'email',
+              rules: [
+                {
+                  type   : 'empty',
+                  prompt : 'Please enter your e-mail'
+                },
+                {
+                  type   : 'email',
+                  prompt : 'Please enter a valid e-mail'
+                }
+              ]
+            },
+            password: {
+              identifier  : 'password',
+              rules: [
+                {
+                  type   : 'empty',
+                  prompt : 'Please enter your password'
+                },
+                {
+                  type   : 'length[6]',
+                  prompt : 'Your password must be at least 6 characters'
+                }
+              ]
+            }
+          }
+        })
+      ;
+    })
+  ;
+  </script>
+</head>
+<body>
+
+<div class="ui middle aligned center aligned grid">
+  <div class="column">
+    <h2 class="ui teal image header">
+      <img src="assets/images/logo.png" class="image">
+      <div class="content">
+        Log-in to your account
+      </div>
+    </h2>
+    <form class="ui large form">
+      <div class="ui stacked segment">
+        <div class="field">
+          <div class="ui left icon input">
+            <i class="user icon"></i>
+            <input type="text" name="email" placeholder="E-mail address">
+          </div>
+        </div>
+        <div class="field">
+          <div class="ui left icon input">
+            <i class="lock icon"></i>
+            <input type="password" name="password" placeholder="Password">
+          </div>
+        </div>
+        <div class="ui fluid large teal submit button">Login</div>
+      </div>
+
+      <div class="ui error message"></div>
+
+    </form>
+
+    <div class="ui message">
+      New to us? <a href="#">Sign Up</a>
+    </div>
+  </div>
+</div>
+
+</body>
+
+</html>

web/semantic/examples/responsive.html

@@ -0,0 +1,689 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <!-- Standard Meta -->
+  <meta charset="utf-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
+
+  <!-- Site Properties -->
+  <title>Responsive Elements - Semantic</title>
+  <link rel="stylesheet" type="text/css" href="../dist/semantic.css">
+
+  <script src="assets/library/jquery.min.js"></script>
+  <script src="../dist/semantic.js"></script>
+
+</head>
+<body>
+
+<h1 class="ui center aligned header">Responsive UI Examples</h1>
+
+
+<h2 class="ui center aligned header">Basic Responsive</h2>
+
+
+<h3 class="ui center aligned header">Container</h3>
+<div class="ui container">
+  <div class="ui segments">
+    <div class="ui segment">Content</div>
+    <div class="ui segment">Content</div>
+    <div class="ui segment">Content</div>
+    <div class="ui segment">Content</div>
+  </div>
+</div>
+<h3 class="ui center aligned header">Text Container</h3>
+<div class="ui text container">
+  <div class="ui segments">
+    <div class="ui segment">Content</div>
+    <div class="ui segment">Content</div>
+    <div class="ui segment">Content</div>
+    <div class="ui segment">Content</div>
+  </div>
+</div>
+
+<h3 class="ui center aligned header">Stackable Grid</h3>
+<div class="ui two column stackable grid">
+  <div class="column">
+    <div class="ui segment">Content</div>
+  </div>
+  <div class="column">
+    <div class="ui segment">Content</div>
+  </div>
+  <div class="three column row">
+    <div class="column">
+      <div class="ui segment">Content</div>
+    </div>
+    <div class="column">
+      <div class="ui segment">Content</div>
+    </div>
+    <div class="column">
+      <div class="ui segment">Content</div>
+    </div>
+  </div>
+  <div class="ten wide column">
+    <div class="ui segment">Content</div>
+  </div>
+  <div class="six wide column">
+    <div class="ui segment">Content</div>
+  </div>
+</div>
+
+
+<h3 class="ui center aligned header">Doubling Grid</h3>
+<div class="ui three column doubling grid">
+  <div class="column">
+    <div class="ui segment">Content</div>
+  </div>
+  <div class="column">
+    <div class="ui segment">Content</div>
+  </div>
+  <div class="column">
+    <div class="ui segment">Content</div>
+  </div>
+  <div class="column">
+    <div class="ui segment">Content</div>
+  </div>
+  <div class="column">
+    <div class="ui segment">Content</div>
+  </div>
+  <div class="column">
+    <div class="ui segment">Content</div>
+  </div>
+</div>
+
+<h3 class="ui center aligned header">Doubling Stackable Grid</h3>
+<div class="ui three column doubling stackable grid">
+  <div class="column">
+    <div class="ui segment">Content</div>
+  </div>
+  <div class="column">
+    <div class="ui segment">Content</div>
+  </div>
+  <div class="column">
+    <div class="ui segment">Content</div>
+  </div>
+  <div class="column">
+    <div class="ui segment">Content</div>
+  </div>
+  <div class="column">
+    <div class="ui segment">Content</div>
+  </div>
+  <div class="column">
+    <div class="ui segment">Content</div>
+  </div>
+</div>
+
+<h3 class="ui center aligned header">Nested Stackable Grid</h3>
+<div class="ui two column grid">
+  <div class="column">
+    <div class="ui stackable doubling two column grid">
+      <div class="column">
+        <div class="ui segment">Content</div>
+      </div>
+      <div class="column">
+        <div class="ui segment">Content</div>
+      </div>
+    </div>
+  </div>
+  <div class="column">
+    <div class="ui stackable doubling three column grid">
+      <div class="column">
+        <div class="ui segment">Content</div>
+      </div>
+      <div class="column">
+        <div class="ui segment">Content</div>
+      </div>
+      <div class="column">
+        <div class="ui segment">Content</div>
+      </div>
+    </div>
+  </div>
+</div>
+
+
+<h3 class="ui center aligned header">Stackable Grid Container</h3>
+<div class="ui two column stackable grid container">
+  <div class="column">
+    <div class="ui segment">Content</div>
+  </div>
+  <div class="column">
+    <div class="ui segment">Content</div>
+  </div>
+  <div class="column">
+    <div class="ui segment">Content</div>
+  </div>
+  <div class="column">
+    <div class="ui segment">Content</div>
+  </div>
+  <div class="column">
+    <div class="ui segment">Content</div>
+  </div>
+  <div class="column">
+    <div class="ui segment">Content</div>
+  </div>
+</div>
+
+
+<h3 class="ui center aligned header">Doubling Grid Container</h3>
+<div class="ui three column doubling grid container">
+  <div class="column">
+    <div class="ui segment">Content</div>
+  </div>
+  <div class="column">
+    <div class="ui segment">Content</div>
+  </div>
+  <div class="column">
+    <div class="ui segment">Content</div>
+  </div>
+  <div class="column">
+    <div class="ui segment">Content</div>
+  </div>
+  <div class="column">
+    <div class="ui segment">Content</div>
+  </div>
+  <div class="column">
+    <div class="ui segment">Content</div>
+  </div>
+</div>
+
+<h3 class="ui center aligned header">Doubling Stackable Grid Container</h3>
+<div class="ui three column doubling stackable grid container">
+  <div class="column">
+    <div class="ui segment">Content</div>
+  </div>
+  <div class="column">
+    <div class="ui segment">Content</div>
+  </div>
+  <div class="column">
+    <div class="ui segment">Content</div>
+  </div>
+  <div class="column">
+    <div class="ui segment">Content</div>
+  </div>
+  <div class="column">
+    <div class="ui segment">Content</div>
+  </div>
+  <div class="column">
+    <div class="ui segment">Content</div>
+  </div>
+</div>
+
+<h2 class="ui center aligned header">Device Adjustment</h2>
+
+<h3 class="ui center aligned header">Device Column Width</h3>
+<div class="ui grid">
+  <div class="three wide computer nine wide tablet six wide mobile column">
+    <div class="ui segment">Content</div>
+  </div>
+  <div class="four wide column">
+    <div class="ui segment">Content</div>
+  </div>
+  <div class="nine wide computer three wide tablet six wide mobile column">
+    <div class="ui segment">Content</div>
+  </div>
+  <div class="nine wide computer three wide tablet six wide mobile column">
+    <div class="ui segment">Content</div>
+  </div>
+  <div class="four wide column">
+    <div class="ui segment">Content</div>
+  </div>
+  <div class="three wide computer nine wide tablet six wide mobile column">
+    <div class="ui segment">Content</div>
+  </div>
+</div>
+
+<h3 class="ui center aligned header">Device Visibility</h3>
+<div class="ui four column grid">
+  <div class="widescreen only ten wide column">
+    <div class="ui segment">Widescreen</div>
+  </div>
+  <div class="widescreen only six wide column">
+    <div class="ui segment">Widescreen</div>
+  </div>
+  <div class="large screen only six wide column">
+    <div class="ui segment">Large Screen</div>
+  </div>
+  <div class="large screen only ten wide column">
+    <div class="ui segment">Large Screen</div>
+  </div>
+  <div class="tablet only mobile only eight wide column">
+    <div class="ui segment">Tablet and Mobile</div>
+  </div>
+  <div class="tablet only mobile only eight wide column">
+    <div class="ui segment">Tablet and Mobile</div>
+  </div>
+  <div class="mobile only sixteen wide column">
+    <div class="ui segment">Mobile</div>
+  </div>
+  <div class="computer only two column row">
+    <div class="column">
+      <div class="ui segment">Computer and Up</div>
+    </div>
+    <div class="column">
+      <div class="ui segment">Computer and Up</div>
+    </div>
+  </div>
+  <div class="tablet only column">
+    <div class="ui segment">Tablet Only Content</div>
+  </div>
+  <div class="tablet only column">
+    <div class="ui segment">Tablet Only Content</div>
+  </div>
+  <div class="tablet only column">
+    <div class="ui segment">Tablet Only Content</div>
+  </div>
+  <div class="tablet only column">
+    <div class="ui segment">Tablet Only Content</div>
+  </div>
+</div>
+
+
+<h2 class="ui center aligned header">Responsive Grid with Variations</h2>
+
+<h3 class="ui center aligned header">Stackable Divided Grid</h3>
+<div class="ui stackable two column divided grid container">
+  <div class="row">
+    <div class="column">
+      <div class="ui segment">Content</div>
+    </div>
+    <div class="column">
+      <div class="ui segment">Content</div>
+    </div>
+  </div>
+  <div class="row">
+    <div class="column">
+      <div class="ui segment">Content</div>
+    </div>
+    <div class="column">
+      <div class="ui segment">Content</div>
+    </div>
+  </div>
+  <div class="row">
+    <div class="column">
+      <div class="ui segment">Content</div>
+    </div>
+    <div class="column">
+      <div class="ui segment">Content</div>
+    </div>
+  </div>
+</div>
+
+<h3 class="ui center aligned header">Stackable Vertically Divided Grid</h3>
+<div class="ui stackable two column vertically divided grid container">
+  <div class="row">
+    <div class="column">
+      <div class="ui segment">Content</div>
+    </div>
+    <div class="column">
+      <div class="ui segment">Content</div>
+    </div>
+  </div>
+  <div class="row">
+    <div class="column">
+      <div class="ui segment">Content</div>
+    </div>
+    <div class="column">
+      <div class="ui segment">Content</div>
+    </div>
+  </div>
+  <div class="row">
+    <div class="column">
+      <div class="ui segment">Content</div>
+    </div>
+    <div class="column">
+      <div class="ui segment">Content</div>
+    </div>
+  </div>
+</div>
+
+<h3 class="ui center aligned header">Celled Stackable Grid</h3>
+<div class="ui stackable celled grid container">
+  <div class="two column row">
+    <div class="column">
+      <div class="ui segment">Content</div>
+    </div>
+    <div class="column">
+      <div class="ui segment">Content</div>
+    </div>
+  </div>
+  <div class="three column row">
+    <div class="column">
+      <div class="ui segment">Content</div>
+    </div>
+    <div class="column">
+      <div class="ui segment">Content</div>
+    </div>
+    <div class="column">
+      <div class="ui segment">Content</div>
+    </div>
+  </div>
+  <div class="two column row">
+    <div class="column">
+      <div class="ui segment">Content</div>
+    </div>
+    <div class="column">
+      <div class="ui segment">Content</div>
+    </div>
+  </div>
+</div>
+<h3 class="ui center aligned header">Consecutive Doubling Stackable Grid</h3>
+<div class="doubling stackable three column ui grid container">
+  <div class="column">
+    <div class="ui segment">Content</div>
+  </div>
+  <div class="column">
+    <div class="ui segment">Content</div>
+  </div>
+  <div class="column">
+    <div class="ui segment">Content</div>
+  </div>
+  <div class="column">
+    <div class="ui segment">Content</div>
+  </div>
+  <div class="column">
+    <div class="ui segment">Content</div>
+  </div>
+  <div class="column">
+    <div class="ui segment">Content</div>
+  </div>
+</div>
+<div class="doubling stackable three column ui grid container">
+  <div class="column">
+    <div class="ui segment">Content</div>
+  </div>
+  <div class="column">
+    <div class="ui segment">Content</div>
+  </div>
+  <div class="column">
+    <div class="ui segment">Content</div>
+  </div>
+  <div class="column">
+    <div class="ui segment">Content</div>
+  </div>
+  <div class="column">
+    <div class="ui segment">Content</div>
+  </div>
+  <div class="column">
+    <div class="ui segment">Content</div>
+  </div>
+</div>
+
+<h3 class="ui center aligned header">Grid Container</h3>
+<div class="ui three column grid container">
+  <div class="column">
+    <div class="ui segment">Content</div>
+  </div>
+  <div class="column">
+    <div class="ui segment">Content</div>
+  </div>
+  <div class="column">
+    <div class="ui segment">Content</div>
+  </div>
+  <div class="column">
+    <div class="ui segment">Content</div>
+  </div>
+  <div class="column">
+    <div class="ui segment">Content</div>
+  </div>
+  <div class="column">
+    <div class="ui segment">Content</div>
+  </div>
+</div>
+
+<h1 class="ui center aligned header">Responsive Elements</h1>
+
+
+<h3 class="ui center aligned header">Responsive Vertical Divider</h3>
+
+  <div class="ui stackable two column very relaxed grid container" style="position:relative;">
+    <div class="column">
+      <div class="ui segment">Content</div>
+    </div>
+    <div class="ui vertical divider">
+      Or
+    </div>
+    <div class="column">
+      <div class="ui segment">Content</div>
+    </div>
+  </div>
+
+
+<h3 class="ui center aligned header">Responsive Table</h3>
+
+<div class="ui container">
+  <table class="ui celled table">
+    <thead>
+      <th>Employee</th>
+      <th>Correct Guesses</th>
+    </thead>
+    <tbody>
+      <tr>
+        <td>
+          <h4 class="ui image header">
+            <img src="assets/images/wireframe/square-image.png" class="ui mini rounded image">
+            <div class="content">
+              Lena
+              <div class="sub header">Human Resources
+            </div>
+          </div>
+        </td>
+        <td>
+          22
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <h4 class="ui image header">
+            <img src="assets/images/wireframe/square-image.png" class="ui mini rounded image">
+            <div class="content">
+              Matthew
+              <div class="sub header">Fabric Design
+            </div>
+          </div>
+        </td>
+        <td>
+          15
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <h4 class="ui image header">
+            <img src="assets/images/wireframe/square-image.png" class="ui mini rounded image">
+            <div class="content">
+              Lindsay
+              <div class="sub header">Entertainment
+            </div>
+          </div>
+        </td>
+        <td>
+          12
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <h4 class="ui image header">
+            <img src="assets/images/wireframe/square-image.png" class="ui mini rounded image">
+            <div class="content">
+              Mark
+              <div class="sub header">Executive
+            </div>
+          </div>
+        </td>
+        <td>
+          11
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+<h3 class="ui center aligned header">Responsive Menu</h3>
+
+<div class="ui stackable container menu">
+  <div class="item">
+    <img src="assets/images/logo.png">
+  </div>
+  <a class="item">Features</a>
+  <a class="item">Testimonials</a>
+  <a class="item">Sign-in</a>
+</div>
+
+<h3 class="ui center aligned header">Responsive Item</h3>
+
+<div class="ui container">
+  <div class="ui relaxed divided items">
+    <div class="item">
+      <div class="ui small image">
+        <img src="assets/images/wireframe/image.png">
+      </div>
+      <div class="content">
+        <a class="header">Content Header</a>
+        <div class="meta">
+          <a>Date</a>
+          <a>Category</a>
+        </div>
+        <div class="description">
+          A description which may flow for several lines and give context to the content.
+        </div>
+        <div class="extra">
+          <img src="assets/images/wireframe/square-image.png" class="ui circular avatar image"> Username
+        </div>
+      </div>
+    </div>
+    <div class="item">
+      <div class="ui small image">
+        <img src="assets/images/wireframe/image.png">
+      </div>
+      <div class="content">
+        <a class="header">Content Header</a>
+        <div class="meta">
+          <a>Date</a>
+          <a>Category</a>
+        </div>
+        <div class="description">
+          A description which may flow for several lines and give context to the content.
+        </div>
+        <div class="extra">
+          <div class="ui right floated primary button">
+            Primary
+            <i class="right chevron icon"></i>
+          </div>
+          <div class="ui label">Limited</div>
+        </div>
+      </div>
+    </div>
+    <div class="item">
+      <div class="ui small image">
+        <img src="assets/images/wireframe/image.png">
+      </div>
+      <div class="content">
+        <a class="header">Content Header</a>
+        <div class="meta">
+          <a>Date</a>
+          <a>Category</a>
+        </div>
+        <div class="description">
+          A description which may flow for several lines and give context to the content.
+        </div>
+        <div class="extra">
+          <div class="ui right floated primary button">
+            Primary
+            <i class="right chevron icon"></i>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<h3 class="ui center aligned header">Responsive Steps</h3>
+
+<div class="ui last container">
+  <div class="ui three steps">
+    <div class="step">
+      <div class="content">
+        <div class="title">Shipping</div>
+        <div class="description">Choose your shipping options</div>
+      </div>
+    </div>
+    <div class="active step">
+      <div class="content">
+        <div class="title">Billing</div>
+        <div class="description">Enter billing information</div>
+      </div>
+    </div>
+    <div class="disabled step">
+      <div class="content">
+        <div class="title">Confirm Order</div>
+        <div class="description">Review your order details</div>
+      </div>
+    </div>
+  </div>
+</div>
+
+
+<!-- Content JS HERE !-->
+<style>
+  .last.container {
+    margin-bottom: 300px !important;
+  }
+  h1.ui.center.header {
+    margin-top: 3em;
+  }
+  h2.ui.center.header {
+    margin: 4em 0em 2em;
+  }
+  h3.ui.center.header {
+    margin-top: 2em;
+    padding: 2em 0em;
+  }
+</style>
+
+<script type="text/javascript">
+$(document).ready(function() {
+
+  var
+    $headers     = $('body > h3'),
+    $header      = $headers.first(),
+    ignoreScroll = false,
+    timer
+  ;
+
+  // Preserve example in viewport when resizing browser
+  $(window)
+    .on('resize', function() {
+      // ignore callbacks from scroll change
+      clearTimeout(timer);
+      $headers.visibility('disable callbacks');
+
+      // preserve position
+      $(document).scrollTop( $header.offset().top );
+
+      // allow callbacks in 500ms
+      timer = setTimeout(function() {
+        $headers.visibility('enable callbacks');
+      }, 500);
+    })
+  ;
+  $headers
+    .visibility({
+      // fire once each time passed
+      once: false,
+
+      // don't refresh position on resize
+      checkOnRefresh: true,
+
+      // lock to this element on resize
+      onTopPassed: function() {
+        $header = $(this);
+      },
+      onTopPassedReverse: function() {
+        $header = $(this);
+      }
+    })
+  ;
+});
+</script>
+
+</body>
+</html>

web/semantic/examples/sticky.html

@@ -0,0 +1,230 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <!-- Standard Meta -->
+  <meta charset="utf-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
+
+  <!-- Site Properties -->
+  <title>Sticky Example - Semantic</title>
+
+  <link rel="stylesheet" type="text/css" href="../dist/components/reset.css">
+  <link rel="stylesheet" type="text/css" href="../dist/components/site.css">
+
+  <link rel="stylesheet" type="text/css" href="../dist/components/container.css">
+  <link rel="stylesheet" type="text/css" href="../dist/components/grid.css">
+  <link rel="stylesheet" type="text/css" href="../dist/components/header.css">
+  <link rel="stylesheet" type="text/css" href="../dist/components/image.css">
+  <link rel="stylesheet" type="text/css" href="../dist/components/menu.css">
+
+  <link rel="stylesheet" type="text/css" href="../dist/components/divider.css">
+  <link rel="stylesheet" type="text/css" href="../dist/components/list.css">
+  <link rel="stylesheet" type="text/css" href="../dist/components/segment.css">
+  <link rel="stylesheet" type="text/css" href="../dist/components/dropdown.css">
+  <link rel="stylesheet" type="text/css" href="../dist/components/icon.css">
+  <link rel="stylesheet" type="text/css" href="../dist/components/transition.css">
+
+  <script src="assets/library/jquery.min.js"></script>
+  <script src="../dist/components/transition.js"></script>
+  <script src="../dist/components/dropdown.js"></script>
+  <script src="../dist/components/visibility.js"></script>
+  <script>
+  $(document)
+    .ready(function() {
+
+      // fix main menu to page on passing
+      $('.main.menu').visibility({
+        type: 'fixed'
+      });
+      $('.overlay').visibility({
+        type: 'fixed',
+        offset: 80
+      });
+
+      // lazy load images
+      $('.image').visibility({
+        type: 'image',
+        transition: 'vertical flip in',
+        duration: 500
+      });
+
+      // show dropdown on hover
+      $('.main.menu  .ui.dropdown').dropdown({
+        on: 'hover'
+      });
+    })
+  ;
+  </script>
+
+  <style type="text/css">
+
+  body {
+    background-color: #FFFFFF;
+  }
+  .main.container {
+    margin-top: 2em;
+  }
+
+  .main.menu {
+    margin-top: 4em;
+    border-radius: 0;
+    border: none;
+    box-shadow: none;
+    transition:
+      box-shadow 0.5s ease,
+      padding 0.5s ease
+    ;
+  }
+  .main.menu .item img.logo {
+    margin-right: 1.5em;
+  }
+
+  .overlay {
+    float: left;
+    margin: 0em 3em 1em 0em;
+  }
+  .overlay .menu {
+    position: relative;
+    left: 0;
+    transition: left 0.5s ease;
+  }
+
+  .main.menu.fixed {
+    background-color: #FFFFFF;
+    border: 1px solid #DDD;
+    box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.2);
+  }
+  .overlay.fixed .menu {
+    left: 800px;
+  }
+
+  .text.container .left.floated.image {
+    margin: 2em 2em 2em -4em;
+  }
+  .text.container .right.floated.image {
+    margin: 2em -4em 2em 2em;
+  }
+
+  .ui.footer.segment {
+    margin: 5em 0em 0em;
+    padding: 5em 0em;
+  }
+  </style>
+
+</head>
+<body>
+
+  <div class="ui main text container">
+    <h1 class="ui header">Sticky Example</h1>
+    <p>This example shows how to use lazy loaded images, a sticky menu, and a simple text container</p>
+  </div>
+
+
+  <div class="ui borderless main menu">
+    <div class="ui text container">
+      <div href="#" class="header item">
+        <img class="logo" src="assets/images/logo.png">
+        Project Name
+      </div>
+      <a href="#" class="item">Blog</a>
+      <a href="#" class="item">Articles</a>
+      <a href="#" class="ui right floated dropdown item">
+        Dropdown <i class="dropdown icon"></i>
+        <div class="menu">
+          <div class="item">Link Item</div>
+          <div class="item">Link Item</div>
+          <div class="divider"></div>
+          <div class="header">Header Item</div>
+          <div class="item">
+            <i class="dropdown icon"></i>
+            Sub Menu
+            <div class="menu">
+              <div class="item">Link Item</div>
+              <div class="item">Link Item</div>
+            </div>
+          </div>
+          <div class="item">Link Item</div>
+        </div>
+      </a>
+    </div>
+  </div>
+
+  <div class="ui text container">
+    <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. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. 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>
+    <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. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. 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>
+    <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. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. 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>
+    <div class="overlay">
+      <div class="ui labeled icon vertical menu">
+        <a class="item"><i class="twitter icon"></i> Tweet</a>
+        <a class="item"><i class="facebook icon"></i> Share</a>
+        <a class="item"><i class="mail icon"></i> E-mail</a>
+      </div>
+    </div>
+    <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. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. 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>
+    <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. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. 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>
+    <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. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. 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>
+    <img class="ui medium left floated image" data-src="assets/images/wireframe/square-image.png">
+    <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. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. 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>
+    <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.
+    <img class="ui medium right floated image" data-src="assets/images/wireframe/square-image.png">
+    Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. 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>
+    <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. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. 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>
+    <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. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. 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>
+    <img class="ui medium left floated image" data-src="assets/images/wireframe/square-image.png">
+    <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. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. 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>
+    <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.
+    <img class="ui medium right floated image" data-src="assets/images/wireframe/square-image.png">
+    Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. 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>
+    <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. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. 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>
+    <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. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. 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>
+  </div>
+
+  <div class="ui inverted vertical footer segment">
+    <div class="ui center aligned container">
+      <div class="ui stackable inverted divided grid">
+        <div class="three wide column">
+          <h4 class="ui inverted header">Group 1</h4>
+          <div class="ui inverted link list">
+            <a href="#" class="item">Link One</a>
+            <a href="#" class="item">Link Two</a>
+            <a href="#" class="item">Link Three</a>
+            <a href="#" class="item">Link Four</a>
+          </div>
+        </div>
+        <div class="three wide column">
+          <h4 class="ui inverted header">Group 2</h4>
+          <div class="ui inverted link list">
+            <a href="#" class="item">Link One</a>
+            <a href="#" class="item">Link Two</a>
+            <a href="#" class="item">Link Three</a>
+            <a href="#" class="item">Link Four</a>
+          </div>
+        </div>
+        <div class="three wide column">
+          <h4 class="ui inverted header">Group 3</h4>
+          <div class="ui inverted link list">
+            <a href="#" class="item">Link One</a>
+            <a href="#" class="item">Link Two</a>
+            <a href="#" class="item">Link Three</a>
+            <a href="#" class="item">Link Four</a>
+          </div>
+        </div>
+        <div class="seven wide column">
+          <h4 class="ui inverted header">Footer Header</h4>
+          <p>Extra space for a call to action inside the footer that could help re-engage users.</p>
+        </div>
+      </div>
+      <div class="ui inverted section divider"></div>
+      <img src="assets/images/logo.png" class="ui centered mini image">
+      <div class="ui horizontal inverted small divided link list">
+        <a class="item" href="#">Site Map</a>
+        <a class="item" href="#">Contact Us</a>
+        <a class="item" href="#">Terms and Conditions</a>
+        <a class="item" href="#">Privacy Policy</a>
+      </div>
+    </div>
+  </div>
+</body>
+
+</html>

web/semantic/examples/theming.html

@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <!-- Standard Meta -->
+  <meta charset="utf-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
+
+  <!-- Site Properties -->
+  <title>Theming - Semantic</title>
+  <link rel="stylesheet" type="text/css" href="../dist/semantic.css">
+
+  <script src="assets/library/jquery.min.js"></script>
+  <script src="assets/library/iframe.js"></script>
+
+  <style type="text/css">
+    body > .ui.container {
+      margin-top: 3em;
+    }
+    iframe {
+      border: none;
+      width: calc(100% + 2em);
+      margin: 0em -1em;
+      height: 300px;
+    }
+    iframe html {
+      overflow: hidden;
+    }
+    iframe body {
+      padding: 0em;
+    }
+
+    .ui.container > h1 {
+      font-size: 3em;
+      text-align: center;
+      font-weight: normal;
+    }
+    .ui.container > h2.dividing.header {
+      font-size: 2em;
+      font-weight: normal;
+      margin: 4em 0em 3em;
+    }
+
+
+    .ui.table {
+      table-layout: fixed;
+    }
+  </style>
+</head>
+<body>
+
+<div class="ui container">
+
+  <h1>Theming Examples</h1>
+
+  <h2 class="ui dividing header">Site</h2>
+  <iframe src="components/site.html" width="100%" scrolling="no"></iframe>
+
+  <h2 class="ui dividing header">Menu</h2>
+  <iframe src="components/menu.html" width="100%" scrolling="no"></iframe>
+
+  <h2 class="ui dividing header">Buttons</h2>
+  <iframe src="components/button.html" width="100%" scrolling="no"></iframe>
+
+  <h2 class="ui dividing header">Table</h2>
+  <iframe src="components/table.html" width="100%" scrolling="no"></iframe>
+
+  <h2 class="ui dividing header">Input</h2>
+  <iframe src="components/input.html" width="100%" scrolling="no"></iframe>
+
+
+  <h2 class="ui dividing header">Card</h2>
+  <iframe src="components/card.html" width="100%" scrolling="no"></iframe>
+
+
+
+</div>
+
+
+<script>
+$('iframe').iFrameResize({
+  autoResize: true,
+  heightCalculationMethod: 'bodyScroll'
+});
+</script>
+</body>
+
+</html>