Giter VIP home page Giter VIP logo

nics-tw / guide Goto Github PK

View Code? Open in Web Editor NEW
4.0 3.0 4.0 888 KB

政府網站設計原則， 讓政府網站設計原則更加完善，我們正在全力開創新的典範，以便為您提供有價值的知識及技術。 讓我們攜手合作，共同見證政府網站設計原則的進步和成長。 有任何數位韌性相關問題，歡迎來電至 國家資通安全研究院前瞻中心架構設計組 02-6631-1881 詢問!

Home Page: https://www.nics.nat.gov.tw/core_business/digital_resilience/Design_System_Resources/

License: Other

HTML 58.15% CSS 1.69% SCSS 21.67% JavaScript 18.49%
digital-resilience resilience

guide's Introduction

政府網站設計原則

目標

本文件所規劃之系統元件係以具備相容性、符合網頁標準之目標進行設計規劃，並最大化地使用網頁標準中所提供的元件加以優化，可供各機關及資通系統承包商直接採用及參考，減少對第三方元件及複雜前端開發框架的依賴，增加系統韌性、相容性及親和力。系統元件將會使用網頁標準元件作為根本基礎，因此即使各機關、廠商仍須使用前端開發框架，也不會有不相容的問題。

CSS 元件使用方式

可直接下載，並使用下方程式碼匯入：

<link rel="stylesheet" href="../main.css">

請避免一切對原始碼的改動。使用設計系統的目的就在於一致性。若需要特殊的顯示方式，請另行撰寫 CSS，以免造成日後版本升級困難。

Warning

本檔案暫時包含 Tachyons，作為 Atomic CSS 的第三方程式。

多國語系支援

請依照多國語系支援另外包含所需要的字體 CSS 檔案。

JavaScript 元件使用方式

文字輸入區塊

下載 character-count.js 檔案並選擇性使用下方程式碼匯入：

<script src="../character-count.js" defer>

公文元件

下載 official-document-element.js 檔案並選擇性使用下方程式碼匯入：

<script src="../official-document-element.js" type="module">

互動資料表格

下載 interactive-table-element.js 檔案並選擇性使用下方程式碼匯入：

<script src="../interactive-table-element.js" type="module">

互動資料表格

下載 skip-to-element.js 檔案並選擇性使用下方程式碼匯入：

<script src="../skip-to-element.js" type="module">

開發

jekyll server -w

Run lighthouse locally:

npx @lhci/cli assert --url=http://localhost:4000/

guide's People

Contributors

focaaby avatar ik-ngoo avatar jedilin avatar muan avatar nonumpa avatar

Stargazers

avatar avatar avatar avatar

Watchers

avatar avatar avatar

Forkers

nonumpa pollyting lalalamabel ik-ngoo

guide's Issues

親和力符合度追蹤

不定期增加

使用上親和力文件注意事項

  • 跳至主要內容區
  • 按鈕及連結
  • 數位名片
  • 表單欄位
  • 公文
  • 表格
  • 警告文字

初階使用

  • 跳至主要內容區
  • 按鈕及連結
  • 數位名片
  • 表單欄位
  • 公文
  • 表格
  • 警告文字

VPAT

  • 跳至主要內容區
  • 按鈕及連結
  • 數位名片
  • 表單欄位
  • 公文
  • 表格
  • 警告文字

Opinionated CSS

Document why cascading works a certain way.

CSS classes in components should be opinionated. Reliance on atomic CSS should be kept at a minimum.

  • Remove dependencies on Tachyons

Distrubution

  • Installation channels:
    • package manager
    • cdn? (do we have one? local cf?)
    • packaging custom elements?
  • *treeshaking
  • release update (subscribe via GitHub?)
  • versioning
  • tracker? (console.warn when a mandated release update is out)

選單

  • 側邊選單
  • 上方橫排選單

互動式資料表格親和力

  1. 常見表單中的修改、刪除動作的 actions column 並不該始 tabular data 的一部分？WCAG 有 guideline 嗎？
url actions
https://pdis.nat.gov.tw edit delete
  1. 互動式表單在篩選之後有需要用 aria-live 通知使用者嗎？table 本身即有行數宣告。我們可以用什麼樣的 ARIA relationship 去連結他們嗎？若要做出 aria-live 的話可能會必須做分開的元件畢竟我記得 aria-live elements 是在頁面讀取時被註冊的，dynamically added 元件在某些輔助科技中不會被報讀。

國際化支援與資訊

目標語言

  • 正體中文
  • English
  • 日本語
  • Tiếng Việt
  • ไทย

尚須尋求相關資源，如文檔。

前端技術規範

待翻譯社文件整理並改寫統整為適合台灣政府民情的技術文件。

i18n_selector map a wrong i18n value

Issue snapshot

i18n_selector

Root cause

目前是用 select.getAttribute(selectors) 讓所有 selector 一起 query，但是回傳的元素順序是按照 dom 順序排列，跟 selector 順序無關，所以 i18n 的值沒有照著 dom 上的 selector 順序排就會對應到錯的元素。

References

html
https://github.com/nics-tw/guide/blob/main/_components/form/index.md
https://github.com/nics-tw/guide/blob/main/_includes/form/form-elements.html

js

guide/assets/js/main.js

Line 7 in e311f88

const selector = select.getAttribute('data-i18n-selector')

Possible solutions

  1. 可以把 i18n 順序調整得跟回傳的 nodelist 一樣
  2. 或是分開 query selector、更新 value
const selectors = ["[for=city]", "[for=id]"];
const i18n = {
    "[for=city]": "City of residence",
    "[for=id]": "ID type",
};

selectors.forEach(selector => {
    const elements = document.querySelectorAll(selector);
    elements.forEach(element => {
        // Update the inner text with the i18n value
        element.textContent = i18n[selector];
    });
});

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.