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. 利用Linq + Jquery + Ajax 异步分页的实现

    在Web显示的时候我们经常会遇到分页显示,而网上的分页方法甚多,但都太过于消耗带宽,所以我想到了用Ajax来分页,利用返回的Json来处理返回的数据, 大大简化了带宽的压力. 先说下思路,无非就是异步 ...

  2. MYSQL注入天书之宽字节注入

    Background-7 宽字节注入 Less-32,33,34,35,36,37六关全部是针对'和\的过滤,所以我们放在一起来进行讨论. 对宽字节注入的同学应该对这几关的bypass方式应该比较了解 ...

  3. 移动平台WEB前端开发技巧汇总

    原文 :http://uecss.com/mobile-platform-web-front-end-development-skills-summary.html 开发者们都知道在高端智能手机系统中 ...

  4. uva 10564

    Problem FPaths through the HourglassInput: Standard Input Output: Standard Output Time Limit: 2 Seco ...

  5. 字典树trie的学习与练习题

    博客详解: http://www.cnblogs.com/huangxincheng/archive/2012/11/25/2788268.html http://eriol.iteye.com/bl ...

  6. POJ 1151 Atlantis（经典的线段树扫描线，求矩阵面积并）

    求矩阵的面积并 采用的是区间更新 #include <iostream> #include <stdio.h> #include <string.h> #inclu ...

  7. hadoop,spark,linux上常用命令

    记下常用命令,慢慢补充 1.hadoop 查看hdfs上的目录: hadoop fs -ls /给hdfs上目录授予权限:   hadoop fs -chmod 777 /tmp/hive 在hdfs ...

  8. asp.net dataTable添加列

    DataTable dtNew = new DataTable(); dtNew.Columns.Add("ItemNo");//序列号列 dtNew.Columns.Add(&q ...

  9. ps 快捷键

    1.前景色填充ALT+DEL 2.背景色填充CTRL+DEL 3.按D键可以以恢复默认的前景色(黑).背景色(白). 4.按X键可以切换前景色.背景色.

  10. 做个简单的Android列表字母索引控件

    相信大家在许多App中都见到过带字母索引的界面,比如我最近看到的这个开源控件: WaveSideBar 很酷是不是?!!!如果加在例如联系人列表界面上,大大提升了用户体验. 那么这个索引控件要怎么做呢 ...