一年又過去了，我再次榮幸地回顧了過去12個月的《Web Tools Weekly》新聞通訊檔案，尋找2021年讀者認(rèn)為最有趣的幾款前端工具。因此，為了開啟2022年，我整理了一份最受歡迎的60款工具的清單。我相信這里至少有一兩款工具您可以從今天開始在您的前端項目中使用。

有些前端工具非常實用，而另一些工具可能只是因為好奇心才上榜（我根據(jù)唯一點擊次數(shù)來判斷）。由于許多進(jìn)入我的年度榜單的工具都比較新，我認(rèn)為這很好地表明了未來一年哪些前端工具將會流行。

從上往下數(shù)！

- 60. Open Props

• 59. NextUI
• 58. Dopefolio
• 57. Vizzu
• 56. 10015 Tools
• 55. Snoweb
• 54. Tails
• 53. MapLibre
• 52. SVG Repo
• 51. Animated Backgrounds
• 50. Pico.css
• 49. Coding Fonts
• 48. UI-Neumorphism
• 47. Beautiful CSS Buttons
• 46. Shaper
• 45. Prestige
• 44. HTML.cafe
• 43. Charts.css
• 42. Buttons Generator
• 41. Doodad Pattern Generator
• 40. Kaboom
• 39. Skuawk
• 38. Glassmorphism CSS Generator
• 37. Kalia
• 36. AdminJS
• 35. Pancake
• 34. Mosaic Lite
• 33. Iconduck
• 32. Luxa CSS
• 31. Glitter
• 30. Components AI
• 29. Unicode Arrows
• 28. Type Scale Clamp Generator
• 27. AnimXYZ
• 26. Frontend Toolkit
• 25. colorpalettes.earth
• 24. Uncut
• 23. Lowdefy
• 22. JavaScript Booster
• 21. Layout Patterns
• 20. Baseline Background Remover
• 19. Theatre.js
• 18. Transition.css
• 17. The Component Gallery
• 16. party.js
• 15. Headless UI
• 14. Turbo
• 13. tidy.js
• 12. Tail-Kit
• 11. Tailwind Components
• 10. Pikaday
• 9. HTML Boilerplates
• 8. Whirl
• 7. Riju
• 6. DevUI
• 5. Pollen
• 4. AlterNight
• 3. UIsual
• 2. Supabase UI
• 1. CSS Layout Generator
• 您最喜歡的2021年前端工具是什么？

### 60. Open Props

Open Props 提供了一套手工制作的設(shè)計令牌，由 CSS 自定義屬性組成。由于使用了這種特殊的 CSS 功能，我可以看到這類工具會越來越普遍。它們允許您引入小型且有用的自定義屬性集合，例如 animations.css、borders.css、fonts.css、zindex.css 等，更多內(nèi)容即將推出。或者您可以只使用主要的 Open Props 文件來一次性獲取所有內(nèi)容。

這絕對是一款值得關(guān)注的前端工具，如果您想幫助構(gòu)建可用的令牌庫，它也是一個不錯的貢獻(xiàn)目標(biāo)。

59. NextUI

一個現(xiàn)代化的 React 庫，它使用流行的 CSS-in-JS 解決方案 Stitches，并包含開箱即用的明暗 UI 組件以及一個默認(rèn)調(diào)色板，這對于快速構(gòu)建登錄頁面或其他最初未與任何品牌相關(guān)的內(nèi)容可能很有用。

它目前被列為 Alpha 階段的開發(fā)，所以這是另一個值得在來年關(guān)注的工具。

58. Dopefolio

如果您正在尋找一種輕松創(chuàng)建自己的開發(fā)者作品集的方法，Dopefolio 是一種快速解決方案，它針對 SEO 進(jìn)行了優(yōu)化，并且開箱即用就具有很高的 Lighthouse 分?jǐn)?shù)。

實時演示可以讓您了解它的外觀（響應(yīng)式等等），并且它包含一個顏色選擇器組件，因此您可以實時測試您自己的首選模板主色。

57. Vizzu

這是今年前端工具榜單上一個獨特的工具。Vizzu 是一個開源的 JavaScript 庫，用于創(chuàng)建動畫數(shù)據(jù)故事和可視化效果。也許它的流行是由于如今創(chuàng)建和嵌入醫(yī)療數(shù)據(jù)的需求。

