GitHub 46.2k stars，这个CSS框架火了
《开源精选》是我们分享Github、Gitee等开源社区中优质项目的栏目，包括技术、学习、实用与各种有趣的内容。本期推荐的 Bulma 是一个基于Flexbox的现代 CSS 框架。
Bulma 是一个CSS 库。这意味着它提供了 CSS 类来帮助您设置 HTML 代码的样式。
要使用 Bulma，您可以使用预编译.css文件或安装.sass文件，以便根据需要对其进行自定义。安装
NPM
npm install bulmaYarn
yarn add bulmaBower
bower install bulma规范要求
为了使 Bulma 正常工作，您需要使您的网页具有响应性。
使用HTML5 文档类型
<!DOCTYPE html>添加响应式视口元标记
<meta name="viewport" content="width=device-width, initial-scale=1">入门模板
如果您想马上开始，您可以使用这个HTML 入门模板。只需将此代码复制/粘贴到文件中并将其保存在您的计算机上。
<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Hello Bulma!</title><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css"></head><body><section class="section"><div class="container"><h1 class="title">Hello World</h1><p class="subtitle">My first website with <strong>Bulma</strong>!</p></div></section></body></html>模块化
Bulma 包含39 个 .sass可以单独导入的文件。
例如，假设您只想要 Bulma列。
该文件位于bulma/sass/grid文件夹中。
只需导入实用程序依赖项，然后直接导入您需要的文件：@import "bulma/sass/utilities/_all.sass"@import "bulma/sass/grid/columns.sass"现在您可以直接使用类.columns（用于容器）.column：
<div class="columns"><div class="column">1</div><div class="column">2</div><div class="column">3</div><div class="column">4</div><div class="column">5</div></div>如果您只想要按钮样式怎么办？
@import "bulma/sass/utilities/_all.sass"@import "bulma/sass/elements/button.sass"实用程序
元素混合
这些 mixin 创建了一个可视化的HTML 元素。
arrow()mixin 会创建一个向下的箭头 。该$color参数定义箭头的颜色。
.bulma-arrow-mixin {@include arrow(purple);}<span class="bulma-arrow-mixin"></span>删除
delete()mixin 创建了一个 20x20px 的圆圈，其中包含 一个cross。它带有 3 个修饰符is-small：is-medium和is-large.
.bulma-delete-mixin {@include delete;}<button class="bulma-delete-mixin is-small"></button><button class="bulma-delete-mixin"></button><button class="bulma-delete-mixin is-medium"></button><button class="bulma-delete-mixin is-large"></button>覆盖
overlay()mixin 使元素覆盖其最近的定位。
该$offset参数定义元素内部距离每个边缘（顶部、底部、左侧和右侧）的距离。.bulma-overlay-mixin {@include overlay(1.5rem);background-color: darkorange;border-radius: 0.25em;color: white;opacity: 0.9;padding: 1em;}<div class="bulma-overlay-mixin-parent"><div class="bulma-overlay-mixin">Overlay element</div></div>中心
mixin 允许您将具有固定尺寸center()的元素绝对定位在其最近定位的祖先的中心。 该参数的值应该是应用 mixin 的元素的宽度。 除非元素具有方形尺寸，否则第二个参数是必需的，其值应该是应用 mixin 的元素的高度。
.bulma-center-mixin {@include center;}<div class="bulma-center-mixin-parent"><img class="bulma-center-mixin" height="96" width="96" src="https://source.unsplash.com/mEZ3PoFGs_k/192x192"></div>—END—
开源协议：MIT license
开源地址：https://github.com/jgthms/bulma
本文系作者 @河马 原创发布在河马博客站点。未经许可，禁止转载。
暂无评论数据