開始使用

人生已經很無聊了,別讓你的網頁也再無聊下去。
安裝與使用

將下列標籤放置於 HTML 中的 <head> .. </head> 處即可使用 Tocas UI,你也可以至 GitHub 下載離線使用。

<!-- 核心: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">
全域設定

Tocas UI 預設會依照使用者的系統設定自動變更亮暗主題,你可以覆寫這個設定。

說明
強制使用亮色主題。
強制使用暗色主題。
<!-- 指定 `is-dark` 會讓整個頁面使用暗色主題 -->
<html class="is-dark">

變更元件的圓角程度,令其看起來更尖銳或是圓潤。

說明
沒有任何圓角且看似生硬。
Tocas UI 的預設圓角設定值。
更有現代感的圓潤邊角。
<!-- 指定 `is-sharp` 會移除頁面裡所有元件的圓角 -->
<html class="is-sharp">

更改所有元件與頁面的字體大小。

說明
適用於手機或是行動裝置應用程式。
Tocas UI 的預設尺寸,適合一般網頁。
可用在專注於文字閱讀的網站。
<!-- 指定 `is-large` 會讓網頁使用 16px 字體基礎 -->
<html class="is-large">
安裝與使用
全域設定
由來自 台灣的 Yami Odymel 所設計,當然還有貢獻者們的愛心❤️。原始碼授權方式為 MIT,文件則為 CC 0 公眾領域。還請盡情地使用、分享或一同改進。Tocas UI 是卡莉絲伊繁星的設計語言,而卡莉絲伊繁星屬對空音商事
台灣正體語系協作者:Yami Odymel、coin3x、Sea-n
擁有 Tocas UI 的所屬組織商標