FrozenUI 轻量级精美的移动端 UI 库

发布于 2020-03-02 15:12:53 字数 2973 浏览 1676 评论 0

FrozenUI 是一套基于移动端的UI库,轻量、精美、遵从手机 QQ 设计规范。

简单易用 轻量快捷

适用于使用手Q规范设计的 Web 页面,而针对非手Q规范的页面,可通过修改变量定制界面主题。

可以按需选择需要的组件,也可以采用 cdn 和 combo 的方式按需加载。

使用 iconfont 展示图标,包含了按钮,列表,表单,提示,弹窗等常用组件,新增文本,布局,1px, rem,文字截断,占位,两端留白,两端对齐等解决方案,同时解决了移动端屏幕适配问题。

CSS 使用模块化的样式命名和组织规范,使用 sass 编写 css 代码。

兼容android 2.3 +,ios 4.0 + 。

快速开始

简单易用,轻量快捷,为移动端服务的前端框架

简介

FrozenUI 是一套基于移动端的UI库。它非常轻量、精美,遵从手机QQ设计规范,提供了表单、对话框、列表等常用组件。此外,FrozenUI还提供文字截断、1px边框、rem、两端留白等常用场景的解决方案。CSS做得更模块化和颗粒化,使用 sass 编写 CSS 代码,你完全可以按照实际情况按需加载。

获取 FrozenUI

方式一:点击链接下载文件

https://github.com/frozenui/frozenui/archive/2.0.0.zip

方式二:在页面上引入样式文件(推荐)

<link rel="stylesheet" href="http://i.gtimg.cn/vipstyle/frozenui/2.0.0/css/frozen.css">

如何使用

通过以上方式获取到 FrozenUI 后,在页面中引入后即可使用。以 FrozenUI 的按钮为例:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0, user-scalable=no">
        <title>FrozenUI Demo</title>
        <!-- 引入 FrozenUI -->
        <link rel="stylesheet" href="http://i.gtimg.cn/vipstyle/frozenui/2.0.0/css/frozen.css"/>
    </head>
    <body>
        <!-- 使用 -->
        <div class="ui-btn-wrap">
            <button class="ui-btn">常规按钮</button>
            <button class="ui-btn disabled">不可点击按钮</button>
        </div>
    </body>
</html>

更多的使用示例,请参考 http://frozenui.github.io/frozenui/demo/index.html

如何开发

FrozenUI 使用 Grunt 作为编译系统,在你开发编译之前需要安装 node.js(npm 已经包含在内) 和 Grunt

git clone https://github.com/frozenui/frozenui.git
cd frozenui
npm install
grunt

运行 grunt 命令,会监听src目录下所有文件的变更,并且默认会在8080端口启动服务器,然后在浏览器打开 http://localhost:8080/。

项目 clone 到本地后,可以看到文件组织结构,具体文件说明如下:

FrozenUI/
├── release/
│   └── 编译生成文件
└── src/
│   └── css
│        └── 样式文件
│   └── scss
│        └── 存放 .scss源码
│   └── demo
│        └── 参考例子
│   └── font
│        └── 存放 icon的图片
│
└── tool/
      └── 编译工具

官网:http://frozenui.github.io

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

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

列表为空,暂无数据

关于作者

JSmiles

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

0 文章
0 评论
84935 人气
更多

推荐作者

待"谢繁草

文章 0 评论 0

战皆罪

文章 0 评论 0

子英

文章 0 评论 0

爱的十字路口

文章 0 评论 0

孤者何惧

文章 0 评论 0

xi霄xi

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击“接受”或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。