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

前端達人發表於2019-02-04
19年你應該關注這50款前端熱門工具(中)

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

本篇文章小編再給大家推薦HTML、CSS、Javascript等相關的十幾款工具,希望大家喜歡。

HTML和CSS工具

15、 keyframes.app

keyframes.app

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

一款基於時間關鍵幀,線上製作網頁動畫的網站,你無需在編輯器和瀏覽器直接互相切換,及所見即所得。keyframes.app提供線上製作和谷歌瀏覽器擴充套件外掛兩種形式。製作完成後,你能很方便的將自動產生的CSS程式碼複製到你的專案中。

16、 Emotion

emotion.sh/

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

Emotion是一款用JavaScript編寫css的庫,支援字串和物件兩種方式宣告CSS變數,如果你在使用React,試用這個庫將讓你以更加優雅的方式用JavaScript編寫CSS。

17、modern-normalize

github.com/sindresorhu…

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

normalize.css可以讓瀏覽器以接近標準的方式一致地渲染所有元素,而且不同於cssrest,只針對需要正常化的元素。modern-normalize只針對現代瀏覽器,而且足夠現代,甚至IE和Edge都已經放棄。

18、layerJS

layerjs.org/

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

一款你只需要編寫HTML就能很輕鬆實現選單、畫框、彈出層、滾動視察、縮放、觸控手勢等眾多效果的框架,這個框架程式碼壓縮版只有30KB,很方便與各種前端框架整合(Angular,VueJS,React),支援響應式和觸控,並且不依賴任何庫就能實現。

19、css-blocks

css-blocks.com/

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

一款受 CSS Modules, BEM 和 Atomic CSS 框架啟發,為你的web應用元件提供完美的CSS模組方案。

20、usebasin

usebasin.com/

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

一款你只需要設計表單,無需編寫後端程式碼,就能很方便的將表單應用整合到你的專案裡。

21、mustard

mustard-ui.com/

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

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

javascript工具

22、ScrollHint

appleple.github.io/scroll-hint…

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

一個JS庫,用於指示元素可以水平滾動,並帶有指標圖示,如果你在做一個新手引導,這個工具將會是一個不錯的選擇。

23、ToastUI editor

github.com/nhnent/tui.…

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

強大的Markdown編輯器tui.editor,方便整合到你的專案裡,這款強大的富媒體編輯器有以下特點:

  • 支援 CommonMark 與 GFM(GitHub Flavored Markdown)兩種標準
  • 支援豐富的擴充套件外掛,如顏色選擇器、圖表、UML、表格合併
  • 提供了所見即所得與 Markdown 這兩種模式,在編輯過程中可以隨時切換,非常方便。在所見即所得模式下,可以直接從瀏覽器、 Excel、PPT等複製文字,並且保留原來的格式

24、FilePond

github.com/pqina/filep…

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

Filepond 是一個用於檔案上傳的 JavaScript 庫,可以上傳任何內容,優化影象以獲得更快的上傳速度,並提供一個出色的,可訪問的,流暢的使用者體驗。

Filepond 提供了多種上傳方式:拖放,複製和貼上檔案,瀏覽檔案系統或僅使用庫的API。 gzip 壓縮後僅有 21KB ,並且內建了影象優化和影象自動調整功能。

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

25、Dinero.js

sarahdayan.github.io/dinero.js/

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

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

無論在銀行應用程式、電子商務網站還是證券交易所平臺,我們每天都在與金錢互動。我們也越來越依賴技術來處理問題。

然而,關於如何以程式設計處理貨幣價值尚無共識。雖然金錢是現代社會中普遍存在的概念,但相較於日期和時間之類的東西,它並不是任何主流語言中的一流資料型別。結果,每一種軟體都有自己的處理方式,且伴隨著陷阱。

Dinero.js遵循Fowler的模式更多一點兒。它允許你在JavaScript中建立、計算和格式化貨幣值。你可以進行數學運算、解析和格式化物件,使你的開發過程更加輕鬆。

該庫設計為不可變和可連結的模式。它支援全域性設定,具有擴充套件格式選項,並提供本機國際化支援。

26、Swup

github.com/gmrchk/swup

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

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

27、Selection.js

simonwep.github.io/selection/

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

簡單易用的視覺化,支援滑鼠拖拽、使用Cmd/Ctrl+click 選擇頁面元素的庫(支援分組選擇),大大節省了你的開發時間。只有3KB大小,不依賴jQuery。

28、Glider.js

nickpiscitelli.github.io/Glider.js/

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

一個超快速(25毫秒載入),輕量級(小於3KB),無依賴性(不需要jQuery)的製作幻燈效果的前端庫,支援響應式,易於擴充套件,方便自定義事件等...,更多特性等待你的發現!

29、ScrollOut

scroll-out.github.io/

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

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

小節

今天的內容就分享到這裡,在下篇文章裡我將會給大家分享報表、React、測試和資料等相關的21款工具,敬請期待!

更多精彩內容,請微信關注”前端達人”公眾號!

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

相關文章