Rêver: Uikit筆記(一)

Uikit是YOOtheme開發的"網頁框架"，也就是CSS & html。

這次剛好選購了YOOtheme的Joomla佈景樣式，

也理所當然的學習了Uikit。

但對於完全不是學習"網頁設計"的我來說，

頭痛了好幾個下午，但後來也都"差不多"的解決了。

畢竟我還是無法了解後台內CSS修改是怎麼回事。

以下為非網頁設計本科的人自言自語，請斟酌觀看，謝謝。

入重點，

http://www.getuikit.net/ 是Uikit的中文網站。

還好不用看英文，不然我就瘋了先。

(http://getuikit.com/index.html是Uikit的英文網站。)

也幸好平時愛看晉江小說，不然這一大篇幅的簡體字，應該會眼花撩亂吧。

網站進去有開始使用 http://www.getuikit.net/docs/documentation_get-started.html

當然因為已經是YOOtheme的Joomla佈景樣式，所以我這段就跳過了。

內容大概是說把檔案下載後，在放到後台FTP相對應的資料夾內，讓他們能互相讀取。

第二個比較重要，是核心組件 http://www.getuikit.net/docs/core.html

裡面會依照你想要的各種網頁呈現方式，做例子給你看，

比如，面板/Panel (http://www.getuikit.net/docs/panel.html)，

一開始會看到類似.uk-panel 的文字，這就是寫在html上的面板語法，

這也是面板/Panel最基本的。

記住每一個<div>後面都得加一個<div>才行。

然後往下拉會看到

這個指的是一個例子，你輸入後呈現大概就是長這樣。

然後你會看到

<div class="uk-panel">
    <div class="uk-panel-badge uk-badge">...</div>
    <h3 class="uk-panel-title">...</h3>
    ...
</div>

這個就是要寫在html上的面板語法。

※那以Joomla來說要寫在哪裡？

一個就是「文章」上(以編輯原始碼下去寫)，一個就是「模組」新增自訂html。

然後再往下拉，你會看到很多很多的 Example和 Markup，但那些 Markup還是得加上最基本前面描述的.uk-panel 等，剛就說了這是最基本的。

以上。

Rêver