貢獻菜譜
如果您想為佈局菜譜貢獻一個示例，本頁面將解釋如何釋出您的示例的步驟。
什麼是好的菜譜？
任何有用的網頁設計模式的最簡化版本。您所包含的每一行 CSS 都應該有助於演示該模式，所以請刪除任何純粹為了美化示例而存在的內容。其思想是，人們可以獲取該模式並將其用於具有自己風格的網站中。
一個菜譜包含
- 一個即時示例，儲存在CSS 示例 GitHub 倉庫中。
- 該示例的可下載版本，也儲存在 CSS 示例倉庫中。
- 網站的CSS 佈局菜譜部分中的一個頁面，該頁面應包含以下元件：
- 簡介
- 依賴項
- 示例
- 決策
- 有用的回退或替代方法（如果相關）
- 可訪問性考慮
- 瀏覽器相容性（僅針對未完全支援的 CSS 屬性）
- 其他資源
釋出菜譜的步驟
要建立菜譜並將其新增到 CSS 佈局菜譜，請遵循以下步驟：
1. 構建模式
在將您的示例變為菜譜之前，請先將您的模式建立為一個基本的 HTML 頁面。思考您要演示什麼，並儘可能保持簡單。如果新增類名，請使用“container”或“item”等描述性詞語。
請確保您已在多個瀏覽器、視口大小和裝置上測試了 HTML 和 CSS。此外，請確保任何 CSS 樣式都遵循可訪問性指南。雖然使用支援有限的 CSS 屬性是可以的，但請務必在建立頁面時包含瀏覽器支援資訊，尤其是在瀏覽器相容性部分。在某些情況下，建立帶有回退支援的示例的第二個版本可能會很有幫助。
2. 建立即時示例
菜譜頁面上的即時示例，例如居中元素，以及 MDN 上的其他地方，允許讀者操作程式碼並更改相關部分，而不會被所有程式碼淹沒。您的菜譜將透過一個或多個示例進行演示。
分叉CSS 示例倉庫，然後檢視 css-cookbook 資料夾。那裡有一個cookbook-template.html 檔案。複製此檔案並將其用作起點。將其儲存到 css-cookbook 目錄中，併為其取一個對您的模式有意義的名稱。模板包含註釋，可指導您在適當的位置新增各種部分。
此模板的重要部分如下：
-
有一個用於編輯器面板的樣式表，其中包含一些基本的 body 樣式和一個用於編輯器功能的 JavaScript 檔案。請保持這些檔案不變。
-
<head>包含兩個樣式塊。第一個樣式塊用於讀者無需更改即可操作示例的元素。第二個樣式塊包含讀者可能想要操作的專案。我們通常將所有 CSS 新增到第一個塊，然後選擇要移動到第二個塊的規則。第二個塊中的規則應該是模式的基礎，也許是讀者可以更改 CSS 值並看到模式更新的規則。 -
您需要將元件的 HTML 新增兩次：首先在具有
preview類的部分內，然後在使用playable-html類的<textarea>內。 -
第二個
<head>塊中可編輯的 CSS 也必須複製到playable-css部分。
一個工作示例是 center.html，它嵌入在居中元素頁面上。您可以使用它來檢視如何正確新增各種部分。
如果您已經分叉了倉庫，並且在您的示例中包含了我們的 CSS 和 JavaScript 檔案，那麼在瀏覽器中開啟您的即時示例應該會顯示一切都像在 MDN 頁面上一樣正常工作。
有用提示
- 不要縮排文字區域內的 CSS 和 HTML；相反，將程式碼與行首對齊。這樣在渲染時會更好看。
- 如果需要任何影像，請將它們放在示例所在的目錄中。歡迎使用任何已有的影像。
- 您可以透過更改內聯樣式中的高度來調整文字區域的高度。
3. 建立可下載版本
由於示例包含我們所有的即時示例程式碼，我們希望為讀者提供他們示例所需的程式碼，省略任何不必要的項。建立您的即時示例的副本，並將其名稱新增 --download。例如，center.html 的下載版本是 center--download.html。此檔案將類似於您的初始示例。它應該是一個基本的 HTML 頁面，作為您的模式的單個 HTML 頁面。
包含我們所包含樣式表中的 body CSS 規則可能會很方便。請檢視cookbook-template--download.html 作為指南；這些規則作為起點提供。
4. 提交包含您的示例的拉取請求
在CSS 示例倉庫上開啟一個拉取請求 (PR)。這使我們能夠在您建立頁面之前幫助您對示例進行任何可能需要的更改。此外，示例需要上線才能被包含。這就是為什麼首先建立程式碼示例，然後建立解釋性指南是有意義的。在您的 PR 中，解釋模式以及您正在演示的內容。請參閱我們的開啟拉取請求的指南。
5. 建立您的頁面
您的示例 PR 合併後，開啟一個拉取請求以在佈局菜譜目錄中建立一個新頁面。使用我們的菜譜頁面模板。模板解釋了每個部分的要求，您可以參考其他菜譜示例以獲取更多幫助。
請記住在主佈局菜譜頁面上新增指向您的新菜譜的連結。
如果您有任何問題或想讓別人檢視您的頁面，請透過我們的任何溝通渠道與我們聯絡。