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

往期干貨合集：
《月底福利！五月設(shè)計(jì)圈最新干貨合集》
《華麗來(lái)襲！20款免費(fèi)高質(zhì)量的網(wǎng)頁(yè)P(yáng)SD模板》
《最熱門工具推薦！為響應(yīng)式網(wǎng)站而生的40款柵格神器》

總而言之，不論你是設(shè)計(jì)師還是開(kāi)發(fā)者，30份干貨里面，總有適合您的！

1. DynCSS

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

2. Handy.js

Handy.js是基于Node.js的web應(yīng)用程序模板。通過(guò)這個(gè)模板你可以更大程度上專注于創(chuàng)建獨(dú)特的應(yīng)用，而不是在基礎(chǔ)的功能上消耗時(shí)間。Handy有許多不錯(cuò)的功能，比如更加簡(jiǎn)單的內(nèi)容管理，基于角色的訪問(wèn)控制機(jī)制，有效的緩存控制，內(nèi)置搜索引擎優(yōu)化等等。

3. Onsen UI

這是一套為PhoneGap/Cordove hybird 所創(chuàng)建的前端UI開(kāi)發(fā)框架，旨在提高跨平臺(tái)應(yīng)用的可用性。與Monaca搭配使用的話，Onsen UI可以讓你的APP在功能實(shí)現(xiàn)上更加方便。整套UI使用了Angular.js和Topcoat來(lái)開(kāi)發(fā)，所以你完全可以在這套強(qiáng)健的開(kāi)發(fā)框架上充分發(fā)揮你的創(chuàng)造力。

4. Kreate.js

Kreate是一套小巧的jQuery輔助方法，可以快速生成DOM元素用作jQuery對(duì)象。你可以使用Kreate創(chuàng)建一個(gè)單獨(dú)的元素（比如div），或者創(chuàng)造一堆足以令你瀏覽器崩潰的元素，這都是沒(méi)有問(wèn)題的。快速，方便就是它的特色。

5. WTF Forms

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

6. Dimensions Toolkit

Dimensions Toolkit 是一款用來(lái)精確測(cè)量和控制尺寸的工具。通過(guò)調(diào)節(jié)手柄或者手動(dòng)輸入都可以輕易控制你要?jiǎng)?chuàng)建的控件尺寸。工具本身默認(rèn)設(shè)置了320px、480px、768px和1024px作為默認(rèn)的尺寸斷點(diǎn)。

7. Payment Webfont Icons

這是一套為支付而生的web字體，采用的是SVG格式。這套支付圖標(biāo)系統(tǒng)中包含了目前國(guó)際流行的主流支付系統(tǒng)的圖標(biāo)，有類似需求的同學(xué)應(yīng)該非常需要。（像天津商業(yè)銀行這種路數(shù)的就不要想了吧……）

8. Project Parfait

Project Parfait是一個(gè)服務(wù)于設(shè)計(jì)師和開(kāi)發(fā)者的實(shí)驗(yàn)性項(xiàng)目，它能將PS基于圖層的設(shè)計(jì)轉(zhuǎn)化為基于代碼的設(shè)計(jì)方案。在此基礎(chǔ)上，你可以更加方便的工作，可以透過(guò)瀏覽器來(lái)直接提取顏色，漸變的色彩和字體信息，復(fù)制文本信息和CSS樣式，獲取標(biāo)簽和元素，精確控制圖像，等等。

9. Sike

Sike是一款用來(lái)控制時(shí)間間隔的節(jié)點(diǎn)控制命令行工具。不論是設(shè)定起床鬧鐘還是作為事件提醒都是一個(gè)不錯(cuò)的工具。對(duì)于長(zhǎng)時(shí)間在屏幕背后忙碌的開(kāi)發(fā)者而言，親切的命令行界面會(huì)更加得心應(yīng)手吧？

10. Raindrop

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

11. Flat & Free Mobile UI Kit

這是一組漂亮且免費(fèi)的扁平化的手機(jī)UIkit，內(nèi)置了免費(fèi)的PSD文件。

12. Pulpo

Pulpo是一款針對(duì)Doctrine、Doctrine2和Propel的輕量級(jí)便攜可視化命令行工具，你可以使用Pulpo來(lái)導(dǎo)入ORM架構(gòu)定義文件，并且自動(dòng)生成可視化的關(guān)系模型。

13. GitBook

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

14. Goya : Pixel Art Editor

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

15. Captain Icon

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

16. Minicron

Minicorn的目標(biāo)是更方便地管理和監(jiān)控Cron，很大程度上，你可以將Minicron和Corn視作為相互協(xié)同的兩個(gè)組件。

17. Applepie

ApplePie工具箱是一組模塊化的響應(yīng)式CSS框架。入門使用ApplePie很容易。當(dāng)你要構(gòu)建一個(gè)簡(jiǎn)單的網(wǎng)站或者一套“默認(rèn)”的用戶界面的時(shí)候，ApplePie會(huì)是你的好幫手。

18. Perfect Icons

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

19. Treed

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

20. Crumpet

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

21. Contour

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

22. Project Naptha

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

23. Pop

Pop是一款為iOS和OSX所創(chuàng)建的可拓展的動(dòng)畫引擎。除了創(chuàng)建基本的固定的動(dòng)畫之外，它還支持創(chuàng)建彈性的或者逐步衰減的動(dòng)態(tài)動(dòng)畫效果，因此它可以用于構(gòu)建基于物理規(guī)則的更加擬真的動(dòng)畫。Pop的API可以與Obj-C的代碼庫(kù)快速整合，可控度極高。總的來(lái)說(shuō)，Pop是一套經(jīng)過(guò)良好測(cè)試的可靠方案。

24. Two Project Gantt

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

25 Jolly UI Free

Jolly UI Free是一款免費(fèi)的UIKit，內(nèi)置的視覺(jué)元素幾乎都是“純手工”的。所有的UI元素都有AI和PSD兩種格式，方便設(shè)計(jì)師和開(kāi)發(fā)者的不同用途。

26. Free Cooking Icon Set

這是一套免費(fèi)的手繪烹飪圖標(biāo)合集，擁有55款不同食物的矢量圖標(biāo)。

27. Beautons

Beautons是一款易于使用的庫(kù)，用于創(chuàng)建漂亮簡(jiǎn)約的按鈕，可定制性極強(qiáng)。

28. Webflow

Webflows用來(lái)創(chuàng)建設(shè)計(jì)和交互動(dòng)畫的工具，無(wú)需編寫任何代碼。14天免費(fèi)試用。

29. CSS Animation Pocket Guide

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

30. The Style Guide

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

原文地址：codegeekz
優(yōu)設(shè)網(wǎng)翻譯：@陳子木

本文由優(yōu)設(shè)網(wǎng)原創(chuàng)翻譯，請(qǐng)尊重版權(quán)和譯者成果，轉(zhuǎn)摘請(qǐng)附上優(yōu)設(shè)鏈接，違者必究。謝謝各位編輯同仁配合。

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

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