Semantic UI 语义化Web语言开发框架 - 资源分享

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

发布于 2017-09-26 字数 3231 浏览 2154 评论 0

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

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

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

框架特点

简洁的 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,您就可以在各处部署相同的代码。

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

众多的UI组件

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

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

支持响应式设计

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

你喜欢的伙伴和资料库

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

帮助你的开发

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

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2583 文章
29 评论
84935 人气
更多

推荐作者

清风夜微凉

文章 1 评论 0

为你鎻心

文章 2 评论 0

xxhui

文章 0 评论 0

1PKOH46yx8j0x

文章 0 评论 0

Arthur

文章 0 评论 0