挑战30天在头条写日记#
一般知道比较多的svg 或者canvas
Vue EasyFlow 和 Vue-Flowchart 都是用于在 Vue.js 前端应用中创建流程图和工作流类应用的框架,但它们有一些不同之处。
Vue EasyFlow 是一个相对较新的开源框架,旨在简化流程图的创建和编辑。它提供了一些易于使用的组件和 API,使得在 Vue 应用中实现拖拽、连线和条件检验等功能更加方便。Vue EasyFlow的重点是提供简洁而直观的用户界面和良好的交互体验。
Vue-Flowchart 是一个较早的开源框架,也是一个基于 Vue.js 的工作流程图库。它提供了更多的功能和配置选项,例如支持多种节点类型、自定义节点样式和事件处理。Vue-Flowchart 也有更多的用户和社区支持,并且已经积累了一些丰富的文档和示例。
选择使用哪个框架取决于你的具体需求和项目要求。如果你需要一个简单且易于上手的解决方案,并且对定制化和复杂功能的需求较少,Vue EasyFlow 可能是一个不错的选择。它提供了一个轻量级的流程图编辑器,适用于简单的流程图应用。
如果你需要更多的灵活性、自定义选项和高级功能,以及更多的社区支持和文档资源,那么 Vue-Flowchart 可能更适合你的需求。它具有更多的功能和配置选项,适用于需要更复杂流程图应用的场景。
|刘雨洁、王与桐
编辑 |石亚琼
封面来源|IC photo
眼下,Webflow已经成为全球无代码搭建平台心中的“耶路撒冷”。
Webflow是一家专注于为设计师和开发人员提供无代码建站和设计工具的美国软件公司。自成立以来,Webflow一直致力于帮助用户通过可视化界面快速创建专业网站,同时提供一系列强大的设计功能,如自定义布局、动画效果、图像处理等。
尽管成立于2012年,到今年也是“十年老店”了,但Webflow真正被大家认可价值,时间却并不长。此前,Webflow一直以“筚路蓝缕”的状态创业,创始人Vlad Magdalin曾公开表示“我承担的最大风险是负债累累”;甚至在2014~2016年移动互联网繁荣期,还要不断接受着来自资方的嘲讽。
这样不被认可的状态持续很久。直到去年,Webflow拿到了1.4亿美元B轮融资,估值达到了21亿美元,终于跻身独角兽阵营。在今年,Webflow的价值进一步受到资本市场认可,3月,Webflow完成1.2亿美元的C轮融资;11月,Webflow Conference大会举办,并上线更多功能,不少业内人士预测,在下一轮融资时,Webflow将跻身百亿美金估值阵营。
近3年,Webflow的ARR增长十倍以上,同时拥有了来自190+国家数百万的用户和超过20万的付费客户,业内对Webflow的共同认知是,2022年,ARR将达到2亿美金。
估值和ARR只能代表一部分商业价值,而Webflow早已在用户价值层面得到了更多证明——在美国,会Webflow已经像会C++、Java一样,值得被写进简历里;早前已经出现了Webflow的Chrome插件……
总之,Webflow代表着是新一代的无代码应用——如果说Airtable这类无代码产品,更多是起到降本增效的效果,那么Webflow想要实现的,就是切实改变生产方式。
在我们分析Webflow是如何找对路径成长成明星公司之前,先要回答,Webflow到底是做什么的?
简单来说,就是想要搭建网站的人,通过Webflow,能够在不编写一行代码的前提下,实现最接近“用代码写出来的”网站设计效果:本质是只需要拖拉拽就可以搭建出一个可交互的网站,而Webflow更大的优势在于支持一键导出代码。也就是说,不但是没有编程能力的人可以把做网站变得像做PPT一样简单,有前端开发能力的人也完全可以把它作为一个专业化的平台来使用,从而减少复杂的代码工作。
没有编程能力就能搭建网页,听起来就像不用走路就能移动一样。
毕竟,在以往,一个网页的诞生,要经过设计师和前端工程师两个角色的共同打磨。就像一台手术一样,医生和护士的配合不可或缺。但在上一代网页开发主流环境中,开发的角色更像是医生,一个不懂前端开发的设计师设计水平再高也不可能造出一个网站,但一个不懂设计的前端开发却拥有独立上线网站的能力,即使代价是:它可能会很丑。
一切的话语权,来源于数字化的发生基于非可视化的编码过程。但无代码的出现,使得专业角色的价值流动,随着网页开发的真正需求发生改变。
设计师,通过无代码,也可以搭建出网页。这就涉及到Webflow的亮点之一——留给设计师的审美空间。
在对Webflow进行相关采访前,36氪预设了很多关于“Webflow究竟好在哪里”的回答,但最终在采访时,大家首先会提到的并非是实用性、成本效益或效率方面,而是“Webflow更接近真正的前端开发,定制化空间非常大”。
定制化之于设计师来说,就像耦合性之于开发人员一样,对“创造”这一维度的衡量尤为看重。就像我们在玩《我的世界》、《动森》等游戏时,最能延展乐趣和驱动我们长时间游玩的也是其家居建筑的高度可定制性。如果仅仅追逐效率和零门槛的“傻瓜式操作”,产品专业性上限就会变得很低,其“平民化”的代价有可能是得不偿失的。
毫无疑问,Webflow在成立之初,相比同类可视化网页编辑器,也曾受到过“不够平民化”的质疑。由于学习门槛更高,也没有像竞品一样内置大量的模版和预置好的样式,Webflow从一开始就将用户画像缩小到了平面/UI设计师人群。而这一群体的工作,原本就不是在单一追求降本增效,而是创造审美价值,引领设计趋势。
但几年过后,Webflow的成功已经足以为我们证明,无论其他产品做得多么低门槛,甚至能让市场营销人员在3分钟内做出一个可以上线的页面,但在大多数工作和独立项目中,网页设计仍然是一项需要符合设计标准和趋势的创造性工作,每一个组件和配色都对应着品牌标准和设计文档中的信息。因此,事实上,对于新一代无码化网页设计工具来说,也只有设计师群体的口碑传播,对于产品的价值增长,才能够是指数级的。
总体来说,这是一个自上而下,从专业人群向大众过渡的PLG(产品为导向增长)领域,只有吸引了活跃的设计师,让他们自发地沉淀出自己的设计资产,并建立社群,才能够让更多人享有低成本、高效率的审美效果。
Webflow页面
Webflow的Made In Webflow社区,在这里,你可以一键克隆其他设计师在Webflow上制作的网站或UI标准,并将其修改成自己的作品。
基于此,甚至对于很多初涉前端开发领域的UI/平面设计师来说,Webflow完全可以成为他们的启蒙老师。
想要简化网页开发流程,让更多有idea而没有开发能力的人设计出网页,Webflow并不是第一个,甚至此前,已经有不少人努力过了。自从“企业官网”的必要性深入人心,国人对大量分散的建站服务早已不陌生,而在这一代集成了电商、CMS功能的建站服务中,除了比Webflow显露锋芒更早的Spacesquare、Wix等,阿里云等云厂商也有配套云主机出售的网站编辑器。
而在海外市场,截至目前为止,针对各类用户群体的无码化建站仍然是最热的创业赛道之一。一边是Canva等受众更广的创意效率厂商正在大力布局,另一边,国外最大的产品发现社区ProductHunt上几乎每隔几天就会诞生一个新的建站产品。而即便如此,目前大多数企业建站仍然会选择传统的前端开发方式:交给内部开发人员或者服务商去编码。
企业的决策动线不难理解。首先,网站开发是一项结果导向性的业务,开发的过程究竟是可视化还是代码化,对于企业来说没有太大区别。而且,企业管理者很少能全面了解网站开发的细节,如果设计师拍着胸脯表示“我们公司只需要购买一套建站服务,就可以节省掉前端人员的成本”,那也就意味着设计师自身在应对企业建站需求时需要承担的责任更重。而在目前的建站环境下,除了原生的前端开发之外,目前的无码化工具,即使是最专业的Webflow,也很难做到完全解决某些“突如其来”的需求。
因此,相比产品发展到中后期才有可能实现爆发的企业服务,无码化网页设计工具前期所拓展的用户势必是大量的C端freelancer和设计师的独立项目(如个人官网、作品集等)。在这一方面,Webflow想得很清楚,如果从一开始就做成了企业服务风格的建站工具,Webflow也许会成为下一个以定制化服务为主的公司,像诸多建站服务商一样,围绕着如电商卖家等一类固定类型的企业客户,构建一体化平台。
那么我们的科技世界就会少了一个让无数设计师迸发出创造激情、专注于视觉本身的工具,又或者,最先跑通无码化PLG的全球独角兽就会花落别家。
从网站开发的进程来看,开发本身就一直在演进、发展,向着编写更少的代码进化,从最基本的纯手工html编写,到出现了React、VUE等灵活高效的JS框架,再到各个企业的设计团队纷纷做出了适配这两种主流框架的“开箱即用”的设计系统。如今,前端开发人员只需要输入两句命令行就能在本地生成一个简洁的Web App(即一个可以搭配域名部署的网站),甚至可以直接请教AI如何编写一些需求。
以流行的React设计框架Next.js为例,从上手到生成一个空白的Web App只需要一步。
就像是做饭不再需要从执行纸质菜谱开始,而是可以直接选购份量科学的调料包,放入料理机。更少的操作布局意味着更少的代码,即前端开发本身就已经符合“低代码”的趋势:最早机器语言01,到汇编,再从汇编再到C再到C+再到Java再到Python,越来越简单,代码越来越少。
在这一趋势下,近年来无代码/低代码开发的平台和工具也越来越多,比如retool、universe等。
低代码/无代码产业图谱
而前端网页设计,涉及到上文提到的非常重要的定制化和审美因素,因此还有另一条平行演进的路线:可视化。
本地前端开发固然已经越来越便捷,也有大量的设计系统和实例可以直接使用,但可视化程度还是不够高,尤其是在Web开发两大痛点:模块嵌套、独立于html之外的CSS样式文件部署之下,由于缺乏实时的可视化反馈,开发人员经常会写着写着就陷入“我现在是在写什么”的状态,从而需要刷新一下本地域名来重新确认。
谈及Web开发可视化,上一代风靡全球的网页设计软件是WordPress,是世界上使用最广泛的博客系统之一,是一款开源的PHP软件。最初的版本上线于2003年,是为了顺应博客时代每个人都想搭建自己博客的需求而诞生的。WordPress 因为使用者众多,所以社区非常活跃,有丰富的插件模板资源。
从2010年左右开始,WordPress就不仅仅用于博客开发了,作为一款CMS,很多非博客网站也是用WordPress搭建的。目前,使用WordPress平台的发行商约占全球网站的10%。而WordPress官方网站的每月独立访问用户数则达到3亿。
来源网络
但是WordPress以博客建站为主,设计师可定制程度低,没有统一的CMS接入方式,且前端页面响应模式落后(与新一代建站工具最大的用户体验区别就是WordPress的页面跳转响应时间过长,且跳转方式生硬)、不支持组件动态效果(而这一点恰恰是目前最流行的设计趋势之一),因此尽管拥有最强大的插件市场,还是逐渐在被“Web App+动效静态html”为代表的时代所淘汰。
后来,又出现了颠覆WordPress的产品,Wix与Squarespace,后二者主要解决电商时代独立站页面的搭建需求。
Wix页面
尽管Wix与Squarespace这一类独立站页面搭建平台也可以帮助大家可视化搭建页面,但是他们只是在可视化单点上进行突破,且在电商系统上做得比Webflow更加强大、容易上手,其核心受众明显已经变成了电商卖家或市场营销人员,不能称之为是“为设计而生”的无码化工具。未来,他们的主要对手或许会是Canva等更广泛的创意服务商。
总体说来,Webflow的意义在于,它将代码和可视化两条进化交叉,作为接点,他是以往任何工具或平台的降维打击。
比如,Webflow的某一个付费功能点就是,搭建好的网页,可以再以代码形式进行导出,交给开发去完成、修正。从这个角度来看,Webflow就是一个以视觉形式帮助提升开发效率的开发工具,而其他建站工具只能支撑视觉效果,而单纯的开发流程又要重复以往开发-设计的繁琐循环。
不仅如此,Webflow的优势还有很多,比如其云建站服务更为便捷,采用全托管的方式,作为对比,传统html、JS、WordPress的开发者往往搭载于自购服务器与域名,需要具有一定的技术知识,且在一次新的deploy(部署)之后才能使用户看到的页面发生改变,对专注于视觉细节的设计师来说,操作流程极其冗杂。
另一个优势也体现了Webflow的产品细节能力,同样都是拖拉拽、所见即所得的页面搭建方式,其他建站工具趋近于“做PPT”的体验,Webflow却包含完整的前端设计思维、能够使页面完全实现前端化,并在付费版本中支持html、CSS等代码文件的导出。
Webflow编辑器
Webflow编辑器:可以看到右侧可自定义的属性元素与前端构建原理基本一致,并且有针对全局的CSS设置,下方状态栏对应的是前端开发中最重要的模块嵌套理念(可以理解成文件夹,在html代码中每个闭合的就是一层嵌套)。
Wix编辑器
Wix编辑器:相对来说更适合没有前端经验的设计师/市场运营人员,把很多前端组件进行了不同样式与风格的标准化,可以一键添加。
Squarespace编辑器
Squarespace编辑器:自定义方式更加简单直观,适合制作设计师/摄影师的portfolio个人官网,因此理念是以大量的页面留白凸显作品本身为主,页面设计表现为辅。
WordPress下最流行的页面设计插件Elementor的编辑器
WordPress下最流行的页面设计插件Elementor的编辑器:与Wix类似,可以自由添加组件,基本可以实现想要的静态视觉效果,但还是以接近PPT的方式设计与呈现,不包含CSS与前端思维,也不太支持前端动效。
总结而言,Webflow优势可以概括为:
可视化界面:Webflow使用可视化界面,让用户通过拖放功能快速创建网站,而无需写代码。这对于那些不会编写代码的人来说,是一个巨大的优势。
强大的设计功能:Webflow提供了一系列强大的设计功能,如自定义布局、动画效果、图像处理等,让用户能够创建专业网站。
全面的教程和帮助资源:Webflow提供了丰富的教程和帮助资源,帮助用户更好地了解如何使用该平台。
先进的功能:Webflow不断更新和改进其功能,以满足用户的不断变化的需求。
广泛的社区支持:Webflow有一个活跃的社区,可以为用户提供帮助和支持。
相比于其他开发手段和网页搭建工具,Webflow是属于下一个时代的降维打击产品。这或许也是市场和资本愿意买单的重要原因。
事实上,想要实现Webflow的这些降维打击的功能点,说容易也容易,说难也难。
难是因为,在十年创业过程中,有无数次的压力,迫使创始团队不要做下去。
最初,难点来自于,Vlad Magdalin多年来一直想做一个类似Webflow的产品,所以当真的开始时,他处在用爱发电的阶段——创业刚开始时,他甚至背负了三万美元的信用卡债务。最初,Vlad Magdalin仍在intuit工作,用兼职时间完成Webflow的开发。2012年夏天,Vlad Magdalin拿着一万美元离开了原来的公司,开始全职创业。也在这时,他说服了好兄弟Sergie的加入,而为了节省开支,Sergie搬进了Vlad Magdalin和妻子的公寓。
Webflow今年的资方YC,也曾在2012年让Webflow倍感压力。在2012年Webflow刚成立没多久,就申请了YC当时的冬令营,但最终没有通过。紧接着2013年又申请了YC的夏令营,当时他们做出了产品的第一版原型,并且在Hacker News上做了发布,有了几万用户申请加入Beta测试版的等候名单。
而YC的担心是,Webflow最终会因为产品对于非技术人员来说上手难度太高,对于技术人员来说又没有太多价值,从而陷入一个进退两难的尴尬境地,而导致失败。不过好在,Webflow最终还是成功拿到了YC的夏令营Offer,成为了YC S13的一员。
但是这个担心的确是必要的,因为不止Webflow,需要无代码开发工具都面临着这个问题。
其实在后来公司发展过程中,Webflow找了很多方式解决这个问题,比如录制了非常多的培训视频,搭建了自己的社区供大家交流,不断写博客在帮助设计师上手的同时提高曝光量。
来源CEO的推特
而在2014~2018年,Webflow没有拿到来自投资机构的钱。
据国内某创业者描述,在当时,Webflow创始团队在见投资人前都要做好被骂“脑子有问题”的心理建设,因为时值移动互联网的蓬勃发展期,所有创业团队和风投机构都一股脑在押注APP,而Webflow还在卯着劲做网页开发,并且对其未来坚信不疑——这当然会让投资人产生怀疑。
而Webflow团队之所以坚持相信网站设计的“未来价值”,主要原因可以分为三点。
其一,Webflow自身的定位是给企业或者个人提供“展示型”网站,这一类网站的价值停留在信息输出和视觉交互,而不会成为一个像微信一样的功能型App。
其二,硅谷投资人昔日对于App“全面代替网站”的过高期望,是基于对当下技术与移动设备生态机制的不确定预估。目前来讲,虽然也已经有一些支持一键多设备尺寸配置的App开发服务初露锋芒,但App开发整体来说成本较高,设备兼容测试与商店审核都需要时间,且除了娱乐、社交等功能性领域及体量较大的信息载体(如36氪App)之外,大多数的展示型网站,比如企业官网等,完全没有被做成App的价值。此外,尽管大多数的生产力工具和效率软件都在实现“云化”,但以网页形式呈现的Web App,比移动端App更加便于实现敏捷开发。同时,电脑比手机更适合专业、复杂的生产工作,目前为止还是人类数字进程中不可撼动的事实。
最后,用户的需求也在近些年发生变化,对于App的需求不再旺盛。在移动互联网蓬勃期,随着智能手机和4G的普及,用户对于在手机上完成各种功能抱有极高的热情,然而随着热情冷却,以及用户对于“雁过无痕”的个人信息保护意识的加强,越来越多的App不再具备吸引力。这从近些年App拉新成本越来越高就可见一斑。当用户对于App的新鲜感冷却,手机屏幕尺寸限制在某些需求和功能上的掣肘就暴露了出来。其中,作为视觉艺术的一环,专业的网页设计所体现的审美趋势就很难在手机上完整表达:在很多网站进行响应式设计(针对移动端做尺寸适配)时,会选择将复杂的模块和动画效果隐藏掉。
综上所述,当移动互联网的浪潮缓慢退去,网页开发却再度成为主流——没有任何一家企业不想有自己的官网,也没有一个设计师不想通过独树一帜的风格传达创造的价值,而不必囿于iOS等系统生态对于App界面的单一化风格限制。
Webflow的价值也在App热潮冷却的过程中逐渐体现。
因为融资不利,Webflow只能不停寻找商业化方法。在2013年,Webflow加入YC时,就已经有了2万个初始注册——但,其中只有大约50名付费会员。“当时的转化率非常令人失望。”Vlad Magdalin表示。
Webflow下定决心要让付费用户满意。所以第一件事,就是建立了上文提到的社区,三位创始人在早期每天都要花几个小时回答问题、支持请求。
在付费客户满意后,下一步是如何获得更多付费客户。Webflow把目光投向了SEO。Webflow在内容方面主要会有5种类型,分别是University(教程)、Blog(博客)、Customers(客户故事)、Ebooks(电子书)和Community(社区),而其中Blog的文章,在SEO优化上很关键的部分在于聚焦在长尾(long-tail)关键词,这也意味着更小的竞争压力和更精准的目标客群。
“人人都是产品经理”曾提到,以《8 best cheap domain registrars compared and reviewed( https://webflow.com/blog/cheap-domains 》这篇文章为例,根据Fundation的数据表明,每个月有1600多人会在Google搜索“cheapest domain registrations”这个关键词,而这些人的目的很明确的,就是想要购买便宜的域名,而购买了域名之后,很自然,下一步就是搭建网站了,那或许对于Webflow就会有需求。
因此Webflow很好地利用了这篇文章吸引到了这批精准的用户,并通过在文章中插入CTA(Call-To-Action)模块的方式,引导用户注册转化。
结果还不错,从数据上看Webflow通过SEO每月可以吸引接近100万的流量并产生130万美元的有机收入。
图源网络
Webflow在3年内,通过社区和SEO,没有花一分钱在营销上,就获取了100万用户、营收突破一千四百万。
通过社区可以源源不断用UGC的方式产出内容,而这些内容又给SEO提供了源源不断的素材和动力,从而形成了自增长的飞轮。
图源网络
这样的数据,足以让投资人动心。在被用户市场认可后,Webflow也再度被一级市场所认可。
不过,尽管此刻风头无两,Webflow也还存在着一些问题。比如,目前来看,Webflow面临着和WordPress类似的问题,受众很窄,如果不继续改进,就会导致增长瓶颈明显。
首先,挑战传统和权威,道阻且长。目前,除了设计师的portfolio以及一些产品的landing page之外,主流前端开发由于需要结合大量的函数变量和数据库功能,仍然是以React、VUE为代表的Javascript为主,开发流程为:UI设计师通过Figma、MasterGo、即时设计等原型设计工具画页面,通过插件标注或直接导出html和CSS代码给前端工程师,前端工程师写JS完成可视化效果,并接入后端数据库,在此过程中为市场运营人员留出信息上传的。在此过程中,自购云服务器部署+自购域名仍然是主流选择。
尤其是在“权威”也在不断优化自身的情况下。如前文所述,Web开发本身就在变得越来越简单,且UI设计师的“职业自救”意识很强,不断扩充技能,都在向具有一定代码能力的前端开发转型。相比Web开发的开源环境,Webflow在定价劣势的情况下,未来的用户定位可能会被进一步缩小,从网页设计师变为“对前端开发不熟练的初级网页设计师”,届时局面将陷入被动。
当前,国内也存在几家对标Webflow的公司,比如Zion、towify、Dora等。这几家公司成立时间相差不大,目前也有各自擅长的领域。相比Webflow的大器晚成,也许他们的入局时机更为稳妥。
整体来看,中国无代码网页开发,和美国市场有一个较大的差别,就是中国的小程序开发正如火如荼。从今年腾讯第三季度数据来看,微信端小程序超过700万,小程序日活达到了6亿,因此,围绕小程序的无代码开发,是国内相关厂商努力的重点方向。
不过,对这些国内公司来说,尽管有着确定的方向,但是前进过程,不仅会面临这Webflow面临过和面临中的困难,还要面对中国本土市场对于无代码搭建热情不高的大背景。
无论如何,我们可以确定的是,未来,越来越多的前端工程师,会被设计师或者有只是有网页开发idea的人取代。在任何国家,都会如此。
程序员大前端送干货Web前端开发框架汇总,其实一个前端开发框架其实就是一系列产品化的HTML/CSS/JavaScript组件的集合,我们可以在设计中使用它们。前端开发框架有很多,其中有一些写得很棒。为了让大家看的更明白,下文列举了目前应用最广泛的几款前端开发框架。记住,这些框架并不仅仅是CSS 栅格之类的一些东西,它们包括的是整套的前端开发框架。
一、Bootstrap
Boostrap绝对是目前最流行用得最广泛的一款框架。它是一套优美,直观并且给力的Web设计工具包,可以用来开发跨浏览器兼容并且美观大气的页面。它提供了很多流行的样式简洁的UI组件,栅格系统以及一些常用的JavaScript插件。
Bootstrap是用动态语言LESS写的,主要包括四部分的内容:
脚手架——全局样式,响应式的12列栅格布局系统。记住Bootstrap在默认情况下并不包括响应式布局的功能。因此,如果你的设计需要实现响应式布局,那么你需要手动开启这项功能。
基础CSS——包括基础的HTML页面要素,比如表格(table),表单(form),按钮(button),以及图片(image),基础CSS为这些要素提供了优雅,一致的多种样式。
组件——收集了大量可以重用的组件,如下拉菜单(dropdowns),按钮组(button groups),导航面板(navigation control)——包括:tabs,pills,lists标签,面包屑导航(breadcrumbs)以及页码(pagination),缩略图(thumbnails),进度条(progress bars),媒体对象(media objects)等等。
JavaScript——包括一系列jQuery的插件,这些插件可以实现组件的动态页面效果。插件主要包括模态窗口(modals),提示效果(tool tips),“泡芙”效果(popovers),滚动监控(scrollspy),旋转木马(carousel),输入提示(typeahead),等等。
Bootstrap已经足够强大,能够实现各种形式的 Web 界面。为了更加方便地利用Bootstrap进行开发,很多工具和资源可以用来配合使用,下面列举了其中的一部分工具和资源。
jQuery UI Bootstrap —— 对于jQuery和Bootstrap爱好者来说这是个非常好的资源,能够把 Bootstrap的清爽界面组件引入到jQuery UI中。
jQuery Mobile Bootstrap Theme —— 和上面提到的jQuery UI主题类似,这是一个为jQuery Mobile建立的主题。如果你想让用Bootstrap开发的网站在手机端也可以优雅访问,那么这个资源对你来说很方便易用。
Fuel UX —— 它为Bootstrap添加了一些轻量的JavaScript控件。Fuel UI 安装,修改,更新以及优化都很简单方便。
StyleBootstrap.info —— Bootstrap提供了自己的几种界面风格,StyleBootstrap提供了更多的配色选项,并且你可以给每个组件都应用不同的配色。
BootSwatchr —— 利用这个工具你可以立刻查看主题修改后的效果。对于每一次变动的效果,这个应用都会生成一个唯一的URL方便你与他人分享,你也可以在任意时刻修改你的主题。
Bootswatch —— 提供大量免费的Bootstrap主题。
Bootsnipp —— 在线前端框架交互组件制作工具,是一个供给设计师和开发者的基于Bootstrap HTML/CSS/JavaScript 架构的免费元素。
LayoutIt —— 通过界面拖放生成器简便快捷地创建基于Bootstrap的前端代码。通过拖放动作将Bootstrap风格的组件加入到你的个人设计里并且可以方便地修改他们的属性,简单便捷。
二、Fbootstrapp
Fbootstrapp基于Bootstrap并且提供了跟Facebook iframe apps和设计相同的功能。包含用于所有标准组件的基本的CSS和HTML,包括排版、表单、按钮、表格、栅格、导航等等,风格与Facebook类似。
三、BootMetro
BootMetro框架的灵感来自于Metro UI CSS,基于Bootstrap 框架构建,用于创建Windows 8 的Metro风格的网站。它包括所有Bootstrap的功能,并添加了几个额外的功能,比如页面平铺,应用程序栏等等。
四、Kickstrap
Kickstrap是Bootstrap的一个变体。它基于Bootstrap,并在它的基础上添加了许多app,主题以及附加功能。这使得这个框架可以单独地用于构建网站,而不需要额外安装什么。你需要做的仅仅是把它放到你的网站上,然后用就可以了。
App 是一些页面加载完成之后加载运行的JavaScript和CSS打包文件。默认加载的app有Knockout.js, Retina.js, Firebug Lite, and Updater,你也可以自行添加更多的app。
选择不同的主题可以让你的网站在众多Bootstrap构建的类似网站中显得与众不同。
附加功能是一些用来扩展Bootstrap UI 库的附件,它们的语法基本相同或者相似。
五、Foundation
Foundation 是一款强大的,功能丰富的并且支持响应式布局的前端开发框架,你可以通过Foundation快速创建原型,利用它所包含的大量布局框架,元素以及最优范例快速创建在各种设备上可以正常运行的网站以及app。Foundation在构建的时候秉承移动优先的策略,它拥有大量实用的语义化功能,并且使用Zepto类库来取代jQuery,这样可以带来更好的用户体验,并且提高运行的速度。
Foundation拥有一套12列的灵活可嵌套的网格系统,你可以用它快速创建适应多种浏览设备的布局。它有很多的功能。它定义了很多的样式,比如字体排版,按钮,表单,以及多种多样的导航控件。它也提供了很多的CSS组件,例如操作面板(panels),价格表(price tables),进度条(progress bars),表格(tables)以及可以适应不同设备的可伸缩视频(flex video)。与此同时,Foundation还包括了很多的JavaScript插件,如下拉菜单(dropdowns),joyride(网站功能引导插件),magellan(网站固定导航插件),orbit(支持触摸的响应式图片轮播插件),reveal(弹出框插件),sections(强大的tab插件)以及tooltips(工具提示)等。
Foundation框架还提供了很多有用的扩展。
模板(Stencils)——Foundation框架中的所有UI元素都有Omnigraffle stencils以及矢量PDF两种格式的下载,你可以用它们来方便快捷的绘制线框图和原型图。
HTML模板 —— HTML模板可以方便地用来快速创建页面布局。你所要做的仅仅是复制得到模板代码,然后丢到页面的标签之间就好了。
图标字体(Icon Fonts) —— 包含自定义图标的一种网页字体。
SVG 社交网络图标(Social Icons)—— 一组不依赖分辨率的社交网络图标(可缩放矢量图标)。
响应式表格——Foundation框架中响应式表格的实现机制是固定表格的左边第一列,然后表格的其他列可以通过滚动条拖拉进行访问。
关闭帆布布局(Off-Canvas Layouts)—— 这些布局可以允许一些网页内容或者导航控件在移动端设备上默认隐藏,当浏览屏幕变大或者用户进行相应操作的时候这些内容再出现。当用户进行相关操作的时候,网页内容或者导航控件将会滑动出现。
如你所见,对于Web开发者以及设计师来说,Foundation就像是一个巨大的宝藏。在下载框架的时候,你可以自定义下载框架的内容。
六、GroundworkCSS
GroundworkCSS 是前端框架家族里面新添的一款小清新框架。它是基于Sass和Compass的一个高级响应式的HTML5,CSS以及JavaScript工具包,可以用于快速创建原型并且建立在各种浏览设备上可以正常工作的网站和app。
GroundworkCSS拥有一个灵活,可嵌套的流式网格系统,方便你创建任何布局。这个框架有很多让人印象深刻的功能,比如在平板以及移动端上的网格系统,当屏幕的宽度小于768或者480像素时,页面中原本并列排版的表格列(grid column)会自动变为独立的行,而不是折叠在一起。另一个很酷的功能是jQuery的响应式文本(ResponsiveText)插件,这个插件可以动态调整页面文字的大小以适应浏览设备的屏幕大小。这个插件对于可伸缩的标题以及创建响应式表格的时候特别有用。
GroundworkCSS包含了大量的UI组件,如tabs、响应式数据表格导航、按钮、表单、响应式导航控件、tiles(一套替代radio按钮以及其他默认表单元素的优雅组件)、工具提示、对话框、Cycle2(一款强大的,响应式的内容滑块)以及其他很多的有用组件。它还提供了很多矢量社交网络图标以及图标字体。
你可以通过切换页面上方的导航按钮选择不同的浏览设备要来查看这款框架的效果。通过这种方式,你可以测试在不同的浏览设备上各种组件的响应式布局情况。
GroundworkCSS的文档写的非常好,并且包含着很多的示例,为了让你更快的上手,他还提供了多种响应式的模板。对于这款框架,唯一我可以想到的缺点就是不能自定义要下载的框架内容。
七、Gumby
Gumby 是一款基于Sass和Compass的简单灵活并且稳定的前端开发框架。
它的流式-固定布局(fluid-fixed layout)可以根据桌面端以及移动设备的分辨率自动优化要呈现的网页内容。它支持多种网格布局,包括多列混杂的嵌套模式。Gumby提供两套PSD的模板,方便你在12列和16列的网格系统上进行设计。
Gumby提供了一个功能丰富的UI工具包,包括按钮,表单,移动端导航,tabs,跳转链接(skip links),拨动开关(toggles and switches,可以方便快捷地切换元素的class,而不需要进行额外的js操作),抽屉功能(drawers),响应式图片以及retina图片等等。为了紧跟最近的设计潮流,Gumby的UI元素中还包括了Metro风格的扁平化设计,你也可以用Pretty风格的渐变设计,或者按照你的想法糅合两种设计风格。该框架还提供了一套出众的响应式,拥有独立分辨率的Entypo图标,你可以在自己的Web项目中尽情使用。
Gumby有一个很好自定义下载选择器,你可以自行配置各个组件的颜色,并且按自己的需求方便地下载。
八、HTML KickStart
HTML Kickstart 是一款可以用来方便创建任何布局的集合HTML5,CSS和jQuery的工具包。它提供了干净,符合标准以及跨浏览器兼容的代码。
这款框架提供了多种样式表,包括网格,排版,表单,按钮,表格,列表以及一些跨浏览器兼容的Web组件比如JavaScript的幻灯片功能,tabs,面包屑导航,包含子菜单的菜单以及工具提示等等。
你可以使用99Lime UIKIT提供的UI组件来搭建你的产品线框图。
九、IVORY
IVORY 是一款轻量,简单但是强大的前端框架,可以用于320到1200像素宽度的响应式布局。它基于12列的响应式网格布局,包含表格,按钮,表格,分页,拨动开关,工具提示,手风琴,选项卡等网站中常用的组件和样式。
当你需要一款轻量灵活,不需要额外的其他功能,并且适应不同浏览设备的框架时,IVORY是你最好的选择。
十、Kube
最后,如果你的新项目需要一款实在的,不需要复杂的额外功能组件的,足够简单的框架,那么 Kube 将会是你正确的选择。Kube是一款最小化的,支持响应式的前端框架,它没有强加的样式设计,因此给了你充分的自由来开发自己的样式表。它提供了一些Web元素的基本样式,比如网格,表单,排版,表格,按钮,导航,链接以及图片等等。
Kube框架包括一个简洁的CSS文件用于方便地创建响应式布局,还包括了两个JS文件来完成tab以及页面的按钮操作。如果你希望得到Kube最大化的灵活性以及个性化定制,那么你可以下载开发者版本(developer version),这个版本包括了LESS文件(包括各种变量,mixins以及模块)。
希望本篇文章能够对正在从事Web前端工作的小伙伴们有所帮助。
*请认真填写需求信息,我们会在24小时内与您取得联系。