Pico.css|Pico.css - 简单优雅的纯 CSS 开源 UI 框架,用原始的 HTML 元素标签来做界面
文章图片
不同浏览器对网页默认的组件解析样式不一致,而且不够美观,网页样式开发需要大量时间,今天介绍一款优雅的 CSS 框架。
关于 Pico.css
Pico.css 是一个简单轻量化的 CSS UI 框架,最大的特点是样式都基于 HMTL 原始的标签名和内置的属性,少用甚至是不用 class 来定义样式,写出来的代码语义清晰,可维护性强,能够帮助开发者构建自己的 UI 系统,也可以直接用于快速的小型项目中。
文章图片
截止发文日期,Pico.css 在 Github 上已经有高达 3898 个 Star。
Pico.css 框架的特点
- 去 class 以及原生语义化的代码。Pico.css 尽可能使用原生的 HTML 元素的标签名称来定义样式,整个框架使用的 class 名称不到10个
- 纯 CSS 实现。所有组件都由一个 10KB(压缩后)的 CSS 文件实现,无包管理,没有依赖和外部文件,甚至连 javascript 代码都没有
- 响应式布局。内置响应式的栅格系统,在 PC / 手机 / 平板等不同屏幕大小的设备上排版美观一致
- 支持深色主题。附带两个漂亮的颜色主题,根据用户喜好一键启用
引入 Pico.css 最简单直接的方式就是下载后直接引入一个样式文件:
![Pico.css|Pico.css - 简单优雅的纯 CSS 开源 UI 框架,用原始的 HTML 元素标签来做界面](https://img.it610.com/image/info9/7db178bc29a242db895ade6cac3e17db.jpg)
文章图片
当然也可以通过 npm 安装:
![Pico.css|Pico.css - 简单优雅的纯 CSS 开源 UI 框架,用原始的 HTML 元素标签来做界面](https://img.it610.com/image/info9/f7d931b4f0dd4ec5b7ba90ef26c0095a.jpg)
文章图片
然后就可以编写 html 代码了。
想要做一个输入框和提交表单,往往需要这样的代码:
![Pico.css|Pico.css - 简单优雅的纯 CSS 开源 UI 框架,用原始的 HTML 元素标签来做界面](https://img.it610.com/image/info9/f1823072473548dfa1047b19f91e1b7c.jpg)
文章图片
而使用 Pico.css,只需要:
![Pico.css|Pico.css - 简单优雅的纯 CSS 开源 UI 框架,用原始的 HTML 元素标签来做界面](https://img.it610.com/image/info9/f29f0141acb94cffa0d54e266b8101f2.jpg)
文章图片
Pico.css 内置了很多基础的组件,包括常用表单控件、表格、弹窗、导航菜单、卡片等,代码非常简洁,比如实现一个美观的进度条,只需要这点代码:
![Pico.css|Pico.css - 简单优雅的纯 CSS 开源 UI 框架,用原始的 HTML 元素标签来做界面](https://img.it610.com/image/info9/33480bd89b574a0a8e13268064f45eba.jpg)
文章图片
Pico.css 内置了浅色和深色两套主题,使用方法非常简单,给父级元素添加属性data-theme。
![Pico.css|Pico.css - 简单优雅的纯 CSS 开源 UI 框架,用原始的 HTML 元素标签来做界面](https://img.it610.com/image/info9/e803859ab6804843a2d632d035ab23dd.jpg)
文章图片
官网还有很多代码例子,比如编写一个美观大气的登录界面,html 代码十分简洁,仿佛回到了刚刚开始学习 html 语法的时代。
![Pico.css|Pico.css - 简单优雅的纯 CSS 开源 UI 框架,用原始的 HTML 元素标签来做界面](https://img.it610.com/image/info9/32e74870d8b6447a91a184b03dab1435.jpg)
文章图片
通过 CSS 文件的源码,可以看到样式的选择器大多通过 HTML 元素标签名、内置的属性以及自定义属性来命中,这样就规避了常规的只使用 class 来区分的“命名地狱”,是一种非常好的网页编程思路。
![Pico.css|Pico.css - 简单优雅的纯 CSS 开源 UI 框架,用原始的 HTML 元素标签来做界面](https://img.it610.com/image/info9/1263339faba445b089be07afd1dff29d.jpg)
文章图片
面向对纯粹 HTML 有极致追求的开发者,Pico.css 还提供了 classless 版本,这个版本将一个 class 都没有,完全使用元素标签名和属性编写网页。
使用 Pico.css 的原因
在项目中使用 Pico.css 源自于一次快速的营销页需求,需要做简单的几个带有输入交互的页面,使用 bootstrap 这样庞大的框架显然有点笨重了,如果使用当前流行的能够按需引入的 Vue UI 组件库,又免不了要用 Vue.js 来工程化。只是做几个简单的页面,没有必要用中大型项目的标配,考虑到目前市面上大多数 UI 框架都过度封装,堆叠了很多包含各种语义的 class 名,不仅会让页面加载变慢,而且会导致更长的样式计算时间,最终还是找到了适合这样场景的 Pico.css。
css 样式的写法很自由,目前前端开发存在一个趋势,为了做精美的界面,需要花费大量的时间来写样式,为了样式可以复用,绞尽脑汁给 class 起名字,甚至网上还有各种 class 命名规范,这可能导致了大量的样式被覆盖,很多时候 class 属性的名称,甚至比样式的代码还要多,极难维护。
Pico.css 的出现给这样的开发现状提供了一种新思路,不仅可以直接用在实际项目中,也能够作为构建自己的 UI 库的基础样式。
免费开源说明
Pico.css 是一个免费开源的项目,源码基于 MIT 开源协议托管在 Github 上,任何个人和公司都可以免费下载使用。
【Pico.css|Pico.css - 简单优雅的纯 CSS 开源 UI 框架,用原始的 HTML 元素标签来做界面】相关网址:https://www.thosefree.com/pic...
推荐阅读
- ASF|ASF 孵化器导师姜宁(开源不是简单的代码开放,是依托项目构建一个共同体)
- 在Qt程序中如何优雅地实现线程切换
- SpringBoot|SpringBoot 实现 excel 全自由导入导出,性能强的离谱,用起来还特优雅
- 前后端分离|前后端分离 --- 深入浅出Spring Boot + Vue实现员工管理系统 Vue如此简单~
- 前端|一个简单炫酷的前端小项目(html+css+js)----3D图片演示
- 如何优雅的修改node_modules中的依赖库
- C语言实现简单的猜数字游戏
- Vue实现简单选项卡效果
- 封装React|封装React Hook函数useState实现更优雅的setValue
- DBCHM|DBCHM -最简单、最实用的数据库文档生成工具