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. ol3简介

    ol3从根本上进行了重新设计,相对于ol2,他符合现代浏览器的一些设计理念,使用了js新的特性,initial版本的目的是支持原来ol2的大多数功能,支持公网上流行的缓存切片,支持常见的矢量数据格式. ...

  2. 用dedecms自定义表单创建简易自助预约系统

    建站往往需要根据客户的需求来增加相应的功能,比如预约.平时用比较多的是织梦系统,那么如何用dedecms自定义表单创建简易自助预约系统呢? 进入dedecms后台,左侧菜单中依次点击“核心” - 频道 ...

  3. PHP-Java-Bridge使用笔记，2014年9月最新版

    这是我在做平安银行开发的时候,本地使用PHP环境,平安银行接口为Java接口的时候,采用PHP-Java-Bridge的方式调用接口的笔记.因为现在网上的教程基本上都不行了,所以在这里贴出我能使用的而 ...

  4. 九个衡量 Rails 应用性能的小方法

    你有个绝佳的商业创意,日复一日地将它完善丰满起来.后来,你雇了一群天赋异禀的开发者.Web 设计师和用户体验专家,他们用一种非常棒的框架--Ruby on Rails 帮你实现长久以来的梦想. 你的网 ...

  5. Comet技术浅论

    1.如何实现一个轮询? function getMessage(url,callback){ var XHR=new XMLHttpRequest(); XHR.open('get',url,true ...

  6. POJ 2136

    #include <iostream> #include <string> #define MAXN 26 using namespace std; int _m[MAXN]; ...

  7. ExtJs之Ext.core.DomHelper.append

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

  8. linq lambda 分组后排序

    1.lamdba分组排序foodBusinessDistrict.                        GroupBy(x => new                        ...

  9. UITableViewController 滚动引起的cocos2d动画暂停问题的解决

    UITableViewController 滚动引起的cocos2d动画暂停问题的解决 之前在使用UITableViewController进行滚动时,cocos2d的动画会暂停,直至滚动完毕才会继续 ...

  10. servlet学习笔记二

    Servlet主要内容: 1)表单处理 2)乱码问题 3)页面跳转 4)生命周期 一.表单处理 Servlet获取表单数据 request.getParameter():通过表单参数名获取参数值 re ...