提高开发效率的现代CSS框架

时间: 2019-05-13阅读: 462标签: 框架

本文将向你介绍一系列顶级CSS框架。有些人可能听说过,也可能对有些人是全新的。但它们都提供了各种有用的先进功能,可以改善你的工作流程。开始吧! 


专注于 CSS 的框架

 让我们先从一些专注于 CSS 的框架开始。你将找到所有类型的布局和UI元素来自己构建项目的基础。有些甚至可能包含一些 JavaScript 来帮你处理更复杂的功能。

Tailwind CSS

Tailwind与其他框架的区别在于它没有任何预构建的UI组件。相反,它更专注于程序本身,CSS类可以帮助你在构建网站方面领先一步。尺寸、颜色和定位等元素对它来说才是关键。

官网:https://tailwindcss.com


Bulma

Bulma是围绕CSS Flexbox构建的,是一个免费的开源框架。你会发现它有许多易于定制的UI元素。它是模块化的,这意味着你可以只导入所需的元素 —— 如列或按钮。

官网:https://bulma.io/


Picnic CSS

Picnic CSS 是一个超轻量级的框架,压缩后小于10KB。它具有基于Flexbox的网格布局以及大量的UI元素,可以快速启动项目。你甚至可以找到一个简单的导航栏和模态窗口。

官网:https://picnicss.com/


Materialize

Google 的 Material Design 的粉丝肯定喜欢 Materialise。该框架基于流行的设计语言,包括大量基于 CSS 和 JavaScript 的元素。它聚焦于微交互,以使用户界面更加友好。值得注意的是,Materialise 还支持自定义主题。

官网:https://materializecss.com/


Pure.css

Pure.css在压缩后仅为3.8KB,以移动优先的理念为中心。它是模块化的,所以你只需导入要使用的元素包。你还可以下载和安装许多常用布局。

官网:https://purecss.io/


Base

Base 是一个模块化框架,正如它的名字所要说明的,其旨在为你的项目提供坚实的基础。它建立在 Normalize.css 之上,提供易于定制的基本样式。你在这里找不到任何太多的东西,但这恰恰就就是重点所在!

官网:https://getbase.org/


mini.css

mini.css 是一个在轻量级和功能丰富之间取得平衡的包。它确实达到了目标,压缩后大约10KB,同时拥有相当多的UI元素和布局。通过它提供的文档你可以深入了解这一切是如何运作的。

官网:https://minicss.org/


Concise CSS

Concise CSS 提供了一个基于实用程序的框架来使设计师“杜绝臃肿”,它可以让你快速入门。如果你需要UI元素的话可以通过单独的套件去添加它们。

官网:https://concisecss.com/


Mobi.css

Mobi.css 非常小(压缩后仅 2.6KB),主要针对移动用户。但是其内置主题和插件系统还有很大的增长空间。如果基本样式不能满足你的要求,可以在框架之上以模块化的方式进行构建。

官网:http://getmobicss.com/


Spectre.css

Spectre.css 被称为“轻量级、响应式、现代化”,是一个基于Flexbox的框架。你会发现一些基本的布局、UI和排版风格。此外还有许多功能组件(手风琴、弹出窗口、标签等)都是用纯CSS构建的。总的来说,它做到了很好的平衡性。

官网:https://picturepan2.github.io...


超越CSS范畴的框架

有些场景需要更强大的框架 —— 下面这些选择可以帮你完成这项工作。它们不仅提供了大量基于 CSS 的元素,而且还可以找到基于 HTML 和 JavaScript 的功能。从某种意义上来说,几乎就像是从完成了一半的模板开始构建你的网站,你可以通过自定义来满足自己的需求。

Bootstrap

Bootstrap 是由 Twitter 创建的,因为它维护得很好,并提供了一个庞大的预建功能库,所以它几乎无处不在。虽然你可以使用默认设置,但 Bootstrap 也非常易于扩展。通过添加主题或自定义组件能够帮你进一步开发个性化的 UI。

官网:https://getbootstrap.com/


Foundation

Foundation 是模块化组件库,可以为你量身打造自己的项目。它有各种各样的选项 —— 从响应式布局到动画。 Foundation 也有自己的 JavaScript 插件API。最后,该框架附带了ARIA属性和角色,用于构建具有可访问性的站点。