這個庫允許您輕松構(gòu)建靜態(tài)數(shù)據(jù)圖表、動畫圖表和數(shù)據(jù)故事。您可以查看動畫圖表或數(shù)據(jù)故事的一些實時示例，其中包括一個數(shù)據(jù)故事，展示了在電視劇《老友記》的整個運行過程中哪個客串角色的臺詞最多。

56. 10015 Tools

我似乎每年都會找到一些這樣的前端工具。10015 Tools 是一組前端工具，而不是單個工具。它包括文本工具、圖像工具、CSS 工具、編碼工具（例如縮小器）、顏色工具、社交媒體工具以及其他一些雜項類別下的工具。

這絕對是我見過的更全面的多合一解決方案之一，因此我相信您會在這里找到一些有用的前端工具，您可以隨時回來使用。

55. Snoweb

圖標(biāo)集總是很受歡迎，我每年都會遇到至少十幾款新的圖標(biāo)集。這款圖標(biāo)集包含優(yōu)化的 SVG 圖標(biāo)，其中許多圖標(biāo)在您將鼠標(biāo)懸停在其上時具有內(nèi)置的動畫效果（如打開/關(guān)閉信封圖標(biāo)）。

像許多圖標(biāo)網(wǎng)站一樣，您可以按關(guān)鍵字搜索或按類別篩選，其中一個類別是“品牌”類別，其中包含 Twitter、Facebook、Vimeo、YouTube、Snapchat 等的圖標(biāo)。

54. Tails

這是第一個進(jìn)入榜單的基于 Tailwind 的工具；隨著 Tailwind 越來越受歡迎，這在過去幾年一直是一種趨勢。這款前端工具是一個用于使用 Tailwind CSS 的項目的拖放式頁面構(gòu)建器。

它為 15 個類別中的每一個類別都包含兩個免費的“塊”，所以這里有很多免費的東西，您可以每月付費解鎖其余部分。

53. MapLibre

這個開源地圖庫于 3 月份推出，并在全年廣受歡迎。它包含一個 JavaScript 庫以及一個用于在 iOS 和 Android 應(yīng)用程序中顯示地圖的 SDK。

如果您想了解基于 Web 的前端工具的可能性，文檔中包含許多使用 JavaScript 的示例。

52. SVG Repo

SVG Repo 完全是基于數(shù)量才上榜的。它是一個擁有超過 300,000 個免費、優(yōu)化的基于 SVG 的圖形和圖標(biāo)的資源庫，其中大部分都允許用于商業(yè)用途。

您選擇的每個圖標(biāo)都會告訴您它屬于哪種許可證。您可以按關(guān)鍵字搜索并“保存”您喜歡的圖標(biāo)以備后用（無需登錄）。

51. Animated Backgrounds

這款工具今年進(jìn)入前 60 名，但可能不是其中最實用的前端工具。正如我在開頭所說，有些東西只是出于純粹的好奇心而被點擊。它是一個動畫背景庫，來自各種 CodePen 演示。

該庫很有用，因為它將背景顯示為預(yù)先錄制的視頻，因此您不必?fù)?dān)心所有演示都會加載并導(dǎo)致瀏覽器選項卡崩潰。謹(jǐn)慎使用這些工具（如果有的話），因為它們通常會使用大量的 JavaScript 和 CSS。

50. Pico.css

這與當(dāng)今流行的 CSS 框架不同。它有點像反 Tailwind 工具，更像是一個啟動 CSS 文件（如重置）而不是一個成熟的框架。

Pico.css 為所有原生 HTML 元素提供優(yōu)雅的默認(rèn)樣式（您可以在此處預(yù)覽），而無需向您的標(biāo)記添加大量類——并且整個文件縮小并 gzip 后小于 10kb。

49. Coding Fonts

編碼字體似乎是最近令人興奮的新趨勢，而 CSS-Tricks 利用這一點創(chuàng)建了這個小的交互式信息應(yīng)用程序。

在左側(cè)選擇一種字體以顯示示例代碼、字體信息（連字、斜體等）、成本（大多數(shù)是免費的），以及顯示 HTML、CSS 或 JavaScript 示例代碼的選項。

48. UI-Neumorphism

