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. linux 访问ntfs分区

    打开ntfs-3g的下载点http://www.tuxera.com/community/ntfs-3g-download/ ,将最新稳定(当前最新版本为ntfs-3g-2011.1.15)下载到Ce ...

  2. 【JQuery NoviceToNinja系列】01 开篇 Html页面设计和布局

    01 开篇 Html页面设计和布局 index.html <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml ...

  3. BZOJ: 1084: [SCOI2005]最大子矩阵

    NICE 的DP 题,明白了题解真是不错. Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 1228  Solved: 622[Submit][Stat ...

  4. HDU4542 小明系列故事——未知剩余系

    大赞的数论题: 大致思路: 对于TYPE=1的情况,认为 X 中有 X-K个约数,求最小的X,X-K>0 那么化为B+K的约数为B, 我们知道(B+K)的约数<=2*SQRT(B+K);这 ...

  5. 比较IE6的不同之处,与IE8 IE11 比较

    文档申明为  <!DOCTYPE html> IE6或者IE特有的一些东西 1.盒子模型 IE6:(使用 !DOCTYPE 声明指定 standards-compliant 模式) mar ...

  6. 表单中<form>的enctype属性

    application/x-www-form-urlencoded.multipart/form-data.text/plain 上传文件的表单中<form>要加属性enctype=&qu ...

  7. 提高Python运行效率的六个窍门

    曾灵敏 - MAY 18, 2015 Python是一门优秀的语言,它能让你在短时间内通过极少量代码就能完成许多操作.不仅如此,它还轻松支持多任务处理,比如多进程. 不喜欢Python的人经常会吐嘈P ...

  8. C# WinForm窗口最小化到系统托盘

    * C# WinForm窗口最小化到系统托盘http://hi.baidu.com/kfxtgtqyapouyze/item/8ccfdcd5a174a7312a35c7c3 主要功能:(1).程序启 ...

  9. Win32应用程序中文支持

    Settings--Editor---Encoding改为Windows 936 main.cpp中#include "locale.h" winmain中增加一行: setloc ...

  10. ExtJs之addManagedListener

    <!DOCTYPE html> <html> <head> <title>ExtJs</title> <meta http-equiv ...