分享15个最佳的HTML/CSS设计和开发框架

所属分类: 网页制作 / 应用技巧 阅读数: 1261
收藏 0 赞 0 分享

专业的网页设计是既复杂又耗时的。它需要HTML和CSS框架的完美结合。这些框架不仅可以为设计方案增加特定的功能,还可以大大地节省时间和精力。
高效的框架不仅是网站设计的基础,它提供的各种丰富多彩的功能,还提高整体的功能和性能。一个网站的外观和设计完全可以通过一些完美和可靠的工具而彻底改头换面。现在,越来越多的网页设计师和编辑人员选择使用CSS框架来创建网站。
所以,如果你正在寻找一些高效的HTML和CSS框架,那么不妨继续看下去——众里寻他千百度,蓦然回首,那人却在灯火阑珊处。
 
1)CSS框架——Gumby

Gumby是最好的框架之一,配备了各种有用的和有效的功能。它预置的设计和通用的界面元素,有助于我们创建完美的网站。Gumby框架还允许根据要求定制网格。
 
官方网站:http://gumbyframework.com/

 
2)CSS框架——Semantic UI框架

Semantic UI也是一个非常有用的网页设计框架。通过允许用户创建界面共享语言来授权给设计师。各种功能和3D动画也是不可小觑的功能。相比于其他框架,它更容易使用。
 
官方网站:http://semantic-ui.com/

 
3)CSS框架——YAML框架

下面要说的是YAML。这是一个设计灵活,方便和响应网站的理想工具。它提供了一系列有效的功能。同时,它还带有Ajax Builder,可以保证基于YAML的CSS布局的可视化开发。
 
官方网站:http://www.yaml.de/

 
4)CSS框架——blueprint

在网页设计项目中,blueprint框架也是一个不错的助手。它提供了一个坚实的基础,可以用来为你的项目打造漂亮的表单、样式表和易于使用的网格和排版。这是用来打造复杂的网页设计最好的框架之一。
 
官方网站:http://www.blueprintcss.org/

 
5)CSS框架——Toast

Toast是一种可靠的CSS框架,可以使得布局更简单,并允许用户轻松地添加填充物和边框。这是互联网上最好最简单的网页设计框架之一。
 
官方网站:http://daneden.github.io/Toast//

 
6)HTML和CSS框架——Bootstrap

Bootstrap是现在网上最流行的HTML、CSS和JS框架。这工具非常有用,被大量的网页设计师用于为移动和其他设备开发响应式的、功能丰富的网站。
官方网站:http://getbootstrap.com/

 
7)Web框架——Kube

Kube框架也是网页设计过程中的重要组成部分。它是一个自适应和响应式的工具,可用于支持网站设计。它有效的功能和可靠的性能有助于我们快速轻松地创建网站。
官方网站:http://imperavi.com/kube/

 
8)CSS框架——Columnal

columnal框架是一个有效的CSS网格系统,并有少许的自定义代码。这是一个弹性网格,为方便快捷的网页设计提供了特殊功能。因此,如果你想高效的网页设计结果,这个框架是最好最可靠的选择。
 
官方网站:http://www.columnal.com/

 
9)CSS框架——Pure

还有一种高效的网页设计框架是Pure。它拥有一系列小型的,响应式的CSS模块,几乎所有的网页设计项目中都能派上用场。
 
官方网站:http://purecss.io/

 
10)HTML/ CSS框架——Clank

Clank是一款用于手机和平板电脑app的HTML/ CSS框架。它使用Saas作为CSS的预处理器,来达到为移动和平板设备快速开发的目的。
 
官方网站:http://getclank.com/

 
11)HTML5和CSS3——52Frameworks

这也是一款非常棒的HTML5和CSS3框架。一种全新的HTML5验证的表单框架(通过JavaScript)。
官方网站:http://www.52framework.com/

 
12)HTML5框架 – Montagejs

MontageJS是一款前端的HTML5框架,支持快速创建单页应用程序。MontageJS使用的是经过时间考验的设计模式和软件规则,允许用户为自己的项目轻松创建模块化的架构,从而提供高品质的用户体验。
 
官方网站:http://montagestudio.com/montagejs/

 
13)HTML5 Boilerplate

HTML5有助于快速创建稳定和适宜的Web应用程序和网站。
官方网站:http://html5boilerplate.com/

 
14)HTML Kickstart

HTML Kickstart提供了HTML5、CSS和JS模块,用于快速出品网站。
官方网站:http://www.99lime.com/elements/

15)AngularJS

AngularJS是为了克服HTML在构建应用上的不足而设计的。HTML是一门很好的为静态文本展示设计的声明式语言,但要构建WEB应用的话它就显得乏力了。所以我做了一些工作(你也可以觉得是小花招)来让浏览器做我想要的事。

