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

最新推荐文章于 2024-04-13 19:47:30 发布
最新推荐文章于 2024-04-13 19:47:30 发布
阅读量3.2k 收藏 7
点赞数
分类专栏： 转载收集

无论是在产品设计，还是在研发上，极简主义的应用简直无处不在。如果你和我一样热衷极简主义，那么本文分享的内容，一定是你的“菜”。在文章中，我们将与大家分享 20 个最佳的极简 CSS 框架，它们能够为你提供建站必备的组件，帮助你节省时间。Have Fun!

1. Spectre

这是一个轻量级、响应式的现代 CSS 框架，用于快速建站和扩展程序的开发。它通过最佳编码实践和一致性的设计语言，为排版与元素、基于 Flexbox 的响应布局系统、CSS 组件提供了基本样式。

项目地址：【传送门】

2. Layers

Layers CSS是一个针对实例的 CSS 框架。它具备轻量级、零依赖等特性。

项目地址：【传送门】

3. Milligram

Milligram 提供了极简样式设置，便于你快速、简洁的开启建站之旅。虽然它不是一个 UI 框架，但它的设计理念却是以提供优秀的性能、高效的开发效率以及最少的属性重置而构建的。同时，它也是轻量的，在 Gzip 压缩后，它只有 2KB 大小。

项目地址：【传送门】

4. Cutestrap

如果你在寻找功能丰富的组件，那么 Bootstrap、Foundation 这类框架将会是你的最佳选择。但是，如果你想选择的框架大小是在 normalize.css 与一个完整框架范围之间， Cutestrap 或许是个不错的选择。它在压缩后仅有 8K 大小，可作为 Bootstrap 的轻量级替代方案。

项目地址：【传送门】

5. Mobi

Mobi.css 是一个轻量级、可扩展、移动优先的 CSS 框架。它专注于细节，对于内容丰富的网页能够提供优质的用户体验。虽然，它专注移动端，但桌面客户端的体验也是很棒的。

项目地址：【传送门】

6. Hack

Hack 是一个极度简易的 CSS 框架。这有一些示例，你可以了解下。

项目地址：【传送门】

7. Wing

一个基于极简主义设计理念的漂亮的 CSS 框架。

项目地址：【传送门】

8. Sakura

一个易于定制的极简 CSS 框架/主题。

项目地址：【传送门】

9. Mini

Mini 作为一个 Gzip 压缩后不到 7KB 大小的极简框架，它具备响应式、易用性和定制性等特性，旨在为你提供尽可能多的功能。由于它是轻量框架，不仅让你创建的网站和应用程序具备更快的加载速度，而且它所提供的组件可以满足基本的开发要求。

项目地址：【传送门】

10. Pavilion

Pavilion 是一个简易的 CSS 框架，适合那些不喜欢使用其他框架中附带预定义 UI 组件的开发人员。如果你正在寻找一个简单、轻量、可订制的，并且不会出现代码膨胀的 CSS 框架，Pavilion 将是个不错的选择。

项目地址：【传送门】

11. Core CSS

这是一个构建轻量级响应式网站的前端框架，它没有内置预设元素和动画，只提供了一个超简单的网格体系 – 即它的列是浮动的，行是 self-clearing，而分界点则是按逻辑均匀的分布。你可以按照想要的工作方式，进行定制与使用。

项目地址：【传送门】

12. Siimple

Siimple 是一个助你打造扁平化网站风格的轻量、响应式的开源框架。它内置了 SASS / SCSS，为你的网页设计提供了简洁的开始。

项目地址：【传送门】

13. Scooter

专注为 Dropbox 提供基础样式、CSS 组件以及快速静态原型的 SCSS 框架。

项目地址：【传送门】

14. Workless

打造更快 Web 应用程序的开源 HTML, CSS 与 JS 框架。

项目地址：【传送门】

15. Responsive

一个功能强大、对开发人员友好的，用于构建响应式网站的轻量级前端框架。

项目地址：【传送门】

16. Kouto swiss

专注于 Stylus 的完整 CSS 框架。它的灵感源自流行的预处理工具库，例如 nib、compass、bourbon.

项目地址：【传送门】

17. Concise

Concise 为你的网站设计提供了坚实的基础。它提供了一套仅包含基础样式的简洁框架，并包含了大量开箱即用的功能。同时，你也可以通过使用内核的附加组件进行功能性扩展。

项目地址：【传送门】

18. Penguin

Penguin 是一个由 Sass 构建的轻量级、可扩展的前端框架，用于启动任何项目。

项目地址：【传送门】

19. Base

一个稳固的响应式 HTML 与 CSS 框架。

