热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

如何使用CSS框架来加快设计过程?

但在本文里,不会讨论不同CSS技术之间的异同,主要是以介绍CSS框架为主。因为过去的几年里它们才开始流行起来,但已经有越来越多的开发人员已经开始接触使用它们了。
现在的网站风格已经与它们很早之前的样子有了很大的不同。如果现在再回过头去看有些公司最初的网站UI,我想大多数互联网用户都很难认得出来。所以也多亏了网页设计技术的创新,现在网站不仅仅是只能显示信息,它们同样也可以拥有有趣的动画、多样的布局和互动的元素。而其中,这些大部分都是由CSS来实现的。

所以CSS的出现为原本平平无奇的网页注入了活力。这也是网站的用户体验得到进一步进化的原因。这可能就是当今几乎所有的网站或多或少都在使用CSS的原因之一。

今年,一些CSS技术正在掀起一场新的技术革新,例如:Flexbox,尽管在Google Chrome上83%的页面加载使用了Flexbox,但另一个名为Grid的新竞争对手也正在慢慢流行起来。另外还有 CSS Writing-Mode、移动动画、单页网站、灵活字体和滚动捕捉等技术也可能产生一定影响。

但在本文里,不会讨论不同CSS技术之间的异同,主要是以介绍CSS框架为主。因为过去的几年里它们才开始流行起来,但已经有越来越多的开发人员已经开始接触使用它们了。

CSS框架是什么?

Bootstrap

Bootstrap最初是Twitter Blueprint作为供团队内部使用的工具而创建的。但在它公开发布后,它受到了开发者广泛使用,使用率增长不断增长。

Bootstrap为警告窗、按钮、轮播、下拉菜单、表单等元素提供了设计模板。通过Bootstrap移动优先功能,可以为您轻松创建响应式布局,它能为您的应用在多个设备上实现一致的设计。

Skeleton

Skeleton以“简单支持响应式样板”的特点著称。因为该框架只有大约400行代码,它更适合于较小的项目或开发人员有着轻量化要求的情况。

对于那些刚刚开始使用前端框架的人来说,这也是一个不错的选择。但因为Skeleton缺乏了CSS设计模板、预处理器和更多丰富性功能,这使得它不太适合更大的团队和项目。

ZURB Foundation

如果您正在寻找的是一个快速且响应迅速的前端框架,那么ZURB Foundation可能正是您要的。它允许您为所有设备创建生产环境的代码和原型。依靠ZURB Foundation支持具有“准系统结构”的框架结构,可以让用户快速地完成产品设计原型。同时它在GitHub上也有大量的支持,提交的数量超过了14000个,贡献者也在940个以上。目前华盛顿邮报和国家地理等网站均使用了ZURB Foundation框架。

UI Kit

UI Kit以具有高度可定制的轻量级元素而著称。基于使用它提供的模板,您将可以轻松创建各种Web界面。它的安装包里包含了CSS、HTML和Javascript文件,以及用于Sublime Text和Atom编辑器的包。另外,它还提供30多个可混合搭配的模块化组件,以实现更多功能。这意味着您不必重复搜索标记和类名。

UI Kit与Bootstrap和Foundation等其他框架的不同之处在于它没有使用将页面分为12列的网格设置。它将它的布局分为三个组件,即Flex、Grid和With。不过由于相关的支持资源不多,所以这个框架更适合有相当经验的开发人员来使用。

Bulma

Bulma作为最常用的框架之一,已经得到了超过15万名开发人员的支持。它是基于Flexbox的免费开源框架之一。Bulma易于使用,即使是作为初学者,也是非常易于上手的,因为该框架仅保留了开发人员开发响应式网站的最低要求。同时,在支持方面,Bulma在GitHub上拥有一个庞大的用户社区,可提供支持。

Materialize

这个前端CSS框架是根据Google的设计规范而创建的。它带有易于使用的IZ列网格,在布局方面具备良好的基础。它的包里还包括了按钮,卡片,表格,图标以及许多其他随时可用的常用组件。

您还可以使用如:拖出式移动菜单,涟漪动画效果,SASS mixins等功能。另外,Materialize也是可以在任何类型的设备上使用。

Semantic UI

尽管Semantic UI是作为较新的框架之一,但它在几个方面的努力还是值得肯定的。首先,它在代码中使用了自然语言,这可能受到初学者开发人员的青睐。而且它的继承系统中有一个高级主题变量,所以这使你在设计时拥有较高的自由度。

使用Semantic UI时,您不必使用其他库,因为它附带了大量的第三方库。这使您的Web开发过程更加方便。凭借它出色的功能,可能很轻松俘获新老开发人员。

Tailwind CSS

Tailwind CSS与其他CSS框架不同,因为它的包中没有预置任何的UI组件。该框架更多注重的是实用性。它附带的CSS类可以在您构建网站时需要设置颜色、大小、位置等内容时为您提供极大的帮助。Tailwind是为那些希望在网页设计方面拥有完全自由度的开发人员而设计的。

Picnic CSS

该框架非常轻量,压缩后代码尺寸不到10KB。Picnic CSS还提供了基于Flexbox的网格布局和许多UI元素,还包括了适合初学者使用的模态窗口和导航栏,您可以使用它们来启动您的Web开发项目。

Ionic

这个开源的移动UI框架可用于为原生Android和iOS开发出高网络性能的应用程序。它带有直观的UI组件,有助于加快网站或应用程序的开发过程。

Ionic提供卓越的原生功能和速度,并能很好地与社区、主要分析、身份验证、插件和其他功能集成一起工作。

Pure.css

