teacat / Tocas
Licence: mit
Tocas UI — A CSS3 and SASS UI library.
Stars: ✭ 252
Programming Languages
javascript
184084 projects - #8 most used programming language
Tocas UI 2
Tocas UI 是基於 SASS 和 CSS3 的元件框架，可快速建立大型或小型網站的介面，
其用法與 Bootstrap 差異甚多，Tocas UI 以不雜亂，有意義為主。
可至：https://tocas-ui.com/ 觀看教學文件。
瀏覽器支援
除了 Microsoft 所提供的瀏覽器（如：Edge、Internet Explorer）外，都獲得後續的支援與開發。
 Chrome |
 Firefox |
 Edge |
 Android WebView |
 Opera |
 Safari |
|
|---|---|---|---|---|---|---|
| Android | 29+ | 28+ | N/A | Android 5.0+ | 17+ | N/A |
| iOS | 29+ | 28+ | N/A | N/A | 17+ | 9.2+ |
| macOS | 29+ | 28+ | N/A | N/A | 17+ | 9+ |
| Windows | 29+ | 28+ | ✖ | N/A | 17+ | 9+ |
特色
-
更簡潔，沒有像 Bootstrap 那樣雜亂的樣式名稱。（如：
.m-l-1,.p-x-2,.p-a-3） -
以意義為樣式命名的主要精神。
-
以支援行動裝置為優先。
-
更加彈性的格線系統，並達到 16 格線。
-
具有回饋力的動畫。
-
元件之間可交互使用。
-
模塊不需要 jQuery（耶！）。
使用
將下列標籤放入網頁的 <head>...</head> 標籤之中。
<!-- Tocas UI：CSS 與元件 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tocas-ui/2.3.3/tocas.css">
<!-- Tocas JS：模塊與 JavaScript 函式 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/tocas-ui/2.3.3/tocas.js"></script>
範例
Tocas UI 的樣式命名方式來自於 Semantic UI 的精神，以意義為主，並且很適合用於模板引擎中。
<!-- Tocas 大的 主要 按鈕 -->
<button class="ts big primary button"></button>
讓我們看看 Bootstrap 的樣式命名方式。
<!-- 按鈕 按鈕-大的 按鈕-主要 -->
<button class="btn btn-lg btn-primary"></button>
簡短，而且更有意義
讓我們展示一些更進階的用法，讓你清楚了解 Tocas UI 和 Bootstrap 之間的差異。
<nav class="ts menu">
<a class="header item">商標</a>
<a class="active item">首頁</a>
<a class="item">特色</a>
<a class="item">價格</a>
<a class="item">關於</a>
</nav>
而這是 Bootstrap。
<nav class="navbar navbar-light bg-faded">
<a class="navbar-brand">商標</a>
<ul class="nav navbar-nav">
<li class="nav-item active">
<a class="nav-link">首頁</a>
</li>
<li class="nav-item">
<a class="nav-link">特色</a>
</li>
<li class="nav-item">
<a class="nav-link">價格</a>
</li>
<li class="nav-item">
<a class="nav-link">關於</a>
</li>
</ul>
</nav>
社群
Pull Request
我們很高興接受任何 Pull Request（如果是新功能的話要符合相關理念 :D），
Commit 可以是英文或是中文，有時間就會去檢查。
Commits written in English are welcomed.
功能需求
可以開啟 Issue 來回報自己要的功能，最後會被標上可行或是不可行的標籤，
如果最終不可行的話還敬請見諒，但不要因此而停止提出建議喔 :D。
Bug 回報
一樣可以開啟 Issue 然後稍微敘述一下問題，有空就會去檢查。
可參考文件
這裡是幾個可能會啟發你創意，或是更能讓你了解這類東西的連結。
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].