内容简介:翻译:疯狂的技术宅原文:本文首发微信公众号:前端先锋
翻译:疯狂的技术宅
原文: https://1stwebdesigner.com/mo...
本文首发微信公众号:前端先锋
欢迎关注,每天都给你推送新鲜的前端技术文章
本文将向你介绍一系列顶级CSS框架。有些人可能听说过,也可能对有些人是全新的。但它们都提供了各种有用的先进功能,可以改善你的工作流程。开始吧!
专注于 CSS 的框架
让我们先从一些专注于 CSS 的框架开始。你将找到所有类型的布局和UI元素来自己构建项目的基础。有些甚至可能包含一些 JavaScript 来帮你处理更复杂的功能。
Tailwind CSS
Tailwind与其他框架的区别在于它没有任何预构建的UI组件。相反,它更专注于程序本身,CSS类可以帮助你在构建网站方面领先一步。尺寸、颜色和定位等元素对它来说才是关键。
Bulma
Bulma是围绕 CSS Flexbox 构建的,是一个免费的开源框架。你会发现它有许多易于定制的UI元素。它是模块化的,这意味着你可以只导入所需的元素 —— 如列或按钮。
Picnic CSS
Picnic CSS 是一个超轻量级的框架,压缩后小于10KB。它具有基于Flexbox的网格布局以及大量的UI元素,可以快速启动项目。你甚至可以找到一个简单的导航栏和模态窗口。
Materialize
Google 的 Material Design 的粉丝肯定喜欢 Materialise。该框架基于流行的设计语言,包括大量基于 CSS 和 JavaScript 的元素。它聚焦于微交互,以使用户界面更加友好。值得注意的是,Materialise 还支持自定义主题。
官网: https://materializecss.com/
Pure.css
Pure.css在压缩后仅为3.8KB,以移动优先的理念为中心。它是模块化的,所以你只需导入要使用的元素包。你还可以下载和安装许多常用布局。
Base
Base 是一个模块化框架,正如它的名字所要说明的,其旨在为你的项目提供坚实的基础。它建立在 Normalize.css 之上,提供易于定制的基本样式。你在这里找不到任何太多的东西,但这恰恰就就是重点所在!
mini.css
mini.css 是一个在轻量级和功能丰富之间取得平衡的包。它确实达到了目标,压缩后大约10KB,同时拥有相当多的UI元素和布局。通过它提供的文档你可以深入了解这一切是如何运作的。
Concise CSS
Concise CSS 提供了一个基于实用程序的框架来使设计师“杜绝臃肿”,它可以让你快速入门。如果你需要UI元素的话可以通过单独的套件去添加它们。
Mobi.css
Mobi.css 非常小(压缩后仅 2.6KB),主要针对移动用户。但是其内置主题和插件系统还有很大的增长空间。如果基本样式不能满足你的要求,可以在框架之上以模块化的方式进行构建。
Spectre.css
Spectre.css 被称为“轻量级、响应式、现代化”,是一个基于Flexbox的框架。你会发现一些基本的布局、UI和排版风格。此外还有许多功能组件(手风琴、弹出窗口、标签等)都是用纯CSS构建的。总的来说,它做到了很好的平衡性。
官网: https://picturepan2.github.io...
超越CSS范畴的框架
有些场景需要更强大的框架 —— 下面这些选择可以帮你完成这项工作。它们不仅提供了大量基于 CSS 的元素,而且还可以找到基于 HTML 和 JavaScript 的功能。从某种意义上来说,几乎就像是从完成了一半的模板开始构建你的网站,你可以通过自定义来满足自己的需求。
Bootstrap
Bootstrap 是由 Twitter 创建的,因为它维护得很好,并提供了一个庞大的预建功能库,所以它几乎无处不在。虽然你可以使用默认设置,但 Bootstrap 也非常易于扩展。通过添加主题或自定义组件能够帮你进一步开发个性化的 UI。
Foundation
Foundation 是模块化组件库,可以为你量身打造自己的项目。它有各种各样的选项 —— 从响应式布局到动画。 Foundation 也有自己的 JavaScript 插件API。最后,该框架附带了ARIA属性和角色,用于构建具有可访问性的站点。
官网: https://foundation.zurb.com/
Semantic UI
有时框架可以包含仅对其原始开发人员有意义的 CSS 类名。Semantic UI 希望通过使用自然语言来改变叙述。逻辑是很容易遵循的,应该可以加快开发速度。除语言之外,你还可以找到超过 3,000 个主题变量 —— 根据需要,你可以编辑或删除所有这些变量。
依赖框架更好地工作
完成你的项目需要做很多工作 —— 这就是框架存在的原因。它为我们处理了一些繁重的工作,并为之后的一切提供了基础。
本文首发微信公众号:前端先锋
欢迎扫描二维码关注公众号,每天都给你推送新鲜的前端技术文章
欢迎继续阅读本专栏其它高赞文章:
以上所述就是小编给大家介绍的《13个帮你提高开发效率的现代CSS框架》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- 提升自动化效率,一起玩转Selenium框架
- 十大 Node.js 端到端测试框架,快速提升工作效率
- Laravel 和 Spring Boot 两个框架比较创业篇(一:开发效率)
- RXThink V2.0.0 发布,专为提升项目研发效率的PHP框架
- 一款直击痛点的优秀http框架,让我超高效率完成了和第三方接口的对接
- 剑指offer题解笔记:时间效率和空间效率的平衡
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
The Little Schemer - 4th Edition
Daniel P. Friedman、Matthias Felleisen / The MIT Press / 1995-12-21 / USD 40.00
This delightful book leads you through the basic elements of programming in Scheme (a Lisp dialect) via a series of dialogues with well-chosen questions and exercises. Besides teaching Scheme, The Lit......一起来看看 《The Little Schemer - 4th Edition》 这本书的介绍吧!
URL 编码/解码
URL 编码/解码
HEX CMYK 转换工具
HEX CMYK 互转工具