fixes issue with some files missing overrides, begins adding output grunt task

Gruntfile.js

@@ -105,6 +105,22 @@ module.exports = function(grunt) {
       'copy:specToDocs'
     ],
 
+    outputTasks = [
+      // compiles less to docs
+      'less:outputCSS',
+
+      // auto prefix doc files
+      'autoprefixer:prefixOutput',
+
+      // copies assets and js over to docs
+      'copy:outputAssets',
+    ],
+
+    type       = type    || 'element',
+    element    = element || 'button',
+
+    outputPath = type + 's/' + element,
+
     buildTasks = releaseTasks.concat(rtlTasks).concat(docTasks),
 
     setWatchTests = function(action, filePath) {
@@ -320,6 +336,16 @@ module.exports = function(grunt) {
         ],
         dest : 'build/uncompressed/',
         rename: preserveFileExtensions
+      },
+
+      outputCSS: {
+        cwd    : 'src',
+        src    :  outputPath + '.less',
+        dest   : 'build/uncompressed/' + outputPath + '.css' ,
+        variables : {
+
+        }
+        rename: preserveFileExtensions
       }
     },
 

build/uncompressed/elements/icon.css

@@ -1,482 +0,0 @@
-/*
- * # Semantic - Icon
- * http://github.com/jlukic/semantic-ui/
- *
- *
- * Copyright 2013 Contributors
- * Released under the MIT license
- * http://opensource.org/licenses/MIT
- *
- */
-
-/*!
- *  Font Awesome 3.2.1
- *  the iconic font designed for Bootstrap
- *  ------------------------------------------------------------------------------
- *  The full suite of pictographic icons, examples, and documentation can be
- *  found at http://fon.io.  Stay up to date on Twitter at
- *  http://twitter.com/fon.
- *
- *  License
- *  ------------------------------------------------------------------------------
- *  - The Font Awesome font is licensed under SIL OFL 1.1 -
- *    http://scripts.sil.org/OFL
-
-/*******************************
-            Theme
-*******************************/
-
-/*-------------------
-        Theme
---------------------*/
-
-/* To override a theme for an individual element
-   specify theme name below
-*/
-
-/* Global */
-
-/* Elements */
-
-/* Collections */
-
-/* Modules */
-
-/* Views */
-
-/* Import */
-
-/*******************************
-        Global Variables
-*******************************/
-
-/*-------------------
-        Paths
---------------------*/
-
-/*-------------------
-       Page
---------------------*/
-
-/*-------------------
-       Fonts
---------------------*/
-
-/*-------------------
-       Icons
---------------------*/
-
-/* Width of largest icon */
-
-/*******************************
-           BG Colors
-*******************************/
-
-/*******************************
-             Colors
-*******************************/
-
-/*-------------------
-     Background
---------------------*/
-
-/*---  Colors  ---*/
-
-/*---  Emotive  ---*/
-
-/*---  Neutrals  ---*/
-
-/*-------------------
-     Text Colors
---------------------*/
-
-/*-------------------
-     Brand Colors
---------------------*/
-
-/*-------------------
-      Borders
---------------------*/
-
-/*-------------------
-        Sizes
---------------------*/
-
-/*-------------------
-     Transitions
---------------------*/
-
-/*******************************
-           States
-*******************************/
-
-/*-------------------
-      Disabled
---------------------*/
-
-/*-------------------
-        Hover
---------------------*/
-
-/*---  Colors  ---*/
-
-/*---  Emotive  ---*/
-
-/*---  Neutrals  ---*/
-
-/*-------------------
-    Down (:active)
---------------------*/
-
-/*---  Colors  ---*/
-
-/*---  Emotive  ---*/
-
-/*---  Neutrals  ---*/
-
-/*-------------------
-        Active
---------------------*/
-
-/*---  Standard  ---*/
-
-/*---  Emotive  ---*/
-
-/*---  Neutrals  ---*/
-
-/*-------------------
-    Globals Used
---------------------*/
-
-/*
-  @disabledOpacity
-*/
-
-/*-------------------
-   Icon Variables
---------------------*/
-
-/*******************************
-     User Global Variables
-*******************************/
-
-/*******************************
-    User Variable Overrides
-*******************************/
-
-/*******************************
-             Icon
-*******************************/
-
-@font-face {
-  font-family: 'Icons';
-  src: url("../themes/default/fonts/icons.eot");
-  src: url("../themes/default/fonts/icons.eot?#iefix") format('embedded-opentype'), url("../themes/default/fonts/icons.svg#icons") format('svg') url("../themes/default/fonts/icons.woff") format('woff'), url("../themes/default/fonts/icons.ttf") format('truetype');
-  font-style: normal;
-  font-weight: normal;
-  font-variant: normal;
-  text-decoration: inherit;
-  text-transform: none;
-}
-
-i.icon {
-  display: inline-block;
-  opacity: 0.75;
-  margin: 0em 0.25em 0em 0em;
-  width: 1.23em;
-  height: 1em;
-  font-family: 'Icons';
-  font-style: normal;
-  line-height: 1;
-  font-weight: normal;
-  text-decoration: inherit;
-  text-align: center;
-  speak: none;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-  font-smoothing: antialiased;
-}
-
-/*******************************
-             Types
-*******************************/
-
-/*--------------
-    Loading
----------------*/
-
-i.icon.loading {
-  -webkit-animation: icon-loading 2s linear infinite;
-  animation: icon-loading 2s linear infinite;
-}
-
-@-webkit-keyframes icon-loading {
-  from {
-    -webkit-transform: rotate(0deg);
-    transform: rotate(0deg);
-  }
-
-  to {
-    -webkit-transform: rotate(360deg);
-    transform: rotate(360deg);
-  }
-}
-
-@keyframes icon-loading {
-  from {
-    -webkit-transform: rotate(0deg);
-    -ms-transform: rotate(0deg);
-    transform: rotate(0deg);
-  }
-
-  to {
-    -webkit-transform: rotate(360deg);
-    -ms-transform: rotate(360deg);
-    transform: rotate(360deg);
-  }
-}
-
-/*******************************
-             States
-*******************************/
-
-i.icon.hover {
-  opacity: 1;
-}
-
-i.icon.active {
-  opacity: 1;
-}
-
-i.emphasized.icon {
-  opacity: 1;
-}
-
-i.icon.disabled {
-  opacity: 0.3;
-}
-
-/*******************************
-           Variations
-*******************************/
-
-/*-------------------
-         Link
---------------------*/
-
-i.link.icon {
-  cursor: pointer;
-  opacity: 0.75;
-  -webkit-transition: opacity 0.25s ease;
-  transition: opacity 0.25s ease;
-}
-
-i.link.icon:hover {
-  opacity: 1 !important;
-}
-
-/*-------------------
-      Circular
---------------------*/
-
-i.circular.icon {
-  border-radius: 500em !important;
-  padding: 0.5em 0.35em !important;
-  -webkit-box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;
-  box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;
-  line-height: 1 !important;
-  width: 2em !important;
-  height: 2em !important;
-}
-
-i.circular.inverted.icon {
-  border: none;
-  -webkit-box-shadow: none;
-  box-shadow: none;
-}
-
-/*-------------------
-      Flipped
---------------------*/
-
-i.flipped.icon,
-i.horizontally.flipped.icon {
-  -webkit-transform: scale(-1, 1);
-  -ms-transform: scale(-1, 1);
-  transform: scale(-1, 1);
-}
-
-i.vertically.flipped.icon {
-  -webkit-transform: scale(1, -1);
-  -ms-transform: scale(1, -1);
-  transform: scale(1, -1);
-}
-
-/*-------------------
-      Rotated
---------------------*/
-
-i.rotated.icon,
-i.right.rotated.icon,
-i.clockwise.rotated.icon {
-  -webkit-transform: rotate(90deg);
-  -ms-transform: rotate(90deg);
-  transform: rotate(90deg);
-}
-
-i.left.rotated.icon,
-i.counterclockwise.rotated.icon {
-  -webkit-transform: rotate(-90deg);
-  -ms-transform: rotate(-90deg);
-  transform: rotate(-90deg);
-}
-
-/*-------------------
-        Square
---------------------*/
-
-i.square.icon {
-  width: 2em;
-  height: 2em;
-  padding: 2em !important;
-  -webkit-box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;
-  box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;
-  vertical-align: baseline;
-}
-
-i.square.inverted.icon {
-  border: none;
-  -webkit-box-shadow: none;
-  box-shadow: none;
-}
-
-/*-------------------
-      Inverted
---------------------*/
-
-i.inverted.icon {
-  background-color: #222222;
-  color: #FFFFFF;
-}
-
-/*-------------------
-       Colors
---------------------*/
-
-i.black.icon {
-  color: #555555 !important;
-}
-
-i.blue.icon {
-  color: #6ecff5 !important;
-}
-
-i.green.icon {
-  color: #5bbd72 !important;
-}
-
-i.orange.icon {
-  color: #e96633 !important;
-}
-
-i.pink.icon {
-  color: #d9499a !important;
-}
-
-i.purple.icon {
-  color: #564f8a !important;
-}
-
-i.red.icon {
-  color: #d95c5c !important;
-}
-
-i.teal.icon {
-  color: #00b5ad !important;
-}
-
-i.yellow.icon {
-  color: #ffcb08 !important;
-}
-
-/*-------------------
-   Inverted Colors
---------------------*/
-
-i.black.icon {
-  background-color: #555555 !important;
-  color: #FFFFFF !important;
-}
-
-i.blue.icon {
-  background-color: #6ecff5 !important;
-  color: #FFFFFF !important;
-}
-
-i.green.icon {
-  background-color: #5bbd72 !important;
-  color: #FFFFFF !important;
-}
-
-i.orange.icon {
-  background-color: #e96633 !important;
-  color: #FFFFFF !important;
-}
-
-i.pink.icon {
-  background-color: #d9499a !important;
-  color: #FFFFFF !important;
-}
-
-i.purple.icon {
-  background-color: #564f8a !important;
-  color: #FFFFFF !important;
-}
-
-i.red.icon {
-  background-color: #d95c5c !important;
-  color: #FFFFFF !important;
-}
-
-i.teal.icon {
-  background-color: #00b5ad !important;
-  color: #FFFFFF !important;
-}
-
-i.yellow.icon {
-  background-color: #ffcb08 !important;
-  color: #FFFFFF !important;
-}
-
-/*-------------------
-        Sizes
---------------------*/
-
-i.small.icon {
-  font-size: 0.875em;
-}
-
-i.icon {
-  font-size: 1em;
-}
-
-i.large.icon {
-  font-size: 1.5em;
-  vertical-align: middle;
-}
-
-i.big.icon {
-  font-size: 2em;
-  vertical-align: middle;
-}
-
-i.huge.icon {
-  font-size: 4em;
-  vertical-align: middle;
-}
-
-i.massive.icon {
-  font-size: 8em;
-  vertical-align: middle;
-}