Pure.css专注于移动优先的理念。由于Pure.css是模块化的,您可以很轻松地导入您要使用的包。您还可以访问大量可供下载和安装的布局。Pure.css 以其轻量著称。在压缩后,这个框架的尺寸只有3.8KB。

mini.css

mini.css也是一款能够提供完整功能且足够轻量的框架,它压缩后的大小约为10KB,虽然它是个很轻量的框架,但它仍然提供大量布局和UI的元素。如果您想了解它的工作原理是怎样的,您可以通过它的文档了解。

Base

如果您的主要工作是为所有的应用程序和Web开发项目打下坚实的基础,那么您可以尝试一下这个模块化框架。Base自称是 “坚如磐石”的响应性框架。Base基于Normalize.css,并提供基本的、可自定义的样式。如果你的需求只是一个简单的框架,那么它可以满足你。

Concise CSS

如果你需要的是一个简单并实用的框架,那么Concise CSS可能会是你的选择。它的框架是为那些想要“放弃臃肿”的开发人员准备的。顾名思义,它们为开发人员提供的是不包含其他额外附件的包,如果需要更多UI元素,您可以通过单独的工具包完成添加。

Mobi.css

压缩后的Mobi.css只有2.6KB,它是您能找到的最小的框架之一。它的执行速度是它的特点,特别是对于移动设备,所以如果你追求的是速度,那么试试这个框架吧。

不过,和其他模块化框架一样,如果您需要的不只是它们提供的基本样式和功能,您可以在其基础上以模块化方式进行构建。

总结

各类CSS框架除了为用户提供了项目正常运行所需的基础外,还确保了您的应用在各浏览器中访问的一致性和包含响应式的网站设计。这样您就可以集中精力更好地去专注于应用程序的内容和策略的制定。那么,希望您能从上面的列表中找到符合您需求的框架。

原文出处:https://dzone.com/articles/how-to-speed-up-your-design-process-using-modern-c


推荐阅读
  • 本文介绍了多种Eclipse插件,包括XML Schema Infoset Model (XSD)、Graphical Editing Framework (GEF)、Eclipse Modeling Framework (EMF)等,涵盖了从Web开发到图形界面编辑的多个方面。 ... [详细]
  • BeautifulSoup4 是一个功能强大的HTML和XML解析库,它能够帮助开发者轻松地从网页中提取信息。本文将介绍BeautifulSoup4的基本功能、安装方法、与其他解析工具的对比以及简单的使用示例。 ... [详细]
  • HDU1085 捕获本·拉登!
    问题描述众所周知,本·拉登是一位臭名昭著的恐怖分子,他已失踪多年。但最近有报道称,他藏匿在中国杭州!虽然他躲在杭州的一个洞穴中不敢外出,但近年来他因无聊而沉迷于数学问题,并声称如果有人能解出他的题目,他就自首。 ... [详细]
  • ZOJ 2760 - 最大流问题
    题目链接:How Many Shortest Paths。题目描述:给定一个包含n个节点的有向图,通过一个n*n的矩阵来表示。矩阵中的a[i][j]值为-1表示从节点i到节点j无直接路径;否则,该值表示从i到j的路径长度。输入起点vs和终点vt,计算从vs到vt的所有不共享任何边的最短路径数量。如果起点和终点相同,则输出无穷大。 ... [详细]
  • 在创建带有左侧图标的按钮时,遇到了文本与图标对齐的问题。本文提供了几种使用Bootstrap 4解决此问题的方法。 ... [详细]
  • 探讨并提供解决方案以应对 'view is not in the window hierarchy' 的错误提示。 ... [详细]
  • 本文介绍了如何处理MySQL数据库中表 'xdb.auditlog' 被标记为已损坏的问题,并提供了解决方案。 ... [详细]
  • 配置PicGo与Gitee结合Typora打造高效写作环境
    本文详细介绍了如何通过PicGo和Gitee搭建个人图床,并结合Typora实现高效的文章撰写。包括创建图床项目、生成访问令牌、安装配置PicGo和Typora等步骤。 ... [详细]
  • 择要:Fundebug的JavaScript毛病监控插件同步支撑Vue.js异步毛病监控。Vue.js从降生至今已5年,尤大在本年2月份宣布了严重更新,即Vue2.6。更新包含新增 ... [详细]
  • 本视频详细介绍了如何利用J2EE、JBPM 3.x/4.3、Flex流程设计器、jQuery以及授权认证机制构建高效的企业普及版贝斯OA及工作流管理系统。 ... [详细]
  • 解决jQuery Spinner按钮垂直排列问题
    本文探讨了如何通过CSS调整jQuery Spinner组件中的上下按钮,实现它们的垂直堆叠布局。 ... [详细]
  • BL550721、特点液晶驱动输出:Common输出4线,Segment输出36线内置显示寄存器364144bit2线串行接口(SCL,SDA)内置震荡电路内置液晶驱动电源电路13 ... [详细]
  • javascript——对象的概念——函数 1 (函数对象的属性和方法)
    一、创建函数函数是一种对象:Function类是对象,可以通过Function实例化一个函数,不过最多的还是利用function来创建函数。方式一:利用Function类来实例化函 ... [详细]
  • 本文介绍如何使用 Arcade 库在 Python 中绘制太阳,包括环境配置、基础图形绘制方法及具体代码示例。 ... [详细]
  • LIN总线技术详解
    LIN(Local Interconnect Network)总线是一种基于UART/SCI(通用异步收发器/串行接口)的低成本串行通信协议,主要用于汽车车身网络中智能传感器和执行器之间的通信。 ... [详细]
author-avatar
Mikor
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有