Tocas UI
以最快最直覺的方式,建構多樣的網站與漸進式網路應用程式介面。
開始使用 檢視範例
即將登場
透過 Tocas Templates 模板元件庫來快速拼湊出應用程式、購物商城和企業宣傳介面。
本專案由以下贊助者提供
Mac Taylor
Sciuridae Li
Yan-K
李政皇
乾太₍₍ ◝(・◡・)◟ ⁾⁾
Leko
Bobby Ho
Coin
SpaceTimeHalf
methratton
Sean Wei
Jonathan Goh
沒有 jQuery 相依性。
除了耗費多餘的網路頻寬之外;對於現代網站而言,使用 jQuery 已經不再是所謂的絕佳首選。Tocas UI 試圖降低對網頁的負荷。
不需要 npm 或 Webpack。
沒有任何繁雜的手續:像是透過 npm 安裝一堆套件、在 Webpack 裡設置一堆載入器。你只需要將我們提供的 HTML 樣式標籤複製到你的網頁,然後…搭啦!就這麼容易。
完善的文件說明。
就算沒有撰寫過 Bootstrap 或是 Bulma、Semantic UI、Material Design…你也能夠透過完整的說明理解整個介面系統、響應式設計如何運作。
簡潔又直覺的設計。
沒有多餘的干擾,彷彿在喧囂的網路世界中找到一絲寧靜。
圖片卡片
好吃的千層蛋糕!

在 5 月之前於線上網路門市訂購,現在還特別加贈限量環保袋。

按鈕
統計數據
42,689
32
本月拜訪次數
8,652
351
總會員數
導航列
表格
# 名稱 英文名稱
1 半音商業銀行 Flat Bank
2 對空音商事有限公司 Sorae & Co., Ltd.
3 卡莉絲伊繁星 Caris Events
統計筆數:3
導覽標記
國旗
評分
項目切換
標籤
飛鳥湊
西園寺風莉
8,964 16,226 320
明暗主題與響應式設計
支援暗黑模式且有針對行動裝置所設計的介面密度樣式。
檢視相關資訊
鬆離耦合性
Tocas UI 元件以原子化設計令其能夠相互組合使用。
檢視元件
臨機應變
想做電商平臺?沒問題。管理介面?沒問題。社群網站?沒問題。
檢視範例
準備好了嗎?
複製下列 HTML 標籤至你的網頁,然後盡情地大鬧一番✨
<!-- 核心:Tocas UI -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tocas/5.0.1/tocas.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/tocas/5.0.1/tocas.min.js"></script>

<!-- 字體:Noto Sans TC -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700&display=swap" rel="stylesheet" />

<!-- 啟用:響應式設計 -->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
由來自 台灣的 Yami Odymel 所設計,當然還有貢獻者們的愛心❤️。原始碼授權方式為 MIT,文件則為 CC 0 公眾領域。還請盡情地使用、分享或一同改進。Tocas UI 是卡莉絲伊繁星的設計語言,而卡莉絲伊繁星屬對空音商事
台灣正體語系協作者:Yami Odymel、coin3x、Sea-n
擁有 Tocas UI 的所屬組織商標