Ting Web UI

Ting Web UI

简洁、直观、强悍、跨浏览器的前端开发框架，让web开发更迅速、简单。

起步

ting.css，有多种使用方式，最简单的方式就是直接引入全量。

首先下载ting.css，然后在你的页面上用link标签引入。

基本的HTML模版

新版本只支持border-box盒模型，如果您想要兼容IE67需要在doctype之前打一行注释。

<!--BORDERBOX-->
<!DOCTYPE html>
<html>
	<head>
		<title>Ting</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
		<link href="css/ting.css" rel="stylesheet"/>
	</head>
	<body>
		<h1>Hello, world!</h1>
	</body>
</html>

示例

高级使用方式

结合purgecss，通过使用情况自动化按需打包

webpack插件例子

const PurgecssPlugin = require('purgecss-webpack-plugin');
new PurgecssPlugin({
	paths:["public/index.html"],
	safelist:[略],
	keyframes:true,
	fontFace:true
})

postcss插件例子

const purgecss = require('postcss-purgecss');
purgecss({
	content: ["index.html"],
	whitelist: [略],
	keyframes: true,
	fontFace:true
});

作为mixin库使用

vue-cli例子

{
	css: {
		loaderOptions: {
			sass: {
				implementation: require('sass'),
				prependData: `
@import '~@ting-ui/css/scss/variables.scss';
@import '~@ting-ui/css/scss/mixin.scss';`
			}
		}
	}
}