个最佳的极简,十个最流行的前端

Foundation 是模块化组件库,可认为您量身创设自身的品类。它有琳琅满指标选项 —— 从响应式结构到动漫。 Foundation 也可以有和好的 JavaScript 插件API。最终,该框架附带了ACRUISERIA属性和剧中人物,用于营造具备可访谈性的站点。

由 TypeScript 编写而成并富有完整的定义类型。

18. Penguin

图片 1

Penguin 是二个由 Sass 营造的轻量级、可扩张的前端框架,用于运行任何项目。

项目地址:【传送门】

一时框架能够包含仅对其原来开拓人士有含义的 CSS 类名。Semantic UI 希望通过利用自然语言来改正陈诉。逻辑是超级轻巧根据的,应该能够加快开荒速度。除语言之外,你还能找到超越3,000 个主旨变量 —— 遵照需求,你能够编写或删除全体这一个变量。

Tachyons项目包涵

16. Kouto swiss

图片 2

瞩目于 Stylus 的完整 CSS 框架。它的灵感源自流行的预管理工科具库,举例nib、compass、bourbon.

品类地址:【传送门】

Google 的Material Design的观众确定心仪Materialise。该框架基于流行的规划语言,包含大气基于 CSS 和 JavaScript 的要素。它聚集于微人机联作,以使客户分界面越发协调。值得注意的是,Materialise 还帮衬自定义大旨。

Material Design项目满含

9. Mini

图片 3

Mini 作为三个 Gzip 压缩后不到 7KB 大小的极简框架,它富有响应式、易用性和定制性等特色,目的在于为您提供尽恐怕多的效应。由于它是轻量框架,不唯有令你成立的网址和应用程序具有越来越快的加载速度,况兼它所提供的组件能够满意基本的费用要求。

类型地址:【传送门】

Bulma

在统筹中足够构思移动设备平台。

3. Milligram

图片 4

Milligram 提供了极简样式设置,便于你急速、简洁的开启建站之旅。就算它不是三个 UI 框架,但它的设计意见却是以提供卓绝的天性、高效的支出效用以致起码的属性重新设置而创设的。同偶然候,它也是轻量的,在 Gzip 压缩后,它唯有 2KB 大小。

品类地址:【传送门】

Concise CSS 提供了七个依照实用程序的框架来使设计员“杜绝丰腴”,它能够让您快速入门。要是你要求UI成分的话能够经过独立的套件去丰硕它们。

自个儿个人特别欣赏 Skeleton,因为它能够加速开采速度何况设置起来也特别轻便。

12. Siimple

图片 5

Siimple 是多个助你创设扁平化网址风格的轻量、响应式的开源框架。它放到了 SASS / SCSS,为你的网页设计提供了简练的开始。

品种地址:【传送门】

Base

灵活的 Sass。

17. Concise

图片 6

Concise 为你的网址设计提供了抓好的底蕴。它提供了豆蔻梢头套仅包罗幼功样式的简单框架,并包含了大气开箱即用的机能。同临时间,你也足以因而使用基本的附加组件举行功用性扩张。

品种地址:【传送门】

Semantic UI

意气风发种运动优先型 CSS 结构。

15. Responsive

图片 7

二个功效强盛、对开荒人士友好的,用于塑造响应式网址的轻量级前端框架。

类别地址:【传送门】

专注于 CSS 的框架

还要,框架则能够更轻便地急速创设起直观的可用应用程序。依赖着相当的高的人气,这段日子市集上存在大批量前端框架可供大家选拔。

1. Spectre

图片 8

那是八个轻量级、响应式的今世 CSS 框架,用于急忙建站和扩大程序的支出。它经过顶尖编码实行和少年老成致性的两全语言,为制版与元素、基于 Flexbox 的响应布局系列、CSS 组件提供了基本样式。

品类地址:【传送门】

Base 是八个模块化框架,正如它的名字所要表明的,其意在为您的门类提供坚实的底子。它白手立室在 诺玛lize.css 之上,提供易于定制的基本样式。你在此边找不到其余太多的事物,但那无独有偶就不怕注重所在!

——摘自 Ant Design 官网

10. Pavilion

图片 9

Pavilion 是叁个轻松易行的 CSS 框架,相符那几个不希罕使用别的框架中附带预约义 UI 组件的开拓人士。假诺您正在搜索二个简约、轻量、可订制的,况兼不会情不自禁代码膨胀的 CSS 框架,Pavilion 将是个不利的筛选。

种类地址:【传送门】

官网:

可以知道与纯 HTML、React、Ember、Angular 以致 Rails 等顺遂合作。

2017 年 20 个最棒的极简 CSS 框架

2017/07/10 · CSS · 框架