官网:https://foundation.zurb.com/


Semantic UI

有时框架可以包含仅对其原始开发人员有意义的 CSS 类名。Semantic UI 希望通过使用自然语言来改变叙述。逻辑是很容易遵循的,应该可以加快开发速度。除语言之外,你还可以找到超过 3,000 个主题变量 —— 根据需要,你可以编辑或删除所有这些变量。

官网:https://semantic-ui.com/


依赖框架更好地工作

完成你的项目需要做很多工作 —— 这就是框架存在的原因。它为我们处理了一些繁重的工作,并为之后的一切提供了基础。


原文来自:https://1stwebdesigner.com/modern-css-frameworks-to-speed-up-the-design-process/


站长推荐

1.阿里云: 本站目前使用的是阿里云主机,安全/可靠/稳定。点击领取2000元代金券、了解最新阿里云产品的各种优惠活动点击进入

2.腾讯云: 提供云服务器、云数据库、云存储、视频与CDN、域名等服务。腾讯云各类产品的最新活动,优惠券领取点击进入

3.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/3310

合理使用CSS框架,加速UI设计进程

现在的网站风格已经与它们很早之前的样子有了很大的不同。如果现在再回过头去看有些公司最初的网站UI,我想大多数互联网用户都很难认得出来。所以也多亏了网页设计技术的创新,现在网站不仅仅是只能显示信息

前端工程师必须了解的主流前端框架

现在前端工程师的工作已经不想几年前那样,仅仅写一些页面调整一下样式就可以拿到高薪了。由于前端技术的发展,以及企业对前端工程师的要求越来越高,现在前端工作也越来越复杂。不过只要掌握目前比较流行的主流框架

常用的十大 NodeJS 框架

Node.js 是基于 Chrome V8 javascript 引擎构建的开源、跨平台运行时环境。事件驱动的非阻塞I/O 模型使,NodeJS 能开发极其轻便且高效的 Web 应用程序。客户端 和 服务端 脚本中使用相同的语言

React 还是 Vue:选哪个?

毫无疑问,React 和 Vue 的目标市场非常相似:两者都是基于组件的轻量级库,都是用来构建仅关注视图层的用户界面。两者都可以用在简单的项目中,也可以使用顶尖的工具链扩展到复杂的应用程序上。于是乎,许多 Web 开发人员都在犹豫到底该用哪个框架。它们之间有明显的差距吗?

vue和angular如何选择?

如今,已有许多开发人员开始使用Vue.js来取代Angular和React.js。那么对于Angular和Vue.js,开发者该如何选择呢?下面本篇文章就来给大家介绍一下,希望对大家有所帮助。vue是一个渐进式的框架,是一个轻量级的框架,也不算是一个框架

node.js后端框架介绍

Node.js有许多框架可以选择,包括老牌的express,koa,新晋的egg,nest等等,Express是一款基于node.js以及ChromeV8引擎,快速、极简的JS服务端开发框架,它提供了用来开发强壮的web/移动应用,以及API的所有功能

ReactJS 与 VueJS:两种最流行的前端 JS 框架之战

如果有人问你将在 2020 年选择哪种框架进行开发,你的答案将是什么?很明显,你主要有两个选择: React.Js 和 Vue.Js!但是,如果你需要选择一个怎么办?好吧,两个最受欢迎的框架 React Js 和 Vue.Js 之间的战斗是真实的

最受程序员欢迎的20 个CSS框架

本文为大家搜罗了 20 款截至目前最受程序员欢迎的前端CSS框架,其中有的霸榜已久,也有不少后起之秀,有的是单纯的 CSS 框架,也有的结合了 JavaScript 以提供更丰富的功能

值得探索的 8 个机器学习 JavaScript 框架

Deeplearn.js是Google发布的一个开源的机器学习JavaScript库,可用于不同的目的,例如在浏览器中训练神经网络,理解ML模型,用于教育目的等。你可以在推理模式中运行预先训练的模型

前端常用框架优缺点总结

JQuery是一个优秀的javascript框架 ,JQuery宗旨是Write Less Do More ,JQuery是轻量级的js库;Zepto.js针对移动端浏览器;Bootstrap用于开发响应式布局、移动设备优先的web项目

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广