写点什么

Bruck:一个 Web 界面布局原型设计框架

  • 2019-02-11
  • 本文字数:1248 字

    阅读完需:约 4 分钟

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


2019-02-11 10:137710
用户头像

发布了 98 篇内容, 共 66.0 次阅读, 收获喜欢 285 次。

关注

评论 1 条评论

发布
用户头像
想法不错 ^_^
2019-02-13 17:13
回复
没有更多了
发现更多内容

【森城市】GIS数据漫谈(四)— 坐标系统

ThingJS数字孪生引擎

使用 SSH 方式拉取代码

攻城狮杰森

git GitHub SSH gitee 7月月更

使用Java客户端发送消息和消费的应用

hum建应用专家

云计算

企业在创建产品帮助中心时需要注意的问题!

Baklib

企业 客户服务 帮助中心

英特尔发布开源AI参考套件

科技之家

HDFS、纱线、蜂巢MRS中使用Ranger实现权限管理全栈式实践

华为云开发者联盟

大数据 后端 MRS

要想不踩SaaS那些坑,得先了解“SaaS架构”

华为云开发者联盟

云计算 开发 SaaS DTT

阿里云E-MapReduce 极客大赛开放报名 数十万奖金等你挑战

Lily

比赛

24小时自助共享洗车有人洗吗

共享电单车厂家

24小时无人自助洗车 自助洗车加盟 车白兔自助洗车 自助洗车店

如何在企业工作中应用知识管理,解决企业的问题?

Baklib

知识管理

24小时自助共享洗车店要多少钱

共享电单车厂家

自助洗车加盟 车白兔洗车 24小时自助共享洗车 自助共享洗车店

C 语言入门(六)

逝缘~

7月月更

“智慧工厂”上线,破局传统工厂数字化转型

AIRIOT

低代码 物联网 低代码,项目开发

linux之拖拽上传文件

入门小站

Linux

Java实现有getMin功能的栈

工程师日月

Java 算法 7月月更

Python|类与对象

AXYZdong

Python 7月月更

Grafana Labs携手阿里云,将提供国内首款Grafana托管服务

Lily

区块链合约安全系列(三):如何认识及预防公链合约中的自毁攻击

BSN研习社

区块链、

Apache APISIX Meetup 南京站!我们 7.30 见!

API7.ai 技术团队

API网关 APISIX Meetup Workshop

什么是真正的HTAP?(一)背景篇

StoneDB

MySQL OLAP OLTP HTAP StoneDB

华为云Stack南向开放框架,帮助生态伙伴高效入云

华为云开发者联盟

云计算 后端

24小时共享自助洗车店你见过吗

共享电单车厂家

24小时共享自助洗车 自助洗车加盟 自助洗车店

加盟自助洗车真的不用招人吗

共享电单车厂家

自助洗车加盟 车白兔自助洗车 无人自助洗车

深入理解 Linux 的 TCP 三次握手

C++后台开发

Linux TCP 后端开发 C++后台开发 C++开发

Allure测试报告怎么设置

和牛

测试

【7.8-7.15】写作社区精彩技术博文回顾

InfoQ写作社区官方

优质创作周报

【计算讲谈社】第六讲|三星堆奇幻之旅:只有云计算才能带来的体验

大咖说

云计算 三星堆 数字空间 阿里云大咖说 计算讲谈社

Dimitra 和 Ocean Protocol 解读农业数据背后的秘密

股市老人

5分钟快速梳理你的HTTP体系

程序员海军

前端 HTTP 7月月更

洗车店洗车贵试试自助洗车吧

共享电单车厂家

自助洗车加盟 车白兔自助洗车 什么是自助洗车 自助洗车价格

Bruck:一个Web界面布局原型设计框架
_大前端_Bruno Couriol_InfoQ精选文章