干貨！六月設計圈最新干貨合集第一波

@陳子木 新一輪的干貨到了！過完兒童節和粽子節，又該開始干活兒了吧？跟以往一樣，本次干貨還是大雜燴，有web應用也有程序框架，圖標合集與UIKit也不會缺席。這當中有完全免費開源的，也有注明是用于商業或者非商業用途的，在使用前，還請仔細閱讀適用范圍，部分免費試用的工具也請注意它的試用期限哦。

往期干貨合集：
《月底福利！五月設計圈最新干貨合集》
《華麗來襲！20款免費高質量的網頁PSD模板》
《最熱門工具推薦！為響應式網站而生的40款柵格神器》

總而言之，不論你是設計師還是開發者，30份干貨里面，總有適合您的！

1. DynCSS

DynCSS是用來分析你的CSS的-dyn-（屬性）規則的。諸如Javascript控制的滾動和縮放這類型的瀏覽器事件都在分析范疇以內。分析結果可以應用到你所制定的CSS屬性中，并且借此可以通過jQuery中.CSS()的方法來賦予CSS任何動態的屬性。而這一切，你只需要為JS表達式制定-dyn-前綴就可以實現。

2. Handy.js

Handy.js是基于Node.js的web應用程序模板。通過這個模板你可以更大程度上專注于創建獨特的應用，而不是在基礎的功能上消耗時間。Handy有許多不錯的功能，比如更加簡單的內容管理，基于角色的訪問控制機制，有效的緩存控制，內置搜索引擎優化等等。

3. Onsen UI

這是一套為PhoneGap/Cordove hybird 所創建的前端UI開發框架，旨在提高跨平臺應用的可用性。與Monaca搭配使用的話，Onsen UI可以讓你的APP在功能實現上更加方便。整套UI使用了Angular.js和Topcoat來開發，所以你完全可以在這套強健的開發框架上充分發揮你的創造力。

4. Kreate.js

Kreate是一套小巧的jQuery輔助方法，可以快速生成DOM元素用作jQuery對象。你可以使用Kreate創建一個單獨的元素（比如div），或者創造一堆足以令你瀏覽器崩潰的元素，這都是沒有問題的。快速，方便就是它的特色。

5. WTF Forms

WTF Forms使用了一點CSS技巧，提供了更加友好的HTML表單控件。兼容IE9以上的IE瀏覽器和Chrome、Firefox、Safari等目前主流的瀏覽器。

6. Dimensions Toolkit

Dimensions Toolkit 是一款用來精確測量和控制尺寸的工具。通過調節手柄或者手動輸入都可以輕易控制你要創建的控件尺寸。工具本身默認設置了320px、480px、768px和1024px作為默認的尺寸斷點。

7. Payment Webfont Icons

這是一套為支付而生的web字體，采用的是SVG格式。這套支付圖標系統中包含了目前國際流行的主流支付系統的圖標，有類似需求的同學應該非常需要。（像天津商業銀行這種路數的就不要想了吧……）

8. Project Parfait

Project Parfait是一個服務于設計師和開發者的實驗性項目，它能將PS基于圖層的設計轉化為基于代碼的設計方案。在此基礎上，你可以更加方便的工作，可以透過瀏覽器來直接提取顏色，漸變的色彩和字體信息，復制文本信息和CSS樣式，獲取標簽和元素，精確控制圖像，等等。

9. Sike

Sike是一款用來控制時間間隔的節點控制命令行工具。不論是設定起床鬧鐘還是作為事件提醒都是一個不錯的工具。對于長時間在屏幕背后忙碌的開發者而言，親切的命令行界面會更加得心應手吧？

10. Raindrop

這款名為雨點的工具可以令書簽更加生動和強大。僅需一個點擊，網頁、文章、視頻和圖片就都到碗里來了。Raindrop可不僅僅是保存了書簽本身，會將內容都收納進來，并且按照類型進行組織管理，還可以非常方便地分享這些信息。另外，Raindrop提供了可供網頁調用的API，也許這正是你想要的。

11. Flat & Free Mobile UI Kit

這是一組漂亮且免費的扁平化的手機UIkit，內置了免費的PSD文件。

12. Pulpo

Pulpo是一款針對Doctrine、Doctrine2和Propel的輕量級便攜可視化命令行工具，你可以使用Pulpo來導入ORM架構定義文件，并且自動生成可視化的關系模型。

