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. MX记录

    是邮件交换记录,它指向一个邮件服务器,用于电子邮件系统发邮件时根据 收信人的地址后缀来定位邮件服务器.MX记录也叫做邮件路由记录,用户可以将该域名下的邮件服务器指向到自己的mail server上,然 ...

  2. 深入理解asp.net SessionState

    web Form 网页是基于HTTP的,它们没有状态, 这意味着它们不知道所有的请求是否来自同一台客户端计算机,网页是受到了破坏,以及是否得到了刷新,这样就可能造成信息的丢失. 于是, 状态管理就成了 ...

  3. mysql if条件

    #if表达式 SELECT reg_no, IF(reg_no='718170554','黄色宾利','红色宾利') FROM car WHERE reg_no IN ('718170554','12 ...

  4. 如何使用 OneAPM 监控微软 Azure Cloud Service ？

    不知不觉微软 Azure 已经进入中国市场近两年的时间.那么 Azure 平台的性能究竟如何?资源加载的延迟.虚拟机的稳定性等问题是否切实满足客户期许.这些都是大家对微软 Azure 这个国外的云服务 ...

  5. iOS视频压缩

    // // ViewController.m // iOS视频测试 // // Created by apple on 15/8/19. // Copyright (c) 2015年 tqh. All ...

  6. iOS生成本地随机验证码

    原文链接:http://www.cnblogs.com/jerehedu/p/4527707.html 效果图:

  7. [转载] poll()函数

    原地址:http://baike.baidu.com/view/2997591.htm   poll()函数:这个函数是某些Unix系统提供的用于执行与select()函数同等功能的函数,下面是这个函 ...

  8. Codeforces Round #337 (Div. 2) A. Pasha and Stick 水题

    A. Pasha and Stick   Pasha has a wooden stick of some positive integer length n. He wants to perform ...

  9. linux登陆欢迎提示信息的设置

    Linux可以设置登录前后的欢迎信息,虽然没啥技术含量,但却是非常实用的一个小技巧. 实现登录消息的功能,可以修改3个文件. 1./etc/issue 本地登陆显示的信息,本地登录前 2./etc/i ...

  10. el中保留字empty与null的区别

    先看例子: <%@page pageEncoding="utf-8" %><BR>name:${param.name }<br /> empty ...