V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Can I use?
http://caniuse.com/
Less
http://lesscss.org
Cool Libraries
Bootstrap from Twitter
Jetstrap
lonelyBoy
V2EX  ›  CSS

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

  •  1
     
  •   lonelyBoy · 2019-05-12 23:09:50 +08:00 · 3167 次点击
    这是一个创建于 2020 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    为什么现有的行不通呢?

    我觉得原因如下 要么是代码生成的一塌糊涂,要么是 absolute 这种不可维护代码 要么就是用已有的组件,生成非专业代码,并且有更大的局限性 要么就是很牛逼的 AI 生成代码,比如微软的 sketch2code.看起来很牛逼,但是用起来,其实用不了。可能再过一百年就可以了。

    那如何才能做可行的可视化布局呢,我觉得还是需要从根源找起,然后慢慢添加上层应用,用程序员的思维,方式,再用可视化表达出来。

    那就是Tree

    没有树,那么只能像活动页面一样,导出都是 absolute\fixed.

    目前活动做的不错,比如易企秀,百度 H5。但是只适合活动页面,不需要修改源码的。

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

    那我的项目是什么样子的呢。

    看图

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

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

    现在可体验下。要完全使用,还需要点时间。只要思路正确,扩展、添加上层应用,就可以做到目前 AI 不够发达的情况下,最好用的可视化布局方式。

    体验地址 GITHUBhttps://github.com/0123cf/auto-layout

    项目放在 GITHUB 上面
    auto-layout 可视化布局、自动化 css 布局


    我会继续添加 REM 布局等。 也欢迎大家一起为开源做共享。

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

    待做的还有很多。加油!

    -END-

    目前尚无回复
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2775 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 13:47 · PVG 21:47 · LAX 05:47 · JFK 08:47
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.