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的更多相关文章

  1. Nightwatch.js – 轻松实现浏览器的自动测试

    Nightwatch.js 是一个易于使用的,基于 Node.js 平台的浏览器自动化测试解决方案.它使用强大的 Selenium WebDriver API 来在 DOM 元素上执行命令和断言. 语 ...

  2. WOW.js轻松为网页添加动画切入效果

    由于坐忘的需要,经常会有部分功能用的很多,做起来又很繁琐,所以插件也就应运而生了.个人感觉正式js强大的可植入性, 才使他如此的使用火爆,反正博主是特别喜欢这一点  Y(^o^)Y~ . 今天就和大家 ...

  3. Blazor组件自做二 : 使用JS隔离制作手写签名组件

    Blazor组件自做二 : 使用JS隔离制作手写签名组件 本文相关参考链接 JavaScript 模块中的 JavaScript 隔离 Viewer.js工程 Blazor组件自做一 : 使用JS隔离 ...

  4. HTML案例—很讨巧的一种js+css制作hover模式展示二级菜单方法

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>利 ...

  5. Restive.js – 轻松让网站变成响应式和自适应

    Restive.js 是一个 jQuery 插件,可以帮助您轻松快捷地添加响应式功能到你网站,适应几乎所有拥有 Web 功能的设备.使用设备检测,高级管理断点,以及方向管理的组合,Restive.js ...

  6. Nunchuck.js - 轻松实现多个设备的数据同步

    Nunchuck.js 是对用于移动设备上的浏览器应用程序的控制库,通过浏览器轻松实现多设备数据同步.他们提供了一个库,很容易使开发人员能够整合移动浏览器控件到桌面的基于浏览器的 JavaScript ...

  7. store.js - 轻松实现本地存储（LocalStorage）

    store.js 是一个兼容所有浏览器的 LocalStorage 包装器,不需要借助 Cookie 或者 Flash.store.js 会根据浏览器自动选择使用 localStorage.globa ...

  8. HTML5 Maker – 在线轻松制作 HTML5 动画效果

    HTML5 Maker 是一个在线动画制作工具,帮助你使用 HTML,CSS 和 JavaScript 创建动态,互动的内容.它非常容易使用,同时可以帮你实现非常好的效果.它可以制作跨浏览器的动画内容 ...

  9. 与你相遇好幸运，The Moe Node.js Code Style Guide

    The Moe Node.js Code Style Guide  By 一个最萌的开发者 @2016.9.21 >>代码是人来阅读的,格式规范的代码是对编程人员最好的礼物 :) > ...

随机推荐

  1. ID3决策树---Java

    1)熵与信息增益: 2)以下是实现代码: //import java.awt.color.ICC_ColorSpace; import java.io.*; import java.util.Arra ...

  2. P==NP？？

    注:基础知识见下方 下面是关于P==NP ???  一些讨论,挺好玩的. 1. 首先强调一下数学上还没有证明这个问题!但是我们看看其他角度来看这个问题. 其次,心理上来说,要是可以证明P==NP那么早 ...

  3. Spring REST for DELETE Request Method Not Supoorted

    http://stackoverflow.com/questions/22055251/sending-data-with-angularjs-http-delete-request I have a ...

  4. PushBackInputStream与PushBackInputStreamReader的用法

    举个例子:获取XX内容 PushBackInputStream pb=new PushBackInputStream(in,4);//4制定缓冲区大小 byte[] buf=new byte[4]; ...

  5. Linux下面如何安装Django

    首先你需要肯定你的机子上装了Python 现在ubuntu已经自带,所以不必操心 当然你可以在你的机子下测试一下,只需在 terminal 下输入 python 如果出现下面的界面就说明你机子已经装了 ...

  6. 图解TCP/IP读书笔记（二）

    图解TCP/IP读书笔记(二) 第二章.TCP/IP基础知识 一.TCP/IP出现的背景及其历史 年份 事件 20世纪60年代后半叶 应DoD(美国国防部)要求,美国开始进行通信技术相关的研发 196 ...

  7. FreePascal经典资料

    ------------------------------------------------------------------------ 这是每个版本的changelog: http://bu ...

  8. Spring笔记——依赖注入

    依赖注入有三种方式: 1. 使用构造器注入  2. 使用属性setter方法注入 3. 使用Field注入(用于注解方式) 注入依赖对象可以采用手工装配或自动装配,在实际应用中建议使用手工装配,因为自 ...

  9. *在Win7中安装JDK1.7并配置环境变量

    安装的过程就不废话了. 下面是环境变量的配置. 1. 配置环境变量 单机右键‘计算机--属性’  2.点击高级系统设置  3.点击‘环境变量’ 4.增加"JAVA_HOME"系统变 ...

  10. DWR与AJAX

    DWR与AJAX的微妙关系 2015-08-14 10:20 447人阅读 评论(0) 收藏 举报 本文章已收录于:   // ' + obj.name + "  "; html ...