Semantic UI:友好且功能强大的html框架

semantic-ui

Semantic友好的HTML的开发框架,能帮你制作美观、支持自适应布局的网站。

主要特性

  • 50+ UI元素
  • 3000 + CSS 变量
  • 3层变量继承(和SublimeText相同)
  • 自适应设计,支持EM单位
  • 使用友好的Flexbox布局

简约纯净的 HTML

concise_html

Semantic UI把词语和类看成一个个可以任意组合的概念

使用如:名词/修饰语,文字序列以及诸多的自然语法来定义类名(class)

获取与使用BEM 或者 SMACSS 一般的体验,但是Semantic去除了使用它们时的各种繁琐。

直观明了的 Javascript

intuitive_javascript

Semantic 使用被叫做 behaviors 的简单短语来触发功能。

开发者可以更改任何组件中的配置来设置该组件中的某一设置。

化繁为简的调试

simplified_debugging

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

主题好用到难以置信

theming

Semantic 自带简约的可继承系统,以及高级主题变量,使您可以自由的完成各式各样的设计

只需开发一次UI,您就可以在各处部署相同的代码。

支持响应式设计

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

你喜欢的伙伴和资料库

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

安装过程

安装 NodeJS

如果你对设置NodeJS还不太熟悉,你可以先照着下列步骤做,或者查看 nodejs.org 的 下载页

可选方式 1: Homebrew

安装 homebrew 后直接安装

可选方式 2: Git

安装 Gulp

Semantic UI 支持通过 Gulp 运行命令行工具,可用于编写你所需要的部件库。

Gulp 是个 NPM 模块,必须进行全局安装。

安装 Semantic UI

Semantic UI 可以通过运行NPM中同名安装包来获取

加入到您的HTML中

运行gulp搭建工具,您只需要在HTML中把您项目中的CSS和JS链接进去,它将进行自动编译。

更新升级

通过NPM升级

只要您的站点和主题还在保持使用,NPM 脚本即可自动更新Semantic UI至最新版本。

开发资源

官方网站:http://semantic-ui.com/

打赏支持我整理更多优质资源,谢谢!

打赏编辑

打赏支持我整理更多优质资源,谢谢!

任选一种支付方式

1 收藏

资源整理者简介:凝枫

非典型性程序员,爱做一些和写程序毫不相干的事 个人主页 · 贡献了46个资源 · 1


直接登录

推荐关注

按分类快速查找

关于资源导航
  • 伯乐在线资源导航收录优秀的工具资源。内容覆盖开发、设计、产品和管理等IT互联网行业相关的领域。目前已经收录 1440 项工具资源。
    推送伯乐头条热点内容微信号:jobbole 分享干货的技术类微信号:iProgrammer