初藳出处: HENRI WIJAYA   译文出处:IT程序狮   

图片 10

无论在产品设计,依旧在研究开发上,极简主义的行使简直无处不在。假诺您和小编同样爱护极简主义,那么本文分享的内容,一定是你的“菜”。在篇章中,我们将与大家分享20 个精品的极简 CSS 框架,它们能够为您提供建站必备的构件,扶助您节省时间。Have Fun!


官网:

发端样式设计,并不归于 UI 框架。

4. Cutestrap

图片 11

尽管您在查找成效丰裕的零器件,那么 Bootstrap、Foundation 那类框架将会是你的特级选项。然则,假若您想选取的框架大小是在 normalize.css 与叁个完整框架范围里边, Cutestrap 或者是个不错的选取。它在回降后唯有 8K 大小,可看成 Bootstrap 的轻量级代替方案。

品种地址:【传送门】

官网:

劳动器端渲染。

2. Layers

图片 12

Layers CSS是四个针对实例的 CSS 框架。它拥有轻量级、零重视等天性。

种类地址:【传送门】

Tailwind CSS

Bulma 是风流洒脱套 CSS 框架,因而只会输出单意气风发 CSS 文件:bulma.css。

5. Mobi

图片 13

Mobi.css 是一个轻量级、可扩大、移动优先的 CSS 框架。它小心于细节,对于内容丰裕的网页可以提供卓绝的顾客体验。尽管,它当心移动端,但桌面客户端的体验也是很棒的。

项目地址:【传送门】

官网:

Semantic UI项目富含

19. Base

图片 14

贰个狠抓的响应式 HTML 与 CSS 框架。

品种地址:【传送门】

官网:

简短的 HTML 与可调换的单词及类。

20. Caramel

图片 15

Caramel 是贰个简短、今世的一心响应式 Web 框架。你仅必要编写制定三次代码,就能够获得在多平台上平等的效率。

项目地址:【传送门】


感激你的开卷。若您具有收获,招待点赞与分享。

1 赞 8 收藏 评论

图片 16

官网:

条件扶持

8. Sakura

图片 17

三个便于定制的极简 CSS 框架/核心。

类型地址:【传送门】

Foundation

意气风发种面向 Web 应用程序的铺面级 UI 设计语言。

11. Core CSS

图片 18

那是一个创设轻量级响应式网址的前端框架,它并未有内置预设成分和卡通片,只提供了二个超轻巧的网格种类– 即它的列是转换的,行是 self-clearing,而分界点则是按逻辑均匀的布满。你能够服从想要的办事办法,进行定制与应用。

品类地址:【传送门】

官网:-ui.com/

灵活性:无需 JS。

13. Scooter

图片 19

瞩目为 Dropbox 提供底蕴样式、CSS 组件以至便捷静态原型的 SCSS 框架。

类别地址:【传送门】

Bulma是围绕CSS Flexbox创设的,是贰个免费的开源框架。你会发觉它有超级多轻巧定制的UI成分。它是模块化的,那象征你能够只导入所需的元素—— 如列或开关。

容命理术数习的语法:类名称轻易易读(举例.button 或.title),修饰符便于上手(举个例子.is-primary 或许.is-large),您能够在几分钟之内轻易学会运用 Bulma。

6. Hack

图片 20

哈克 是三个极端简易的 CSS 框架。这有一点点示例,你能够明白下。

种类地址:【传送门】

官网:

“Ant Design 可以帮助每一人项目成员降落设计与原型设计专业的难度,相同的时候提升后台应用程序与制品的花费成效。”

14. Workless

图片 21

创设更加快 Web 应用程序的开源 HTML, CSS 与 JS 框架。

花色地址:【传送门】

官网:

超过 100 种实用 CSS 助手。

7. Wing

图片 22

三个根据极简主义设计意见的出色的 CSS 框架。

品种地址:【传送门】

Tailwind与任何框架的差别在于它从不别的预营造的UI组件。相反,它更留意于程序本身,CSS类能够支持您在营造网址上边抢先一步。尺寸、颜色和固定等因素对它来讲才是生死攸关。

多款调节和测验工具程序,可精晓下降架构难度。

mini.css

通过应用最新 CSS3 作用(比方 Flexbox)并同盟 CSS 变量与 CSS 网格,Bulma 从来处于浏览器视觉手艺世界的抢先。

Bootstrap

特性

稍稍场景须要越来越强盛的框架 —— 上边那一个选取能够帮你成功这项专门的学业。它们不止提供了大气依据 CSS 的成分,何况还能找到基于 HTML 和 JavaScript 的意义。从某种意义上来讲,大约就像从到位了八分之四的沙盘模拟经营带头创设你的网址,你能够由此自定义来满足自个儿的要求。

