19年你應該關注這50款前端熱門工具（中）

上篇文章《19年你應該關注這50款前端熱門工具（上）》，小編介紹了構建、框架和庫的相關工具，沒想到收到這麼的關注，再次感謝你們，祝你們新年快樂，闔家歡樂，萬事如意。javascript

本篇文章小編再給你們推薦HTML、CSS、Javascript等相關的十幾款工具，但願你們喜歡。css

HTML和CSS工具

1五、 keyframes.app

keyframes.app前端

一款基於時間關鍵幀，在線製做網頁動畫的網站，你無需在編輯器和瀏覽器直接互相切換，及所見即所得。keyframes.app提供在線製做和谷歌瀏覽器擴展插件兩種形式。製做完成後，你能很方便的將自動產生的CSS代碼複製到你的項目中。java

1六、 Emotion

emotion.sh/git

Emotion是一款用JavaScript編寫css的庫，支持字符串和對象兩種方式聲明CSS變量，若是你在使用React，試用這個庫將讓你以更加優雅的方式用JavaScript編寫CSS。github

1七、modern-normalize

github.com/sindresorhu…web

normalize.css可讓瀏覽器以接近標準的方式一致地渲染全部元素，並且不一樣於cssrest，只針對須要正常化的元素。modern-normalize只針對現代瀏覽器，並且足夠現代，甚至IE和Edge都已經放棄。編程

1八、layerJS

layerjs.org/後端

一款你只須要編寫HTML就能很輕鬆實現菜單、畫框、彈出層、滾動視察、縮放、觸摸手勢等衆多效果的框架，這個框架代碼壓縮版只有30KB,很方便與各類前端框架集成(Angular,VueJS,React),支持響應式和觸摸，而且不依賴任何庫就能實現。瀏覽器

1九、css-blocks

css-blocks.com/

一款受 CSS Modules, BEM 和 Atomic CSS 框架啓發，爲你的web應用組件提供完美的CSS模塊方案。

20、usebasin

usebasin.com/

一款你只須要設計表單，無需編寫後端代碼，就能很方便的將表單應用集成到你的項目裏。

2一、mustard

mustard-ui.com/

一款適合初學者的CSS框架，可是看起來還蠻不錯，模塊化，開源，壓縮版只有6KB，支持FLEX,Grid佈局和自帶一些漂亮UI,好比進度條，表單、按鈕等，雖然小，但功能齊全。

javascript工具

2二、ScrollHint

appleple.github.io/scroll-hint…

一個JS庫，用於指示元素能夠水平滾動，並帶有指針圖標，若是你在作一個新手引導，這個工具將會是一個不錯的選擇。

2三、ToastUI editor

github.com/nhnent/tui.…

強大的Markdown編輯器tui.editor,方便集成到你的項目裏，這款強大的富媒體編輯器有如下特色：

支持 CommonMark 與 GFM（GitHub Flavored Markdown）兩種標準
支持豐富的擴展插件，如顏色選擇器、圖表、UML、表格合併
提供了所見即所得與 Markdown 這兩種模式，在編輯過程當中能夠隨時切換，很是方便。在所見即所得模式下，能夠直接從瀏覽器、 Excel、PPT等複製文本，而且保留原來的格式

2四、FilePond

github.com/pqina/filep…

Filepond 是一個用於文件上傳的 JavaScript 庫，能夠上傳任何內容，優化圖像以得到更快的上傳速度，並提供一個出色的，可訪問的，流暢的用戶體驗。

Filepond 提供了多種上傳方式：拖放，複製和粘貼文件，瀏覽文件系統或僅使用庫的API。 gzip 壓縮後僅有 21KB ，而且內置了圖像優化和圖像自動調整功能。

Filepond 適用於 React ， Vue ， Angular 和 jQuery 。

2五、Dinero.js

sarahdayan.github.io/dinero.js/

一個用來建立、計算和格式化貨幣價值的不可變的框架。

不管在銀行應用程序、電子商務網站仍是證券交易所平臺，咱們天天都在與金錢互動。咱們也愈來愈依賴技術來處理問題。

然而，關於如何以編程處理貨幣價值尚無共識。雖然金錢是現代社會中廣泛存在的概念，但相較於日期和時間之類的東西，它並非任何主流語言中的一流數據類型。結果，每一種軟件都有本身的處理方式，且伴隨着陷阱。

Dinero.js遵循Fowler的模式更多一點兒。它容許你在JavaScript中建立、計算和格式化貨幣值。你能夠進行數學運算、解析和格式化對象，使你的開發過程更加輕鬆。

該庫設計爲不可變和可連接的模式。它支持全局設置，具備擴展格式選項，並提供本機國際化支持。

2六、Swup

github.com/gmrchk/swup

一款適合初學者的框架，方便靈活易用，讓你能快速製做專業級的頁面轉場動畫效果。

2七、Selection.js

simonwep.github.io/selection/

簡單易用的可視化，支持鼠標拖拽、使用Cmd/Ctrl+click 選擇頁面元素的庫（支持分組選擇），大大節省了你的開發時間。只有3KB大小，不依賴jQuery。

2八、Glider.js

nickpiscitelli.github.io/Glider.js/

一個超快速(25毫秒加載)，輕量級(小於3KB)，無依賴性(不須要jQuery)的製做幻燈效果的前端庫，支持響應式，易於擴展，方便自定義事件等...，更多特性等待你的發現！

2九、ScrollOut

scroll-out.github.io/

一款幫你製做專業級Scroll滾動效果（滾動視差）的框架，框架大小不到1KB,使用回調的方式將相關動畫元素的屬性進行實時分配，方便你作出個性化的動態效果。

小節

今天的內容就分享到這裏，在下篇文章裏我將會給你們分享報表、React、測試和數據等相關的21款工具，敬請期待！

更多精彩內容，請微信關注」前端達人」公衆號！