通常,我们是通过以下技术来解决静态网页技术在构建动态应用上的不足:
类库 - 类库是一些函数的集合,它能帮助你写WEB应用。起主导作用的是你的代码,由你来决定何时使用类库。类库有:jQuery等
框架 - 框架是一种特殊的、已经实现了的WEB应用,你只需要对它填充具体的业务逻辑。这里框架是起主导作用的,由它来根据具体的应用逻辑来调用你的代码。框架有:knockout、sproutcore等。
AngularJS使用了不同的方法,它尝试去补足HTML本身在构建应用方面的缺陷。AngularJS通过使用我们称为标识符(directives)的结构,让浏览器能够识别新的语法。例如:
使用双大括号{{}}语法进行数据绑定;
使用DOM控制结构来实现迭代或者隐藏DOM片段;
支持表单和表单的验证;
能将逻辑代码关联到相关的DOM元素上;
能将HTML分组成可重用的组件。

官方网站:https://angularjs.org/

更多精彩内容其他人还在看

32个典型的以分栏/网格为基础的网站

如果你正在寻找网页分栏设计的灵感,这里收集了32个典型的以分栏/网格为基础的网站。它们显示了在网页设计中分栏/网格的重要性,无论对于信息量巨大的站点还是个人博客。 1.The New York Times 2.National Post 3.Guardian 4.Times
收藏 0 赞 0 分享

理论普及——用户体验

一、概念分析1:UE用户体验 英文叫做user experience,缩写为UE, 或者UX。 当指电子商务网站的时候也被称作顾客体验(CUSTOMER EXPERIENCE). 它是指用户访问一个网站或者使用一个产品时的全部体验。他们的印象和感觉,是否成功,是否享
收藏 0 赞 0 分享

分页案例和好的实践

结构和层次降低了复杂性并提高了可读性。你的文章或站点组织的越深入,用户就越容易理解你观点和得到你想传达的信息。在网页上,这点被通过多个方式做到。 在正文头条和列举被用做逻辑上独立的数据块来呈现信息。另一种解决方法是一种叫分页的机制,它在给定文章的单一部
收藏 0 赞 0 分享

建立用户体验

也许你刚刚来到一家公司,他们希望进行一些“可用性”工作。你可能是一名UI设计师,业务分析师,或前端开发人员,一名产品经理,或者负责用户体验部门的经理或副总。你知道,如果更好地了解使用产品/软件/网站的人,就可能开发出更好的产品/软件/网站。不管怎么样
收藏 0 赞 0 分享

网页图片快速显示的方法和技巧

1. Use .gifs rather than .jpgs. GIFs are smaller in size when compared to JPGs. 1.用.gifs格式保存图片,最好不要用.jpgs格式。因为前者的尺寸比后者小。 2.Use 'Height
收藏 0 赞 0 分享

推荐60种分页案例和好的实践

结构和层次降低了复杂性并提高了可读性。你的文章或站点组织的越深入,用户就越容易理解你观点和得到你想传达的信息。在网页上,这点被通过多个方式做到。 在正文头条和列举被用做逻辑上独立的数据块来呈现信息。另一种解决方法是一种叫分页的机制,它在给定文章的单一部
收藏 0 赞 0 分享

全面的网站评估方案

有时会被问到“看看XXX网站如何?”之类的问题。 谈到评估,通常都是指产品级的网站,如果模式很新,了解需要花一定时间。于是,很多人又问“那么你仅从UI/UE的角度看看呢?”首先我们得达成共识,一切花里胡哨都在为功能服务,如果功
收藏 0 赞 0 分享

网页的栅格设计思考

原文地址:http://andymao.com/andy/post/82.html 网页设计中的脏、乱、差,是我们在设计过程中常会遇到的问题。通常"脏"是由对色彩使用不当所产生的,而色彩使用不当产生的不好效果也分为:"花、灰",花哨、
收藏 0 赞 0 分享

设计理论设计中的层次感

原文:http://andymao.com/andy/post/80.html 这段时间我一直在说设计需要有层次感,这种层次感可能有很多类型,比如色彩的层次感,或是元素的层次感。当一个设计缺乏层次感的时候页面所表现出来的无非是两种可能,一种是单调,一种是花哨。在设计中我们常
收藏 0 赞 0 分享

网页心得:网页色彩的搭配

网页的色彩是树立网站形象的关键之一,色彩搭配却是网友们感到头疼的问题。网页的背景,文字,图标,边框,超链接...,应该采用什么样的色彩,应该搭配什么色彩才能最好的表达出预想的内涵呢?这里谈一些心得,希望对你有所启发。 首先我们先来了解一些色彩的基本知识:
收藏 0 赞 0 分享
查看更多