使用tdcss.js輕鬆製作自己的style guide

世有因果知因求果發表於2015-04-20
CSSJSGUIIDE

　　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>

相關文章