其三方支持。

Picnic CSS 是一个十分轻量级的框架,压缩后小于10KB。它具备基于Flexbox的网格布局以至大量的UI成分,可以便快捷运输转项目。你仍旧足以找到一个简易的导航栏和模态窗口。

特性

正文将向您介绍生机勃勃多元世界级CSS框架。某一个人大概听他们讲过,也恐怕对某人是崭新的。但它们都提供了各类立见成效的上进效能,可以校正您的办事流程。早先吧!

响应式。

mini.css 是三个在轻量级和效率丰盛之间得到平衡的包。它实在达到了指标,压缩后大概10KB,同期具有比比较多的UI成分和布局。通过它提供的文书档案你能够深深明白那意气风发体是什么运作的。

风华正茂套开箱即用的高格调 React 组件。

Spectre.css

“Tailwind CSS 是后生可畏款高度可定制的中低级 CSS 框架,可以为你提供营造定制化设计所必要的所有的事塑造单元,且您将干净送别这多少个恼人的体制难题。”——摘自 Tailwind CSS 官方网址

官网:

现代浏览器与 IE 9 以上版本(带有 polyfills)。

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

一切开辟与设计财富及工具。

Pure.css在调整和减少后仅为3.8KB,以活动优先的见地为核心。它是模块化的,所以您只需导入要动用的成分包。你还能下载和装置许多常用构造。

“Shoelace.css 是生机勃勃套轻量化且具有前瞻性的 CSS 库,使用面向未来的 CSS 语法构建而成。其便于使用且富有丰盛的定制化空间。Bottstrap 客商将要里面找到熟识的施用心得,但同一时候 Shoelace 又兼顾令人耳目朝气蓬勃新的安顿。您差非常的少力所能致在其余浏览器上应用 Shoelace。CDN 版本特别相符用于原型设计,但借使要使用完整意义,您也得以从零发轫利用 Shoelace 进行构建。”——摘自 Shoelace 官方网站

Picnic CSS

Spectre.css项目包涵

超越CSS范畴的框架

轻量化,约 69 KB。

Materialize

Tailwind CSS项目包含

Pure.css

但里边不富含 JavaScript,因为大家频仍倾向于选用本人的 JS 达成。Bulma 还富有境遇中立性:仅归属逻辑意义上的风姿浪漫种样式层。

让我们先从部分介怀于 CSS 的框架开头。你将找到全部品类的结商谈UI成分来本人营造项指标底子。有个别以至恐怕包蕴部分 JavaScript 来帮您管理更目眩神摇的作用。

急速上手,不必要编写翻译或设置。

Concise CSS

“Skeleton 只安排了大器晚成部分正式的 HTML 成分,同期蕴含少年老成套网格,但那个早就足足满意超越四分之二须求。若是你正先河创立三个微型项目,也许以为温馨并无需大型框架提供的那么多实用工具,那么推荐你使用 Skeleton。”——摘自 Skeleton 官方网址

产生你的档案的次序须求做过多干活 —— 那就是框架存在的原因。它为大家管理了有个别千斤的干活,并为之后的总体提供了底工。

主题化

官网:

