Skip to content

Releases: teacat/tocas

Tocas 2.0 RC 6

05 Mar 02:24
Compare
Choose a tag to compare

重大修復,請儘早更新至此版本

重大改變

  1. 拋棄 Grid 的 RWD 樣式,統一採用原生 RWD 輔助樣式。
  2. 如果沒有指定 stackable 的話,Menu 現在預設是水平捲動。
  3. 卡片的重疊樣式現在命名為 overlapped content 而不是 overlay content
  4. 透過 stackable 來讓表格層疊,而不是 unstackable 讓表格不層疊。
  5. 移除手機上按下 Button 時的藍色高光。
  6. 現在 Form 內的 Select Dropdown 不再需要 .ts.basic.dropdown

Bug 修正

  1. 修正隱藏的 Divider 不會隱藏文字。
  2. 修正獨立的 Sub Header 無作用。
  3. 修正輸入欄位群組的 Focus 選擇器。
  4. 修正上下皆吸附的 Segment 無作用。
  5. 聚焦看板 Primary 選擇器錯字。
  6. 修正下拉式功能選單的 z-index。
  7. 修正 centered 的 Grid。
  8. 修正 inverted 的 List 文字顏色。
  9. 修正連結樣式的 Step 顏色。
  10. 修正將標籤放置於上的 Statistic 奇怪標籤間距。

調整和新增

  1. 新增 Placeholder 給 [contenteditable] 的 Div。
  2. 新增 circular 給 Label。
  3. Button 現在是 Relative 位置。
  4. 新增 left floatedright floated 給 Segment。
  5. Comment 的邊距現在給予 author 而不是 metadata,這將使得你能夠把作者名和中繼資料放在同行。
  6. 減少子 Comment 的間距。
  7. Icon 的語氣現在被新增 !important
  8. 現在 Form 內的輸入欄位都會是流動寬度。
  9. Calendar 現在有背景顏色而不是透明了。
  10. Item 現在有帶點式中繼資料。

Tocas 2.0 RC 5

05 Mar 02:24
Compare
Choose a tag to compare

重大修復,請儘早更新至此版本

Bug 修正

  1. 統一連結顏色和樣式。
  2. 修正 .vertical 的輸入欄位邊框。
  3. 移除吸附時標籤的邊框。

調整和新增

  1. 淡化邊框顏色。
  2. 放大 <h1><h5> 之間的字體大小
  3. 卡片現在支援連結樣式了。
  4. 標籤支援 .floated 了。
  5. 新增 .horizontal 標籤。
  6. 可以自訂圖示標題中的圖示大小了!
  7. 清單現在有著跟頁面文字一樣的顏色。
  8. .extra.content 現在可以被擺在卡片的上面、中間。

Tocas 2.0 RC 4

05 Mar 02:24
Compare
Choose a tag to compare

重大修復,請儘早更新至此版本

  1. 修正按鈕沒有 Active(按下)效果。
  2. 修正卡片中的 opinion 按鈕有背景顏色。
  3. 移除卡片中吸附按鈕的框線。
  4. 修正下拉式選單按鈕的 Hover 停滯問題。

Tocas 2.0 RC 3

05 Mar 02:24
Compare
Choose a tag to compare

新功能和拋棄

Tocas 2 拋棄了 SASS 方面的函式支援,現在幾乎都用原生寫法,意思是你將沒有辦法引用 tocas.sass 然後使用以往的輔助函式,如:+block+inline-block+table...等。

拋棄列表

  1. 顏色渲染函式

    你現在不能「重新編譯」來新增元件顏色了,原有顏色不變(primaryinfo ...)。

  2. 輔助函式

    你現在不能夠透過引用 tocas.sass 來使用以往的輔助函式。

  3. 移除了多餘的過場動畫

    現在的按鈕和輸入欄位都更加地直覺。

當然,也有好消息要宣布。

新功能列表

  1. 所有樣式現在都保存在變數中。

    意思是你可以簡單地改變變數中的顏色數值或其他樣式,然後重新編譯,個人化你的 Tocas。

  2. 更少使用 & 作為 Selector。

    現在 Selectors 更簡潔了,不需要死腦筋的去思考這個樣式的 Selector 是哪個。

  3. 沒有多餘的迴圈。

    現在不常使用迴圈了,所以和上一個特色一樣,不需要推敲原本的 Selector 為何。

  4. Tocas.js 確定加入。

    更棒的是,你完全不需要 jQuery,Tocas.js 是完全獨立的。

完全重寫和問題修正

Tocas 2 是完全重寫,並且包含了部分 Semantic UI 的原始碼(Less 轉 Sass),
所以在元件的變化上也更加的穩定一些,不會遇到有不對齊的部分。

在 Tocas 1 的單位不標準的問題也已經修正,現在採用 pxemrem,但是時機和配合上都沒有問題

支援圖示系統!

和 Sematic UI 一樣,引進了 Font Awesome 作為圖示系統,現在你可以盡情地採用 <i class="icon"> 來使用圖示並和 Tocas UI 的樣式一同搭配了!例如_圓角_、旋轉,等。

要用的時候請記得將 fonttocas.css 放在同個目錄中。

可用元件

  • 元素 Elements
    • 按鈕 Button
    • 容器 Container
    • 分隔線 Divider
    • 標題 Header
    • 圖示 Icon
    • 影像 Image
    • 輸入欄位 Input
    • 看板 Jumbotron
    • 標籤 Label
    • 清單 List
    • 讀取指示器 Loader
    • 引用 Quote
    • 片段 Segment
    • 步驟 Step
  • 聚合型
    • 麵包屑 Breadcrumb
    • 表單 Form
    • 網格系統 Grid System
    • 選單 Menu
    • 訊息 Message
    • 表格 Table
  • 模塊
    • 伸縮選單 Accordion
    • 日曆 Calendar
    • 核取方塊 Checkbox
    • 淡化器 Dimmer
    • 下拉選單 Dropdown
    • 進度條 Progress
  • 視圖
    • 卡片 Card
    • 聊天室 Chatroom
    • 留言 Comment
    • 動態軸 Feed
    • 項目 Item
    • 統計數據 Statistic

Tocas 1.0

21 May 09:32
Compare
Choose a tag to compare

Careful of the units

The size units are still not confirmed, for example you might meet px, em, rem at the same time.
尺寸單位仍未確認,舉例來說你可能會同時遇到 px, em, rem

And this problem might NOT be fixed in next few releases.
而這個問題可能不會在接下的幾個釋出中修正。

Available Elements

[WIP] 為尚未完成,但已有雛形

  • 元素 Elements
    • 按鈕 Button
    • 核取方塊 Checkbox [WIP]
    • 容器 Container
    • 分隔線 Divider
    • 標題 Header
    • 圖片 Image
    • 輸入欄位 Input
    • 聚焦看板 Jumbotron
    • 標籤 Label
    • 清單 List
    • 讀取指示器 Loader
    • 片段 Segment
  • 外觀型 Views
    • 卡片 Card
    • 聊天室 Chatroom
    • 留言 Comment
    • 統計數據 Statistic [WIP]
  • 聚合型 Collections
    • 網格系統 Grid
    • 選單 Menu
    • 訊息 Message
    • 表格 Table
  • 模塊 Modules
    • 下拉選單 Dropdown [WIP]
    • 進度條 Progress [WIP]