可视化html css布局,一个开源可视化布局项目,在线生成纯css布局,可阅读的代码...

本人试过目前已有的可视化布局工具,发现都不尽人意,不是说功能不够,而是一开始就行不通,于是就搞了一个可视化在线布局工具

可视化布局工具 可视化代码AL 简介

它是一个适合企业级的前端代码可视化工具

不生成absolute这种类似易企秀代码

不是只靠组件生成代码,完全自定义,界面制作可以抛开编辑器

使用在线手动编辑的形式,非AI生成代码,比如微软的sketch2code(根据草图生成代码)在实际运用上还需要很长时间,目前AL也在研发这个(根据UI视图生成代码)。

作为唯一一个生成纯css可阅读代码的项目。原理是什么呢。

这个可视化布局, 是基于Tree HTML、Tree css结构添加上层应用。

基于程序员的思维方式,使用可视化表达出来,所以跟写代码是一样的,不用担心不出来好东西,做不出来只能说“姿势”没对。

树结构的方式可以避免像活动页面一样,导出都是absolute\fixed.一次性代码。目前这种做的不错,比如易企秀,百度H5。在线发布,不需要修改源码。

还有目前类似项目,那就是Bootstrap的layoutit, 我一开始使用就放弃了,因为我是专业的程序员。对于Bootstrap这种栅格布局,我觉的不大适合自定义要求高的,并且有依赖(这个还好说)。然后对属性等操作不强,并且不是开源的。无法进行扩展然后达到可真正使用的地步(对于我而言,并没有否认它完全没价值)

那AL可视化布局生成代码的项目到底长什么样子的呢

bea01e6dadf452fab41ccd34f0c69548.gif

d2c2030f2d1403215279a466faa9fd6b.gif

使用程序员的思维,使用flex布局。

没有多余组件依赖,直接生成css代码,html代码

项目放在GITHUB上面

auto-layout 可视化布局、自动化css布局

参与

目前的技术栈是: react react-redux ts

63db0a7d2a404901e5556873a4a8683c.png

谁在使用

c4629516de90253d8fba245cd779af93.png

-END-

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值