Foundation框架
Foundation是一个响应式前端框架系列,可以轻松设计漂亮的响应式网站,应用程序和电子邮件,在任何设备上看起来都很棒。Foundation是语义,可读,灵活且完全可定制的。我们不断添加新的资源和代码片段,包括这些方便的HTML模板,以帮助您入门!
特点:世界上最先进的响应式前端框架。快速为适用于任何类型设备的站点创建原型和生产代码。
总结:Foundation 算是框架界的元老啦,都说框架去的早,而这个框架一直到现在依然这么的热门,如果你比较介意 Bootstrap 开发撞脸的尴尬事情,那么你可以考虑使用 Foundation 。即使你使用预定义的 UI 元素, 也不会与其他网站太像,就像官方说的给开发者更灵活的框架体验。
Bootstrap框架
Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架,使得 Web 开发更加快捷。 Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎,一直是GitHub上的热门开源项目,包括NASA的MSNBC(微软全国广播公司)的Breaking News都使用了该项目。 国内一些移动开发者较为熟悉的框架,如WeX5前端开源框架等,也是基于Bootstrap源码进行性能优化而来。
包含内容:
基本结构:Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。
CSS:Bootstrap 自带以下特性:全局的 CSS设置、定义基本的 HTML 元素样式、可扩展的 class,以及一个先进的网格系统。
组件:Bootstrap 包含了十几个可重用的组件,用于创建图像、下拉菜单、导航、警告框、弹出框等等。
JavaScript 插件:Bootstrap包含了十几个自定义的jQuery 插件。您可以直接包含所有的插件,也可以逐个包含这些插件。
定制:您可以定制Bootstrap的组件、LESS 变量和jQuery 插件来得到您自己的版本。
总结:Bootstrap 最大的优势就是它非常流行,流行就代表你有问题就有很多人帮你解决问题,就代表装逼它就是利器,还有就是界面比较和谐,容易上手,关注它的小伙伴应该发现最新 V4 版也开始支持 FlexBox 布局,这是非常好的升级体验。 劣势是 class 命名不够语义化,并且各种缩写,以至于我离了文档就是个菜,最近开始整混合 APP,选框架的时候首选就是它,但之前搞 PC 一直没注意,后来搞混合右键属性看它的时候,瞬间一阵凉风袭来,Bootstrap 好小,小到我只好选择别的框架。
AUI框架
AUI为一款轻量级前端UI框架,更偏重于CSS布局及样式的构造,通俗易懂的写法及模块式的拼装方便用户自由扩展。轻小的体积、灵活的扩展性,大大提高移动端项目的体验度和开发效率。
在目前市场上的UI框架中,大多数的框架以JS来实现过多的功能和布局。当然并不是否定JS在一个移动前端框架中的作用性,既然是前端框架侧重点要更多的考虑框架本身在一个项目中的资源消耗问题及如何提高用户的体验度。鉴于APICloud多窗口结构及原生模块的拼装,所以在移动端项目中AUI强调更多的是快速布局、灵活布局的实现,结合APICloud本身特性,提高开发效率及用户体验。
最近刚起来的AUI,虽然作者声称是专为APICloud开发者设计的一套UI框架,但实际它还是解决了很多移动前端开发的普遍问题,是主要面向混合开发的 CSS 框架。看起来作者比较猖狂,各种高级 CSS3 遍地使用,这让我也不得不去查查这些个 CSS3 的兼容性。不负众望果然选的都是兼容不错的属性,哈哈了一顿激动从前辈手上大胆认识了几个好东西,并且框架还提供了聊天界面、计数列表等组件,解决了很多复杂的让我骂娘的布局,现在可以直接拿走就用。
总结:这个框架对我来说有个优点就是纯 CSS 框架,自己以前也就用过 Pure,自己有点 JS 能力,如果不是复杂的效果,找个纯 CSS 框架自己随便改改就可以,而现在 CSS3 也已经能够做到动画,效率、质量、高效全兼顾,所以还是选择了这种 CSS 框架。有一点觉得不满的是这框架的文档真的好那什么,说好的高大上呢。
Amaze UI 框架
第二个介绍的是AmazeUI,据官方说是咱们中国首个HTML5跨屏前端框架。
最初使用它是因为本尊遇到了一个爱纠结细节设计,有一次她跟我的字体较上真了,结果一句顶万句的 BOOS 夸了她,我只好根据她的想法去解决,结果最后找到了Amaze UI 框架,按照官方的话说就是 "基于社区开源项目构建的一个跨屏前端框架,以移动优先,从小屏到大屏,最终实现所有屏幕适配,适应移动互联潮流" 。但其实我就是看中它能解决国内浏览器存在的跨屏适配和兼容性问题。
总结:Amaze UI 总的来说就是加入更多符合中国市场特性的元素,框架对跨屏、适配都做了的比较好的处理并且准备一了一系列的常用的网页组件,为减少搞兼容、适配各种敲键盘的加班狗们的工作时间做了不小的贡献。框架还对中文排版优化,兼容中国本土主流浏览器、轻量化,不仅适用于桌面端,还更更适合移动端、包含一些封装好的Widgets。不过自也就我感觉 Amaze UI 文档是否有点太那什么了,比如 “人们不会在乎jQuery的那点流量。”,说实的在这真没啥,不过我从来不会说出来( 哈哈 ),代码和设计上感觉没太多突出的点。
Pure框架
一组小的,响应迅速的CSS模块,您可以在每个Web项目中使用它们。
特点:
CSS占用空间极小。
纯净是微不足道的。整套模块的时钟频率为3.8KB *缩小和压缩。在考虑移动设备的情况下,对我们来说保持文件大小很小很重要,并且仔细考虑了每一行CSS。如果您决定仅使用这些模块的子集,则可以节省更多字节。
你的CSS基础
Pure构建于Normalize.css之上,为原生HTML元素以及最常见的UI组件提供布局和样式。这就是你所需要的,没有任何瑕疵。
以移动为主题
Pure是开箱即用的响应,因此所有屏幕尺寸的元素都很棒。
坚持你的方式
Pure具有最小的样式,并鼓励您在其上编写应用程序样式。它旨在让您不受约束,并轻松覆盖样式。
创建响应式布局
通过使用Grids,Menus等,可以轻松地为所有屏幕尺寸创建漂亮的响应式布局。我们让您轻松上手。看看几个不同的布局,并用坚如磐石的基础开始您的下一个Web项目。
这个框架是我在做管理系统时接触的,选择使用也是因为框架小巧,并且是纯 CSS,没有太多的牵扯,好用来与其他框架快速结合使用。
注公众号 “OpenSourceDaily” ,每天推荐给你优秀开源项目
大多数人想到Web开发时,通常会想到HTML或JavaScript,往往忽略了CSS,根据Wikipedia的说法,CSS既是网页中最重要也是最常被遗忘的部分之一,尽管它是万维网的三大基础技术之一。
今天就和大家分享9个流行的、强大的前端开源框架,帮助你轻松构建漂亮的网站前端。
1、Bootstrap
Bootstrap无疑是最流行的CSS框架,它是最早的Web前端框架,由Twitter开发。Bootstrap还提供了许多示例来帮助你入门。
使用Bootstrap,你可以将不同的组件和布局组合在一起,从而创建有趣的页面设计。它还提供了大量详细的文档。目前在Github上已经有1100多个贡献者,19000多个提交。(Github地址:https://github.com/twbs/bootstrap)
2、PatternFly
PatternFly是Red Hat的开源CSS框架,和Bootstrap不同的是,Bootstrap是为那些想要创建漂亮网站的人而设计的,而PatternFly主要专注于企业应用程序开发人员,提供诸如条形图、图表、导航之类的组件,实际上Red Hat就是使用它创建了OpenShift。
除了静态HTML,PatternFly还支持ReactJS框架,这是Facebook开发的流行JavaScript框架。PatternFly具有许多适用于企业级应用程序的高级组件,如条形图,图表,模式和布局。
PatternFly在GitHub上一共有1,050多个提交和44个贡献者。(Github地址:https://github.com/patternfly/patternfly)
3、Material Components for the web
Material Components for the web(MDC Web),是谷歌专为Web设计的全新前端框架。MDC Web可帮助开发人员执行Material Design,组件由谷歌的核心工程师团队和UX设计人员开发。这些组件可以建立可靠的开发工作流程,以构建美观且功能强大的Web项目。
MDC Web在Github上共有5700多个提交和349个贡献者。(Github地址:https://github.com/material-components/material-components-web)
4、Pure
Bootstrap,Patternfly和MDC Web是功能非常强大的CSS框架,但它们可能非常繁琐和复杂。如果你想要一个轻量级的CSS框架,可以尝试Pure.css,它本身更接近于CSS编程,但又可以帮助你构建一个不错的网页。Pure是具有最小占用空间的轻量级CSS框架,它由Yahoo开发,根据BSD许可是开源的。
Pure在Github上共有565多个提交和59个贡献者。(Github地址:https://github.com/pure-css/pure)
5、Foundation
Foundation声称是世界上最先进的响应式前端框架。它提供了用于构建专业网站的高级功能和教程。许多公司,组织都使用该框架,并且该框架具有大量可用的文档。
Foundation在Github上有将近17000个提交和1000个贡献者。(Github地址:https://github.com/foundation/foundation-sites)
6、Bulma
Bulma是一个基于Flexbox的开源框架,可根据MIT许可证开源。Bulma是一个非常轻量级的框架,因为它只需要一个CSS文件。Bulma拥有简洁明了的文档,可轻松选择你想要的主题。它还具有许多Web组件,你可以在设计中使用它们。
Bulma在Github上有1400多个提交和300个贡献者。(Github地址:https://github.com/jgthms/bulma)
7、Skeleton
如果说还有什么框架比Pure更加轻量级,那一定是Skeleton。Skeleton库只有大约400行,并且该框架仅提供一些基本的CSS框架组件。尽管如此,Skeleton还是提供了详细的文档来帮助你快速上手。
Skeleton在Github上共有167个提交和22个贡献者,但它不是最活跃的项目,它最新一次的更新是在2014年。(Github地址:https://github.com/dhg/Skeleton)
8、Materialize
Materialize 是一个基于 Material Design风格的一个现代化的响应式前端框架,解决了最繁重的工作,结合你的自定义组件,为你提供默认的样式。Materialize的文档页面非常全面,并且很容易遵循。其组件页面包括按钮,卡片,导航等。
Materialize在Github上共有3800多个提交和250个贡献者。(Github地址:https://github.com/Dogfalo/materialize)
9、Bootflat
Bootflat是从Twitter的Bootstrap派生的开源CSS框架。与Bootstrap相比,Bootflat更简单,并且更加轻量级。Bootflat的文档似乎几乎受到了IKEA的启发,大部分都是图像,没有太多的文字。
Bootflat是在MIT许可证下开源的,在Github上有159个提交和8个贡献者。(Github地址:https://github.com/bootflat/bootflat.github.io)
今天的项目大家觉得怎么样吗?如果你喜欢,请在文章底部留言、点赞或关注转发,你的支持就是我持续更新的最大动力!
OpenSourceDaily - 送给爱开源的你
联网的迅速发展,让软件行业成了更多年轻人的就业选择。HTML5简单易学、门槛低,是Web时代前端开发超好用的工具,除此之外,web前端开发人员的就业薪资也远远高于其他行业。
资料显示,初级web前端开发人员的平均薪资在8K-10K左右,拥有一定工作经验的人薪资普遍达到15K-20K。如此广阔的前景当然吸引了无数专业或非专业人士的加入。web前端用途范围广,下面小千就来给大家分享常见的HTML5框架。
web前端开发中常见的HTML5框架有哪些?
Siimpler
Siimpler 是个简单的 HTML 开发框架,他可以通过选择你自己喜欢的部分,来帮助你迅速又简单地创建 HTML5 开发结构。网络设计者们也可以通过使用 Siimpler 框架类的文件和文件夹来无缝的开始一个 Web 项目。
Ionic
Ionic 是个神奇的框架和强大前端开源系统,使用先进的Web技术,比如CSS、HTML 和 JS 来创建令人惊叹的手机应用。
Foundation
Foundation 是世界上精妙的前端响应框架,同时,它可以兼容所有的浏览器和网络设备。Foundation 拥有移动友好型的用户接口,设置了许多关键特性。
Enyo
Enyo是一个开源的 Jaa 框架,该框架能够让你创建顶级的 HTML5 应用程序,该应用程序能够运行在各种各样的电子设备上,比如说手机、台式机、笔记本、电视以及Web应用。
LimeJS
针对于所有的新的桌面浏览器和触屏设备,LimeJS 对于有用户经验的游戏开发者而言是较好的和较强大的开发框架。
Bootstrap
Bootstrap能让所有开发者都能迅速上手、所有设备都可以适配、所有项目都适用。此外,bootstrap的官网也有很多教程提供。
juery UI
juery UI 主要分为交互、微件和效果库3个部分,主打代码开源,操作继承了juery 的简单特性,兼容各主流桌面浏览器。
web前端是当下很多企业都会用到的软件开发,HTML5是移动互联网前端的主流开发语言,目前还没有任何一种前端开发技术能够取代HTML5。因此,无论是PC端还是APP端的应用,前端样式都离不开HTML5。
从手机与电脑上网的使用率来看,从事HTML5或者Web相关的开发工作,就业前景还是比较可观的。而且,现在的网站开发都往移动设备上转移,所以HTML5或者Web前端是众望所归。
这7个框架,你都会用吗?
*请认真填写需求信息,我们会在24小时内与您取得联系。