QCon北京「鸿蒙专场」火热来袭!即刻报名,与创新同行~ 了解详情
写点什么

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:137610
用户头像

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

关注

评论 1 条评论

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

荷小鱼 x mPaaS | 借助 H5 容器改善 App 白屏、浏览器兼容等问题

蚂蚁集团移动开发平台 mPaaS

html5 mPaaS 离线包 教育科技

嘉楠科技发布勘智K210-MicroPython 无需寄存器手册就能上手开发

一体化智能安全防御 京东云星盾安全加速正式发布

京东科技开发者

互联网 网络安全

1800 美金?Apache ShardingSphere 带薪远程实习招募啦!| 2021 Google 编程之夏

京东科技开发者

Apache 开源 ShardingSphere

货运物流移动端解决方案:为货运物流行业打造高性能、高粘性的“双端”触点

蚂蚁集团移动开发平台 mPaaS

移动开发 mPaaS 移动端 智慧物流

Android AAC音频硬编解码你知道多少?

Engineer-Jsp

如何抓住新社交风口下的音视频通讯大潮?

融云 RongCloud

数字货币,已成为理解现代经济不可排斥的一个因素

CECBC

数字经济

架构实战营模块一作业

日照时间长

架构实战营

基于区块链技术的建筑供应链金融创新

CECBC

区块链

3.2 Go语言从入门到精通:包管理工具之GOPATH

xcbeyond

Go 语言 4月日更

Java开发8年,40W年薪被别人叫垃圾?请你们不要口嗨了,好好去刷题吧!

Java架构追梦

Java 架构 面试 金三银四 年薪40W

已拿到8个Offer!阿里巴巴Java面试参考指南(泰山版)

钟奕礼

Java 编程 程序员 架构 面试

阿里云 RTC QoS 弱网对抗之变分辨率编码

阿里云CloudImagine

阿里云 WebRTC 分辨率 视频编解码 视频云

区块链版「滴滴+Uber」,让出行带来收益

CECBC

移动互联网

给你看一个开发和运维的效率加速器!

BinTools图尔兹

DevOps 运维 运维工程师 dba 数据库管理工具

盘点几代会声会影图标

奈奈的杂社

构建用户安全评级,UGC智能化审核应用实践

爱奇艺技术产品团队

人工智能

激光雷达(LiDAR)技术

澳鹏Appen

人工智能 大数据 智能驾驶 激光雷达 点云标注

公安重点人员管控系统搭建,智慧派出所系统

入职字节跳动那一天,我哭了(蘑菇街被裁,奋战7个月拿下offer)

Java 编程 程序员 架构 面试

漫画Nginx的subfilter

运维研习社

nginx 4月日更

Java程序员都要懂得知识点:原始数据类型

华为云开发者联盟

Java 字符串 StringBuffer 原始数据类型 布尔类型

后端选择java,还是python?

cdhqyj

Java Python 后端 计算机 语言

为什么拥有云原生数据平台对电信公司很重要?

VoltDB

云原生 5G VoltDB 电信

将AI部署到现实?或许你该读读这本书!

澳鹏Appen

人工智能 大数据 AI 伦理

HBase底层读写过程

五分钟学大数据

HBase 4月日更

Github上堪称最全的面试题库(Java岗)到底有多香

钟奕礼

Java 编程 程序员 架构 面试

Github连夜下架!阿里新产Java全栈面试突击小册太香了

Java架构之路

Java 程序员 架构 面试 编程语言

软件测试分类体系,系统学习

程序员阿沐

软件测试 测试工程师 黑盒测试 白盒测试 测试类型

阿凡提EGGNETWORK恒价通证+加密社交催生新玩法 EFTalk

币圈那点事

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