server/layouts/default.html.eco

@@ -257,9 +257,6 @@
         </div>
         <% end %>
         <% if @document.type is 'UI Element' or @document.type is 'UI View' or @document.type is 'UI Collection' or @document.type is 'UI Module': %>
-<!--         <a class="popup overview icon item" data-content="Toggle Definition">
-          <i class="book icon"></i>
-        </a> -->
         <a class="popup designer icon item" data-content="Designer Mode">
           <i class="basic paint icon"></i>
         </a>
@@ -270,16 +267,6 @@
         <a class="popup icon github item" data-content="View project on Github" href="https://github.com/quirkyinc/semantic">
           <i class="icon github"></i>
         </a>
-        <!--
-        <div class="ui simple dropdown item">
-          <i class="icon tint"></i> Theme
-          <div class="theme menu">
-            <div class="active item" data-theme="flat">Flat</div>
-            <div class="item" data-theme="shaded">Shaded</div>
-            <div class="item" data-theme="classic">Classic</div>
-          </div>
-        </div>
-        !-->
       </div>
     </div>
   </div>

src/elements/header.less

@@ -13,8 +13,8 @@
             Theme
 *******************************/
 
-@type   : 'element';
-@element: 'header';
+@type    : 'element';
+@element : 'header';
 
 @import '../semantic.config';
 
