<p>Every component is defined using <code>em</code> and <code>rem</code> so that components can be resized simply on the fly. Want a menu to get smaller on mobile? Simply have it's font-size change using a media query.</p>
<h3 class="ui header">Descriptive not Prescriptive</h3>
<p> Writing front end code shouldn't require learning the naming or programming conventions of a particular developer. Instead of using short-hand, or codified naming conventions, Semantic uses simple, common language for parts of interface elements, and familiar patterns found in natural languages for describing elements.</p>
<h2 class="ui header">
Self Explanatory
<div class="sub header">Descriptive not Prescriptive</div>
</h2>
<p> Writing front end code shouldn't require learning the naming or programming conventions of a particular developer.</p>
<p>Instead of using short-hand, or codifying naming conventions, Semantic uses simple, common language for parts of interface elements, and familiar patterns found in natural languages for describing elements.</p>
<h3 class="ui header">Tag ambivalent.</h3>
<h2 class="ui header">
Tag ambivalent
<div class="sub header">Use whatever html tags you please.</div>
</h2>
<p>Interface definitions in Semantic are tag ambivalent. That means you can use div, article, section, span without affecting the display of the element. Special tags like a, table, td still carry special meaning in certain circumstances however.</p>
<h3 class="ui header">Powerful tools for expressing groups and collections.</h3>
<h2 class="ui header">
Powerful tools for expressing groups and collections.
<p>In English it's much easier to say "There are three tall men" than "There is a tall man, a tall man and a tall man".</p>
<p>In Semantic element definitions can be expressed in groups have shared attributes like size, color, type avoiding repetitive declarations.</p>
<h3 class="ui header">Portable and self-contained.</h3>
<p>UI components in Semantic can be used individually, defining optional couplings with other components where their usage intersect. That means choosing to use semantic doesn't mean adopting an entire framework, or rewriting your codebase. You can pick and choose what elements you want to use.</p>
<h2 class="ui header">
Portable and self-contained.
<div class="sub header">Using Semantic doesn't mean adopting an entire framework, or rewriting your codebase</div>
</h2>
<p>Semantic components are written in a singular style, but are not part of mandated overarching library. Only like a couple components? No problem, use only what you need.</p>
<p>UI components in Semantic also define optional and required couplings with other components where their usage intersect. That means for example, a popup can check for the existence of CSS animation component before using the fallback javascript animations.</p>
<h2 class="ui header">
Shared language, different implementations
<div class="sub header">Restyle your site without Restructuring it</div>
</h2>
<h3 class="ui header">Shared language, different implementations</h3>
<p>Describing your site's content using a common language like Semantic allows other developers to create UI definitions to match one shared vocabulary. This means you can redesign your website without retooling your html. Simply alter the look and feel of your UI using a different UI style definition.</p>
<h3 class="ui header">Only the important stuff</h3>
<p>Instead of giving every possible variation, or behavior under the sun, element definitions are designed to be a starting off point. No oversized downloads, or kitchen sink, just the stuff to get you started.</p>
<h2 class="ui header">
Only the important stuff
<div class="sub header">Not the kitchen sink</div>
</h2>
<p>Instead of giving every possible variation or behavior under the sun, element definitions are designed to be a starting off point. No oversized downloads with optional features you will most likely never use, just the stuff to get you going.</p>
description : 'An introduction to Semantic coding'
title : 'Overview'
description : 'An introduction to Semantic style coding'
type : 'UI Introduction'
---
<script src="/javascript/intro.js"></script>
@ -31,11 +31,18 @@ $(document)
<p>For example a menu may have menu items inside of it. These items are contained as part of the menu definition but do not receive the class name <code>ui</code> because they are part of a UI menu collection.</p>
<p>Class names in semantic always use single english words. If a class name is an adjective it is either a <a href="/introduction/types.html">type</a> of element or <a href="/introduction/variations.html">variation</a> of an element. <b>CSS definitions always define adjectives in the context of a noun</b>. In this way class names cannot pollute the namespace.</p>
<p>Class names in Semantic always use single english words. If a class name is an adjective it is either a <a href="/introduction/types.html">type</a> of element or <a href="/introduction/variations.html">variation</a> of an element. <b>CSS definitions always define adjectives in the context of a noun</b>. In this way class names cannot pollute the namespace.</p>
description : 'A type is an mutually exclusive change to an element'
description : 'A type is an mutually exclusive version of an element'
type : 'UI Introduction'
---
<script src="/javascript/intro.js"></script>
@ -18,12 +18,28 @@ type : 'UI Introduction'
<h2 class="ui dividing header">Overview</h2>
<p>A <b>type</b> is a mutually exclusive change to an element. Types may require different html structures to work correctly, or expect different content. </p>
<p>A ui definition in Semantic usually contains a list of mutually exclusive variations on an element design. A type is designated by an additional class name on a UI element</p>
<div class="code" data-type="html" data-preview="true" data-title="Types of UI Button">
<div class="ui labeled icon button">
Download <i class="download icon"></i>
</div>
<div class="ui icon button">
<i class="download icon"></i>
</div>
<div class="ui button">
Download
</div>
<div class="ui facebook button">
<i class="facebook icon"></i>
Facebook
</div>
</div>
<h3 class="ui header">Content</h3>
<p>For example, an icon menu might expect different content like icons glyphs instead of text to be formatted correctly</p>
<p>Types may require different html structures to work correctly. For example, an icon menu might expect different content like icons glyphs instead of text to be formatted correctly</p>
jlukic
11 years ago