這個 React 庫基于幾年前似乎已經(jīng)過時的舊擬物化趨勢。這種趨勢會卷土重來嗎？可能不會。事實上，即使我去年第一次分享了這個 React 庫，它也有大約兩年的歷史了。

該庫包含大量不同的組件，所有這些組件都實現(xiàn)了“新擬物化”外觀。有趣的是，但可能不適合許多項目。

47. Beautiful CSS Buttons

幾乎每個應(yīng)用程序或網(wǎng)站都需要按鈕，因此這樣的集合總是很受歡迎。許多這些按鈕與您可能在其他地方看到的不同。

許多按鈕都包含有趣的懸停效果，您可以輕松地直接在頁面上復(fù)制和粘貼任何單個按鈕的 HTML 和 CSS。

46. Shaper

這個交互式工具允許您實時在頁面上調(diào)整各種 UI 設(shè)置以構(gòu)建不同的頁面元素。一旦您根據(jù)自己的喜好調(diào)整了內(nèi)容，您可以獲取代碼，該代碼使用 CSS 自定義屬性。

您可以切換演示視圖和“規(guī)格”視圖（即代碼以及其他有用的信息）。此工具特別關(guān)注排版以及其余 UI 樣式，這是使布局看起來正確的關(guān)鍵部分。

45. Prestige

這是瀏覽器中的基于文本的 HTTP 客戶端——就像 Postman，但沒有界面。它允許您以純文本定義請求，您可以選擇將其保存為 Gist。它包括隔離的 Cookie 管理，并且具有明暗兩種模式。

正如作者解釋的那樣，“我創(chuàng)建 Prestige 是因為我在工作時需要這樣的應(yīng)用程序……并與外部 API 進(jìn)行交互?！?/p>

44. HTML.cafe

這可能是整個列表中最簡單的工具。HTML.cafe 或多或少是一個簡陋的 CodePen，缺乏更好的術(shù)語。我不認(rèn)為人們會對這種事情感興趣，因為已經(jīng)有強(qiáng)大的工具可以做到它能做的事情。盡管如此，它是一個非常簡單的 HTML 編輯器，具有實時預(yù)覽功能。

它沒有像 CodePen 那樣的單獨 CSS 或 JavaScript 窗口，但如果您愿意，可以輕松地在 <style></style> 或 <script></script> 元素中包含它們。我認(rèn)為此工具的最佳用途可能是幫助完全不熟悉 HTML 的學(xué)生的教師，因為這消除了所有復(fù)雜性。

43. Charts.css

這款前端工具有點像 Tailwind CSS 和 Chart.js 的混合體。簡而言之，Charts.css 是一個 CSS 框架，它允許您使用實用程序類來使用 HTML 和 CSS 構(gòu)建圖表。

您可以創(chuàng)建條形圖、折線圖、多數(shù)據(jù)集圖表、百分比列和 3D 條形圖。最棒的是，這些圖表是可訪問的、響應(yīng)式的，并且易于自定義以滿足您的品牌需求。

42. Buttons Generator

“Buttons Generator” 可能有點用詞不當(dāng)，因為該頁面并沒有真正讓您“生成”按鈕。與之前的按鈕資源一樣，這是一個使用 HTML 和 CSS 構(gòu)建的按鈕庫。

它們按類別劃分，包含一些簡潔的懸停或點擊效果，您可以點擊任何按鈕將代碼復(fù)制到剪貼板。

41. Doodad Pattern Generator

這個交互式工具允許您構(gòu)建自己的圖案化背景，您可以將其導(dǎo)出為各種格式。您可以使用“隨機(jī)”按鈕生成隨機(jī)圖案，或從各種類別樣式中選擇。您還可以編輯顏色、濾鏡和各種變換。

導(dǎo)出對話框允許您保存圖案并通過本地存儲加載先前保存的圖案。將您的圖案導(dǎo)出為 JPEG、PNG、內(nèi)聯(lián) SVG、SVG 文件或 CSS 背景。

40. Kaboom

我每年都會遇到至少一兩個新的 JavaScript 游戲庫，而這是今年進(jìn)入榜單的一個。它似乎擁有一個相當(dāng)優(yōu)雅且易于使用的 API，并包含一組豐富的組件、事件和其他內(nèi)置函數(shù)。

有一個方便的游樂場可以讓您開始使用它，還有一個入門教程。

39. Skuawk