@@ -354,3 +354,4 @@ h5.ui.header {
   border-radius: 0em 0em 0.3125em 0.3125em;
 }
 
+.loadUIOverrides() !important;

src/elements/icon.less

@@ -37,12 +37,12 @@
 
 @font-face {
   font-family: 'Icons';
-  src: url("@{iconFont}.eot");
+  src: url("@{fontPath}@{fontName}.eot");
   src:
-    url("@{iconFont}.eot?#iefix") format('embedded-opentype'),
-    url("@{iconFont}.svg#icons") format('svg')
-    url("@{iconFont}.woff") format('woff'),
-    url("@{iconFont}.ttf") format('truetype')
+    url("@{fontPath}@{fontName}.eot?#iefix") format('embedded-opentype'),
+    url("@{fontPath}@{fontName}.svg#icons") format('svg')
+    url("@{fontPath}@{fontName}.woff") format('woff'),
+    url("@{fontPath}@{fontName}.ttf") format('truetype')
   ;
 
   font-style: normal;
@@ -306,3 +306,5 @@ i.massive.icon {
   font-size: @massive;
   vertical-align: middle;
 }
+
+.loadUIOverrides() !important;

src/elements/image.less

@@ -201,3 +201,5 @@ img.ui.image {
   display: inline-block;
   margin: 0em @imageSpacing (@imageSpacing * 2);
 }
+
+.loadUIOverrides() !important;

src/elements/segment.less

@@ -433,3 +433,5 @@
 .ui.segment.bottom.attached:last-child {
   margin-bottom: 0em;
 }
+
+.loadUIOverrides() !important;

src/semantic.config

@@ -6,16 +6,14 @@
    specify theme name below
 */
 
-/* Global */
-
-@theme   : 'default';
+/* Theme to load global Variables */
+@globalTheme: 'default';
 
 /* Elements */
-@button   : 'default';
-@icon     : 'default';
+@button   : 'github';
+@icon     : 'basic';
 @divider  : 'default';
 @header   : 'default';
-@icon     : 'default';
 @image    : 'default';
 @input    : 'default';
 @label    : 'default';
@@ -59,18 +57,18 @@
 
 /* Import */
 
-@elementTheme : @@element;
+@theme : @@element;
 
 @import "themes/default/global.variables";
 @import "themes/default/@{type}s/@{element}.variables";
 
-@import "themes/@{theme}/global.variables";
-@import "themes/@{elementTheme}/@{type}s/@{element}.variables";
+@import "themes/@{globalTheme}/global.variables";
+@import "themes/@{theme}/@{type}s/@{element}.variables";
 
 @import "themes/user/global.variables";
 @import "themes/user/@{type}s/@{element}.variables";
 
 .loadUIOverrides() {
-  @import "themes/@{elementTheme}/@{type}s/@{element}.overrides";
+  @import "themes/@{theme}/@{type}s/@{element}.overrides";
   @import "themes/user/@{type}s/@{element}.overrides";
 }

src/themes/basic/elements/icon.variables

@@ -1,6 +1,3 @@
 /*-------------------
    Icon Variables
 --------------------*/
-
-@fontPath  : "../themes/basic/fonts";
-

src/themes/default/elements/icon.variables

@@ -11,7 +11,7 @@
    Icon Variables
 --------------------*/
 
-@iconFont: '@{fontPath}/icons';
+@fontName: 'icons';
 
 @opacity: 0.75;
 @width: 1.23em;

src/themes/github/elements/button.variables

@@ -3,7 +3,7 @@
 --------------------*/
 
 /* Button Variables */
-@fontFamily: 'Helvetica Neue, Helvetica, Arial, sans-serif';
+@fontFamily: Helvetica Neue, Helvetica, Arial, sans-serif;
 @textTransform: none;
 @fontWeight: bold;
 @textColor: #333333;