基于 TailwindCSS 的網(wǎng)頁(yè)組件庫站點(diǎn) UIBak 上線(xiàn)說(shuō)明

UIBak 于 2024 年 3 月 5 日正式上線(xiàn)!

關(guān)于產(chǎn)品定位

這是一個(gè)基于?TailwindCss?框架的模板組件庫,為 Web 前端開(kāi)發(fā)人員的 UI Kit 工具箱,完全免費開(kāi)放造尔,復制即用。同時(shí)杰泡,UIBak 也是配合創(chuàng )建一個(gè)基于Tailwind +?Baklib CMS?的 UI 組件超市,方便制作Baklib CMS的用戶(hù)可以通過(guò)超市庫便捷尋找到各種可視化Web展示痕鳍,以創(chuàng )建豐富的Web應用。

這里有兩個(gè)初心:
  • 一是為我們公司自研的數字內容體驗云平臺 Baklib 的低代碼編輯器提供生態(tài)支持;

  • 一是維護一個(gè)公共免費的 Web UI 庫站點(diǎn),為 TailwindCss 生態(tài)的中文環(huán)境添磚加瓦擎拧。

這里提到了“生態(tài)”,這是一個(gè)比較大的詞吱雏,我想解釋一下。

其實(shí)在準備上線(xiàn)UIBak網(wǎng)站的時(shí)候,我一直在思考“生態(tài)”這個(gè)問(wèn)題峡迷。你如何理解“生態(tài)”這個(gè)事情呢? 我目前的理解是:

  1. 國外SaaS的核心能力不是生態(tài)涯蜜,是連接单稠。 也就說(shuō)我做好一個(gè)核心場(chǎng)景,其他場(chǎng)景都通過(guò)API去連接,通過(guò)連接漏峰,幫助企業(yè)打造完整的數字化體驗。 所以國外的SaaS非常注重開(kāi)放API用于連接。

  2. 國內的云平臺恢核、SaaS楞哮、軟件廠(chǎng)商都不具備“開(kāi)放API連接”的思維和條件,最多可成為“集成商”,通過(guò)合作尋找上下游打包形成一套解決方案榨了。

  3. 對于”生態(tài)”的理解,我認為可以分解為:業(yè)務(wù)生態(tài)和技術(shù)生態(tài)。 技術(shù)生態(tài)有如Rails,當公司采用Rails以后处香, 就會(huì )圍繞Rails尋找他上下游的各種技術(shù),形成社區,圈子。業(yè)務(wù)生態(tài)有如Notion, 大家通過(guò)Notion這個(gè)“工具”伯菩,打造各種業(yè)務(wù)比如做成CRM,做成OA,做成可視化平臺,做成簡(jiǎn)歷, 各種模板超市水芍、應用超市解鬓,形成一個(gè)大市場(chǎng)。

  4. Baklib 現有的客戶(hù)畫(huà)像主要是互聯(lián)網(wǎng)軟件公司的技術(shù)部門(mén)和運營(yíng)部門(mén)泥兰, 針對這個(gè)畫(huà)像,我認為Baklib更適合打造一個(gè)技術(shù)生態(tài), 圍繞“內容在Web上的各種輸出表達”,提供Web內容表達的技術(shù)生態(tài)雄防,比如CMS窄瘟、Blog亩组、FAQ、Guide、Wiki這是表達,Card, Grid, List, Alert, Tooltip這也是表達。

UI庫發(fā)展思路有兩個(gè)先:先滿(mǎn)足自己洒忧,再滿(mǎn)足別人裳母;先滿(mǎn)足別人,再滿(mǎn)足自己。如果先滿(mǎn)足自己,品牌化會(huì )很強,生態(tài)的發(fā)展速度會(huì )取決于我們钻字。如果先滿(mǎn)足別人吃廓,生態(tài)可能會(huì )發(fā)展更快,會(huì )推動(dòng) Baklib 的發(fā)展,到這種當時(shí),沒(méi)有一個(gè)硬IP背書(shū),非常難以讓人跟隨。所以對比下來(lái)蓬戚,UI庫先面向我們Baklib去驅動(dòng)發(fā)展甸候。這就需要我們給Baklib的所有產(chǎn)品線(xiàn)設計一個(gè)業(yè)務(wù)模型,產(chǎn)品之間需要有關(guān)聯(lián)性,相輔相成。

