SemanSemantic-UItic-UI/server/documents/introduction/variations.html.eco

  ---
layout      : 'default'
css         : 'guide'

title       : 'Variations'
description : 'Variations are stackable, symbiotic changes to an elements appearance'
type        : 'UI Introduction'
---
<script src="/javascript/intro.js"></script>

<%- @partial('header') %>
<div class="main container">
  <div class="peek">
    <div class="ui vertical pointing secondary menu">
      <a class="active item">Overview</a>
      <a class="active item">Usage</a>
    </div>
  </div>

  <h2 class="ui dividing header">Overview</h2>

  <p>A <b>variation</b> alters the design of an element but is not mutually exclusive. Variations can be stacked together, or be used along with altering an element's type.</p>

  <p>For example, having wide menus that take up the full width of its parent may sometimes be overwhelming. You can use the compact variation of a menu to alter its format to only take up the necessary space.</p>

  <div class="code" data-type="html" data-label="true">
    <div class="ui compact tiered menu">
      ...
    </div>
  </div>
  <div class="ui compact tiered menu">
    <div class="menu">
      <div class="active item">
        <i class="home icon"></i>
        Home
      </div>
      <a class="item">
        <i class="mail icon"></i>
        Mail
        <div class="ui label">22</div>
      </a>
    </div>
    <div class="sub menu">
      <a class="active item">Activity</a>
      <a class="item">Profile</a>
    </div>
  </div>

  <h3 class="ui header">Context sensitive</h3>

  <p>In Semantic, variations maintain context based on the element they modify, but keep the same vocabulary between elements. Just like how in English, the adjective 'big' may describe a different scale for a big planet versus a big insect.</p>

  <p>For example an icon might need to modify it's vertical alignment when it is larger than the surrounding text, while a form does not.</p>

  <p>All definitions in Semantic <b>are based around em and rem</b> so resizing an element usually is as simple as altering the base font size of the element, padding, margins, and other properties will adjust automatically.</p>

  <div class="code" data-type="css" data-label="true">
    /* a large form is not quite as large as a large icon */
    .ui.large.form {
      font-size: 1.125em;
    }
    /* icons need to adjust vertical alignment as they grow past 1em */
    i.large.icon {
      font-size: 1.5em;
      vertical-align: middle;
    }
  </div>


  <h2 class="ui dividing header">Using Variations Together</h2>
  <p>Another variation of a menu is an <b>inverted menu</b>. This alters the color contrast to appear inverted for darker backgrounds. Some variations may also mutate when used together. Lets try adding the class name <code>red</code> as well.</p>
  <p>Variations are not mutually exclusive and can be used together harmoniously, so we can use these together to create an <code>inverted red tiered menu</code></p>

  <div class="code" data-type="html" data-label="true">
    <div class="ui red inverted tiered menu">
      ...
    </div>
  </div>
  <div class="ui red inverted tiered menu">
    <div class="menu">
      <div class="active item">
        <i class="home icon"></i>
        Home
      </div>
      <a class="item">
        <i class="mail icon"></i>
        Mail
        <div class="ui label">22</div>
      </a>
    </div>
    <div class="sub menu">
      <a class="active item">Activity</a>
      <a class="item">Profile</a>
    </div>
  </div>
  <div class="ui divider"></div>

  <h3 class="ui header">Intersecting Variations</h3>
  <p>The definition for the variation red contains css specifically for describing the intersection of both <code>red</code> and <code>inverted</code>. For example, lets see the same menu with only the red variation.</p>

  <div class="code" data-type="html" data-label="true">
    <div class="ui red tiered menu">
      ...
    </div>
  </div>
  <div class="ui red tiered menu">
    <div class="menu">
      <div class="active item">
        <i class="home icon"></i>
        Home
      </div>
      <a class="item">
        <i class="mail icon"></i>
        Mail
        <div class="ui label">22</div>
      </a>
    </div>
    <div class="sub menu">
      <a class="active item">Activity</a>
      <a class="item">Profile</a>
    </div>
  </div>


  <div class="ui divider"></div>
  <a class="ui large right labeled teal icon button" href="/element.html">
    Next: View Elements
    <i class="right arrow icon"></i>
  </a>
<!--

</div>