|
|
51CTO旗下网站
|
|
移步端
  • 十五种加速设计开发的CSS框架

    本文和您讨论当下最盛行的十五种CSS框架,以丰厚您加速应用于网站的计划与开发。

    笔者:陈峻编译 来源:51CTO| 2020-03-20 09:00

    【51CTO.com快译】现行我们所浏览的图书站,除了基本的消息展示之外,绝大多数具有生动的卡通、铺天盖地之布局、以及诱人的互动元素,多要归功于CSS创新技术的贯彻。截至到去年年末,Flexbox已经把采用到了Google Chrome的83%加载页面上(请参阅:https://www.chromestatus.com/metrics/feature/timeline/popularity/1692),人人从中能够看到包括CSS写入模式(Writing-Mode)、移步动画、另一方面页面网站、可变字体、以及滚动捕捉等方面的新趋势。

    CSS框架是什么?采用它的功利在哪儿?

    十五种加速设计开发的CSS框架

    普通,侨界将CSS定义为一种提供有效外观的计划语言。他可以把用于格式化和描述以文档标记形式编写的奇观。出于CSS可以与XUL和SVG等其它类型的XML共计使用,故此CSS框架就像带有文件的现成软件包一样,可以用作网站的构建基础。

    下我们来看望使用CSS框架可以给网站带来哪些具体的功利:

  • 可以明确节省时间:穿过使用CSS框架,付出人员在构建应用或网站时无需从零开始。她们可以让自己更注意于诸如:图片设计、移步媒体优化、以及目标应用的制造与面试等其它主要职责上。
  • 可实现代码的选定:如果您正在致力一个巨型项目的支出,其中包含无数之页面,并且每个页面将处于持续活动与创新的话,这就是说代码重用将显得十分有用。可以说拥有强大重用特性的框架,可以缩短您项目的准备周期。
  • 消除了跨浏览器的题材:咱们在工作站与使用的构建过程中,最怕出现在少数浏览器上运行或显示不健康的状况。然而,出于CSS框架可以在其他浏览器上无缝地运转,故此您将不必担心此类问题的发生。
  • 确保标准结构的边缘:前者框架通常由CSS、HTML和JavaScript文件组成。该署文件有助于确保所有元素(如设计、表单等)在页面中的一致性。
  • 十五种加速设计开发的CSS框架

    良好CSS框架

    1. Bootstrap

    早期被称为Twitter Blueprint的Bootstrap,是表现其中组织使用的工具而创建的。他是最有名的前端框架之一。自公开发表以来,Bootstrap的用率逐年攀升。

    Bootstrap提供了报警、按钮、轮播、从拉式菜单、以及表单等计划模板。凭借Bootstrap的运动优先(mobile-first)效益,您可以轻松地创造响应式布局,进而保证在横跨多个设施上的计划一致性。

    2. Skeleton

    Skeleton号称“大概的呼唤式样板”。出于此框架只有大约400列代码,故此他更适合于小型项目,以及开发人员要求创造轻量级内容的使用场景。

    出于布局简单,Skeleton对于这些刚开始使用前端框架的人数来说,是一番不错的取舍。当然,也正是缺少CSS计划模板、预处理器、以及整体效益,受限的Skeleton不太方便大型的品种。

    3. ZURB Foundation

    如果您正在搜寻一种呼唤迅速的前端框架,这就是说ZURB Foundation就比较适当。该框架将允许您为整个的装备创建各种生产条件的编码和原型。穿过支持具有“准系统组织(barebone structure)”的流行框架,ZURB Foundation让用户能够使用简单的主意及他入门模板,来快速生成产品原型。出于提交量很多于14,000先后,而且贡献者超过了940红,故此ZURB在GitHub上也有着大量之支持。脚下,《巴黎邮报》和《江山化工》等著名网站都使用的是该框架。

    4. UI Kit

    UI Kit以具有莫大可定制的轻量级元素而享誉。他的各族模板能够让您轻地松构建各类Web规模。UI Kit的设置包里包含了CSS、HTML和JavaScript文件、以及Sublime Text和Atom编辑器的软件包。此外,他还提供了30多种无的组件,他家可以对他进行混合与匹配,以促成多种功能。具体地说,您不必反复搜索那些标记和类名。

    与Bootstrap和Foundation等其它框架不同,UI Kit并非使用12趟网格设置,而是将他布局分为了主题性、网格和宽度三个组成部分。当然,出于缺少资源,该框架更适合于那些具有丰富经历的支出人员。

    5. Bulma

    表现最常用的框架之一,Bulma得到了超过15万名开发人员的支持。他是基于Flexbox的免费开源框架之一。出于Bulma框架仅完全能够满足开发响应式网站的最低要求,故此他对于初学者来说十分容易上手。此外,受益于在GitHub上有着巨大之客户社区,Bulma具有得天独厚的技艺支持。

    6. Materialize

    该前端CSS框架是根据Google的计划规范创建的。Materialize带有易于使用的IZ趟网格,以便很好地用于布局规划。他的程序包中包括有按钮、卡片、表格、图标、以及广大其他可供按需采取的组件。另外,您还可能用到的效应包括:拖出式移动菜单、涟漪效果动画、以及SASS mixins等。而且,Materialize可以在其他类型的装备上把运用。

    7. Semantic UI

    出于是一款较新的框架,故此Semantic UI在代码中使用到了自然语言,而且备受初学者的喜爱。他的连续系统(inheritance system)带有一个高级的主题变量,为您提供了设计时的总体自由度。

    出于自带有大量之程序三方软件库,故此在采取Semantic UI时,您不必调用其他的库,便足以让Web付出的经过更加便利。这也是不少初学者和经验丰富的支出人员喜欢它的由来所在。

    8. Tailwind CSS

    Tailwind CSS与其他框架的不同的处在于,他的软件包并没有预建UI组件。该框架更关注于实用性。他包含有各种专注于颜色、大大小小和职务的CSS类。Tailwind适合于那些不满足于预设组件,但希望能够完全自由地研制Web计划的支出人员。

    9. Picnic CSS

    该框架非常轻巧,他压缩后的编码不到10KB。同时,Picnic CSS还带有基于Flexbox的网格布局和广大UI元素。您可以运用它们来启动自己之Web付出项目。此外,Picnic的全封闭式窗口和导航栏,也对初学者非常友好。

    10. Ionic

    该开源的运动UI框架,可以让用户在不改变代码库的情况下,付出出适用于Android和iOS原生的,以及具有网络高性能的使用。Ionic带有直观的UI组件,可帮助用户加快网站或使用程序的支出过程。出于提供了突出的原生功能和速度,Ionic可以与灾区、主流分析平台、身份验证服务、硬件以及其他集成平台,很好地配合使用。

    11. Pure.css

    该框架专注于移动优先的见解。出于Pure.css是现代化的,故此您可以轻松地按需导入元素包。同时,您还可以获取它的各族可供下载与安装的布局。以方便闻名的Pure.css框架,在削减后只有3.8KB。

    12. mini.css

    mini.css同样提供全面的效应和轻巧的框架。虽然他在削减后只有10KB,但仍然可以提供丰富的布局和UI元素。如果您想对他的上班原理做进一步了解,这就是说请查阅它的联机文档。

    13. Base

    如果您的首要任务是为整个的使用程序和Web付出项目打下坚实的根基,这就是说您应该尝试一下此模块化的框架。表现号称“牢固”的呼唤框架,Base基于Normalize.css提供了主导的可自定义样式。您可以按需用他来促成简单的使用。

    14. Concise CSS

    Concise CSS也是一款简单且实用的框架。该框架结构严谨、明快、且无需额外添加。当然,如果您需要UI元素的话,也得以通过单独的工具包来轻松地展开追加。

    15. Mobi.css

    调减后的Mobi.css仅为2.6KB,他是现阶段您可以找到的最小的框架之一。Mobi的劣势在于速度,尤其是在针对移动设备的使用场景中。出于Mobi.css内置了主题和软件系统,而且可以按需扩展,因此用户可以行使模块化的主意,在伊基础上进行构建。

    总结

    各项CSS框架为客户提供了品种正常运转所需的根基。付出人员可以更好地注意于应用内容和政策,并计划出具有快速响应能力的图书站。俗话说:工欲善其事,必先利其器。瞩望您能够从上面的列表中,慎选出适合自己实际需要之框架。

    原文标题:How to Speed Up Your Design Process Using Modern CSS Frameworks,笔者:Souvik Banerjee

    【51CTO来稿,合作站点转载请注明原文译者和出处为51CTO.com】

    【义务编辑: 庞桂玉 TEL:(010)68476606】

    点赞 0
  • CSS  框架  前者
  • 分享:
    大家都在看
    猜你喜欢
  • 订阅专栏+更多

    秒杀高并发白话实战

    秒杀高并发白话实战

    主流高并发架构
    共15章 | 51CTO崔皓

    50人口订阅学习

    网络排障一点通

    网络排障一点通

    网络排障及优化调整案例
    共20章 | 捷哥CCIE

    403人口订阅学习

    VMware NSX 入夜到实战

    VMware NSX 入夜到实战

    网络虚拟化革命性技术
    共16章 | Cloud袁

    224人口订阅学习

    订阅51CTO邮刊

    点击这里查看样刊

    订阅51CTO邮刊

    51CTO劳务号

    51CTO官微


    
       
      <menu id="654460de"></menu>