百分百源码网-让建站变得如此简单! 登录 注册 签到领金币!

主页 | 如何升级VIP | TAG标签

当前位置: 主页>网站教程>CSS教程> 怎样运用CSS框架来加速设计历程?
分享文章到:

怎样运用CSS框架来加速设计历程?

发布时间:09/01 来源:未知 浏览: 关键词:
但在本文里,不会计议不一样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

打赏

打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

百分百源码网 建议打赏1~10元,土豪随意,感谢您的阅读!

共有150人阅读,期待你的评论!发表评论
昵称: 网址: 验证码: 点击我更换图片
最新评论

本文标签

广告赞助

能出一分力是一分吧!

订阅获得更多模板

本文标签

广告赞助

订阅获得更多模板