雖然我們說(shuō)做個(gè)生態(tài)么介,但是生態(tài)的范圍得收斂到我們能夠支撐的范圍。目前,為企業(yè)設計完整業(yè)務(wù)流程,是生態(tài)邊界參考的重要依據。

關(guān)于產(chǎn)品設計

相比于其他 Web CSS 框架(如?Bootstrap)脂崔,TailwindCss 非常吸引人的地方就是其預設了足夠用的 class, 需要什么樣的樣式,只需要查字典而不需要自定義 class,這個(gè)“約定大于配置”的理念,非常契合 Ruby on Rails 框架的理念[見(jiàn)?Rails Doctrine]巫俺,而?Baklib?是基于 Ruby on Rails 開(kāi)發(fā)的嗓蘑,所以我們認為 TailwindCss 是作為協(xié)同低代碼開(kāi)發(fā)環(huán)境最優(yōu)的選擇。網(wǎng)上搜索有關(guān)“Tailwind UI ”,“Tailwind Templates”得到的結果:

TailwindUI, Flowbite, DaisyUI, Tailbits, WindUI, PrelineUI, TailGrids, XtendUI, VueTailwind, Best of Tailwind,UI Kit vs Component Library, My library / kit is not on this list, Tailwind UI, daisyUI, Mamba UI, Headless UI, Tailwind Elements, Xtend UI, Flowbite, Tailwind UI Kit, Meraki UI, Tailblocks, HyperUI, Kimia UI, Tailwind Starter Kit, Material Tailwind, Konsta UI, Preline

確定關(guān)鍵詞: theme/css-bak/lib野家, UI, Templates, components, Kits星岗,于是通過(guò)這些關(guān)鍵詞查了一下域名琅绅,發(fā)現幾乎都被注冊了谒府,以下是.com/.cn 域名中還可以被注冊的:

bak-ui.com, bak-lib.com, UIBak.com挟愧,Libkit.cn露懒,kitbak.cn,bakit.cn,bakkit.cn,uibase.cn,kitbase.cn,Libase.cn,Libbase.cn,bakbase.cn 

最終選定了 UIBak.com/cn,主要是因為還有.com 域名,考慮到未來(lái)國際化的需要。

網(wǎng)上也有相關(guān)的競品學(xué)習和參考:

  • TailwindCss: Rapidly build modern websites without ever leaving your HTML.

  • Tailwind?UI?- Official Tailwind CSS?Components?&?Templates

  • Tailwind CSS?component?library - Flowbite

  • daisyUI — Tailwind CSS?Components

  • Tailwind?Component?Library | Tailbits

  • Tailwind CSS?Component?Library | WindUI

  • Preline?UI?- Tailwind CSS?component?library

  • TailGrids: Tailwind?UI?Component?Library, Kit and?Templates

  • Tailwind CSS: 15?Component?Libraries &?UI?Kits - Stack Diary

  • Xtend UI - Xtend?UI?is a powerful frontend library of Tailwind

  • VueTailwind - Customizable Vue?Components?for TailwindCSS

  • 58+ Tailwind CSS?UI?Libraries,?Components?&?Templates?- BestofTailwind

網(wǎng)站預覽

UIBak.com 是基于 Baklib CMS 搭建的,搭建的速度很快,也是通過(guò)模板,大概花費了我三天的時(shí)間,內容覆蓋各種UI眼羽、組件、整頁(yè)模板,配套一個(gè)幫助中心,一個(gè)博客,以及 Tools 工具箱。效果預覽如下:

官網(wǎng)

代碼預覽

工具箱

蜀ICP備15035023號-4