Bulma 源码结构

源码基于 Bulma 0.4.0 版本。

一、入口文件 `bulma.sass`

bulma.sass 是 Bulma 使用 SASS 编译的入口文件。

sass bulma.sass css/bulma.css

bulma.sass 内容如下：

/*! bulma.io v0.4.0 | MIT License | github.com/jgthms/bulma */

@charset "utf-8"

@import "sass/utilities/_all"

@import "sass/base/_all"

@import "sass/elements/_all"

@import "sass/components/_all"

@import "sass/grid/_all"

@import "sass/layout/_all"

包含了 Bulma 框架的所有 6 个子部分的入口文件（_all.sass）。分别是工具、基础、元素、组件、网格、布局。

学习的顺序是这样的：

工具
基础
布局
网格
元素
组件

二、六个部分

源码结构如下：

├─base 基础

│      **generic.sass**

│      **helpers.sass**

│      **minireset.sass**

│      _all.sass

│

├─components 组件

│      card.sass

│      level.sass

│      media.sass

│      menu.sass

│      message.sass

│      modal.sass

│      **nav.sass**

│      pagination.sass

│      panel.sass

│      tabs.sass

│      _all.sass

│

├─elements 元素

│      **box.sass**

│      button.sass

│      content.sass

│      form.sass

│      icon.sass

│      image.sass

│      notification.sass

│      other.sass

│      progress.sass

│      table.sass

│      tag.sass

│      title.sass

│      _all.sass

│

├─grid 网格系统

│      **columns.sass**

│      tiles.sass

│      _all.sass

│

├─layout 布局

│      footer.sass

│      **hero.sass**

│      section.sass

│      _all.sass

│

└─utilities 工具

        controls.sass

        **functions.sass**

        **mixins.sass**

        **variables.sass**

        _all.sass

文件树中加粗的部分是以后重点叙述的。源码被分在了 6 个部分，放在 6 个子文件夹里。每个子文件里都有 _all.sass——每个部分的入口文件。

2.1 `utilities/_all`

@charset "utf-8"

@import "functions.sass"

@import "variables.sass"

@import "mixins.sass"

@import "controls.sass"

一共有四个工具文件，分别是函数、变量和混合（Mixin）。controls.sass 中定义是控制类样式的混合（Mixin）。

functions.sass 仅有一个方法 findColorInvert($color)，作用是基于颜色的亮度，返回 70% 透明黑色或 100% 不透明白色。仅在 variables.sass 中计算 Inverse 颜色使用。

variables.sass 中定义的变量，主要作用：

颜色变量
文字大小、粗细、字体变量
几种不同设备的宽度（769px、1000px、1192px 和 1384px，分别对应平板、桌面、宽屏、大屏）。

mixins.sass 中定义了混合，其中重要的应用就是媒体查询了。

// $desktop 在 variables.sass 中定义，如下：

// 960px container + 40px

// $desktop: 1000px !default

=desktop

  @media screen and (min-width: $desktop)

    @content

.container

  position: relative

  +desktop

    margin: 0 auto

    width: $desktop - 40px

被编译为

.container {

  position: relative; }

  @media screen and (min-width: 1000px) {

    .container {

      margin: 0 auto;

      width: 960px; } }

这段代码的意思是，设置 .container 元素在桌面环境（desktop）下的宽度，并且居中显示。

注意到 @content 内容是去掉与 +desktop 同级样式后包含父级元素的所有样式代码：

.container {

  margin: 0 auto;

  width: 960px; }

这些样式代码替代 @content 然后包含在 @media screen and (min-width: $desktop) 中就是最后得到的代码了。而 =desktop 只是中间媒介。

controls.sass 中也是 Mixin，这里不说了。

2.2 `base/_all`

@charset "utf-8"

@import "minireset.sass"

@import "generic.sass"

@import "helpers.sass"

minireset.sass 是为了统一 HTML 标签在各浏览器渲染样式（通过 CSS 重置）。主要有：

规范盒模型：box-sizing: border-box。
规范媒体元素行为：height: auto、max-width: 100%。
合并表格边框：border-collapse: collapse、border-spacing: 0。
几乎所有 Block 元素：margin: 0 和 padding: 0。

generic.sass 与 minireset.sass 一点区别是：generic.sass 使用了 variables.sass 中定义的变量，但是 minireset.sass 中没有。

generic.sass 中的主要功能有：

设置字体。
设置页面背景色、<code>、<pre> 的背景色。
文字、链接（包含 :hover 状态下的）颜色。
<code>、<pre> 的 font-size、padding和 <hr> 的 margin。

helpers.sass 提供了一系列辅助类，包括：

不同设备下的显示还是不显示。
文字居中、居右和居左。
左右中浮动
display 属性设置辅助类

2.3 `elements/_all`

元素

@charset "utf-8"

@import "box.sass"

@import "button.sass"

@import "content.sass"

@import "form.sass"

@import "icon.sass"

@import "image.sass"

@import "notification.sass"

@import "progress.sass"

@import "table.sass"

@import "tag.sass"

@import "title.sass"

@import "other.sass"

2.4 `components/_all`

组件

@charset "utf-8"

@import "card.sass"

@import "level.sass"

@import "media.sass"

@import "menu.sass"

@import "message.sass"

@import "modal.sass"

@import "nav.sass"

@import "pagination.sass"

@import "panel.sass"

@import "tabs.sass"

2.5 `grid/_all`

网格系统

@charset "utf-8"

@import "columns.sass"

@import "tiles.sass"

2.6 `layout/_all`

布局

@charset "utf-8"

@import "hero.sass"

@import "section.sass"

@import "footer.sass"

（完）