如果您想要 Unsplash 的替代品，Unsplash 可能是您免費庫存圖像的首選來源之一，那么這個美麗的公共領(lǐng)域圖像集合可能是一個不錯的選擇，其中包含一些華麗的照片。

有來自不同攝影師的 16 個類別的圖像，他們都允許他們的圖像在 CC0 許可下使用（即您可以隨意使用）。

38. Glassmorphism CSS Generator

這是一個在線生成器，允許您在頁面元素上構(gòu)建“玻璃態(tài)”效果——有點像磨砂玻璃。此工具顯然應(yīng)該是更大的 UI 庫的一部分，該庫將在許多不同的 UI 組件上結(jié)合這種效果。

無論如何，我比“新擬物化”更喜歡這種效果，而且我的讀者顯然也同意這一點。

37. Kalia

這是進(jìn)入榜單的三個 VS Code 工具之一。這是一個有吸引力的配色方案，您可以將其用于您的 VS Code 設(shè)置。

該擴(kuò)展程序目前僅列出了大約 800 次安裝，這令人驚訝，但它具有令人愉悅的柔和色彩外觀，我認(rèn)為許多人都會喜歡。

36. AdminJS

如果您是 Node 開發(fā)人員，這是一個可以添加到 Node.js 應(yīng)用程序中的開源管理面板。它將為您生成一個 UI，基于您從幾乎任何數(shù)據(jù)庫添加的數(shù)據(jù)，允許您和您的團(tuán)隊管理應(yīng)用程序的內(nèi)容。

您可以使用此示例應(yīng)用程序試用它，該應(yīng)用程序基于 MongoDB 和 Postgres。

35. Pancake

這是另一個用于構(gòu)建跨平臺基于 HTML5 的 2D 游戲的游戲引擎。當(dāng)我第一次分享它時，它獲得了很大的關(guān)注。雖然它進(jìn)入了榜單，但它似乎在您編寫游戲后需要在構(gòu)建步驟中使用 Python。

基本的 API 使用純 JavaScript，您可以在此處查看許多簡潔的小例子。

34. Mosaic Lite

我發(fā)現(xiàn)許多使用不同前端技術(shù)構(gòu)建的儀表板模板。這個模板是用 Tailwind 和 React 制作的，并包含使用 Chart.js 構(gòu)建的可選圖表組件。

與其他類似的模板一樣，這可以用于 SaaS 產(chǎn)品、管理儀表板等等。您可以查看實時演示。

33. Iconduck

這是另一個很棒的開源圖標(biāo)來源，它提供超過 100,000 個圖標(biāo)，可以通過關(guān)鍵字搜索，并且所有圖標(biāo)都可用于商業(yè)項目。

該網(wǎng)站允許點贊和保存圖標(biāo)和圖標(biāo)集合以備后用（需要 Cookie，但無需登錄）。

32. Luxa CSS

這是一個 CSS 庫，實際上是在 2020 年中后期發(fā)布的，但我第一次在 2021 年分享了它。它被稱為“極簡主義”CSS 框架。

Luxa CSS 包含一些基本樣式，以及各種組件、輔助工具和布局樣式，您可以在文檔中或通過查看此 CodePen 集合來查看它們。

31. Glitter

Glitter 絕對是我去年遇到的最奇怪——也是最酷的——前端工具之一，它似乎引起了很多人的興趣，即使它像任何工具一樣簡單。

它是一個生成器，它以類似閃光粉的樣式生成文本，您可以將其保存為 SVG。絕對不適用于您 99% 的項目，但它是一個非常酷的文本效果。

30. Components AI

當(dāng)我最初分享這個工具時，我分享的是主題構(gòu)建器，這就是它進(jìn)入這個榜單的原因。但值得分享這套 15 多個工具。

除了主題構(gòu)建器之外，還有一個語法高亮顯示構(gòu)建器、漸變和陰影工具、SVG 圖案生成器、動畫背景等等。

29. Unicode Arrows

這非常簡單明了。Unicode Arrows 是一個一站式位置，用于復(fù)制和粘貼——您猜對了——Unicode 箭頭以及每個箭頭的相關(guān)十六進(jìn)制代碼。

關(guān)于這個工具沒什么好說的，除了該網(wǎng)站允許您購買 Unicode 箭頭飾品。當(dāng)然不是一群編碼極客會感興趣的，絕不可能。

