You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
114 lines
3.4 KiB
114 lines
3.4 KiB
---
|
|
layout : 'default'
|
|
css : 'types'
|
|
|
|
title : 'Variations'
|
|
type : 'UI Introduction'
|
|
---
|
|
<script src="/javascript/intro.js"></script>
|
|
<div class="segment">
|
|
<div class="container">
|
|
<h1 class="ui header">Variations
|
|
<div class="ui label">Draft</div>
|
|
</h1>
|
|
<p>Variations are stackable, symbiotic changes to an elements appearance.</p>
|
|
</div>
|
|
</div>
|
|
<div class="main container">
|
|
<div class="peek">
|
|
<div class="ui vertical pointing secondary menu">
|
|
<a class="active item">Overview</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">Stacking Variations</h3>
|
|
|
|
<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. Because variations are not mutually exclusive we can use these together to create a compact, inverted, red tiered menu</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>
|
|
|
|
<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>
|