使用tdcss.js轻松制作自己的style guide
http://jakobloekke.github.io/tdcss.js/
在前端开发中，如果能够有一个style guide对于设计来说就显得专业稳定，一致性。在上述链接中，有一个tdcss.js的工具可以帮助你生成可视化的style guide，
非常方便。其原理就是使用那个js文件在html加载完成后对特定section来做重新structure，形成style guide的样式
@stop-color: red;
@wait-color: orange;
@go-color: green;
.btn {
padding: 0 30px;
font-size: 2em;
&.stop {
background-color: @stop-color;
color: contrast(@stop-color);
}
&.wait {
background-color: @wait-color;
color: contrast(@wait-color);
}
&.go {
background-color: @go-color;
color: contrast(@go-color);
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Style guide</title>
<link rel="stylesheet/less" type="text/css"
href="less/buttons.less">
<script src="js/less.min.js"
type="text/javascript"></script>
<!-- TDCSS -->
<link rel="stylesheet" href="tdcss.js-master/src/tdcss.css"
type="text/css" media="screen">
<script type="text/javascript"
src="https://code.jquery.com/jquery-2.1.1.min.js">
</script>
<script type="text/javascript" src="tdcss.jsmaster/
src/tdcss.js"></script>
<script type="text/javascript">
$(function(){
$("#tdcss").tdcss();
})
</script>
</head>
<body>
<div id="tdcss">
<!-- # Button styles -->
<!-- & Collection of buttons. -->
<!-- : Stop button -->
<button class="btn stop">Stop</button>
<!-- : Wait button -->
<button class="btn wait">Wait</button>
<!-- : Go button -->
<button class="btn go">Go</button>
</div>
</body>
</html>
使用tdcss.js轻松制作自己的style guide的更多相关文章
- Nightwatch.js – 轻松实现浏览器的自动测试
Nightwatch.js 是一个易于使用的,基于 Node.js 平台的浏览器自动化测试解决方案.它使用强大的 Selenium WebDriver API 来在 DOM 元素上执行命令和断言. 语 ...
- WOW.js轻松为网页添加动画切入效果
由于坐忘的需要,经常会有部分功能用的很多,做起来又很繁琐,所以插件也就应运而生了.个人感觉正式js强大的可植入性, 才使他如此的使用火爆,反正博主是特别喜欢这一点 Y(^o^)Y~ . 今天就和大家 ...
- Blazor组件自做二 : 使用JS隔离制作手写签名组件
Blazor组件自做二 : 使用JS隔离制作手写签名组件 本文相关参考链接 JavaScript 模块中的 JavaScript 隔离 Viewer.js工程 Blazor组件自做一 : 使用JS隔离 ...
- HTML案例—很讨巧的一种js+css制作hover模式展示二级菜单方法
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>利 ...
- Restive.js – 轻松让网站变成响应式和自适应
Restive.js 是一个 jQuery 插件,可以帮助您轻松快捷地添加响应式功能到你网站,适应几乎所有拥有 Web 功能的设备.使用设备检测,高级管理断点,以及方向管理的组合,Restive.js ...
- Nunchuck.js - 轻松实现多个设备的数据同步
Nunchuck.js 是对用于移动设备上的浏览器应用程序的控制库,通过浏览器轻松实现多设备数据同步.他们提供了一个库,很容易使开发人员能够整合移动浏览器控件到桌面的基于浏览器的 JavaScript ...
- store.js - 轻松实现本地存储（LocalStorage）
store.js 是一个兼容所有浏览器的 LocalStorage 包装器,不需要借助 Cookie 或者 Flash.store.js 会根据浏览器自动选择使用 localStorage.globa ...
- HTML5 Maker – 在线轻松制作 HTML5 动画效果
HTML5 Maker 是一个在线动画制作工具,帮助你使用 HTML,CSS 和 JavaScript 创建动态,互动的内容.它非常容易使用,同时可以帮你实现非常好的效果.它可以制作跨浏览器的动画内容 ...
- 与你相遇好幸运，The Moe Node.js Code Style Guide
The Moe Node.js Code Style Guide By 一个最萌的开发者 @2016.9.21 >>代码是人来阅读的,格式规范的代码是对编程人员最好的礼物 :) > ...
随机推荐
- Git常用命令大全
查看.添加.提交.删除.找回,重置修改文件 git help <command> # 显示command的help git show # 显示某次提交的内容 git show $id gi ...
- fiddler 新发现
就一句话,记录一下 urlreplace baidu.com taobao.com //Fiddler2\Scripts\SampleRules.js 这里发现的 case "urlrepl ...
- [翻译]Kafka Streams简介: 让流处理变得更简单
Introducing Kafka Streams: Stream Processing Made Simple 这是Jay Kreps在三月写的一篇文章,用来介绍Kafka Streams.当时Ka ...
- 141029 V7 异步通知测试，15分钟循环代码重构，同步更新payInfo测试，支付成功timer测试成功说明
支付成功之后的1分钟定时任务:测试成功. 2014-10-29 17:16:06,892 DEBUG [http-bio-8086-exec-1] org.springframework.web.se ...
- （转）Tips for Optimizing C/C++ Code
本来要自己翻译的,随手搜索了一下,发现五天前已经有人翻译了,我就不重复发明轮子了. 转自:http://blog.csdn.net/yutianzuijin/article/details/26289 ...
- 借助flexpaper实现word在线预览和打印
为了实现word能够在web上尽量以原始的排版样式展现出来,选择基于activex控件的方式太过于依赖某种浏览器,并且存在可能需要花费金钱购买相应的控件产品:于是借助flexpaper这种flash展 ...
- Javascript nextElementSibling和nextSibling
function next(ele) { if (typeof ele.nextElementSibling == 'object') { return ele.nextElementSibling; ...
- Shell script for logging cpu and memory usage of a Linux process
Shell script for logging cpu and memory usage of a Linux process http://www.unix.com/shell-programmi ...
- hdu 4061 A Card Game
思路: 分析:假设取的牌顺序是一个序列,那么这种序列在末尾为1时是和取牌序列一一对应的,且是符合“游戏结束时牌恰好被取完”的一种情况. 简证:1.在序列中,任一数 i 的后一个数 j 是必然要放在第 ...
- 集成 Tomcat 插件到 Eclipse 的过程
Java代码: . 下载 Tomcat Tomcat6,下载地址:http://tomcat.apache.org/download-60.cgi,选择绿色版的 zip 进行下载(目前最新的 Tomc ...