跳到內容
欄目
語言，而家係廣東話
Rastrillo 設計系統
語言，而家係廣東話
EnglishGaeilge简体中文Españolहिन्दीPortuguêsবাংলাРусский日本語廣東話Tiếng Việtالعربية

開始使用

rastrillo 應用第一日就攞齊晒呢啲，但設計系統邊個都用得。用 JavaScript 漸進增強，但唔需要 JavaScript。

樣式表

tokens.css 係結構：組件嘅類、版面，同埋字級、間距同圓角嘅比例。入面嘅值係引用，實際喺第二度設定。themes/<name>.css 係顏色、字體同形狀：一個 :root 區塊，每隻色都以 light-dark() 成對聲明一次。

腳本

rastrillo.js 係漸進增強嘅墊片：片段輪詢、輕量關閉、開關嘅拖動。busy.js 係忙碌規則。anchor.js 喺 CSS 做唔到嘅地方令下拉選單留喺畫面入面。select.js 同 datetime.js 係增強，喺控件自己啟用之前都係唔郁嘅，而且可以逐個刪走。

每個檔案嘅大細

大細以 KiB 計。訪客真正下載嘅係 gzip 壓縮後嗰個版本。

  • tokens.css結構：所有組件嘅類、所有比例，冇任何顏色字面值。喺每個主題之下都係同一個檔案。原樣 281 · gzip 壓縮後 73 · 刪走註釋再壓縮後 21
  • theme-day.cssday 主題嘅顏色、字體同形狀：一個 :root 區塊，每隻色以 light-dark() 成對聲明一次。原樣 27 · gzip 壓縮後 7.3 · 刪走註釋再壓縮後 1.7
  • theme-plain.cssplain 主題嘅顏色、字體同形狀：一個 :root 區塊，每隻色以 light-dark() 成對聲明一次。原樣 18 · gzip 壓縮後 4.2 · 刪走註釋再壓縮後 1.1
  • theme-signal.csssignal 主題嘅顏色、字體同形狀：一個 :root 區塊，每隻色以 light-dark() 成對聲明一次。原樣 18 · gzip 壓縮後 4.6 · 刪走註釋再壓縮後 1.2
  • shell.css手機上頁面之間嘅滑動，俾 sidebar 同 console 外殼用。可以同 shell.js 一齊刪走。原樣 4.2 · gzip 壓縮後 1.1 · 刪走註釋再壓縮後 0.5
  • rastrillo.js漸進增強嘅墊片：片段輪詢、輕量關閉同開關嘅拖動。每個搭骨架生成嘅應用都會攞到。原樣 19 · gzip 壓縮後 7.2 · 刪走註釋再壓縮後 2.6
  • busy.js忙碌規則：表單提交期間，佢嘅按鈕最少顯示 650 毫秒載入指示，並且拒絕第二次提交；返回就會還原。每個搭骨架生成嘅應用都會攞到。原樣 15 · gzip 壓縮後 5.3 · 刪走註釋再壓縮後 1.3
  • live.js即時頁面：伺服器話資料變咗就自動更新嘅區塊，同埋就地儲存嘅表單。喺頁面帶有 rastrillo-live meta 標籤之前乜都唔做，亦可以單獨刪走。原樣 29 · gzip 壓縮後 10.0 · 刪走註釋再壓縮後 5.0
  • light.js層次樣式讀取嘅光：隨時間照出嘅陰影，同埋指針下面嘅按鈕上嘅光澤。想要靜止設計就刪走佢。原樣 11 · gzip 壓縮後 4.1 · 刪走註釋再壓縮後 2.1
  • anchor.js喺唔支援 CSS 錨點定位嘅瀏覽器，令下拉選單留喺畫面入面。支援嘅瀏覽器就乜都唔做：你支援嘅瀏覽器全部都支援之後，就可以刪走佢。原樣 3.2 · gzip 壓縮後 1.4 · 刪走註釋再壓縮後 0.6
  • shell.jssidebar 同 console 外殼嘅手機導航：頁面之間嘅滑動、重用瀏覽紀錄嘅「返回」，同埋將焦點還返去你離開嗰個部分。可以單獨刪走。原樣 8.0 · gzip 壓縮後 3.2 · 刪走註釋再壓縮後 1.4
  • transition.js防止 column、stage 同 topbar 頁面喺略過頁面轉場時記錄錯誤。sidebar 同 console 頁面唔需要佢。原樣 0.9 · gzip 壓縮後 0.4 · 刪走註釋再壓縮後 0.4
  • select.jsfield-select 嘅可搜尋下拉框。喺某個 select 用 data-rst-select 啟用之前都係唔郁嘅，可以單獨刪走。原樣 55 · gzip 壓縮後 18 · 刪走註釋再壓縮後 8.0
  • datetime.js日期欄位嘅自然語言輸入。喺某個欄位用 data-rst-date 或 data-rst-time 啟用之前都係唔郁嘅，可以單獨刪走。原樣 76 · gzip 壓縮後 24 · 刪走註釋再壓縮後 11
  • calendar.js嗰個欄位嘅日曆掣打開嘅月曆格。喺 datetime.js 問佢攞面板之前都係唔郁嘅，可以單獨刪走：冇咗佢，個掣就退返去瀏覽器自己嘅揀選器。原樣 22 · gzip 壓縮後 7.1 · 刪走註釋再壓縮後 3.1

新應用攞到嘅 CSS 同 JavaScript 原樣係 542 KiB，gzip 壓縮後係 159 KiB：tokens.css、一個主題，同埋啲腳本。

喺新嘅 rastrillo 應用入面

rastrillo new 會將呢啲寫入應用嘅 static 目錄，再喺版面度引用，tokens.css 行先。之後佢哋就係你嘅：想改就改，用唔著嘅刪咗佢。

rastrillo new --theme=plain myapp

主題釘咗兩次。--theme 決定邊個內置主題會複製做 static/theme.css，而且喺生成應用嗰陣就記低咗。

const vendoredTheme = "plain"

唔用框架都用得

上面啲名就係連結。攞走 tokens.css 同一個主題，你就有成套視覺系統：普通 HTML 上面嘅屬性，唔使建置步驟。

跟呢個次序連結，tokens.css 行先：

<link rel="stylesheet" href="tokens.css">
<link rel="stylesheet" href="theme-plain.css">

升級

值得喺佢食咗你一個下晝之前就知嘅陷阱：tokens.css 喺搭骨架嗰陣複製入應用嘅 static 目錄，之後就凍咗喺度，但佢所修飾嘅 partial 就繼續隨模組升級。應用可能靜靜雞用新標記跑舊 CSS。升級嗰陣記住重新複製 tokens.css，連主題同腳本一齊。

rastrillo doctor 會將應用凍咗嘅檔案同模組嗰啲比對，再提議重新複製。