design system starter

澳大利亞政府設計系統已退役，訪問我們的社區頁面以獲取更多信息

澳大利亞政府設計系統 - 入門者

使用澳大利亞政府設計系統開始全頁模板。

內容

• 模板
• 發展環境
• 開始
• 它如何工作
• 先決條件
• 貢獻
• 執照

---

模板

使用澳大利亞政府設計系統瀏覽全頁模板。

• 主頁
• 內容頁
• 表單頁

發展環境

克隆此存儲庫來創建本地開發環境並開始修改模板。

• 開始
• 它如何工作
• 貢獻
• 執照

---

開始

入門包使用NPM（節點軟件包管理器）來設置本地開發環境並安裝設計系統組件。節點的默認軟件包管理器為NPM。下載節點時，NPM預裝了。

1. 確保計算機上安裝了NPM和節點。如果您不確定，則可以按照NPM說明進行操作。

2. 將此存儲庫下載到計算機上的文件夾中。

3. 在命令行中，進入此文件夾並運行npm install 。這將安裝本地開發環境所需的依賴關係。

4. 現在，您應該準備通過運行npm run watch來啟動本地服務器。這將注意*.scss文件，創建新*.css文件並刷新瀏覽器的更改。

使用Docker

構建圖像：

$ docker build -t ds-starter .

然後運行圖像並映射卷。注意：Windows不支持$ PWD。

$ docker run --rm --volume= " $PWD :/app " -p 3000:3000 -it ds-starter

⬆回到頂部

---

它如何工作

在您的目錄中，您有一個package.json文件。該文件指向運行npm install時要安裝的依賴項。運行npm install後，您會安裝與本地開發環境相關的所有設計系統組件和其他軟件包。

npm install煎餅進行運行之後，這檢查了您的依賴項是否合作，並創建docs/js/script.min.js和src/sass/_uikit.scss 。

src/sass/main.scss導入生成的_uikit.scss 。您不應該在生成時觸摸_uikit.scss文件，而是隨意更改main.scss文件。

當用戶運行npm run build或npm run watch時，我們使用Node-Sass將src/sass/main.scss文件轉換為docs/css/main.css文件。彙編後運行AutoPrefixer，將供應商前綴添加到main.css文件中。

請參閱package.json腳本以設置如何設置

此設置允許您從main.scss文件中修改設計系統文件中的變量。您可以添加自己的配色方案，也可以更改版式和間距。對組件或其他的調整應添加到_uikit.scss的導入下方。這些文件的更改將被注入您的瀏覽器中，因此，由於瀏覽器同步，您甚至不需要刷新。

該docs夾包含發佈網站所需的所有文件。 index.html文件引用main.css file和script.min.js資產以生成頁面。我們命名文件夾docs是因為github頁面使用文檔文件夾託管靜態網站。

⬆回到頂部

---

先決條件

• Node.js 8或更高版本，最好是當前LTS版本。

注意：如果您在Windows上開發，請確保您的本地npm配置正在使用支持unix之類的外殼（即a/unix/path而不是a\windows\path ）。

⬆回到頂部

---

貢獻

為澳大利亞政府設計系統入門包做出貢獻：

1. 分叉項目並在本地克隆。
2. 為將要完成的工作創建一個新的分支。
3. 遵循此處的指南，完成工作並以最好的能力進行測試。
4. 工作完成後，寫一條好的提交消息。
5. 將您的工作推向github並創建新的拉力請求。
6. 回應任何代碼審核反饋。

⬆回到頂部

---

執照

版權（C）澳大利亞聯邦。除了英聯邦的武器外套外，此外，此工作是根據麻省理工學院許可證獲得許可的。

⬆回到頂部

};