Bruck：一個Web界面佈局原型設計框架

Bruck是一個面向網頁設計師的新型lo-fi原型系統，讓設計師可以快速爲客戶構建響應式且易於訪問的佈局原型。設計師可以通過組合多達25個Web組件來建立各種佈局原型。設計師還可以在Bruck提供的在線Playground中實時可視化組合佈局。

Bruck可以生成屏幕閱讀器可訪問和響應式的佈局，無需編寫CSS斷點。Bruck組件提供了常見的佈局模式，並帶有可配置的填充內容。例如，下面的代碼將生成一個佈局，其中包含三個連續的文本塊（），後面跟上一個圖庫網格（<g-rid itemWidth=“10rem” repeat=“6">）。網格佈局包含六張以1:2比例顯示的圖像（），每張圖片下方的標題居中（class=“u-text-center”）。設計師還可以加入註釋（<c-omment wording="A grid of gallery images”>），這樣有助於設計人員和開發人員之間進行溝通。

大多數組件都會隨機生成帶有默認值的內容，這些默認值可以被覆蓋。在前面的示例中，指定了一個文本塊，其中包含隨機生成的四到五個單詞。

兩個高級組件（和）允許用戶使用真實的數據而不是填充內容。用戶必須將真實數據包含在一個叫作data.js的文件中。Bruck Playground還不支持對包含真實數據的佈局進行預覽。

要指定動態佈局，設計者可以將事件監聽器映射到一組預設的動作。下面的示例使用了動態佈局，當用戶單擊按鈕時，這個佈局將顯示id爲“myElem”的元素。

<button onClick="action.show('myElem')">Show the element</button>

Bruck目前支持六種動作，可以動態顯示和隱藏任何內容，並且可以以逐步的方式顯示的內容。

Bruck還爲全局樣式提供了一組輔助類（如第一個示例中的u-text-center）。

Bruck的作者Heydon Pickering想讓Bruck成爲一個精益的庫，旨在提高生產力：

除了動作之外，我真的不希望它成爲一個龐大的庫。它應該易於學習和使用。

Bruck實際上使用了CSS Houdini Paint API。因此，目前並不支持所有的Web瀏覽器。對於佈局原型設計來說，不支持某些瀏覽器可能不會成爲主要問題。

Bruck的Web組件是自定義元素，標記必須包含連字符，以便與標準HTML標記區別開來。Bruck的標籤格式滿足了這種要求，即在標籤單詞的第一個字母后面放置連字符（如、）。

Bruck仍處於開發的早期階段，一個主要版本正在等待發布。Bruck基於ISC開源許可發行，開發者可以通過Bruck GitHub項目參與貢獻和提供反饋。

查看英文原文：https://www.infoq.com/news/2019/02/bruck-quick-layout-prototyping