写点什么

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

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

关注

评论 1 条评论

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

架构实战营 - 模块2 - 作业

Pyel

「架构实战营」

实用机器学习笔记十九:模型验证

打工人!

人工智能 机器学习 深度学习 学习笔记 12月日更

被灵魂问倒:这个BUG为什么没测出来?

华为云开发者联盟

测试 bug 文档 测试用例 测试工程师

[Pulsar] LookUp原理

Zike Yang

Apache Pulsar 12月日更

微信朋友圈的高性能复杂度分析

糖糖学编程

架构实战营

明年的能力计划之学会咨询

将军-技术演讲力教练

签名验证反爬,反反爬第二篇博客,Python爬虫120例

梦想橡皮擦

12月日更

Dubbo-Admin 功能展示与实操解析

阿里巴巴云原生

阿里云 云原生 Dubbo-Admin 功能

React进阶(十):React 项目启动原理详解

No Silver Bullet

React 12月日更

Android 8.0 下载安装进入【安装未知应用】页面,两步简化一步

阿策小和尚

28天写作 Android 小菜鸟 12月日更

GaussDB(DWS)中共享消息队列实现的三大功能

华为云开发者联盟

线程 数据同步 GaussDB(DWS) 共享消息队列 共享消息

模块二作业

novoer

#架构实战营

架构实战营 - 第 4 期 - 模块二作业

Evan

架构实战营 「架构实战营」

从甲方到乙方,如何做好混沌工程的行业化落地

阿里巴巴云原生

阿里云 云原生 混沌工程 金融行业 行业化落地

云未来、新可能 - 绿色、无处不在、可信的计算

阿里巴巴云原生

阿里云 容器 云原生 活动 KubeCON

Prometheus Exporter (三十二)Varnish Exporter

耳东@Erdong

Prometheus 28天写作 exporter 12月日更 Varnish

从 WAN 到 SD-WAN 边缘设备的网络架构

devpoint

TLS ssl SD-WAN 12月日更

模块二作业

黄秀明

消息队列存储-mysql表

🌾🌾🌾小麦🌾🌾🌾

架构实战营

阿里云消息队列 RocketMQ、Kafka 荣获金融级产品稳定性测评 “先进级” 认证

阿里巴巴云原生

阿里云 云原生 稳定性 获奖

DDD领域驱动设计实战(六)-理解领域事件(Domain Event)

JavaEdge

12月日更

从手游中的感悟

搬砖的周狮傅

游戏 日常感悟

第2周学习总结

糖糖学编程

架构实战营

跟着动画学Go数据结构之选择排序

宇宙之一粟

golang 数据结构 选择排序 12月日更

建木持续集成平台v2.1.0发布

Jianmu

DevOps CI/CD 开源社区

性能工具之stress工具使用教程(带源码说明)

zuozewei

Linux 工具 性能测试 12月日更

Service Mesh 在中国工商银行的探索与实践

阿里巴巴云原生

阿里云 微服务 云原生 服务网格 金融实践

字典树之旅04.Patricia Trie(二)

极客志

Java 自然语言处理 数据结构 算法 字典树

微信朋友圈高性能复杂度设计

CH

「架构实战营」

Kotlin Maps:五个基本函数

坚果

kotlin 28天写作 12月日更

19《重学JAVA》--集合(一)

杨鹏Geek

Java25周年 28天写作 12月日更

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