13个加快开发效力的当代CSS框架【html5教程】,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/spectre/
逾越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/
依靠框架更好地事情
完成你的项目须要做许多事情 —— 这就是框架存在的缘由。它为我们处置惩罚了一些沉重的事情,并为以后的统统供应了基础。
以上就是13个加快开发效力的当代CSS框架的细致内容,更多请关注ki4网别的相干文章!