项目地址：【传送门】

20. Caramel

Caramel 是一个简单、现代的完全响应式 Web 框架。你仅需要编写一次代码，即可获得在多平台上相同的效果。

项目地址：【传送门】

换挡的小钢炮
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
luxa:极简CSS框架
04-22
极简CSS框架。 请在查看带有示例的文档！ 您还可以查看 :sparkling_heart: 它的目标是简单而集中，目的是提供一种轻量级的解决方案，该解决方案可以在任何开发环境中轻松实现。 具有简单的类名，例如.lx-btn或....
社会质量css2017,2017年最佳的20款css工具
weixin_29665183的博客
08-03 101
原标题：2017年最佳的20款css工具1.Radiobox 小型CSS3动画集合，适用于表现无线电输入内容。2.SpinThatShit 面向单一元素加载器与运行器的SCSS集合。3.Tootik 一套纯CSS/SCSS/LESS工具提示库，易于使用且无需Java。4.Family 包含26种出色的Sass mixins，以简单而优雅的方式对nth-child式元素进行样式管理。5.Sprite...
2024 年排名前 5 的 CSS 框架
最新发布
stormsha
04-13 1154
与传统的CSS框架不同，Tailwind CSS框架不提供预定义的组件，而是提供了一组原子化的CSS类，开发者可以通过组合这些类来创建自己的组件。最后，我们在HTML页面的底部引入了UIKit框架的JavaScript文件，以启用框架的交互功能。：Tailwind CSS框架提供了一组原子化的CSS类，开发者可以通过组合这些类来创建自己的组件，而不是使用预定义的组件。丰富的组件和工具：Bulma框架提供了丰富的预定义组件和工具，如按钮、表单、卡片、菜单等，可以帮助开发人员快速构建现代化的Web应用程序。
15 个优秀的响应式 CSS 框架，web游戏开发教程，终获offer
2401_83621708的博客
03-18 1093
除了简历做到位，面试题也必不可少，整理了些题目，前面有117道汇总的面试到的题目，后面包括了HTML、CSS、JS、ES6、vue、微信小程序、项目类问题、笔试编程类题等专题。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
有哪些类似bootstrap的纯css框架？
SiKi学院的博客
08-01 317
​ 下面是一些类似bootstrap的css框架，以及其开源的仓库和网址附上，整理不易，希望多多点一下赞同收藏喜欢哈~ ​
10个好用的的css框架，前端教程
2301_76348242的博客
04-02 529
小编综合了阿里的面试题做了一份前端面试题PDF文档，里面有面试题的详细解析CodeChina开源项目：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
Pico.css - 简单优雅的纯 CSS 开源 UI 框架，用原始的 HTML 元素标签来做界面
那些免费的砖
02-18 2710
不同浏览器对网页默认的组件解析样式不一致，而且不够美观，网页样式开发需要大量时间，今天介绍一款优雅的 CSS 框架。 关于 Pico.css Pico.css 是一个简单轻量化的 CSS UI 框架，最大的特点是样式都基于 HMTL 原始的标签名和内置的属性，少用甚至是不用 class 来定义样式，写出来的代码语义清晰，可维护性强，能够帮助开发者构建自己的 UI 系统，也可以直接用于快速的小型项目中。 截止发文日期，Pico.css 在 Github 上已经有高达 3898 个 Star。 Pico.c.
毫克原子：Atom的极简CSS框架
01-31
毫克原子：Atom的极简CSS框架
plasma.css:一个基于Flexbox的健壮但极简CSS网格框架
05-11
等离子一个基于Flexbox的健壮但极简CSS网格框架。 移动优先12列网格基于Flexbox 兼容Bootstrap 3（待定）安装Plasma.css可以作为软件包通过安装npm install plasma.css特征使用flexbox的网格布局特征支持的发行状态...
milligram-sass：Sass版本上的极简CSS框架
02-05
Sass版本上的极简CSS框架。为什么很棒Milligram提供了最少的样式设置，以实现快速，干净的起点。 只是它！ 压缩后只有2kb！ 这与UI框架无关。 专为更好的性能和更高的生产率而设计，具有更少的要重置的属性，从而使...
ember-milligram：已弃用：Ember的极简CSS框架
02-04
现在，毫克将被编译为最终的/dist/vendor.css资产Ember的极简CSS框架安装ember install ember-milligram 这将安装作为依赖项，并使用以下导入语句创建文件<app>/app/styles/app.scss ： @import " m
Milligram极简风格的CSS框架
08-08
Milligram提供了一个简单的样式设置，以便快速，干净的开始。 只是它！ 只有2kb gzipped！ 这不是一个UI框架。 专门设计的更好的性能和更高的生产力，更少的属性重置，导致更干净的代码。
好用的CSS框架，真的很好用
06-03
很好用的CSS，960 Grid System Version 1.5 2010-05-11 Created by Nathan Smith. See the official site for more info: http://960.gs/ ============================================================================ Thank you for downloading the 960 Grid System. I hope it helps to streamline web development workflow. Enclosed in the bundle are printable sketch sheets and template files for Adobe Fireworks and Photoshop, OmniGraffle and Visio. Also included is a lightweight CSS file, which contains the grid dimensions. To use this file, simply include the 960.css in the <head> of the HTML page. You may also use the reset.css and text.css files, or opt to leave them out. Here is an example of the XHTML code necessary to incorporate the CSS files: <head> <link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <link rel="stylesheet" type="text/css" media="all" href="css/text.css" /> <link rel="stylesheet" type="text/css" media="all" href="css/960.css" /> </head> It is worth noting that these styles do not automatically make up a finished site design. They are simply a starting point, ideally for rapid prototyping or as a basis for creating your own designs. You should not feel constrained by the way I have built the initial code. If you disagree with how something has been done, feel free to revise it for the needs of your particular site. The files in the 960 Grid System are free of charge, licensed under GPL/MIT. ============================================================================ Note that if you are building a site in a language which reads from right to left, use the CSS files that begin with "rtl_" instead. Denote the language: <html lang="..." dir="rtl"> Be sure to replace "..." with the appropriate two-letter abbreviation of the language you are using. Example: lang="he" for Hebrew, lang="ar" for Arabic. ============================================================================ Special thanks to Eric Meyer for his comprehensive browser reset stylesheet. http://meyerweb.com/eric/tools/css/reset/
oh-my-css:专为极简主义者设计的纯CSS框架
05-17
哦，我CSS Oh-My-CSS是专为极简主义者设计的纯CSS框架。 我正在为此而努力，但进展缓慢。 首先阅读 该项目用于我的手写笔和翡翠学习。 文献资料 执照
html css极简网页架构
12-25
HTML、css网站模板，内含字体文件
轻量级纯CSS框架,11款最轻量级的CSS框架
weixin_33437929的博客
08-03 1737
日子一去不复返了HTML用于造型的网页。今天，CSS规则，很难想象没有它的任何网页设计。CSS在最近非常先进，用于创建复杂的Web设计和风格。那么，我们为什么要使用CSS框架？答案很简单。CSS框架主要包括预定义的书库，他们帮助你加快发展过程明显。无论你是开发Web应用程序，网站，甚至在CMS一样，WordPress的，这些框架会让你的生活更轻松。越来越多的开发商正在寻找CSS框架，小和轻。这些框...
推荐 10 款 CSS 框架，网页设计就是这么简单
TommyOnee
05-21 800
<br />程序开发人员和网页设计人员掐架的事情常有听说，程序员们总是为自己设计不出来漂亮的网页而纠结。不再郁闷，本文即将为你介绍10款相当不错的CSS框架。 <br /><br />1、CSS网页布局框架 Elastic<br /><br /> 简单的 CSS 框架，用于网页布局，可实现各种常见的网页布局，如下图所示：<br /><br /><br />2、(X)HTML/CSS 框架 ThinkCSS<br /><br /> TC (”ThinkCSS”) 是一个 (X)HTML/CSS 框架
政治参与css2017,CSS Snapshot 2017
weixin_30343429的博客
08-04 148
1.IntroductionWhen the first CSS specification was published,all of CSS was contained in one document that defined CSS Level 1.CSS Level 2 was defined also by a single, multi-chapter document.However ...
轻量纯css框架,网页设计的12个轻量CSS框架
weixin_30471581的博客
08-04 2348
By Jacob Gube你或许不需要用到Bootstrap这种大型UI框架的大部分功能，尤其当你想开发简单直接的项目，并期望越快跑起来越好。幸运的是，有小而快的CSS框架供你选择。使用一个小的CSS框架一般意味着更平缓的学习曲线，不依赖JavaScript功能，和更快的加载时间。我制作了一个优秀的小型/最小化的CSS框架让你是探索。它们大部分小于 5 KB(最小化和gzipped后)并包含用于...
帮我写一个远离校园贷的html和css框架
06-03
好的，为了帮助你远离校园贷，我为你设计了一个简单的 HTML 和 CSS 框架，供你参考。以下是代码： HTML: ``` <!DOCTYPE html> <title>Avoiding Campus Loans <link rel="stylesheet" href="style.css"> ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值