什麼是Semantic UI

Semantic

Adjective

1. Of or relating to semantics or the meanings of words.
2. (software design, of code) Reflecting intended structure and meaning.

<div class="row">
  <div class="col-lg-4">1</div>
  <div class="col-lg-4">2</div>
  <div class="col-lg-4">3</div>
</div>

玩過Bootstrap嗎？

How about this

<main class="ui three column grid">
  <aside class="column">1</aside>
  <section class="column">2</section>
  <section class="column">3</section>
</main>

為什麼你該用Semantic UI

好學好用

不須記一堆命名慣例

寫法接近自然語言

有些高層級的設定可以立馬改變所有元件的風格，不須要一一設定

High Level Theming

其他的Feature邊用邊提

升級到1.0了！

擷取時間 2014.12.07.21:10

係Github星星數量排名前40的專案

Hacker News

鄉民說法

使用Semantic UI

<link rel="stylesheet" type="text/css" href="/dist/semantic.min.css">
<script src="/dist/semantic.min.js"></script>

CDN Available too

//cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.1.2/semantic.min.css

//cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.1.2/semantic.min.js

Kitchen Sink

Definitions

Definitions in semantic are groups of css, fonts, images, and javascript which make up a single element.

Definition的分類

• Element：如化學元素般，單獨存在或一起在同質性的群組中出現。如按鈕、分隔線。
• Collection：一個群組，包含數種常常一起出現的異質性Element。如Grid、Form。
• View：一種表達常見網站內容的方式。如comments, feeds。
• Module：一種Element，但本質決定於Behavior。如折疊效果、下拉式選單。
• Behavior：和Element無關、獨立的動作。如API、表單驗證

可有官方Project可以學習？

客製化自己的Semantic UI

客製化就是改改變數，包出css檔案給網站用

客製化檔案們

site.overrides

site.variables

theme.config

輸出給專案引用的檔案

semantic.css

semantic.min.css

Gulp build

嗡嗡翁

• 下載一份最新版 Semantic UI
• npm install -g gulp
• npm install
• gulp
  • 選擇Automatic

使用Gulp

gulp # 執行預設作業 (watch)
gulp watch # 觀察檔案變化
gulp build # 從Source建置所有檔案
gulp install # 重新安裝Semantic UI

工作流程

• 改改source
• gulp watch 或 gulp build
• 觀察examples的Kitchensink和Homepage
• 不滿意，則重複上述流程

Source和輸出定義在semantic.json

{
  "base": "",
  "paths": {
    "source": {
      "config": "src/theme.config",
      "definitions": "src/definitions/",
      "site": "src/site/",
      "themes": "src/themes/"
    },
    "output": {
      "packaged": "dist/",
      "uncompressed": "dist/components/",
      "compressed": "dist/components/",
      "themes": "dist/themes/"
    },
    "clean": "dist/"
  }
}

semantic.json

site theming範例

@headerFont        : 'Open Sans', 'Helvetica Neue', Arial, Helvetica, sans-serif;
@pageFont          : 'Oswald', 'Helvetica Neue', Arial, Helvetica, sans-serif;
@googleFontFamily  : 'Open+Sans:400italic,400|Oswald:400,700';

src/site/globals/site.variables

packaged themes範例

src/theme.config

/*******************************
            Themes
*******************************/
 /* Global */
@site        : 'default';
@reset       : 'default';
 /* Elements */
@button      : 'amazon';
@container   : 'default';
@icon        : 'default';

amazon是themes的子目錄，上面這樣的改法會讓button的風格如amazon

參考文獻

• 官網 http://semantic-ui.com/
• GitHub頁 https://github.com/Semantic-Org/Semantic-UI
• 官方教學 http://learnsemantic.com/
• 舊版官網 http://legacy.semantic-ui.com/
• Hacker News https://news.ycombinator.com/item?id=8651712

TODO

• UI doc
• Definitions
• How to contribute