13. GitBook

GitBook是一款基于Node.js庫的命令行工具，可以使用GitHub/Git和Markdown創建漂亮的編程圖書。它所創建的圖書可以包含聯系（目前僅支持Javascript，不過Python和Ruby的版本即將推出）。

14. Goya : Pixel Art Editor

Goya是一款像素編輯器，基于Clojurescript + Om。Goya支持將你制作的全部圖像輸出成Gif動畫，可以用來制作教程。

15. Captain Icon

超過350款矢量圖標被內置到Captain Icon中，圖標涉及內容非常廣泛，從電腦到食品，從交通到體育，一應俱全。內置了多種格式供你使用，包括EPS，PSD，PNG和SVG甚至還制作成了一套web字體。

16. Minicron

Minicorn的目標是更方便地管理和監控Cron，很大程度上，你可以將Minicron和Corn視作為相互協同的兩個組件。

17. Applepie

ApplePie工具箱是一組模塊化的響應式CSS框架。入門使用ApplePie很容易。當你要構建一個簡單的網站或者一套“默認”的用戶界面的時候，ApplePie會是你的好幫手。

18. Perfect Icons

Perfect Icons 可以幫你輕松創建可編輯的、特定分辨率的圖標。從六十多款圖標當中選擇合適的，調整色彩、大小、間距和弧度，你就擁有自己想要的圖標了。

19. Treed

Treed是一款強的樹編輯組件。Treed本身可以用來編輯文本，并且具備可拓展可定制的特性，強大而易用。

20. Crumpet

Crumpet是一款精致簡約的SASS/SCSS響應式框架，可以讓你的HTMl代碼更加整潔有條理。

21. Contour

Contour是Forio核心的可視化庫組件。它建立在目前主流的D3引擎之上，可以讓你輕松地令數據可視化，令抽象的數據化作直觀的可視化圖形。

22. Project Naptha

Project Naptha可以讓你從任意圖片上復制、翻譯、高亮文本，它可以讓你從圖片中抓取文字并且在其他的地方進行編輯。

23. Pop

Pop是一款為iOS和OSX所創建的可拓展的動畫引擎。除了創建基本的固定的動畫之外，它還支持創建彈性的或者逐步衰減的動態動畫效果，因此它可以用于構建基于物理規則的更加擬真的動畫。Pop的API可以與Obj-C的代碼庫快速整合，可控度極高。總的來說，Pop是一套經過良好測試的可靠方案。

24. Two Project Gantt

Two Project Gantt 是一款基于jQuery的 Javascript組件，用來創建甘特圖，任務樹，并且可以將數據以JSON格式輸出。Two Project Gantt提供了實時編輯、縮放以及數據快捷方式和CSS換膚等功能。

25 Jolly UI Free

Jolly UI Free是一款免費的UIKit，內置的視覺元素幾乎都是“純手工”的。所有的UI元素都有AI和PSD兩種格式，方便設計師和開發者的不同用途。

26. Free Cooking Icon Set

這是一套免費的手繪烹飪圖標合集，擁有55款不同食物的矢量圖標。

27. Beautons

Beautons是一款易于使用的庫，用于創建漂亮簡約的按鈕，可定制性極強。

28. Webflow

Webflows用來創建設計和交互動畫的工具，無需編寫任何代碼。14天免費試用。

29. CSS Animation Pocket Guide

這款CSS動畫口袋書是一本關于CSS動畫的電子書，擁有多種格式供你在不同設備上閱讀（PDF、MOBI、EPUB）。

30. The Style Guide

這本書是關于Node.js、Gulp、Grunt、Ruby和PHP的樣式的電子書。

原文地址：codegeekz
優設網翻譯：@陳子木

本文由優設網原創翻譯，請尊重版權和譯者成果，轉摘請附上優設鏈接，違者必究。謝謝各位編輯同仁配合。

【優設網 原創文章 投稿郵箱：2650232288@qq.com】

================關于優設網================
"優設網uisdc.com"是一個分享網頁設計、無線端設計以及PS教程的干貨網站。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量70萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設計教程、經驗分享和各種意想不到的"福利"嗎？
添加 優秀網頁設計 微信號：【youshege】優設哥的全拼
您也可以通過掃描下方二維碼快速添加：