GitHub46。2kstars，这个CSS框架火了

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