28. Type Scale Clamp Generator

這不是第一個嘗試為您生成類型比例的工具，但它是一個相對較新的工具，它結(jié)合了 CSS 的 clamp() 函數(shù)。

前端工具允許您選擇范圍、字體、預(yù)覽文本，您甚至可以測試響應(yīng)能力（盡管我不認(rèn)為后者有多大用處，因為這只是文本）。

27. AnimXYZ

這個工具被稱為“第一個可組合的 CSS 動畫工具包”，支持 Vue 和 React。確切的意思是您不必編寫任何關(guān)鍵幀。它有點像動畫的 Tailwind，因為您只使用 HTML 類。

除了添加類之外，值完全使用 CSS 變量構(gòu)建。這意味著您可以通過修改變量本身來根據(jù)需要自定義值。

26. Frontend Toolkit

這是另一個多合一工具解決方案，其中包含 20 多個用于執(zhí)行各種編碼和圖像相關(guān)任務(wù)的工具。

它包括用于 CSS、JSON、favicon、SVG、圖像壓縮、npm、正則表達(dá)式等的工具。

25. colorpalettes.earth

這是榜單上一個獨特的工具，可能會激發(fā)一些很酷的設(shè)計。此工具顯示從自然圖像（取自 Unsplash）中獲取的顏色調(diào)色板，這些圖像包含在網(wǎng)站上，并定期添加新的調(diào)色板。

點擊任何圖像，您將獲得一個模態(tài)窗口，可以訪問構(gòu)成圖像衍生調(diào)色板的每種顏色的十六進(jìn)制值。

24. Uncut

為了增加此列表的多樣性，這是一個字體目錄，目前特色是 90 種字體，重點是當(dāng)代或現(xiàn)代字體。

所有包含的字體都是開源的，因此您可以隨意將它們用于個人和商業(yè)項目。

23. Lowdefy

構(gòu)建內(nèi)部工具似乎現(xiàn)在很熱門，這是一個您可能想研究的解決方案，它允許您通過編寫 YAML 來構(gòu)建工具。

它被描述為一個“開源低代碼框架，可以輕松構(gòu)建 Web 應(yīng)用程序、管理面板、BI 儀表板、工作流程和 CRUD 應(yīng)用程序”。

22. JavaScript Booster

這是一個 VS Code 擴(kuò)展，旨在幫助您，正如其名稱所示，提升您的 JavaScript、TypeScript 和 React 編碼效率。該擴(kuò)展在代碼的某些位置添加了一個燈泡圖標(biāo)，表明您可以立即觸發(fā)預(yù)定義的代碼重構(gòu)。

一些示例包括將常規(guī)函數(shù)轉(zhuǎn)換為箭頭函數(shù)、翻轉(zhuǎn) if-else 結(jié)構(gòu)，以及一些 React 特定的重構(gòu)。

21. Layout Patterns

這是 Google Developers 的 web.dev 資源最近添加的內(nèi)容之一，我假設(shè)它將在來年繼續(xù)發(fā)展壯大。

它包含許多使用“現(xiàn)代 CSS API 構(gòu)建”的 UI 模式。換句話說，這是一個非常具有前瞻性的 CSS 示例集合，但應(yīng)謹(jǐn)慎使用，因為其中包含的一些技術(shù)可能尚未獲得完整的瀏覽器支持。

20. Baseline Background Remover

不可否認(rèn)，基于 AI 的背景去除工具最近已經(jīng)多如牛毛。這個工具是免費的，并且在我簡短的測試中效果非常好。

您可以上傳最大 5MB 的圖像，它將接受 JPEG 和 PNG 文件。生成的圖像將下載為透明 PNG，您可以使用它添加自己的背景或保留為透明。

19. Theatre.js

這是另一個動畫庫，但這一次是一個 JavaScript 解決方案，它允許您使用方便的可視化編輯器來為 DOM 元素或 WebGL 制作動畫，該編輯器與您編寫的代碼一起工作。

這是一個非常強(qiáng)大的工具，很難用幾段話來概括。文檔中包含一個冗長的章節(jié)式視頻，如果您想熟悉它，這確實很有幫助。

18. Transition.css

直接使用的 CSS 庫總是很受歡迎，我通常每年都會找到一兩個不錯的庫。這個庫包含一些您可能在其他地方?jīng)]有見過的簡潔的 CSS 過渡。

