Skip to content
/ tocas Public

👀 The fastest and most intuitive way to build diverse websites and progressive web application interfaces.

License

Notifications You must be signed in to change notification settings

teacat/tocas

Repository files navigation

Tocas UI

以最快最直覺的方式,建構多樣的網站與漸進式網路應用程式介面。

 

🌼 特色

  • 不需要 jQuery 相依性

    你不需要額外的 JavaScript 套件相依性就能直接使用。

  • 純粹的 CSS

    Tocas UI 能夠與所有的前端框架妥善搭配。沒有那種會跟你最喜愛的套件搶工作的鳥 JavaScript 模組。

  • 不需要 npm 或 Webpack

    你不需要透過 npm 安裝一堆套件,也不需要在 Webpack 裡面設置一坨載入器。

  • 簡潔又有意義的樣式名稱

    透過 negative(負面的)和 positive(正面的)或 is-outlined(有外框線的)這樣有意義的名稱來點綴元件。

  • 支援亮色、暗色主題的動態色彩系統

    能夠自動在亮色與暗色系統之間來會切換主題色系。

  • 超過 50 個元件與 100+ 種搭配組合

    看看我們的好棒棒範例來學習你能夠怎麼發揮 Tocas UI 的最大效益。

 

📀 開始使用!

只需要將下列 HTML 標籤複製至你的 <head>...</head> 網頁段落就可以開工了 🔥。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tocas/4.2.3/tocas.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/tocas/4.2.3/tocas.min.js"></script>

又或者你喜歡 npm 的話…👀

npm i tocas

接著你應該引用最重要的 @tocas/dist/tocas.min.css@tocas/dist/tocas.min.js 檔案。

 

🚀 使用方式

<button class="ts-button">按鈕</button>
<div class="ts-header">標題</div>
<div class="ts-input">
    <input type="text" placeholder="搜尋…" />
</div>

 

📘 文件

從官方網站檢視: [v4.tocas-ui.com/zh-tw ↗︎]

 

❤️ 來自台灣的愛心

٩(ˊᗜˋ*)و 由來自 🇹🇼 台灣的 Yami Odymel 所設計,當然還有貢獻者們的愛心 ❤️。原始碼授權方式為 MIT,文件則為 CC 0 公眾領域。還請盡情地使用、分享或一同改進。Tocas UI 是卡莉絲伊繁星的設計語言,而卡莉絲伊繁星屬對空音商事有限公司