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

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

本文将向你介绍一系列顶级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/


为什么用vue,而不用Jquery了?

在没有任何前端框架之前,我们写代码,只能用原生的JS,进行数据的处理,DOM的操作,譬如对一个id 为txtName 的文本框进行赋值,只不过用原生实现的代码比较多,开发起来慢啊,在这个时间就是金钱的年代,显然不是很好的方式。

你为什么要使用前端框架Vue?

最开始学习前端框架的时候(我第一个框架是 React)并不理解框架能带来什么,只是因为大家都在用框架,最实际的一个用途就是所有企业几乎都在用框架,不用框架就 out 了.随着使用的深入我逐渐理解到框架的好处:

10 个最受欢迎的 JavaScript 框架

多年来,业界已经发布了大量 JavaScript 框架,怎样进行选择可能是一个挑战。如果你感到困惑,不知道应该选哪个或者究竟哪个适合你,那么我已经帮你解决了问题

Ionic 框架宣布 2019 年将正式支持 Vue 和 React

Ionic 是一个高级的 HTML5 移动端应用框架,也是一个开发混合移动应用的前端框架,旨在让 Web 开发者更轻松地构建、测试、部署和监控跨平台应用。Ionic 基于 Angular 语法,之前一直不支持 Vue 和 React 。

基于wsgiref模块DIY一个web框架

Web框架(Web framework)是一种开发框架,用来支持动态网站、网络应用和网络服务的开发。这大多数的web框架提供了一套开发和部署网站的方式,也为web行为提供了一套通用的方法

前端框架选型

有一个流传较广的笑话,一个人在stackoverflow中提了一个问题,如何使用javascript实现一个数字与另外一个数字相加。最高票回答是你应该使用jQuery插件,jQuery插件可以做任何事情。 历史总是在重演,以前是jQuery,现在可能是react或vue。不同的框架有不同的应用场景,杀鸡不要用牛刀

web前端框架选择_前端框架是解药还是毒药?

要使用现代的前端框架,你需要下载开发环境和依赖,编译代码,然后在浏览器上运行。这个是好是坏?究竟是什么导致了这种不必要的复杂性?是因为我们构建的网站太复杂,还是因为框架本身就很复杂?

Uber开源Fusion.js:一个基于插件架构的通用Web框架

Web 技术变化得很快,而最佳技术实践也在不断发展。Uber 的 Web 平台团队开发了 Fusion.js,一个开源的 Web 框架,用于简化 Web 开发,并构建出高性能的轻量级 Web 应用程序。

现代 js 框架存在的根本原因

我曾见过很多很多人盲目地使用(前端)框架,如 React,Angular 或 Vue等等。这些框架提供了许多有意思的东西:它们支持组件化;它们有强大的社区支持;它们有很多(基于框架的)第三方库来解决问题;它们有很多(很好的)第三方组件;它们有浏览器扩展工具来帮助调试;它们适合做单页应用。

新框架(新工具,语言)从入门到精通的正确姿势

新框架(新工具,语言),一、了解概念,把握思路,二、迅速实战,见招拆招,三、深入文档,求人不如求己,四、掌握原理,有恃无恐,五、源码分析,自立门户。如果你已经熟悉一门计算机语言,当再学习其他语言的时候,会发现他们几乎是大同小异,对比着学习,会令你事半功倍。

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

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

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