2013年9月9日 星期一

如何使用UI kit


今天早上研究codepen, 下午就花點時間研究UI kit , 一套輕量級的工具包, 花了三小時, 總算摸出一點東西來


將文件下載, 解壓縮後, 開啟如下圖, 圖中的index是html 檔, 是要自己刻的




用sublime 開啟HTML檔取名index, 將下列文字列入
<!DOCTYPE html>
<html>
 <head>
  <title></title>
  <link rel="stylesheet" href="uikit.min.css" />
  <script src="jquery.js"></script>
  <script src="uikit.min.js"></script>
 </head>
 <body>
 </body>
</html>

 我們要試圖做出下方第一列白色漸層的UI  button
http://getuikit.com/docs/button.html



將Makup 中文字, 列入index 中 <body>...</body>
<a class="uk-button" href="">...</a>
<button class="uk-button" type="button">...</button>
<button class="uk-button" type="button" disabled>...</button>
如下
<!DOCTYPE html>
<html>
 <head>
  <title></title>
  <link rel="stylesheet" href="uikit.min.css" />
  <script src="jquery.js"></script>
  <script src="uikit.min.js"></script>
 </head>
 <body>
<a class="uk-button" href="">...</a>
<button class="uk-button" type="button">...</button>
<button class="uk-button" type="button" disabled>...</button>
 </body>
</html>

會發現沒有作用....(喂!)

檢查一下代碼, 發現引用css這裡出錯了, 改成如下
<link rel="stylesheet" href="css/uikit.min.css" />

另外觀察範例的Button會發現有漸層, 顯然是要引用 uikit.gradient .css,  所以一併修改如下
<link rel="stylesheet" href="css/uikit.gradient.css" />
整個程式碼應該是如下

<!DOCTYPE html>
<html>
<head>
<title>UIkit Test</title>
<link rel="stylesheet" type="text/css" href="css/uikit.gradient.css" />
<script src="jquery.js"></script>
<script src="uikit.min.js"></script>
</head>
<body>
<h1>Ginger UIkit Test</h1>
<a class="uk-button" >Link</a>
           <button class="uk-button" type="button">Button</button>
           <button class="uk-button" type="button" disabled>Disable</button>
</body>
</html>




出來的效果就會對了!


完整的工具包如下