您可以直接在頁面上試用它們。我最喜歡的是那些在動畫中加入一些猶豫的動畫，以增加獨特性。

17. The Component Gallery

這有點像設(shè)計系統(tǒng)的集合，因為它包含來自各種品牌（包括 eBay、高盛、GOV.UK 等等）使用各種技術(shù)（React、CSS、Angular、Vue 等）構(gòu)建的真實設(shè)計系統(tǒng)的組件示例。

它可以作為構(gòu)建自己設(shè)計系統(tǒng)的任何人的便捷參考，因為您可以比較此處包含的現(xiàn)有系統(tǒng)中的相同組件。

16. party.js

這是一個有趣且獨特的 JavaScript 庫，允許您向網(wǎng)頁添加粒子效果，特別是彩帶和火花。

您只會在非常特殊的情況下使用它，但很高興您可以自定義粒子形狀、粒子數(shù)量、分布等等。

15. Headless UI

用納喬·利布雷的話來說，我們現(xiàn)在真的要進(jìn)入正題了。這個 UI 組件庫于 2020 年底發(fā)布，已經(jīng)在 GitHub 上獲得了超過 12,000 個星標(biāo)。

組件（下拉菜單、選項卡、彈出窗口等）是“無頭”的。這并不意味著它們的容量被削弱了；這意味著它們沒有樣式，因此您可以根據(jù)自己的喜好為它們設(shè)置品牌。它們也是完全可訪問的，旨在與 Tailwind CSS 集成，并且與 React 和 Vue 兼容。沒錯——這個工具幾乎涵蓋了 2022 年的所有前端流行詞。

14. Turbo

這是另一個在 2020 年底發(fā)布后在 2021 年表現(xiàn)良好的工具。它被稱為“單頁 Web 應(yīng)用程序的速度，而無需編寫任何 JavaScript”。

簡而言之，Turbo 是一個庫，它允許您利用四個主要功能：Turbo Drive、Turbo Frames、Turbo Streams 和 Turbo Native。這些使用 Web 組件為您的頁面添加類似單頁應(yīng)用程序的性能和交互性，而無需使用繁重的自定義腳本重新發(fā)明輪子。

13. tidy.js

這是一個與數(shù)據(jù)相關(guān)的 JavaScript 函數(shù)庫，專門用于“整理”您的數(shù)據(jù)。

它包含 70 多個不同類別（整理、分組、數(shù)學(xué)、排序等）下的函數(shù)，您可以使用此游樂場來嘗試不同的功能。

12. Tail-Kit

這是榜單上第一個 Tailwind UI 工具包，它是一個非常棒的工具。它擁有 250 多個開源組件，與 React、Vue 和 Angular 兼容。

組件按元素、表單、商業(yè)、導(dǎo)航、部分和列表進(jìn)行分類，或者您可以從許多模板中使用，這些模板按儀表板、登錄頁面和錯誤頁面進(jìn)行分類。

11. Tailwind Components

這是另一個 Tailwind UI 工具包，同樣包含 13 個更精細(xì)的類別下的開源組件和模板，以及一個“很棒的”類別，其中包含免費但高級的組件。

這個網(wǎng)站或多或少是一個各種社區(qū)貢獻(xiàn)的 Tailwind 組件的目錄，而不是像其他工具包那樣是一組內(nèi)聚的 UI 元素。

10. Pikaday

一個 JavaScript 日期選擇器在 2021 年的年度十大工具中名列前茅——誰能想到呢？它似乎滿足了日期選擇器組件所需的所有條件：沒有依賴項、輕量級，并使用模塊化 CSS 進(jìn)行樣式設(shè)置。

像此列表中的其他一些前端工具一樣，這不是一個新工具。它已經(jīng)存在一段時間了，但我第一次在 2021 年分享了它，令人驚訝的是它最終進(jìn)入了今年的前十名。

9. HTML Boilerplates

這是一個實用的在線 HTML 生成器，允許您自定義要生成的 HTML 啟動模板的類型，并提供有關(guān)要包含的內(nèi)容的切換選項。這對于為登錄頁面或演示生成快速模板可能最有用。

說實話，我認(rèn)為如果該工具更新為使用更多現(xiàn)代選項會更好，但對于簡單的 HTML 起點，它可以完成任務(wù)。