“由谷歌(GoogleState of Qatar商厦创建并规划,Material Design 是生龙活虎种设计语言,个中结合了各个成功设计中的优良原则、立异成果与技能方案。Google的靶子在于付出意气风发套能够在自由平台之上,为保有产物提供统后生可畏客户体验的设计系统。”——摘自 Material Design 官方网址

初藳来自:-css-frameworks-to-speed-up-the-design-process/

前面一个 CSS 库,能够扶植客商分担样式设计,进而分明抓实原型制作速度;客商则足以依赖前端框架,特别自在地塑造起直观的可用应用程序。最近市集上设有大气前端框架可供选用,本篇小说的关键内容就是有关那个近些日子极端盛行且常用的框架。

Mobi.css

为何要接收 CSS 库,而不接受自定义 CSS?简单来讲,时间是黄金时代种可贵的能源,我们不应当把它浪费在体制的创设身上。从零开始创设CSS 是或不是质量好、效果佳?答案当然是分明的。但独有您是位千锤百炼的 CSS 视觉创新意识人员,否则把那项专门的工作交给行家才是最佳的拈轻怕重。

依赖框架更加好地劳作

轻巧使用且中度可定制。

Bootstrap 是由 Facebook创制的,因为它尊敬得很好,并提供了一个宏大的预建功用库,所以它差非常少无处不在。固然你能够运用暗中同意设置,但 Bootstrap 也丰硕便于扩张。通过增加大旨或自定义组件可以帮你特别开辟本性化的 UI。

特性

官网:

“Semantic UI 将单词与类视为豆蔻年华种可调换的概念。各类类使用来源自然语言的语法(譬喻名词 / 修饰关系、词序与多元性)对定义举行直观链接。其能够完结肖似于 BEM 或 SMACSS 的优势,但却不再单调没有味道。”——摘自 Semantic UI 官方网址

官网:

特性

Mobi.css 非常的小(压缩后仅 2.6KB),主要针对移动客商。不过其放置大旨和插件系统还可能有一点都不小的增长空间。要是基本样式不能知足你的渴求,能够在框架之上以模块化的法子开展营造。

德文原来的书文:-programming/heres-a-list-of-top-css-front-end-libraries-eb0330c04148

Spectre.css 被称之为“轻量级、响应式、今世化”,是叁个基于Flexbox的框架。你会开采成的为主的布局、UI和制版风格。别的还应该有很多效用组件(手风琴、弹出窗口、标签等)都以用纯CSS创设的。简来讲之,它成功了很好的平衡性。

Foundation项目满含

零器件友好性。

特性

“无关紧要”,仅约 400 行代码。

轻量化(gzip 压缩后约 10 KB)

大家能够以开箱即用的秘籍接纳上述文件,也得以下载 Saas 源以调用当中各种变量。

未遭普及援救。

轻量化(约 14 KB)。

时间: 2019-09-04阅读: 906标签: 库

Shoelace项目包蕴

特性

“Tachyons 是风流洒脱套面向作用性 CSS 与人类的筹算系统。无需编写 CSS 代码,您就可以看到急迅营造并两全出新的 UI 方案。”——摘自 Tachyons 官方网站

简言之风格。

特性

特性

Ant Design项目包涵

开源组件库。

“设计系统会趁着规模的扩张(无论是协会扩充照旧产物扩展)而受到消极的一面影响,那是因为不断有新的组件 / 变体被引进当中。那么些谈什么一时(恐怕说日常)贫乏记录,因而归属在组件 / 变体须要再度现身时的双重付加物。固然是装有记录的零构件,对几十竟然数百个实例的全部景况/ 变体进行搜聚与记录也是项伟大的担任。Tachyons 这类系统通过记录与节制组件的属性解决了那一个难点。(作者个人将其就是生机勃勃种「亚原子」设计。)

直观的语法。

大家跟着能够透过这几个亚原子组件(属性)进行构件成立。您只须求管住意气风发份包蕴各「成分」亚原子组件的一体化项目清单,而不再像过去那么直面组件及其变体的累赘记录。那几个亚原子组件能够以重重种格局组合成无数种组件。那几个零器件尽管属性三种,但仍受限于豆蔻梢头组创建的取值范围(即大家的亚原子组件)。”——DanielEden,推特 公司设计师

特性

简化调节和测量试验。

Ant Design 是风度翩翩种面向后台应用的寻思语言,由 Ant UED 团队支付而成。他们盼望借此联合内部后台项目标客商分界面标准、减弱设计差别以至不须求的落到实处基金,进而解放出越来越多可用来设计以至前端开荒的珍爱财富。

490 种无障碍颜色组合。

Bulma项目饱含

ZURB 入门模板。

可定制。

“Foundation 归属二个完完全全的响应式前端框架宗族。利用 Foundation,您将可飞快到位从原型到生育的全体流程,为随便指标设备上的站点或应用程序提供支撑。Foundation 包括后生可畏套完全可定制的响应式网格、黄金时代套宏大的 Sass Mixins 库、各种常用 JavaScript 插件以至完全可访问性援助。”——摘自 Foundation 官方网站

Skeleton项目包罗

提供入门模板。

粗略的网格系统:要创设 Bulma 网格,我们只必要多少个.columns 容器,并基于供给将随机数量的.column 条约打包进去就能够。

动用 PostCSS 营造而成。

听别人说官方网站所言,Spectre.css 是“大器晚成套轻量化、响应式的现世 CSS 框架,用于落到实处更加快、可增加性越来越强的开荒力量。Spectre 提供种种制版与成分的主导样式,基于 Flexbox 的响应式布局机制,外加纯 CSS 组件与工具程序。”

设若我们愿意分享你爱怜的 CSS 库,开采本文中设有的荒诞,大概是自个儿平昔不提到的拔尖库选项,请在评价中多都赐教!

a11y 友好性。

Electron

精粹的组件与调色板。

运用原生 CSS 变量与前途 CSS 功效。

特性

最佳可嵌套的响应式网格系统。

本文由澳门威斯尼人平台登录发布于Web前端,转载请注明出处:个最佳的极简,十个最流行的前端

相关阅读