Semantic UI 语义化Web语言开发框架

Question

Semantic UI 是一款语义化Web语言开发框架，注重标签代码的语义化和可理解性，帮助我们更快地设计赏心悦目的网站，Semantic作为一款开发框架，帮助开发者使用对人类友好的HTML语言构建优雅的响应式布局。

框架特点

简洁的 HTML

Semantic UI中词语和类(css clases)是可以相互替换的概念直观的使用自然语言中的语法，词汇和语序等来定义一个类（css class）。取BEM 和 SMACSS 的精华，同时使之更易于使用。

<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>

直观明了的 Javascript

Semantic 使用被叫做 behaviors 的简单短语来触发功能，开发者可以更改任何组件中的配置来设置该组件中的某一设置。

$('select.dropdown').dropdown('set selected', ['meteor', 'ember']);

<select name="skills" multiple="" class="ui fluid dropdown">
  <option value="">Skills</option>
  <option value="angular">Angular</option>
  <option value="css">CSS</option>
  <option value="ember">Ember</option>
  <option value="html">HTML</option>
  <option value="javascript">Javascript</option>
  <option value="meteor">Meteor</option>
  <option value="node">NodeJS</option>
</select>

化繁为简的调试

记录日志使您很方便的追踪到性能瓶颈，而不必去堆栈轨迹中发掘问题所在。

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

难以置信的主题

Semantic 自带简约的可继承系统，以及高级主题变量，使您可以自由的完成各式各样的设计，只需开发一次UI，您就可以在各处部署相同的代码。

众多的UI组件

定义不止局限于按钮。Semantic的组件接受多种不同的定义：元素、集合、视图、模块和行为。这些囊括了界面设计的所有内容。

支持响应式设计

Semantic是完全为em标签设计使响应式标准成为轻而易举的事。设计变量作为元素允许你选择如何使内容更好地适应平板和移动设备。

你喜欢的伙伴和资料库

Semantic 集成了 React、Angular、Meteor 以及很多其他框架以帮助你组织 UI 层和你的应用逻辑层。

帮助你的开发

企业已经准备好了，编译工具，性能日志，自定义支持，多层级主题继承——开发者梦寐以求的大事。