8. Whirl

這是另一個 CSS 動畫庫，這一次是專門用于作為加載微調(diào)器的動畫集合。它包含 100 多個動畫加載器，其中一些非常簡潔獨特。

我喜歡列表中的動畫（您可以在頁面上直接試用）如何被分類為偽元素、單個元素和多個元素。到目前為止，最好的一個動畫是“乒乓”動畫，盡管我質(zhì)疑是否有人會正確地將其歸類為“內(nèi)容加載”的指示！

7. Riju

想象一下，如果 CodePen 和 JSFiddle 生了一個孩子，然后你把那個孩子切成 224 塊。這就是 Riju——幾乎所有編程語言的快速在線游樂場。

我無法想象這里會缺少任何您想玩弄的編碼語言，而且大部分內(nèi)容都是您通常不會與在瀏覽器中運行相關(guān)聯(lián)的內(nèi)容。

6. DevUI

這是一個 Angular 工具包，適用于企業(yè)級應(yīng)用程序，包括組件、圖標(biāo)、管理儀表板模板和用于樣式和品牌的系統(tǒng)設(shè)計。

我猜想這個工具進(jìn)入了年度十大前端工具榜單，是因為我一開始沒有特別提到它是用于 Angular 應(yīng)用程序的（主頁上也不清楚）。盡管如此，我確實特別指出了它是用于企業(yè)級項目的，這似乎吸引了許多人的注意。

5. Pollen

這個庫可以作為您自己設(shè)計系統(tǒng)的基礎(chǔ)，其實用性在其使用 CSS 自定義屬性中顯而易見。

它為您提供易于自定義和擴(kuò)展的低級設(shè)計令牌。模塊包括排版、布局、UI、網(wǎng)格和顏色。我猜想將來會添加更多內(nèi)容，因此這是來年值得關(guān)注的一個工具。

4. AlterNight

開發(fā)人員喜歡 VS Code、暗模式和插件。將這三件事結(jié)合起來，您就擁有了一個很棒的小型前端工具。

AlterNight 是一個漂亮的 VS Code 主題，到目前為止只有大約 3,000 次安裝，但它能夠進(jìn)入今年榜單的前五名。

3. UIsual

這是一個前端模板集合，但帶有一些我認(rèn)為許多人似乎都很欣賞的巧妙之處：它們是灰度的。

該集合目前包含八個具有不同布局的模板。由于沒有任何基于顏色的品牌，這些模板是一個不錯的選擇，可以根據(jù)自己的需求進(jìn)行自定義，而不會像其他登錄頁面那樣。

2. Supabase UI

這是另一個開源組件庫，這個庫用于 React，并專門為 Supabase 產(chǎn)品（一個開源的 Firebase 替代品）設(shè)計。

它支持 Tailwind，我還應(yīng)該指出它仍處于早期開發(fā)階段。盡管如此，它仍然很受歡迎，足以進(jìn)入此列表的第二名。

1. CSS Layout Generator

這是去年我的新聞通訊中點擊次數(shù)最多的工具。它是一個功能齊全的 CSS 和 JSX 生成器，用于使用 CSS 網(wǎng)格布局語法生成不同類型的布局。

點擊任何五種布局樣式中的任何一種，您將進(jìn)入一個交互式在線編輯器，允許您使用各種 CSS 網(wǎng)格功能，如行、列、行間距、列間距、方向、網(wǎng)格對齊等等。這里有很多東西可以玩，顯然該工具稍后將為一些示例包含 Flexbox 語法。

您最喜歡的2021年前端工具是什么？

這就是今年最有趣的幾款前端工具的列表。我希望您在這里找到了一些可以添加書簽或在新項目中開始使用的工具。這個列表包含如此多種類的工具真是太酷了——有 UI 工具包、動畫庫、庫存照片網(wǎng)站、圖像工具等等。

您在過去一年中發(fā)現(xiàn)的、此列表中未提及的前端工具中您最喜歡的是哪些？請隨時在評論中留言。您還可以訂閱我的新聞通訊，以獲取 2022 年的更多前端工具，如果您自己構(gòu)建了一些想在以后的問題中分享的內(nèi)容，請隨時與我聯(lián)系。

以上是2021年最熱的前端工具的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！