:star:

6 files changed, 2850 insertions, 0 deletions

diff --git a/semantic/src/definitions/views/ad.less b/semantic/src/definitions/views/ad.less
new file mode 100644
index 0000000..8d10cb1
--- /dev/null
+++ b/semantic/src/definitions/views/ad.less
@@ -0,0 +1,297 @@
+/*!
+ * # Fomantic-UI - Ad
+ * http://github.com/fomantic/Fomantic-UI/
+ *
+ *
+ * Copyright 2013 Contributors
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ */
+
+/*******************************
+            Theme
+*******************************/
+
+@type    : 'view';
+@element : 'ad';
+
+@import (multiple) '../../theme.config';
+
+/*******************************
+         Advertisement
+*******************************/
+
+.ui.ad {
+  display: block;
+  overflow: @overflow;
+  margin: @margin;
+}
+
+.ui.ad:first-child {
+  margin: 0;
+}
+
+.ui.ad:last-child {
+  margin: 0;
+}
+
+.ui.ad iframe {
+  margin: 0;
+  padding: 0;
+  border: none;
+  overflow: hidden;
+}
+
+/*--------------
+     Common
+---------------*/
+& when (@variationAdLeaderboard) {
+  /* Leaderboard */
+  .ui.leaderboard.ad {
+    width: 728px;
+    height: 90px;
+  }
+}
+
+& when (@variationAdRectangle) {
+  /* Medium Rectangle */
+  .ui[class*="medium rectangle"].ad {
+    width: 300px;
+    height: 250px;
+  }
+
+  /* Large Rectangle */
+  .ui[class*="large rectangle"].ad {
+    width: 336px;
+    height: 280px;
+  }
+  /* Half Page */
+  .ui[class*="half page"].ad {
+    width: 300px;
+    height: 600px;
+  }
+}
+
+& when (@variationAdSquare) {
+  /*--------------
+       Square
+  ---------------*/
+
+  /* Square */
+  .ui.square.ad {
+    width: 250px;
+    height: 250px;
+  }
+
+  /* Small Square */
+  .ui[class*="small square"].ad {
+    width: 200px;
+    height: 200px;
+  }
+}
+
+& when (@variationAdRectangle) {
+  /*--------------
+      Rectangle
+  ---------------*/
+
+  /* Small Rectangle */
+  .ui[class*="small rectangle"].ad {
+    width: 180px;
+    height: 150px;
+  }
+
+  /* Vertical Rectangle */
+  .ui[class*="vertical rectangle"].ad {
+    width: 240px;
+    height: 400px;
+  }
+}
+
+& when (@variationAdButton) {
+  /*--------------
+       Button
+  ---------------*/
+
+  .ui.button.ad {
+    width: 120px;
+    height: 90px;
+  }
+  & when (@variationAdSquare) {
+    .ui[class*="square button"].ad {
+      width: 125px;
+      height: 125px;
+    }
+  }
+  .ui[class*="small button"].ad {
+    width: 120px;
+    height: 60px;
+  }
+}
+
+& when (@variationAdSkyscraper) {
+  /*--------------
+     Skyscrapers
+  ---------------*/
+
+  /* Skyscraper */
+  .ui.skyscraper.ad {
+    width: 120px;
+    height: 600px;
+  }
+
+  /* Wide Skyscraper */
+  .ui[class*="wide skyscraper"].ad {
+    width: 160px;
+  }
+}
+
+& when (@variationAdBanner) {
+  /*--------------
+       Banners
+  ---------------*/
+
+  /* Banner */
+  .ui.banner.ad {
+    width: 468px;
+    height: 60px;
+  }
+
+  /* Vertical Banner */
+  .ui[class*="vertical banner"].ad {
+    width: 120px;
+    height: 240px;
+  }
+
+  /* Top Banner */
+  .ui[class*="top banner"].ad {
+    width: 930px;
+    height: 180px;
+  }
+
+  /* Half Banner */
+  .ui[class*="half banner"].ad {
+    width: 234px;
+    height: 60px;
+  }
+}
+
+/*--------------
+    Boards
+---------------*/
+& when (@variationAdLeaderboard) {
+  /* Leaderboard */
+  .ui[class*="large leaderboard"].ad {
+    width: 970px;
+    height: 90px;
+  }
+}
+
+& when (@variationAdBillboard) {
+  /* Billboard */
+  .ui.billboard.ad {
+    width: 970px;
+    height: 250px;
+  }
+}
+
+& when (@variationAdPanorama) {
+  /*--------------
+      Panorama
+  ---------------*/
+
+  /* Panorama */
+  .ui.panorama.ad {
+    width: 980px;
+    height: 120px;
+  }
+}
+
+& when (@variationAdNetboard) {
+  /*--------------
+       Netboard
+  ---------------*/
+
+  /* Netboard */
+  .ui.netboard.ad {
+    width: 580px;
+    height: 400px;
+  }
+}
+
+& when (@variationAdMobile) {
+  /*--------------
+       Mobile
+  ---------------*/
+  & when (@variationAdBanner) {
+    /* Large Mobile Banner */
+    .ui[class*="large mobile banner"].ad {
+      width: 320px;
+      height: 100px;
+    }
+  }
+  & when (@variationAdLeaderboard) {
+    /* Mobile Leaderboard */
+    .ui[class*="mobile leaderboard"].ad {
+      width: 320px;
+      height: 50px;
+    }
+  }
+
+/*******************************
+             Types
+*******************************/
+
+  /* Mobile Sizes */
+  .ui.mobile.ad {
+    display: none;
+  }
+
+  @media only screen and (max-width : @largestMobileScreen) {
+    .ui.mobile.ad {
+      display: block;
+    }
+  }
+}
+
+
+/*******************************
+           Variations
+*******************************/
+
+& when (@variationAdCentered) {
+  .ui.centered.ad {
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+& when (@variationAdTest) {
+  .ui.test.ad {
+    position: relative;
+    background: @testBackground;
+  }
+  .ui.test.ad:after {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 100%;
+    text-align: center;
+    transform: translateX(-50%) translateY(-50%);
+
+    content: @testText;
+    color: @testColor;
+    font-size: @testFontSize;
+    font-weight: @testFontWeight;
+  }
+  & when (@variationAdMobile) {
+    .ui.mobile.test.ad:after {
+      font-size: @testMobileFontSize;
+    }
+  }
+  .ui.test.ad[data-text]:after {
+    content: attr(data-text);
+  }
+}
+
+.loadUIOverrides();
diff --git a/semantic/src/definitions/views/card.less b/semantic/src/definitions/views/card.less
new file mode 100644
index 0000000..fba8aee
--- /dev/null
+++ b/semantic/src/definitions/views/card.less
@@ -0,0 +1,978 @@
+/*!
+ * # Fomantic-UI - Card
+ * http://github.com/fomantic/Fomantic-UI/
+ *
+ *
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ */
+
+/*******************************
+            Theme
+*******************************/
+
+@type    : 'view';
+@element : 'card';
+
+@import (multiple) '../../theme.config';
+
+/*******************************
+            Standard
+*******************************/
+
+/*--------------
+      Card
+---------------*/
+
+.ui.cards > .card,
+.ui.card {
+  max-width: 100%;
+  position: relative;
+  display: @display;
+  flex-direction: column;
+
+  width: @width;
+  min-height: @minHeight;
+  background: @background;
+  padding: @padding;
+
+  border: @border;
+  border-radius: @borderRadius;
+  box-shadow: @boxShadow;
+  transition: @transition;
+  z-index: @zIndex;
+  word-wrap: break-word;
+}
+.ui.card {
+  margin: @margin;
+}
+
+.ui.cards > .card a,
+.ui.card a {
+  cursor: pointer;
+}
+
+.ui.card:first-child {
+  margin-top: 0;
+}
+.ui.card:last-child {
+  margin-bottom: 0;
+}
+
+/*--------------
+      Cards
+---------------*/
+
+.ui.cards {
+  display: @groupDisplay;
+  margin: @groupMargin;
+  flex-wrap: wrap;
+}
+
+.ui.cards > .card {
+  display: @groupCardDisplay;
+  margin: @groupCardMargin;
+  float: @groupCardFloat;
+}
+
+/* Clearing */
+.ui.cards:after,
+.ui.card:after {
+  display: block;
+  content: ' ';
+  height: 0;
+  clear: both;
+  overflow: hidden;
+  visibility: hidden;
+}
+
+
+/* Consecutive Card Groups Preserve Row Spacing */
+.ui.cards ~ .ui.cards {
+  margin-top: @consecutiveGroupDistance;
+}
+
+
+/*--------------
+  Rounded Edges
+---------------*/
+
+.ui.cards > .card > :first-child,
+.ui.card > :first-child {
+  border-radius: @borderRadius @borderRadius 0 0 !important;
+  border-top: none !important;
+}
+
+.ui.cards > .card > :last-child,
+.ui.card > :last-child {
+  border-radius: 0 0 @borderRadius @borderRadius !important;
+}
+
+.ui.cards > .card > :only-child,
+.ui.card > :only-child {
+  border-radius: @borderRadius !important;
+}
+
+/*--------------
+     Images
+---------------*/
+
+.ui.cards > .card > .image,
+.ui.card > .image {
+  position: relative;
+  display: block;
+  flex: 0 0 auto;
+  padding: @imagePadding;
+  background: @imageBackground;
+}
+.ui.cards > .card > .image > img,
+.ui.card > .image > img {
+  display: block;
+  width: 100%;
+  height: auto;
+  border-radius: inherit;
+}
+.ui.cards > .card > .image:not(.ui) > img,
+.ui.card > .image:not(.ui) > img {
+  border: @imageBorder;
+}
+
+/*--------------
+     Content
+---------------*/
+
+.ui.cards > .card > .content,
+.ui.card > .content {
+  flex-grow: 1;
+  border: @contentBorder;
+  border-top: @contentDivider;
+  background: @contentBackground;
+  margin: @contentMargin;
+  padding: @contentPadding;
+  box-shadow: @contentBoxShadow;
+  font-size: @contentFontSize;
+  border-radius: @contentBorderRadius;
+}
+
+.ui.cards > .card > .content:after,
+.ui.card > .content:after {
+  display: block;
+  content: ' ';
+  height: 0;
+  clear: both;
+  overflow: hidden;
+  visibility: hidden;
+}
+
+.ui.cards > .card > .content > .header,
+.ui.card > .content > .header {
+  display: block;
+  margin: @headerMargin;
+  font-family: @headerFont;
+  color: @headerColor;
+}
+
+/* Default Header Size */
+.ui.cards > .card > .content > .header:not(.ui),
+.ui.card > .content > .header:not(.ui) {
+  font-weight: @headerFontWeight;
+  font-size: @headerFontSize;
+  margin-top: @headerLineHeightOffset;
+  line-height: @headerLineHeight;
+}
+
+.ui.cards > .card > .content > .meta + .description,
+.ui.cards > .card > .content > .header + .description,
+.ui.card > .content > .meta + .description,
+.ui.card > .content > .header + .description  {
+  margin-top: @descriptionDistance;
+}
+
+/*----------------
+ Floated Content
+-----------------*/
+
+.ui.cards > .card  [class*="left floated"],
+.ui.card [class*="left floated"] {
+  float: left;
+}
+.ui.cards > .card [class*="right floated"],
+.ui.card [class*="right floated"] {
+  float: right;
+}
+
+/*--------------
+     Aligned
+---------------*/
+
+.ui.cards > .card  [class*="left aligned"],
+.ui.card [class*="left aligned"] {
+  text-align: left;
+}
+.ui.cards > .card [class*="center aligned"],
+.ui.card [class*="center aligned"] {
+  text-align: center;
+}
+.ui.cards > .card [class*="right aligned"],
+.ui.card [class*="right aligned"] {
+  text-align: right;
+}
+
+
+/*--------------
+  Content Image
+---------------*/
+
+.ui.cards > .card .content img,
+.ui.card .content img {
+  display: inline-block;
+  vertical-align: @contentImageVerticalAlign;
+  width: @contentImageWidth;
+}
+.ui.cards > .card img.avatar,
+.ui.cards > .card .avatar img,
+.ui.card img.avatar,
+.ui.card .avatar img {
+  width: @avatarSize;
+  height: @avatarSize;
+  border-radius: @avatarBorderRadius;
+}
+
+
+/*--------------
+   Description
+---------------*/
+
+.ui.cards > .card > .content > .description,
+.ui.card > .content > .description {
+  clear: both;
+  color: @descriptionColor;
+}
+
+/*--------------
+    Paragraph
+---------------*/
+
+.ui.cards > .card > .content p,
+.ui.card > .content p {
+  margin: 0 0 @paragraphDistance;
+}
+.ui.cards > .card > .content p:last-child,
+.ui.card > .content p:last-child {
+  margin-bottom: 0;
+}
+
+/*--------------
+      Meta
+---------------*/
+
+.ui.cards > .card .meta,
+.ui.card .meta {
+  font-size: @metaFontSize;
+  color: @metaColor;
+}
+.ui.cards > .card .meta *,
+.ui.card .meta * {
+  margin-right: @metaSpacing;
+}
+.ui.cards > .card .meta :last-child,
+.ui.card .meta :last-child {
+  margin-right: 0;
+}
+
+.ui.cards > .card .meta [class*="right floated"],
+.ui.card .meta [class*="right floated"] {
+  margin-right: 0;
+  margin-left: @metaSpacing;
+}
+
+/*--------------
+      Links
+---------------*/
+
+/* Generic */
+.ui.cards > .card > .content a:not(.ui),
+.ui.card > .content a:not(.ui) {
+  color: @contentLinkColor;
+  transition: @contentLinkTransition;
+}
+.ui.cards > .card > .content a:not(.ui):hover,
+.ui.card > .content a:not(.ui):hover {
+  color: @contentLinkHoverColor;
+}
+
+/* Header */
+.ui.cards > .card > .content > a.header,
+.ui.card > .content > a.header {
+  color: @headerLinkColor;
+}
+.ui.cards > .card > .content > a.header:hover,
+.ui.card > .content > a.header:hover {
+  color: @headerLinkHoverColor;
+}
+
+/* Meta */
+.ui.cards > .card .meta > a:not(.ui),
+.ui.card .meta > a:not(.ui) {
+  color: @metaLinkColor;
+}
+.ui.cards > .card .meta > a:not(.ui):hover,
+.ui.card .meta > a:not(.ui):hover {
+  color: @metaLinkHoverColor;
+}
+
+/*--------------
+     Buttons
+---------------*/
+
+.ui.cards > .card > .buttons,
+.ui.card > .buttons,
+.ui.cards > .card > .button,
+.ui.card > .button {
+  margin: @buttonMargin;
+  width: @buttonWidth;
+  &:last-child {
+    margin-bottom: -@borderWidth;
+  }
+}
+
+/*--------------
+      Dimmer
+---------------*/
+
+.ui.cards > .card .dimmer,
+.ui.card .dimmer {
+  background: @dimmerColor;
+  z-index: @dimmerZIndex;
+}
+
+/*--------------
+     Labels
+---------------*/
+
+/*-----Star----- */
+
+/* Icon */
+.ui.cards > .card > .content .star.icon,
+.ui.card > .content .star.icon {
+  cursor: pointer;
+  opacity: @actionOpacity;
+  transition: @actionTransition;
+}
+.ui.cards > .card > .content .star.icon:hover,
+.ui.card > .content .star.icon:hover {
+  opacity: @actionHoverOpacity;
+  color: @starColor;
+}
+.ui.cards > .card > .content .active.star.icon,
+.ui.card > .content .active.star.icon {
+  color: @starActiveColor;
+}
+
+/*-----Like----- */
+
+/* Icon */
+.ui.cards > .card > .content .like.icon,
+.ui.card > .content .like.icon {
+  cursor: pointer;
+  opacity: @actionOpacity;
+  transition: @actionTransition;
+}
+.ui.cards > .card > .content .like.icon:hover,
+.ui.card > .content .like.icon:hover {
+  opacity: @actionHoverOpacity;
+  color: @likeColor;
+}
+.ui.cards > .card > .content .active.like.icon,
+.ui.card > .content .active.like.icon {
+  color: @likeActiveColor;
+}
+
+/*----------------
+  Extra Content
+-----------------*/
+
+.ui.cards > .card > .extra,
+.ui.card > .extra {
+  max-width: 100%;
+  min-height: 0 !important;
+  flex-grow: 0;
+  border-top: @extraDivider !important;
+  position: @extraPosition;
+  background: @extraBackground;
+  width: @extraWidth;
+  margin: @extraMargin;
+  padding: @extraPadding;
+  top: @extraTop;
+  left: @extraLeft;
+  color: @extraColor;
+  box-shadow: @extraBoxShadow;
+  transition: @extraTransition;
+}
+.ui.cards > .card > .extra a:not(.ui),
+.ui.card > .extra a:not(.ui) {
+  color: @extraLinkColor;
+}
+.ui.cards > .card > .extra a:not(.ui):hover,
+.ui.card > .extra a:not(.ui):hover {
+  color: @extraLinkHoverColor;
+}
+
+
+/*******************************
+           Variations
+*******************************/
+
+& when (@variationCardHorizontal) {
+  /*-------------------
+        Horizontal
+  --------------------*/
+
+  .ui.horizontal.cards > .card,
+  .ui.card.horizontal {
+    flex-direction: row;
+    flex-wrap: wrap;
+    min-width: @horizontalMinWidth;
+    width: @horizontalWidth;
+    max-width: 100%;
+  }
+
+  .ui.horizontal.cards > .card > .image,
+  .ui.card.horizontal > .image {
+    border-radius: @defaultBorderRadius 0 0 @defaultBorderRadius;
+    width: @horizontalImageWidth;
+  }
+
+  .ui.horizontal.cards > .card > .image > img,
+  .ui.card.horizontal > .image > img {
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center;
+    justify-content: center;
+    align-items: center;
+    display: -webkit-box;
+    display: -moz-box;
+    display: -ms-flexbox;
+    display: -webkit-flex;
+    display: flex;
+    width: 100%;
+    height: 100%;
+    border-radius: @defaultBorderRadius 0 0 @defaultBorderRadius;
+  }
+  .ui.horizontal.cards > .card > .image:last-child > img,
+  .ui.card.horizontal > .image:last-child > img {
+    border-radius: 0 @defaultBorderRadius @defaultBorderRadius 0;
+  }
+  .ui.horizontal.cards > .card > .content, .ui.horizontal.card > .content {
+    flex-basis: 1px;
+  }
+  .ui.horizontal.cards > .card > .extra, .ui.horizontal.card > .extra {
+    flex-basis: 100%;
+  }
+}
+
+& when (@variationCardRaised) {
+  /*-------------------
+         Raised
+  --------------------*/
+
+  .ui.raised.cards > .card,
+  .ui.raised.card {
+    box-shadow: @raisedShadow;
+  }
+  & when (@variationCardLink) {
+    .ui.raised.cards a.card:hover,
+    .ui.link.cards .raised.card:hover,
+    a.ui.raised.card:hover,
+    .ui.link.raised.card:hover {
+      box-shadow: @raisedShadowHover;
+    }
+  }
+}
+
+& when (@variationCardCentered) {
+  /*-------------------
+         Centered
+  --------------------*/
+
+  .ui.centered.cards {
+    justify-content: center;
+  }
+  .ui.centered.card {
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+
+& when (@variationCardFluid) {
+  /*-------------------
+          Fluid
+  --------------------*/
+
+  .ui.fluid.card {
+    width: 100%;
+    max-width: 9999px;
+  }
+}
+
+& when (@variationCardLink) {
+  /*-------------------
+          Link
+  --------------------*/
+
+  .ui.cards a.card,
+  .ui.link.cards .card,
+  a.ui.card,
+  .ui.link.card {
+    transform: none;
+  }
+
+
+  .ui.cards a.card:hover,
+  .ui.link.cards .card:not(.icon):hover,
+  a.ui.card:hover,
+  .ui.link.card:hover {
+    cursor: pointer;
+    z-index: @linkHoverZIndex;
+    background: @linkHoverBackground;
+    border: @linkHoverBorder;
+    box-shadow: @linkHoverBoxShadow;
+    transform: @linkHoverTransform;
+  }
+}
+
+/*-------------------
+       Colors
+--------------------*/
+
+each(@colors,{
+  @color: replace(@key,'@','');
+  @c: @colors[@@color][color];
+  @h: @colors[@@color][hover];
+  @l: @colors[@@color][light];
+  @lh: @colors[@@color][lightHover];
+
+  .ui.@{color}.cards > .card,
+  .ui.cards > .@{color}.card,
+  .ui.@{color}.card {
+    box-shadow:
+            @borderShadow,
+            0 @coloredShadowDistance 0 0 @c,
+            @shadowBoxShadow
+  ;
+    &:hover {
+    box-shadow:
+            @borderShadow,
+            0 @coloredShadowDistance 0 0 @h,
+            @shadowHoverBoxShadow
+    ;
+    }
+  }
+  & when (@variationCardInverted) {
+    .ui.inverted.@{color}.cards > .card,
+    .ui.inverted.cards > .@{color}.card,
+    .ui.inverted.@{color}.card {
+      box-shadow:
+              0 @shadowDistance 3px 0 @solidWhiteBorderColor,
+              0 @coloredShadowDistance 0 0 @l,
+              0 0 0 @borderWidth @solidWhiteBorderColor
+    ;
+      &:hover {
+      box-shadow:
+              0 @shadowDistance 3px 0 @solidWhiteBorderColor,
+              0 @coloredShadowDistance 0 0 @lh,
+              0 0 0 @borderWidth @solidWhiteBorderColor
+      ;
+      }
+    }
+  }
+})
+
+/*--------------
+   Card Count
+---------------*/
+
+.ui.one.cards {
+  margin-left: @oneCardOffset;
+  margin-right: @oneCardOffset;
+}
+.ui.one.cards > .card {
+  width: @oneCard;
+}
+
+.ui.two.cards {
+  margin-left: @twoCardOffset;
+  margin-right: @twoCardOffset;
+}
+.ui.two.cards > .card {
+  width: @twoCard;
+  margin-left: @twoCardSpacing;
+  margin-right: @twoCardSpacing;
+}
+
+.ui.three.cards {
+  margin-left: @threeCardOffset;
+  margin-right: @threeCardOffset;
+}
+.ui.three.cards > .card {
+  width: @threeCard;
+  margin-left: @threeCardSpacing;
+  margin-right: @threeCardSpacing;
+}
+
+.ui.four.cards {
+  margin-left: @fourCardOffset;
+  margin-right: @fourCardOffset;
+}
+.ui.four.cards > .card {
+  width: @fourCard;
+  margin-left: @fourCardSpacing;
+  margin-right: @fourCardSpacing;
+}
+
+.ui.five.cards {
+  margin-left: @fiveCardOffset;
+  margin-right: @fiveCardOffset;
+}
+.ui.five.cards > .card {
+  width: @fiveCard;
+  margin-left: @fiveCardSpacing;
+  margin-right: @fiveCardSpacing;
+}
+
+.ui.six.cards {
+  margin-left: @sixCardOffset;
+  margin-right: @sixCardOffset;
+}
+.ui.six.cards > .card {
+  width: @sixCard;
+  margin-left: @sixCardSpacing;
+  margin-right: @sixCardSpacing;
+}
+
+.ui.seven.cards {
+  margin-left: @sevenCardOffset;
+  margin-right: @sevenCardOffset;
+}
+.ui.seven.cards > .card {
+  width: @sevenCard;
+  margin-left: @sevenCardSpacing;
+  margin-right: @sevenCardSpacing;
+}
+
+.ui.eight.cards {
+  margin-left: @eightCardOffset;
+  margin-right: @eightCardOffset;
+}
+.ui.eight.cards > .card {
+  width: @eightCard;
+  margin-left: @eightCardSpacing;
+  margin-right: @eightCardSpacing;
+  font-size: 11px;
+}
+
+.ui.nine.cards {
+  margin-left: @nineCardOffset;
+  margin-right: @nineCardOffset;
+}
+.ui.nine.cards > .card {
+  width: @nineCard;
+  margin-left: @nineCardSpacing;
+  margin-right: @nineCardSpacing;
+  font-size: 10px;
+}
+
+.ui.ten.cards {
+  margin-left: @tenCardOffset;
+  margin-right: @tenCardOffset;
+}
+.ui.ten.cards > .card {
+  width: @tenCard;
+  margin-left: @tenCardSpacing;
+  margin-right: @tenCardSpacing;
+}
+
+& when (@variationCardDoubling) {
+  /*-------------------
+        Doubling
+  --------------------*/
+
+  /* Mobile Only */
+  @media only screen and (max-width : @largestMobileScreen) {
+    .ui.two.doubling.cards {
+      margin-left: @oneCardOffset;
+      margin-right: @oneCardOffset;
+    }
+    .ui.two.doubling.cards > .card {
+      width: @oneCard;
+      margin-left: @oneCardSpacing;
+      margin-right: @oneCardSpacing;
+    }
+    .ui.three.doubling.cards {
+      margin-left: @twoCardOffset;
+      margin-right: @twoCardOffset;
+    }
+    .ui.three.doubling.cards > .card {
+      width: @twoCard;
+      margin-left: @twoCardSpacing;
+      margin-right: @twoCardSpacing;
+    }
+    .ui.four.doubling.cards {
+      margin-left: @twoCardOffset;
+      margin-right: @twoCardOffset;
+    }
+    .ui.four.doubling.cards > .card {
+      width: @twoCard;
+      margin-left: @twoCardSpacing;
+      margin-right: @twoCardSpacing;
+    }
+    .ui.five.doubling.cards {
+      margin-left: @twoCardOffset;
+      margin-right: @twoCardOffset;
+    }
+    .ui.five.doubling.cards > .card {
+      width: @twoCard;
+      margin-left: @twoCardSpacing;
+      margin-right: @twoCardSpacing;
+    }
+    .ui.six.doubling.cards {
+      margin-left: @twoCardOffset;
+      margin-right: @twoCardOffset;
+    }
+    .ui.six.doubling.cards > .card {
+      width: @twoCard;
+      margin-left: @twoCardSpacing;
+      margin-right: @twoCardSpacing;
+    }
+    .ui.seven.doubling.cards {
+      margin-left: @threeCardOffset;
+      margin-right: @threeCardOffset;
+    }
+    .ui.seven.doubling.cards > .card {
+      width: @threeCard;
+      margin-left: @threeCardSpacing;
+      margin-right: @threeCardSpacing;
+    }
+    .ui.eight.doubling.cards {
+      margin-left: @threeCardOffset;
+      margin-right: @threeCardOffset;
+    }
+    .ui.eight.doubling.cards > .card {
+      width: @threeCard;
+      margin-left: @threeCardSpacing;
+      margin-right: @threeCardSpacing;
+    }
+    .ui.nine.doubling.cards {
+      margin-left: @threeCardOffset;
+      margin-right: @threeCardOffset;
+    }
+    .ui.nine.doubling.cards > .card {
+      width: @threeCard;
+      margin-left: @threeCardSpacing;
+      margin-right: @threeCardSpacing;
+    }
+    .ui.ten.doubling.cards {
+      margin-left: @threeCardOffset;
+      margin-right: @threeCardOffset;
+    }
+    .ui.ten.doubling.cards > .card {
+      width: @threeCard;
+      margin-left: @threeCardSpacing;
+      margin-right: @threeCardSpacing;
+    }
+  }
+
+  /* Tablet Only */
+  @media only screen and (min-width : @tabletBreakpoint) and (max-width : @largestTabletScreen) {
+    .ui.two.doubling.cards {
+      margin-left: @oneCardOffset;
+      margin-right: @oneCardOffset;
+    }
+    .ui.two.doubling.cards > .card {
+      width: @oneCard;
+      margin-left: @oneCardSpacing;
+      margin-right: @oneCardSpacing;
+    }
+    .ui.three.doubling.cards {
+      margin-left: @twoCardOffset;
+      margin-right: @twoCardOffset;
+    }
+    .ui.three.doubling.cards > .card {
+      width: @twoCard;
+      margin-left: @twoCardSpacing;
+      margin-right: @twoCardSpacing;
+    }
+    .ui.four.doubling.cards {
+      margin-left: @twoCardOffset;
+      margin-right: @twoCardOffset;
+    }
+    .ui.four.doubling.cards > .card {
+      width: @twoCard;
+      margin-left: @twoCardSpacing;
+      margin-right: @twoCardSpacing;
+    }
+    .ui.five.doubling.cards {
+      margin-left: @threeCardOffset;
+      margin-right: @threeCardOffset;
+    }
+    .ui.five.doubling.cards > .card {
+      width: @threeCard;
+      margin-left: @threeCardSpacing;
+      margin-right: @threeCardSpacing;
+    }
+    .ui.six.doubling.cards {
+      margin-left: @threeCardOffset;
+      margin-right: @threeCardOffset;
+    }
+    .ui.six.doubling.cards > .card {
+      width: @threeCard;
+      margin-left: @threeCardSpacing;
+      margin-right: @threeCardSpacing;
+    }
+    .ui.eight.doubling.cards {
+      margin-left: @threeCardOffset;
+      margin-right: @threeCardOffset;
+    }
+    .ui.eight.doubling.cards > .card {
+      width: @threeCard;
+      margin-left: @threeCardSpacing;
+      margin-right: @threeCardSpacing;
+    }
+    .ui.eight.doubling.cards {
+      margin-left: @fourCardOffset;
+      margin-right: @fourCardOffset;
+    }
+    .ui.eight.doubling.cards > .card {
+      width: @fourCard;
+      margin-left: @fourCardSpacing;
+      margin-right: @fourCardSpacing;
+    }
+    .ui.nine.doubling.cards {
+      margin-left: @fourCardOffset;
+      margin-right: @fourCardOffset;
+    }
+    .ui.nine.doubling.cards > .card {
+      width: @fourCard;
+      margin-left: @fourCardSpacing;
+      margin-right: @fourCardSpacing;
+    }
+    .ui.ten.doubling.cards {
+      margin-left: @fiveCardOffset;
+      margin-right: @fiveCardOffset;
+    }
+    .ui.ten.doubling.cards > .card {
+      width: @fiveCard;
+      margin-left: @fiveCardSpacing;
+      margin-right: @fiveCardSpacing;
+    }
+  }
+}
+
+& when (@variationCardStackable) {
+  /*-------------------
+        Stackable
+  --------------------*/
+
+  @media only screen and (max-width : @largestMobileScreen) {
+    .ui.stackable.cards {
+      display: block !important;
+    }
+    .ui.stackable.cards .card:first-child {
+      margin-top: 0 !important;
+    }
+    .ui.stackable.cards > .card {
+      display: block !important;
+      height: auto !important;
+      margin: @stackableRowSpacing @stackableCardSpacing;
+      padding: 0 !important;
+      width: @stackableMargin !important;
+    }
+  }
+}
+
+/*--------------
+      Size
+---------------*/
+
+.ui.cards > .card {
+  font-size: @medium;
+}
+& when not (@variationCardSizes = false) {
+  each(@variationCardSizes, {
+    @s: @@value;
+    .ui.@{value}.cards .card {
+      font-size: @s;
+    }
+  })
+}
+
+& when (@variationCardInverted) {
+  /*-----------------
+        Inverted
+  ------------------*/
+
+  .ui.inverted.cards > .card,
+  .ui.inverted.card {
+    background: @invertedBackground;
+    box-shadow: @invertedBoxShadow;
+  }
+
+  /* Content */
+  .ui.inverted.cards > .card > .content,
+  .ui.inverted.card > .content {
+    border-top: @invertedContentDivider;
+  }
+
+  /* Header */
+  .ui.inverted.cards > .card > .content > .header,
+  .ui.inverted.card > .content > .header {
+    color: @invertedHeaderColor;
+  }
+
+  /* Description */
+  .ui.inverted.cards > .card > .content > .description,
+  .ui.inverted.card > .content > .description {
+    color: @invertedDescriptionColor;
+  }
+
+  /* Meta */
+  .ui.inverted.cards > .card .meta,
+  .ui.inverted.card .meta {
+    color: @invertedMetaColor;
+  }
+  .ui.inverted.cards > .card .meta > a:not(.ui),
+  .ui.inverted.card .meta > a:not(.ui) {
+    color: @invertedMetaLinkColor;
+  }
+  .ui.inverted.cards > .card .meta > a:not(.ui):hover,
+  .ui.inverted.card .meta > a:not(.ui):hover {
+    color: @invertedMetaLinkHoverColor;
+  }
+
+  /* Extra */
+  .ui.inverted.cards > .card > .extra,
+  .ui.inverted.card > .extra {
+    border-top: @invertedExtraDivider !important;
+    color: @invertedExtraColor;
+  }
+  .ui.inverted.cards > .card > .extra a:not(.ui),
+  .ui.inverted.card > .extra a:not(.ui) {
+    color: @invertedExtraLinkColor;
+  }
+  .ui.inverted.cards > .card > .extra a:not(.ui):hover,
+  .ui.inverted.card > .extra a:not(.ui):hover {
+    color: @extraLinkHoverColor;
+  }
+
+  /* Link card(s) */
+  .ui.inverted.cards a.card:hover,
+  .ui.inverted.link.cards .card:not(.icon):hover,
+  a.inverted.ui.card:hover,
+  .ui.inverted.link.card:hover {
+    background: @invertedLinkHoverBackground;
+  }
+}
+
+
+.loadUIOverrides();
diff --git a/semantic/src/definitions/views/comment.less b/semantic/src/definitions/views/comment.less
new file mode 100644
index 0000000..fedf40e
--- /dev/null
+++ b/semantic/src/definitions/views/comment.less
@@ -0,0 +1,291 @@
+/*!
+ * # Fomantic-UI - Comment
+ * http://github.com/fomantic/Fomantic-UI/
+ *
+ *
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ */
+
+
+/*******************************
+            Theme
+*******************************/
+
+@type    : 'view';
+@element : 'comment';
+
+@import (multiple) '../../theme.config';
+
+/*******************************
+            Standard
+*******************************/
+
+
+/*--------------
+    Comments
+---------------*/
+
+.ui.comments {
+  margin: @margin;
+  max-width: @maxWidth;
+}
+
+.ui.comments:first-child {
+  margin-top: 0;
+}
+.ui.comments:last-child {
+  margin-bottom: 0;
+}
+
+/*--------------
+     Comment
+---------------*/
+
+.ui.comments .comment {
+  position: relative;
+  background: @commentBackground;
+  margin: @commentMargin;
+  padding: @commentPadding;
+  border: @commentBorder;
+  border-top: @commentDivider;
+  line-height: @commentLineHeight;
+}
+.ui.comments .comment:first-child {
+  margin-top: @firstCommentMargin;
+  padding-top: @firstCommentPadding;
+}
+
+
+/*--------------------
+    Nested Comments
+---------------------*/
+
+.ui.comments .comment > .comments {
+  margin: @nestedCommentsMargin;
+  padding: @nestedCommentsPadding;
+}
+.ui.comments .comment > .comments:before{
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+.ui.comments .comment > .comments .comment {
+  border: @nestedCommentBorder;
+  border-top: @nestedCommentDivider;
+  background: @nestedCommentBackground;
+}
+
+/*--------------
+     Avatar
+---------------*/
+
+.ui.comments .comment .avatar {
+  display: @avatarDisplay;
+  width: @avatarWidth;
+  height: @avatarHeight;
+  float: @avatarFloat;
+  margin: @avatarMargin;
+}
+.ui.comments .comment img.avatar,
+.ui.comments .comment .avatar img {
+  display: block;
+  margin: 0 auto;
+  width: 100%;
+  height: 100%;
+  border-radius: @avatarBorderRadius;
+}
+
+/*--------------
+     Content
+---------------*/
+
+.ui.comments .comment > .content {
+  display: block;
+}
+/* If there is an avatar move content over */
+.ui.comments .comment > .avatar ~ .content {
+  margin-left: @contentMargin;
+}
+
+/*--------------
+     Author
+---------------*/
+
+.ui.comments .comment .author {
+  font-size: @authorFontSize;
+  color: @authorColor;
+  font-weight: @authorFontWeight;
+}
+.ui.comments .comment a.author {
+  cursor: pointer;
+}
+.ui.comments .comment a.author:hover {
+  color: @authorHoverColor;
+}
+
+/*--------------
+     Metadata
+---------------*/
+
+.ui.comments .comment .metadata {
+  display: @metadataDisplay;
+  margin-left: @metadataSpacing;
+  color: @metadataColor;
+  font-size: @metadataFontSize;
+}
+.ui.comments .comment .metadata > * {
+  display: inline-block;
+  margin: 0 @metadataContentSpacing 0 0;
+}
+.ui.comments .comment .metadata > :last-child {
+  margin-right: 0;
+}
+
+/*--------------------
+     Comment Text
+---------------------*/
+
+.ui.comments .comment .text {
+  margin: @textMargin;
+  font-size: @textFontSize;
+  word-wrap: @textWordWrap;
+  color: @textColor;
+  line-height: @textLineHeight;
+}
+
+
+/*--------------------
+     User Actions
+---------------------*/
+
+.ui.comments .comment .actions {
+  font-size: @actionFontSize;
+}
+.ui.comments .comment .actions a {
+  cursor: pointer;
+  display: inline-block;
+  margin: 0 @actionContentDistance 0 0;
+  color: @actionLinkColor;
+}
+.ui.comments .comment .actions a:last-child {
+  margin-right: 0;
+}
+.ui.comments .comment .actions a.active,
+.ui.comments .comment .actions a:hover {
+  color: @actionLinkHoverColor;
+}
+
+/*--------------------
+      Reply Form
+---------------------*/
+
+.ui.comments > .reply.form {
+  margin-top: @replyDistance;
+}
+.ui.comments .comment .reply.form {
+  width: 100%;
+  margin-top: @commentReplyDistance;
+}
+.ui.comments .reply.form textarea {
+  font-size: @replyFontSize;
+  height: @replyHeight;
+}
+
+/*******************************
+            State
+*******************************/
+
+.ui.collapsed.comments,
+.ui.comments .collapsed.comments,
+.ui.comments .collapsed.comment {
+  display: none;
+}
+
+
+/*******************************
+           Variations
+*******************************/
+
+& when (@variationCommentThreaded) {
+  /*--------------------
+          Threaded
+  ---------------------*/
+
+  .ui.threaded.comments .comment > .comments {
+    margin: @threadedCommentMargin;
+    padding: @threadedCommentPadding;
+    box-shadow: @threadedCommentBoxShadow;
+  }
+}
+
+& when (@variationCommentMinimal) {
+  /*--------------------
+          Minimal
+  ---------------------*/
+
+  .ui.minimal.comments .comment .actions {
+    opacity: 0;
+    position: @minimalActionPosition;
+    top: @minimalActionTop;
+    right: @minimalActionRight;
+    left: @minimalActionLeft;
+    transition: @minimalTransition;
+    transition-delay: @minimalTransitionDelay;
+  }
+  .ui.minimal.comments .comment > .content:hover > .actions {
+    opacity: 1;
+  }
+}
+
+
+/*-------------------
+        Sizes
+--------------------*/
+
+.ui.comments {
+  font-size: @medium;
+}
+& when not (@variationCommentSizes = false) {
+  each(@variationCommentSizes, {
+    @s: @@value;
+    .ui.@{value}.comments  {
+      font-size: @s;
+    }
+  })
+}
+
+
+& when (@variationCommentInverted) {
+  /*-------------------
+          Inverted
+  --------------------*/
+  .ui.inverted.comments .comment {
+    background-color: @black;
+  }
+
+  .ui.inverted.comments .comment .author,
+  .ui.inverted.comments .comment .text {
+    color: @invertedTextColor;
+  }
+
+  .ui.inverted.comments .comment .metadata,
+  .ui.inverted.comments .comment .actions a {
+    color: @invertedLightTextColor;
+  }
+
+  .ui.inverted.comments .comment a.author:hover,
+  .ui.inverted.comments .comment .actions a.active,
+  .ui.inverted.comments .comment .actions a:hover {
+    color: @invertedHoveredTextColor;
+  }
+  & when (@variationCommentThreaded) {
+    .ui.inverted.threaded.comments .comment > .comments {
+      box-shadow: -1px 0 0 @solidWhiteBorderColor;
+    }
+  }
+}
+
+
+.loadUIOverrides();
diff --git a/semantic/src/definitions/views/feed.less b/semantic/src/definitions/views/feed.less
new file mode 100644
index 0000000..20efe8f
--- /dev/null
+++ b/semantic/src/definitions/views/feed.less
@@ -0,0 +1,304 @@
+/*!
+ * # Fomantic-UI - Feed
+ * http://github.com/fomantic/Fomantic-UI/
+ *
+ *
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ */
+
+/*******************************
+            Theme
+*******************************/
+
+@type    : 'view';
+@element : 'feed';
+
+@import (multiple) '../../theme.config';
+
+/*******************************
+         Activity Feed
+*******************************/
+
+.ui.feed {
+  margin: @margin;
+}
+.ui.feed:first-child {
+  margin-top: 0;
+}
+.ui.feed:last-child {
+  margin-bottom: 0;
+}
+
+
+/*******************************
+            Content
+*******************************/
+
+/* Event */
+.ui.feed > .event {
+  display: flex;
+  flex-direction: row;
+  width: @eventWidth;
+  padding: @eventPadding;
+  margin: @eventMargin;
+  background: @eventBackground;
+  border-top: @eventDivider;
+}
+.ui.feed > .event:first-child {
+  border-top: 0;
+  padding-top: 0;
+}
+.ui.feed > .event:last-child {
+  padding-bottom: 0;
+}
+
+/* Event Label */
+.ui.feed > .event > .label {
+  display: block;
+  flex: 0 0 auto;
+  width: @labelWidth;
+  height: @labelHeight;
+  align-self: @labelAlignSelf;
+  text-align: @labelTextAlign;
+}
+.ui.feed > .event > .label .icon {
+  opacity: @iconLabelOpacity;
+  font-size: @iconLabelSize;
+  width: @iconLabelWidth;
+  padding: @iconLabelPadding;
+  background: @iconLabelBackground;
+  border: @iconLabelBorder;
+  border-radius: @iconLabelBorderRadius;
+  color: @iconLabelColor;
+}
+.ui.feed > .event > .label img {
+  width: @imageLabelWidth;
+  height: @imageLabelHeight;
+  border-radius: @imageLabelBorderRadius;
+}
+.ui.feed > .event > .label + .content {
+  margin: @labeledContentMargin;
+}
+
+/*--------------
+     Content
+---------------*/
+
+/* Content */
+.ui.feed > .event > .content {
+  display: block;
+  flex: 1 1 auto;
+  align-self: @contentAlignSelf;
+  text-align: @contentTextAlign;
+  word-wrap: @contentWordWrap;
+}
+.ui.feed > .event:last-child > .content {
+  padding-bottom: @lastLabeledContentPadding;
+}
+
+/* Link */
+.ui.feed > .event > .content a {
+  cursor: pointer;
+}
+
+/*--------------
+      Date
+---------------*/
+
+.ui.feed > .event > .content .date {
+  margin: @dateMargin;
+  padding: @datePadding;
+  color: @dateColor;
+  font-weight: @dateFontWeight;
+  font-size: @dateFontSize;
+  font-style: @dateFontStyle;
+}
+
+/*--------------
+     Summary
+---------------*/
+
+.ui.feed > .event > .content .summary {
+  margin: @summaryMargin;
+  font-size: @summaryFontSize;
+  font-weight: @summaryFontWeight;
+  color: @summaryColor;
+}
+
+/* Summary Image */
+.ui.feed > .event > .content .summary img {
+  display: inline-block;
+  width: @summaryImageWidth;
+  height: @summaryImageHeight;
+  margin: @summaryImageMargin;
+  border-radius: @summaryImageBorderRadius;
+  vertical-align: @summaryImageVerticalAlign;
+}
+/*--------------
+      User
+---------------*/
+
+.ui.feed > .event > .content .user {
+  display: inline-block;
+  font-weight: @userFontWeight;
+  margin-right: @userDistance;
+  vertical-align: baseline;
+}
+.ui.feed > .event > .content .user img {
+  margin: @userImageMargin;
+  width: @userImageWidth;
+  height: @userImageHeight;
+  vertical-align: @userImageVerticalAlign;
+}
+/*--------------
+   Inline Date
+---------------*/
+
+/* Date inside Summary */
+.ui.feed > .event > .content .summary > .date {
+  display: @summaryDateDisplay;
+  float: @summaryDateFloat;
+  font-weight: @summaryDateFontWeight;
+  font-size: @summaryDateFontSize;
+  font-style: @summaryDateFontStyle;
+  margin: @summaryDateMargin;
+  padding: @summaryDatePadding;
+  color: @summaryDateColor;
+}
+
+/*--------------
+  Extra Summary
+---------------*/
+
+.ui.feed > .event > .content .extra {
+  margin: @extraMargin;
+  background: @extraBackground;
+  padding: @extraPadding;
+  color: @extraColor;
+}
+
+/* Images */
+.ui.feed > .event > .content .extra.images img {
+  display: inline-block;
+  margin: @extraImageMargin;
+  width: @extraImageWidth;
+}
+
+/* Text */
+.ui.feed > .event > .content .extra.text {
+  padding: @extraTextPadding;
+  border-left: @extraTextPointer;
+  font-size: @extraTextFontSize;
+  max-width: @extraTextMaxWidth;
+  line-height: @extraTextLineHeight;
+}
+
+/*--------------
+      Meta
+---------------*/
+
+.ui.feed > .event > .content .meta {
+  display: @metadataDisplay;
+  font-size: @metadataFontSize;
+  margin: @metadataMargin;
+  background: @metadataBackground;
+  border: @metadataBorder;
+  border-radius: @metadataBorderRadius;
+  box-shadow: @metadataBoxShadow;
+  padding: @metadataPadding;
+  color: @metadataColor;
+}
+
+.ui.feed > .event > .content .meta > * {
+  position: relative;
+  margin-left: @metadataElementSpacing;
+}
+.ui.feed > .event > .content .meta > *:after {
+  content: @metadataDivider;
+  color: @metadataDividerColor;
+  top: 0;
+  left: @metadataDividerOffset;
+  opacity: 1;
+  position: absolute;
+  vertical-align: top;
+}
+
+.ui.feed > .event > .content .meta .like {
+  color: @likeColor;
+  transition: @likeTransition;
+}
+.ui.feed > .event > .content .meta .like:hover i.icon {
+  color: @likeHoverColor;
+}
+.ui.feed > .event > .content .meta .active.like i.icon {
+  color: @likeActiveColor;
+}
+
+/* First element */
+.ui.feed > .event > .content .meta > :first-child {
+  margin-left: 0;
+}
+.ui.feed > .event > .content .meta > :first-child::after {
+  display: none;
+}
+
+/* Action */
+.ui.feed > .event > .content .meta a,
+.ui.feed > .event > .content .meta > i.icon {
+  cursor: @metadataActionCursor;
+  opacity: @metadataActionOpacity;
+  color: @metadataActionColor;
+  transition: @metadataActionTransition;
+}
+.ui.feed > .event > .content .meta a:hover,
+.ui.feed > .event > .content .meta a:hover i.icon,
+.ui.feed > .event > .content .meta > i.icon:hover {
+  color: @metadataActionHoverColor;
+}
+
+
+
+/*******************************
+            Variations
+*******************************/
+
+.ui.feed {
+  font-size: @medium;
+}
+& when not (@variationFeedSizes = false) {
+  each(@variationFeedSizes, {
+    @s: @@value;
+    .ui.@{value}.feed  {
+      font-size: @s;
+    }
+  })
+}
+
+& when (@variationFeedInverted) {
+  /*------------------
+        Inverted
+  -------------------*/
+
+  .ui.inverted.feed > .event {
+    background: @black;
+  }
+
+  .ui.inverted.feed > .event > .content .date,
+  .ui.inverted.feed > .event > .content .meta .like {
+    color: @invertedLightTextColor;
+  }
+
+  .ui.inverted.feed > .event > .content .summary,
+  .ui.inverted.feed > .event > .content .extra.text {
+    color: @invertedTextColor;
+  }
+
+  .ui.inverted.feed > .event > .content .meta .like:hover {
+    color: @invertedSelectedTextColor;
+  }
+}
+
+
+.loadUIOverrides();
diff --git a/semantic/src/definitions/views/item.less b/semantic/src/definitions/views/item.less
new file mode 100644
index 0000000..2c9ed2e
--- /dev/null
+++ b/semantic/src/definitions/views/item.less
@@ -0,0 +1,559 @@
+/*!
+ * # Fomantic-UI - Item
+ * http://github.com/fomantic/Fomantic-UI/
+ *
+ *
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ */
+
+/*******************************
+            Theme
+*******************************/
+
+@type    : 'view';
+@element : 'item';
+
+@import (multiple) '../../theme.config';
+
+/*******************************
+            Standard
+*******************************/
+
+/*--------------
+      Item
+---------------*/
+
+.ui.items > .item {
+  display: @display;
+  margin: @itemSpacing 0;
+  width: @width;
+  min-height: @minHeight;
+  background: @background;
+  padding: @padding;
+
+  border: @border;
+  border-radius: @borderRadius;
+  box-shadow: @boxShadow;
+  transition: @transition;
+  z-index: @zIndex;
+}
+.ui.items > .item a {
+  cursor: pointer;
+}
+
+/*--------------
+      Items
+---------------*/
+
+.ui.items {
+  margin: @groupMargin;
+}
+
+.ui.items:first-child {
+  margin-top: 0 !important;
+}
+.ui.items:last-child {
+  margin-bottom: 0 !important;
+}
+
+/*--------------
+      Item
+---------------*/
+
+.ui.items > .item:after {
+  display: block;
+  content: ' ';
+  height: 0;
+  clear: both;
+  overflow: hidden;
+  visibility: hidden;
+}
+.ui.items > .item:first-child {
+  margin-top: 0;
+}
+.ui.items > .item:last-child {
+  margin-bottom: 0;
+}
+
+
+
+/*--------------
+     Images
+---------------*/
+
+.ui.items > .item > .image {
+  position: relative;
+  flex: 0 0 auto;
+  display: @imageDisplay;
+  float: @imageFloat;
+  margin: @imageMargin;
+  padding: @imagePadding;
+  max-height: @imageMaxHeight;
+  align-self: @imageVerticalAlign;
+}
+.ui.items > .item > .image > img {
+  display: block;
+  width: 100%;
+  height: auto;
+  border-radius: @imageBorderRadius;
+  border: @imageBorder;
+}
+
+.ui.items > .item > .image:only-child > img {
+  border-radius: @borderRadius;
+}
+
+
+/*--------------
+     Content
+---------------*/
+
+.ui.items > .item > .content {
+  display: block;
+  flex: 1 1 auto;
+  background: @contentBackground;
+  color: @contentColor;
+  margin: @contentMargin;
+  padding: @contentPadding;
+  box-shadow: @contentBoxShadow;
+  font-size: @contentFontSize;
+  border: @contentBorder;
+  border-radius: @contentBorderRadius;
+}
+.ui.items > .item > .content:after {
+  display: block;
+  content: ' ';
+  height: 0;
+  clear: both;
+  overflow: hidden;
+  visibility: hidden;
+}
+
+.ui.items > .item > .image + .content {
+  min-width: 0;
+  width: @contentWidth;
+  display: @contentDisplay;
+  margin-left: @contentOffset;
+  align-self: @contentVerticalAlign;
+  padding-left: @contentImageDistance;
+}
+
+.ui.items > .item > .content > .header {
+  display: inline-block;
+  margin: @headerMargin;
+  font-family: @headerFont;
+  font-weight: @headerFontWeight;
+  color: @headerColor;
+}
+/* Default Header Size */
+.ui.items > .item > .content > .header:not(.ui) {
+  font-size: @headerFontSize;
+}
+
+/*--------------
+     Floated
+---------------*/
+
+.ui.items > .item [class*="left floated"] {
+  float: left;
+}
+.ui.items > .item [class*="right floated"] {
+  float: right;
+}
+
+
+/*--------------
+  Content Image
+---------------*/
+
+.ui.items > .item .content img {
+  align-self: @contentImageVerticalAlign;
+  width: @contentImageWidth;
+}
+.ui.items > .item img.avatar,
+.ui.items > .item .avatar img {
+  width: @avatarSize;
+  height: @avatarSize;
+  border-radius: @avatarBorderRadius;
+}
+
+
+/*--------------
+   Description
+---------------*/
+
+.ui.items > .item > .content > .description {
+  margin-top: @descriptionDistance;
+  max-width: @descriptionMaxWidth;
+  font-size: @descriptionFontSize;
+  line-height: @descriptionLineHeight;
+  color: @descriptionColor;
+}
+
+/*--------------
+    Paragraph
+---------------*/
+
+.ui.items > .item > .content p {
+  margin: 0 0 @paragraphDistance;
+}
+.ui.items > .item > .content p:last-child {
+  margin-bottom: 0;
+}
+
+/*--------------
+      Meta
+---------------*/
+
+.ui.items > .item .meta {
+  margin: @metaMargin;
+  font-size: @metaFontSize;
+  line-height: @metaLineHeight;
+  color: @metaColor;
+}
+.ui.items > .item .meta * {
+  margin-right: @metaSpacing;
+}
+.ui.items > .item .meta :last-child {
+  margin-right: 0;
+}
+
+.ui.items > .item .meta [class*="right floated"] {
+  margin-right: 0;
+  margin-left: @metaSpacing;
+}
+
+/*--------------
+      Links
+---------------*/
+
+/* Generic */
+.ui.items > .item > .content a:not(.ui) {
+  color: @contentLinkColor;
+  transition: @contentLinkTransition;
+}
+.ui.items > .item > .content a:not(.ui):hover {
+  color: @contentLinkHoverColor;
+}
+
+/* Header */
+.ui.items > .item > .content > a.header {
+  color: @headerLinkColor;
+}
+.ui.items > .item > .content > a.header:hover {
+  color: @headerLinkHoverColor;
+}
+
+/* Meta */
+.ui.items > .item .meta > a:not(.ui) {
+  color: @metaLinkColor;
+}
+.ui.items > .item .meta > a:not(.ui):hover {
+  color: @metaLinkHoverColor;
+}
+
+
+
+/*--------------
+     Labels
+---------------*/
+
+/*-----Star----- */
+
+/* Icon */
+.ui.items > .item > .content .favorite.icon {
+  cursor: pointer;
+  opacity: @actionOpacity;
+  transition: @actionTransition;
+}
+.ui.items > .item > .content .favorite.icon:hover {
+  opacity: @actionHoverOpacity;
+  color: @favoriteColor;
+}
+.ui.items > .item > .content .active.favorite.icon {
+  color: @favoriteActiveColor;
+}
+
+/*-----Like----- */
+
+/* Icon */
+.ui.items > .item > .content .like.icon {
+  cursor: pointer;
+  opacity: @actionOpacity;
+  transition: @actionTransition;
+}
+.ui.items > .item > .content .like.icon:hover {
+  opacity: @actionHoverOpacity;
+  color: @likeColor;
+}
+.ui.items > .item > .content .active.like.icon {
+  color: @likeActiveColor;
+}
+
+/*----------------
+  Extra Content
+-----------------*/
+
+.ui.items > .item .extra {
+  display: @extraDisplay;
+  position: @extraPosition;
+  background: @extraBackground;
+  margin: @extraMargin;
+  width: @extraWidth;
+  padding: @extraPadding;
+  top: @extraTop;
+  left: @extraLeft;
+  color: @extraColor;
+  box-shadow: @extraBoxShadow;
+  transition: @extraTransition;
+  border-top: @extraDivider;
+}
+.ui.items > .item .extra > * {
+  margin: (@extraRowSpacing / 2) @extraHorizontalSpacing (@extraRowSpacing / 2) 0;
+}
+.ui.items > .item .extra > [class*="right floated"] {
+  margin: (@extraRowSpacing / 2) 0 (@extraRowSpacing / 2) @extraHorizontalSpacing;
+}
+
+.ui.items > .item .extra:after {
+  display: block;
+  content: ' ';
+  height: 0;
+  clear: both;
+  overflow: hidden;
+  visibility: hidden;
+}
+
+
+/*******************************
+          Responsive
+*******************************/
+
+/* Default Image Width */
+.ui.items > .item > .image:not(.ui) {
+  width: @imageWidth;
+}
+
+
+/* Tablet Only */
+@media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) {
+  .ui.items > .item {
+    margin: @tabletItemSpacing 0;
+  }
+  .ui.items > .item > .image:not(.ui) {
+    width: @tabletImageWidth;
+  }
+  .ui.items > .item > .image + .content {
+    display: block;
+    padding: 0 0 0 @tabletContentImageDistance;
+  }
+
+}
+
+/* Mobile Only */
+@media only screen and (max-width: @largestMobileScreen) {
+  .ui.items:not(.unstackable) > .item {
+    flex-direction: column;
+    margin: @mobileItemSpacing 0;
+  }
+  .ui.items:not(.unstackable) > .item > .image {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+  }
+  .ui.items:not(.unstackable) > .item > .image,
+  .ui.items:not(.unstackable) > .item > .image > img {
+    max-width: 100% !important;
+    width: @mobileImageWidth !important;
+    max-height: @mobileImageMaxHeight !important;
+  }
+  .ui.items:not(.unstackable) > .item > .image + .content {
+    display: block;
+    padding: @mobileContentImageDistance 0 0;
+  }
+}
+
+
+/*******************************
+           Variations
+*******************************/
+
+& when (@variationItemAligned) {
+  /*-------------------
+         Aligned
+  --------------------*/
+
+  .ui.items > .item > .image + [class*="top aligned"].content {
+    align-self: flex-start;
+  }
+  .ui.items > .item > .image + [class*="middle aligned"].content {
+    align-self: center;
+  }
+  .ui.items > .item > .image + [class*="bottom aligned"].content {
+    align-self: flex-end;
+  }
+}
+
+& when (@variationItemRelaxed) {
+  /*--------------
+       Relaxed
+  ---------------*/
+
+  .ui.relaxed.items > .item {
+    margin: @relaxedItemSpacing 0;
+  }
+  .ui[class*="very relaxed"].items > .item {
+    margin: @veryRelaxedItemSpacing 0;
+  }
+}
+
+& when (@variationItemDivided) {
+  /*-------------------
+        Divided
+  --------------------*/
+
+  .ui.divided.items > .item {
+    border-top: @dividedBorder;
+    margin: @dividedMargin;
+    padding: @dividedPadding;
+  }
+  .ui.divided.items > .item:first-child {
+    border-top: none;
+    margin-top: @dividedFirstLastMargin !important;
+    padding-top: @dividedFirstLastPadding !important;
+  }
+  .ui.divided.items > .item:last-child {
+    margin-bottom: @dividedFirstLastMargin !important;
+    padding-bottom: @dividedFirstLastPadding !important;
+  }
+  & when (@variationItemRelaxed) {
+    /* Relaxed Divided */
+    .ui.relaxed.divided.items > .item {
+      margin: 0;
+      padding: @relaxedItemSpacing 0;
+    }
+    .ui[class*="very relaxed"].divided.items > .item {
+      margin: 0;
+      padding: @veryRelaxedItemSpacing 0;
+    }
+  }
+}
+
+& when (@variationItemLink) {
+  /*-------------------
+          Link
+  --------------------*/
+
+  .ui.items a.item:hover,
+  .ui.link.items > .item:hover {
+    cursor: pointer;
+  }
+
+  .ui.items a.item:hover .content .header,
+  .ui.link.items > .item:hover .content .header {
+    color: @headerLinkHoverColor;
+  }
+}
+
+
+/*--------------
+      Size
+---------------*/
+
+.ui.items > .item {
+  font-size: @relativeMedium;
+}
+& when not (@variationItemSizes = false) {
+  each(@variationItemSizes, {
+    @s: @{value}ItemSize;
+    .ui.@{value}.items > .item  {
+      font-size: @@s;
+    }
+  })
+}
+
+& when (@variationItemUnstackable) {
+  /*---------------
+     Unstackable
+  ----------------*/
+
+  @media only screen and (max-width: @largestMobileScreen) {
+    .ui.unstackable.items > .item > .image,
+    .ui.unstackable.items > .item > .image > img {
+      width: @unstackableMobileImageWidth !important;
+    }
+  }
+}
+
+& when (@variationItemInverted) {
+  /*--------------
+       Inverted
+  ---------------*/
+
+  .ui.inverted.items > .item {
+    background: @invertedBackground;
+  }
+  .ui.inverted.items > .item > .content {
+    background: @invertedContentBackground;
+    color: @invertedContentColor;
+  }
+  .ui.inverted.items > .item .extra {
+    background: @invertedExtraBackground;
+  }
+  .ui.inverted.items > .item > .content > .header {
+    color: @invertedHeaderColor;
+  }
+  .ui.inverted.items > .item > .content > .description {
+    color: @invertedDescriptionColor;
+  }
+  .ui.inverted.items > .item .meta {
+    color: @invertedMetaColor;
+  }
+  .ui.inverted.items > .item > .content a:not(.ui) {
+    color: @invertedContentLinkColor;
+  }
+  .ui.inverted.items > .item > .content a:not(.ui):hover {
+    color: @invertedContentLinkHoverColor;
+  }
+  .ui.inverted.items > .item > .content > a.header {
+    color: @invertedHeaderLinkColor;
+  }
+  .ui.inverted.items > .item > .content > a.header:hover {
+    color: @invertedHeaderLinkHoverColor;
+  }
+  .ui.inverted.items > .item .meta > a:not(.ui) {
+    color: @invertedMetaLinkColor;
+  }
+  .ui.inverted.items > .item .meta > a:not(.ui):hover {
+    color: @invertedMetaLinkHoverColor;
+  }
+  .ui.inverted.items > .item > .content .favorite.icon:hover {
+    color: @invertedFavoriteColor;
+  }
+  .ui.inverted.items > .item > .content .active.favorite.icon {
+    color: @invertedFavoriteActiveColor;
+  }
+  .ui.inverted.items > .item > .content .like.icon:hover {
+    color: @invertedLikeColor;
+  }
+  .ui.inverted.items > .item > .content .active.like.icon {
+    color: @invertedLikeActiveColor;
+  }
+  .ui.inverted.items > .item .extra {
+    color: @invertedExtraColor;
+  }
+  .ui.inverted.items a.item:hover .content .header,
+  .ui.inverted.link.items > .item:hover .content .header {
+    color: @invertedHeaderLinkHoverColor;
+  }
+  .ui.inverted.divided.items > .item {
+    border-top: @invertedDividedBorder;
+  }
+  .ui.inverted.divided.items > .item:first-child {
+    border-top: none;
+  }
+}
+
+.loadUIOverrides();
diff --git a/semantic/src/definitions/views/statistic.less b/semantic/src/definitions/views/statistic.less
new file mode 100644
index 0000000..9145aeb
--- /dev/null
+++ b/semantic/src/definitions/views/statistic.less
@@ -0,0 +1,421 @@
+/*!
+ * # Fomantic-UI - Statistic
+ * http://github.com/fomantic/Fomantic-UI/
+ *
+ *
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ */
+
+/*******************************
+            Theme
+*******************************/
+
+@type    : 'view';
+@element : 'statistic';
+
+@import (multiple) '../../theme.config';
+
+/*******************************
+           Statistic
+*******************************/
+
+/* Standalone */
+.ui.statistic {
+  display: inline-flex;
+  flex-direction: column;
+  margin: @margin;
+  max-width: @maxWidth;
+}
+
+.ui.statistic + .ui.statistic {
+  margin: 0 0 0 @horizontalSpacing;
+}
+
+.ui.statistic:first-child {
+  margin-top: 0;
+}
+.ui.statistic:last-child {
+  margin-bottom: 0;
+}
+
+
+
+/*******************************
+            Group
+*******************************/
+
+/* Grouped */
+.ui.statistics {
+  display: flex;
+  align-items: flex-start;
+  flex-wrap: wrap;
+}
+.ui.statistics > .statistic {
+  display: inline-flex;
+  flex: 0 1 auto;
+  flex-direction: column;
+  margin: @elementMargin;
+  max-width: @elementMaxWidth;
+}
+.ui.statistics {
+  display: flex;
+  margin: @groupMargin;
+}
+
+/* Clearing */
+.ui.statistics:after {
+  display: block;
+  content: ' ';
+  height: 0;
+  clear: both;
+  overflow: hidden;
+  visibility: hidden;
+}
+
+.ui.statistics:first-child {
+  margin-top: 0;
+}
+
+
+/*******************************
+            Content
+*******************************/
+
+
+/*--------------
+      Value
+---------------*/
+
+.ui.statistics .statistic > .value,
+.ui.statistic > .value {
+  font-family: @valueFont;
+  font-size: @valueSize;
+  font-weight: @valueFontWeight;
+  line-height: @valueLineHeight;
+  color: @valueColor;
+  text-transform: @valueTextTransform;
+  text-align: @textAlign;
+}
+
+/*--------------
+     Label
+---------------*/
+
+.ui.statistics .statistic > .label,
+.ui.statistic > .label {
+  font-family: @labelFont;
+  font-size: @labelSize;
+  font-weight: @labelFontWeight;
+  color: @labelColor;
+  text-transform: @labelTextTransform;
+  text-align: @textAlign;
+}
+
+/* Top Label */
+.ui.statistics .statistic > .label ~ .value,
+.ui.statistic > .label ~ .value {
+  margin-top: @topLabelDistance;
+}
+
+/* Bottom Label */
+.ui.statistics .statistic > .value ~ .label,
+.ui.statistic > .value ~ .label {
+  margin-top: @bottomLabelDistance;
+}
+
+
+
+/*******************************
+             Types
+*******************************/
+
+/*--------------
+   Icon Value
+---------------*/
+
+.ui.statistics .statistic > .value > i.icon,
+.ui.statistic > .value > i.icon {
+  opacity: 1;
+  width: auto;
+  margin: 0;
+}
+
+/*--------------
+   Text Value
+---------------*/
+
+.ui.statistics .statistic > .text.value,
+.ui.statistic > .text.value {
+  line-height: @textValueLineHeight;
+  min-height: @textValueMinHeight;
+  font-weight: @textValueFontWeight;
+  text-align: center;
+}
+.ui.statistics .statistic > .text.value + .label,
+.ui.statistic > .text.value + .label {
+  text-align: center;
+}
+
+/*--------------
+   Image Value
+---------------*/
+
+.ui.statistics .statistic > .value img,
+.ui.statistic > .value img {
+  max-height: @imageHeight;
+  vertical-align: @imageVerticalAlign;
+}
+
+
+
+/*******************************
+            Variations
+*******************************/
+
+
+/*--------------
+      Count
+---------------*/
+
+
+.ui.ten.statistics {
+  margin: @itemGroupMargin;
+}
+.ui.ten.statistics .statistic {
+  min-width: @tenColumn;
+  margin: @itemMargin;
+}
+
+.ui.nine.statistics {
+  margin: @itemGroupMargin;
+}
+.ui.nine.statistics .statistic {
+  min-width: @nineColumn;
+  margin: @itemMargin;
+}
+
+.ui.eight.statistics {
+  margin: @itemGroupMargin;
+}
+.ui.eight.statistics .statistic {
+  min-width: @eightColumn;
+  margin: @itemMargin;
+}
+
+.ui.seven.statistics {
+  margin: @itemGroupMargin;
+}
+.ui.seven.statistics .statistic {
+  min-width: @sevenColumn;
+  margin: @itemMargin;
+}
+
+.ui.six.statistics {
+  margin: @itemGroupMargin;
+}
+.ui.six.statistics .statistic {
+  min-width: @sixColumn;
+  margin: @itemMargin;
+}
+
+.ui.five.statistics {
+  margin: @itemGroupMargin;
+}
+.ui.five.statistics .statistic {
+  min-width: @fiveColumn;
+  margin: @itemMargin;
+}
+
+.ui.four.statistics {
+  margin: @itemGroupMargin;
+}
+.ui.four.statistics .statistic {
+  min-width: @fourColumn;
+  margin: @itemMargin;
+}
+
+.ui.three.statistics {
+  margin: @itemGroupMargin;
+}
+.ui.three.statistics .statistic {
+  min-width: @threeColumn;
+  margin: @itemMargin;
+}
+
+.ui.two.statistics {
+  margin: @itemGroupMargin;
+}
+.ui.two.statistics .statistic {
+  min-width: @twoColumn;
+  margin: @itemMargin;
+}
+
+.ui.one.statistics {
+  margin: @itemGroupMargin;
+}
+.ui.one.statistics .statistic {
+  min-width: @oneColumn;
+  margin: @itemMargin;
+}
+
+
+
+& when (@variationStatisticHorizontal) {
+  /*--------------
+     Horizontal
+  ---------------*/
+
+  .ui.horizontal.statistic {
+    flex-direction: row;
+    align-items: center;
+  }
+  .ui.horizontal.statistics {
+    flex-direction: column;
+    margin: 0;
+    max-width: none;
+  }
+  .ui.horizontal.statistics .statistic {
+    flex-direction: row;
+    align-items: center;
+    max-width: none;
+    margin: @horizontalGroupElementMargin;
+  }
+
+  .ui.horizontal.statistic > .text.value,
+  .ui.horizontal.statistics > .statistic > .text.value {
+    min-height: 0 !important;
+  }
+  .ui.horizontal.statistics .statistic > .value > i.icon,
+  .ui.horizontal.statistic > .value > i.icon {
+    width: @iconWidth;
+  }
+
+  .ui.horizontal.statistics .statistic > .value,
+  .ui.horizontal.statistic > .value {
+    display: inline-block;
+    vertical-align: middle;
+  }
+  .ui.horizontal.statistics .statistic > .label,
+  .ui.horizontal.statistic > .label {
+    display: inline-block;
+    vertical-align: middle;
+    margin: 0 0 0 @horizontalLabelDistance;
+  }
+}
+
+& when (@variationStatisticInverted) {
+  /*--------------
+      Inverted
+  ---------------*/
+
+  .ui.inverted.statistics .statistic > .value,
+  .ui.inverted.statistic .value {
+    color: @invertedValueColor;
+  }
+  .ui.inverted.statistics .statistic > .label,
+  .ui.inverted.statistic .label {
+    color: @invertedLabelColor;
+  }
+}
+
+/*--------------
+     Colors
+---------------*/
+
+each(@colors,{
+  @color: replace(@key,'@','');
+  @c: @colors[@@color][color];
+  @l: @colors[@@color][light];
+
+  .ui.@{color}.statistics .statistic > .value,
+  .ui.statistics .@{color}.statistic > .value,
+  .ui.@{color}.statistic > .value {
+    color: @c;
+  }
+  & when (@variationStatisticInverted) {
+    .ui.inverted.@{color}.statistics .statistic > .value,
+    .ui.statistics .inverted.@{color}.statistic > .value,
+    .ui.inverted.@{color}.statistic > .value {
+      color: @l;
+    }
+  }
+})
+
+& when (@variationStatisticFloated) {
+  /*--------------
+      Floated
+  ---------------*/
+
+  .ui[class*="left floated"].statistic {
+    float: left;
+    margin: @leftFloatedMargin;
+  }
+  .ui[class*="right floated"].statistic {
+    float: right;
+    margin: @rightFloatedMargin;
+  }
+  .ui.floated.statistic:last-child {
+    margin-bottom: 0;
+  }
+}
+
+& when (@variationStatisticStackable) {
+  /*--------------
+      Stackable
+  ---------------*/
+
+  @media only screen and (max-width: @largestMobileScreen) {
+    .ui.stackable.statistics {
+      width: auto;
+      margin-left: 0 !important;
+      margin-right: 0 !important;
+    }
+    .ui.stackable.statistics > .statistic {
+      width: 100% !important;
+      margin: 0 0 !important;
+      padding: (@stackableRowSpacing / 2) (@stackableGutter / 2) !important;
+    }
+  }
+}
+
+/*--------------
+     Sizes
+---------------*/
+
+
+/* Medium */
+.ui.statistics .statistic > .value,
+.ui.statistic > .value {
+  font-size: @valueSize;
+}
+.ui.horizontal.statistics .statistic > .value,
+.ui.horizontal.statistic > .value {
+  font-size: @horizontalValueSize;
+}
+.ui.statistics .statistic > .text.value,
+.ui.statistic > .text.value {
+  font-size: @textValueSize;
+}
+& when not (@variationStatisticSizes = false) {
+  each(@variationStatisticSizes, {
+    @s: @{value}ValueSize;
+    @hs: @{value}HorizontalValueSize;
+    @ts: @{value}TextValueSize;
+    .ui.@{value}.statistics .statistic > .value,
+    .ui.@{value}.statistic > .value {
+      font-size: @@s;
+    }
+    .ui.@{value}.horizontal.statistics .statistic > .value,
+    .ui.@{value}.horizontal.statistic > .value {
+      font-size: @@hs;
+    }
+    .ui.@{value}.statistics .statistic > .text.value,
+    .ui.@{value}.statistic > .text.value {
+      font-size: @@ts;
+    }
+  })
+}
+
+.loadUIOverrides();