Bruck 乙個Web介面布局原型設計框架 n

2021-09-17 05:26:46 字數 1386 閱讀 2039

bruck可以生成螢幕閱讀器可訪問和響應式的布局,無需編寫css斷點。bruck元件提供了常見的布局模式,並帶有可配置的填充內容。例如,下面的**將生成乙個布局,其中包含三個連續的文字塊(),後面跟上乙個相簿網格(\u0026lt;g-rid itemwidth=「10rem」 repeat=「6\u0026quot;\u0026gt;)。網格布局包含六張以1:2比例顯示的影象(),每張下方的標題居中(class=「u-text-center」)。設計師還可以加入注釋(\u0026lt;c-omment wording=\u0026quot;a grid of gallery images」\u0026gt;),這樣有助於設計人員和開發人員之間進行溝通。

大多數元件都會隨機生成帶有預設值的內容,這些預設值可以被覆蓋。在前面的示例中,指定了乙個文字塊,其中包含隨機生成的四到五個單詞。

兩個高階元件(和)允許使用者使用真實的資料而不是填充內容。使用者必須將真實資料報含在乙個叫作data.js的檔案中。bruck playground還不支援對包含真實資料的布局進行預覽。

要指定動態布局,設計者可以將事件***對映到一組預設的動作。下面的示例使用了動態布局,當使用者單擊按鈕時,這個布局將顯示id為「myelem」的元素。

\u0026lt;button onclick=\u0026quot;action.show('myelem')\u0026quot;\u0026gt;show the element\u0026lt;/button\u0026gt;
bruck目前支援六種動作,可以動態顯示和隱藏任何內容,並且可以以逐步的方式顯示的內容。

bruck還為全域性樣式提供了一組輔助類(如第乙個示例中的u-text-center)。

bruck的作者heydon pickering想讓bruck成為乙個精益的庫,旨在提高生產力:

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

bruck實際上使用了css houdini paint api。因此,目前並不支援所有的web瀏覽器。對於布局原型設計來說,不支援某些瀏覽器可能不會成為主要問題。

bruck的web元件是自定義元素,標記必須包含連字元,以便與標準html標記區別開來。bruck的標籤格式滿足了這種要求,即在標籤單詞的第乙個字母後面放置連字元(如、)。

bruck仍處於開發的早期階段,乙個主要版本正在等待發布。bruck基於isc開源許可發行,開發者可以通過bruck github專案參與貢獻和提供反饋。

檢視英文原文:

Bruck 乙個Web介面布局原型設計框架 n

bruck可以生成螢幕閱讀器可訪問和響應式的布局,無需編寫css斷點。bruck元件提供了常見的布局模式,並帶有可配置的填充內容。例如,下面的 將生成乙個布局,其中包含三個連續的文字塊 後面跟上乙個相簿網格 u0026lt g rid itemwidth 10rem repeat 6 u0026qu...

Bruck 乙個Web介面布局原型設計框架 n

bruck可以生成螢幕閱讀器可訪問和響應式的布局,無需編寫css斷點。bruck元件提供了常見的布局模式,並帶有可配置的填充內容。例如,下面的 將生成乙個布局,其中包含三個連續的文字塊 後面跟上乙個相簿網格 u0026lt g rid itemwidth 10rem repeat 6 u0026qu...

Bruck 乙個Web介面布局原型設計框架 n

bruck可以生成螢幕閱讀器可訪問和響應式的布局,無需編寫css斷點。bruck元件提供了常見的布局模式,並帶有可配置的填充內容。例如,下面的 將生成乙個布局,其中包含三個連續的文字塊 後面跟上乙個相簿網格 u0026lt g rid itemwidth 10rem repeat 6 u0026qu...