TocasUI 2 和 TeaMeow 註冊頁面

螢幕快照 2016-08-10 上午1.45.32.png

這次是完全用 TocasUI 2 做出來的 TeaMeow 介面,跟當初的介面差很多,

我個人是偏好舊的畫面,但是不好管理卻有特色,

採用 TocasUI 2 設計的註冊頁面則是沒有特色,但卻制式化了,讓東西看起來比較整齊,

至於為什麼是 TocasUI 2 呢 ..

因為做 TeaMeow 的時候發現 TocasUI 1 問題越來越多,有單位不準確的問題存在,

TocasUI 1 是由 px + rem + em 的組成,而 TocasUI 2 解決了這個問題,

讓元件看起來都一樣整齊,不過 TocasUI 2 大概也是我的一個噩耗 ..

自動產生「原始碼」的 JavaScript

2016-01-05 03-37-44 的螢幕擷圖

最近一直在忙於 Tocas UI 阿,

然後在尋找 Semantic UI 到底是怎麼做出「自動產生原始碼」的功能,

所以後來我的想法就是自己做一個,

基本上概念就是:

  1. 取得指定容器內的 HTML
  2. 透過 Tidy 去清潔這個 HTML
  3. 輸出到指定容器

不過卻少了一個功能,就是「重點標記」,所以後來我又新增了這個功能,

最後概念變成:

  1. 取得指定容器內的 HTML
  2. 透過 Tidy 去清潔這個 HTML
  3. 輸出到指定容器
  4. 檢查每個容器想要標示的重點
  5. 把容器內的文字新增重點樣式

我想之後應該會在 Github 公開這個原始碼,因為真的是很方便,

其實使用起來也很方便就是了。

三個 Logo 更新— Tocas 和 Avane 和 Staend

亞凡芽

TeaMeow 開發基於 PHP 的模板引擎,Logo 由 Muli 轉換成 Comfortaa

Avane-Old
舊,Muli
Avane
新,Comfortaa

 

Staend

DNA 功能,S 由圓角轉為偏直角。之後可能會再調一下那個幾條線的角度。

Staend
舊,圓角 Muli
Staend-直角-01
新,偏直角 Muli

 

Tocas

TeaMeow 基於 SASS 和 CSS3 與 JavaScript 的元素設計,

字體由 Muli 轉換成全符號,之後可能還會變厚就是了。

Tocas-01
舊,帶有 Muli
Tocas-閃電S
新,全符號

被自己侷限住?設計元素 Tocas 問題。

其實以前開發了一套類似 BootStrap 的設計介面元素,

叫做 Tocas,你可以按下這裡觀看原始碼

如果你還是不清楚這是什麼的話,就是給網頁用的 CSS 樣式表,

可以輕鬆做出像下面這樣的效果(Tocas 2 Beta)

registration

那不是很簡單嗎?

輕輕鬆鬆靠了幾個用法就可以做出自己想要的畫面,

這個問題就在這邊,Tocas 是一套規則,而不是可自由變化的變形蟲


有了規則之後,迎來的就是毀滅。

谷阿莫雖然很廢話,但有時候他說的話也是可以令人參考的,我會建議你看完露西最後面那段

然後其實看完之後你可能會發現跟我這個文章根本沒關係。

Tocas 是一套規則,那基本上也沒什麼困難的,只要按照規則走,就沒有問題了,

但是 TeaMeow 要用到的 Tocas 部分越多,問題也就越來越浮現。


按照規則,還是更客製化?

s

TeaMeow 有很多地方不是 Tocas 能用上用場的,

例如說背景顏色,不一定能夠與 Tocas 相符,Tocas 可能採用灰色底,

但是如果 TeaMeow 要白色的時候怎麼辦呢,在去生一個「白色背景的 Tocas」嗎。


還沒完善

d

其實 Tocas 本身就是一個還沒完成的產品(但是 TocasJS 已經差不多定型了)

所以經常修改這裡,修改那裡的,我還在想說是不是應該要花多一點時間來讓他更加完善 ..

不然平常都是改一下,然後要用的時候又改一下(搞到最後都亂了)。


結論

螢幕快照 2015-09-01 下午3.09.50

其實 Tocas 在不注重整體環境下,

只根據 Tocas 本身提供的元件做出來的效果是很優秀
(這點我真的不唬爛。)

所以仔細想想,作為獨立元件,好像才是 Tocas 原本的理念,

也就是說把 Tocas 當作按鈕、文字框的樣式提供者

然後套用上 TeaMeow 的自訂顏色,一切看似好像都會解決,

但是我懂,等開始寫程式的時候,一定不會這麼順暢。

結論?又有的忙惹。