引用 Tocas UI 的檔案才能夠開始使用，你可以直接複製貼上或是下載原始碼供離線、自行使用。
這是由一家知名 CDN 公司 CloudFlare 所提供的免費服務並且提供夠快的服務速度，這使你不需要下載 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>你也可以到 Tocas UI 的官方 GitHub 下載樣式然後取出其中的 /dist 資料夾並像下面這樣引用 Tocas UI 檔案。使用此安裝方式的好處是可以確保樣式不會因為遠端的伺服器離線而遺失。
<link rel="stylesheet" href="./tocas/dist/tocas.min.css">
<script src="./tocas/dist/tocas.min.js"></script>Tocas UI 也能夠從 NPM 中直接安裝，執行下列指令後引用最重要的 @tocas/dist/tocas.min.css 和 @tocas/dist/tocas.min.js 檔案即可。
npm i tocas目前 Tocas UI 使用下列字型在各個系統（如：Ubuntu、macOS、Windows）。
"Noto Sans TC", "SF Pro TC", "SF Pro Text", "SF Pro Icons", "PingFang TC", "Helvetica Neue", "Helvetica", "Arial", "Microsoft JhengHei", wf_SegoeUI, "Segoe UI", Segoe, "Segoe WP", Tahoma, Verdana, Ubuntu, "Bitstream Vera Sans", "DejaVu Sans", 微軟正黑體, "LiHei Pro", "WenQuanYi Micro Hei", "Droid Sans Fallback", "AR PL UMing TW", Roboto, "Hiragino Maru Gothic ProN", メイリオ, "ヒラギノ丸ゴ ProN W4", Meiryo, "Droid Sans", sans-serif
由於每個系統的字型仍有差異，我們建議你直接在 HTML 中的 <head> .. </head> 引用 Google Fonts 的 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:[email protected];500;700&display=swap" rel="stylesheet" />當我們在打造 Tocas UI 時，我們參考了許多現有框架的設計，同時我們也依據以往的經驗而避免了不少的問題。這裡簡略分析 Tocas UI 與其他現今的元件框架的不同之處。
Bootstrap 是個常見但使用率已經逐漸降低的框架，過多雜亂的樣式名稱（如：m-l-1、p-x-2、m-x-auto）並不能夠一眼就看出這些樣式所具備的意義、過於鬆散的元件使得無法適用於一個更緊緻的視覺設計需求（如：行動版網站）。
相較之下 Tocas UI 的元件命名（如：is-large、is-spaced）更有意義。針對不同的設計情境時，Tocas UI 元件亦提供了密度樣式可減少元件多餘的空白與間隙。
在 HTML 結構與命名部分，Bootstrap 常為了要補足某些缺陷、排列而新增過多不必要的結構（如：carousel-inner、navbar-nav）這些過度仰賴特定元件的子元素令使用者在開發時不利於記憶。
Bootstrap 所提供的元件數量過少已不符合現今設計的需求，其排版、格局多數情況下並沒有辦法湊合使用，導致設計時須不斷地覆蓋其樣式才能達成目的。在 Bootstrap 推出可供使用者自訂 SASS 變數後，其建置過程也變得更加煩躁令專案在剛入手時有一定的困難。
Tocas UI 的使用方式十分簡單，僅須複製貼上其 CSS 引用網址便能直接使用；元件數量也眾多，較能符合在設計現代應用程式與網頁的需求。
- 元件間隙過大而不適合用於設計行動裝置介面。
- 樣式命名過於簡化而難以辨識，結構過於複雜。
- 缺少符合現代設計應用情境的元件。
- 網格與排版系統較不像 Tocas UI 那樣地彈性。
Semantic UI 的維護已不再活躍且多數的問題無法得到修正。鑑於此事，開源社群自行衍生了名為 Fomantic UI 的第三方框架，但仍受到 Semantic UI 早期架構而在後期更新有所限制。
為了迎合不同大眾的設計需求，Semantic UI 擁有自訂主題的功能，但後續的更新破壞了這些樣式且無人修繕。相反地，Tocas UI 起初就假設框架無法適用於所有人，我們便能在設計時省略過多不必要的功能並著重在真正重要的部份。
Semantic UI 的樣式命名是最大的特色但問題也隨之而來，例如一個 large button 大型按鈕套用響應式設計時的 large device only 其 large 樣式便會導致樣式衝突而發生預期以外的問題。
Semantic UI 基於 jQuery 的 JavaScript 模組在設計時能近乎涵蓋所有需求，但隨著現今 JavaScript 的框架崛起（如：Svelte、Vue、React）這些功能在結合上則衍生了不小問題，如：資料雙向綁定、事件監聽。
舉例來說，Vue 的資料變更時並沒有辦法直接映射到 Semantic UI 的元件內容值上，必須重新呼叫 Semantic UI 的重新渲染機制才能讓整個頁面的資料同步。相反地，使用者在 Semantic UI 做出的資料變更（如：下拉式選單）也沒有辦法觸發在 Vue 裡已經寫好的函式。
為了解決這個問題，Tocas UI 決定最小化 JavaScript 的干涉並盡量地沿用系統原生元素而不是自己另外打造出一個狀態管理系統。
- 社群已經不再提供維護。
- 命名方式導致樣式衝突且無法修正。
- 無法移除的 jQuery 相依性。
- JavaScript 模組無法與現今的前端框架妥善搭配。
Foundation 在設計上較為生硬且缺少了許多可供點綴的樣式（如：圓角按鈕），其部份帶有陰影的設計趨近於以往的 Bootstrap 版本，這可能給予使用者一種沈重感。相較之下，Tocas UI 提供許多個性化的樣式並移除了多數的陰影設計，讓使用者在瀏覽時不會感到壓力。
- 可供點綴的裝飾樣式過少。
- 沈重的陰影設計可能帶給使用者壓力感。
- 設計採用直角且略帶生硬。
雖然不能相互比較，但 Tailwind CSS 是近幾年來前端開發容易被採用的設計方式，比起框架這更像是設計的輔助工具。Tailwind CSS 與 Tachyons 的理念相近，這兩個框架並沒有元件觀念。這意味著你將需要透過 Tailwind CSS 內建的輔助樣式自行建立需要的元件。
通常使用 Tailwind CSS 會搭配 Node.js 預處理器（Preprocessor）來輔助（如：移除無用的多餘樣式），這令使用 Tailwind CSS 的專案都無法避免使用 Node.js 和其龐大且沈重的 npm 相依性套件。
無論是 Tailwind CSS 還是 Tachyons 在樣式命名上有著與 Bootstrap 一樣厭垢並且更難以令人捉摸的問題，如：mr4 其實是 margin-right: 1rem;。在設計時，元素上會有過多的樣式如：fw6 f3 f2-ns lh-title mt0 mb3，這些都將導致未來整合有所困難。重複使用元件時須不斷地複製貼上其樣式而導致專案原始碼大小急劇增加。
為了解決這個問題，Tailwind CSS 通常僅用於已經有 Vue、React 或 Svelte 這樣的 JavaScript 框架的專案。
Tailwind CSS 像是讓開發者能夠自行設計一套元件庫而提供的輔助樣式；Tocas UI 則是已經為網頁、應用程式所設計數個可立即應用的元件且不須額外安裝任何 Node.js 相依性套件，更適用於非設計師專職的一般開發者、初心者。
- 開發者須自行從頭打造，沒有現成元件可供使用。
- 無法避免的 Node.js 相依性使專案需要大量前置作業。
- 樣式名稱眾多且不直覺，開發時須翻閱說明文件。
- 開發者須具備進階的 CSS 知識。
一些和 Tocas UI 相關的開發歷程，還有其中瑣碎的事物。
Tocas UI 並不是萬靈丹，這更像是一個元件庫。設計應用程式介面時十分地方便，但作為自由發揮的設計而言，一定沒有辦法從頭到尾都只使用 Tocas UI。
在這種情況下我們鼓勵你直接透過 HTML 的 style 標籤，直接對該容器、元素進行樣式的修改。就像 Tailwind UI 那樣，不需要特別花費時間整理出一個 my-style.css 來好好地規劃樣式，直接在 HTML 中修改樣式令其影響一目了然。
現今的應用程式或是網頁都有許多輔助框架可以選擇，例如：Vue、React、Svelte…甚至是 Web Components。
我們曾在 Tocas UI 花費數年的時間替不同輔助框架打造對應的元件，但最終的維護過於繁雜而作罷。每個框架對於 Web Components 的支援度和實作方式都有所不同，令資料綁定（Data Binding）上有非常大的困難。
這些問題到目前都還沒能被解決，而我們也決定不再這個地方花費過多的時間琢磨，最終 Tocas UI 的設計不再以 JavaScript 為主。
猶如 Tailwind UI 那樣，Tocas UI 未來僅會單純提供基本的 JavaScript 輔助函式用來協助使用者更快速地將自己正在使用的框架能夠與 Tocas UI 結合，而不是呼叫 Tocas UI 的 JavaScript 模組來達成資料綁定、元件功能，因為這些事情都應該交由框架執行。
