diff --git a/Gruntfile.js b/Gruntfile.js
index 4d5bb668f..ec7910de8 100755
--- a/Gruntfile.js
+++ b/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
}
},
diff --git a/build/uncompressed/elements/icon.css b/build/uncompressed/elements/icon.css
index 4bf6e87eb..e69de29bb 100644
--- a/build/uncompressed/elements/icon.css
+++ b/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;
-}
\ No newline at end of file
diff --git a/server/layouts/default.html.eco b/server/layouts/default.html.eco
index 6ad0d9682..967325f9c 100755
--- a/server/layouts/default.html.eco
+++ b/server/layouts/default.html.eco
@@ -257,9 +257,6 @@
<% 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': %>
-
@@ -270,16 +267,6 @@
-
diff --git a/src/elements/header.less b/src/elements/header.less
index afc316b4e..13f995145 100755
--- a/src/elements/header.less
+++ b/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;
\ No newline at end of file
diff --git a/src/elements/icon.less b/src/elements/icon.less
index 53ea8c1bf..cad480b55 100755
--- a/src/elements/icon.less
+++ b/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;
\ No newline at end of file
diff --git a/src/elements/image.less b/src/elements/image.less
index 52e3e8e3c..482542138 100755
--- a/src/elements/image.less
+++ b/src/elements/image.less
@@ -201,3 +201,5 @@ img.ui.image {
display: inline-block;
margin: 0em @imageSpacing (@imageSpacing * 2);
}
+
+.loadUIOverrides() !important;
\ No newline at end of file
diff --git a/src/elements/segment.less b/src/elements/segment.less
index 881ddb144..47df8f50f 100755
--- a/src/elements/segment.less
+++ b/src/elements/segment.less
@@ -433,3 +433,5 @@
.ui.segment.bottom.attached:last-child {
margin-bottom: 0em;
}
+
+.loadUIOverrides() !important;
\ No newline at end of file
diff --git a/src/semantic.config b/src/semantic.config
index b51426cb5..ac75a6035 100755
--- a/src/semantic.config
+++ b/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";
}
\ No newline at end of file
diff --git a/src/themes/basic/elements/icon.variables b/src/themes/basic/elements/icon.variables
index 32806d211..2e0467234 100755
--- a/src/themes/basic/elements/icon.variables
+++ b/src/themes/basic/elements/icon.variables
@@ -1,6 +1,3 @@
/*-------------------
Icon Variables
--------------------*/
-
-@fontPath : "../themes/basic/fonts";
-
diff --git a/src/themes/default/elements/icon.variables b/src/themes/default/elements/icon.variables
index f2dc58b74..9181189ef 100755
--- a/src/themes/default/elements/icon.variables
+++ b/src/themes/default/elements/icon.variables
@@ -11,7 +11,7 @@
Icon Variables
--------------------*/
-@iconFont: '@{fontPath}/icons';
+@fontName: 'icons';
@opacity: 0.75;
@width: 1.23em;
diff --git a/src/themes/github/elements/button.variables b/src/themes/github/elements/button.variables
index 2ef57a84d..7ca6bb1a2 100755
--- a/src/themes/github/elements/button.variables
+++ b/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;