Tocas UI — A CSS3 and SASS UI library.
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
assets Moved the images to the assets Feb 22, 2018
dist Latest TocasUI Aug 17, 2018
docs Separated docs pages to module, setting, usage, example, definition Sep 22, 2018
editor
examples Removed nowrap for Shop example May 2, 2018
src
test Flush Jul 30, 2018
.gitignore Ignore the node_modules Jan 12, 2017
CHANGELOG.md
LICENSE 2018 for LICENSE Jun 28, 2018
README.md
package.json added package json Jun 8, 2017
yarn.lock

README.md

 

Tocas UI 2

Tocas UI 是基於 SASS 和 CSS3 的元件框架,可快速建立大型或小型網站的介面,

其用法與 Bootstrap 差異甚多,Tocas UI 以不雜亂,有意義為主。

可至:https://tocas-ui.com/ 觀看教學文件。

 

瀏覽器支援

除了 Microsoft 所提供的瀏覽器(如:Edge、Internet Explorer)外,都獲得後續的支援與開發。

Chrome
Chrome
Firefox
Firefox
Edge
Edge
WebView
Android WebView
Opera
Opera
Safari
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+

 

特色

  1. 更簡潔,沒有像 Bootstrap 那樣雜亂的樣式名稱。(如:.m-l-1, .p-x-2, .p-a-3

  2. 意義為樣式命名的主要精神。

  3. 以支援行動裝置為優先

  4. 更加彈性的格線系統,並達到 16 格線。

  5. 具有回饋力的動畫。

  6. 元件之間可交互使用。

  7. 模塊不需要 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 然後稍微敘述一下問題,有空就會去檢查。

 

可參考文件

這裡是幾個可能會啟發你創意,或是更能讓你了解這類東西的連結。

Amaze UI

Ant Design

Bass CSS

Bootstrap

Bootstrap Material Design

Bttn CSS

Bulma

Core UI

Dojo

Element

Elemental UI

Ionic Framework

iView UI

Kube

Kule Lazy 3

Lightning Design System

Markdown UI

Material Components for the Web

MDUI

Milligram

Muse UI

Office UI Fabric

Photon

Primer

Pure

Semantic UI

Spectre

SUI

SUI Mobile

Tapestry

UI Kit

MailChimp

Vital UI Kit

Vue Material

Vux

WeUI

WiredJS