<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>
<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 so we can use these together to create an <code>inverted red tiered menu</code></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>
<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>
<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, a form you can have a variation called "inverted". This changes the appearance of form elements to work on dark backgrounds.</p>
jlukic
11 years ago