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.
132 lines
4.4 KiB
132 lines
4.4 KiB
---
|
|
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="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>
|