Concise HTML

Semantic UI treats words and classes as exchangeable concepts.

Classes use syntax from natural languages like noun/modifier relationships, word order, and plurality to link concepts intuitively.

Get the same benefits as BEM or SMACSS, but without the tedium.

<div class="ui three buttons">
  <button class="ui active button">
  One
  </button>
  <button class="ui button">
  Two
  </button>
  <button class="ui button">
  Three
  </button>
</div>

Intuitive Javascript

Semantic uses simple phrases called behaviors that trigger functionality.

Any arbitrary decision in a component is included as a setting that developers can modify.

$('select.dropdown')
  .dropdown('set selected',
  ['meteor', 'ember'])
;
<select name="skills" multiple="">
  <option>Skills</option>
  <option>Angular</option>
  <option>CSS</option>
  <option>Ember</option>
  <option>HTML</option>
  <option>Javascript</option>
  <option>Meteor</option>
  <option>NodeJS</option>
</select>

Simplified Debugging

Performance logging lets you track down bottlenecks without digging through stack traces.

Don't have access to development tools right now? Check out this short clip.

$('.sequenced.images .image')
  .transition({
    debug     : true,
    animation : 'jiggle',
    duration  : 500,
    interval  : 200
  });