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）。分别是工具、基础、元素、组件、网格、布局。

学习的顺序是这样的：

1. 工具
2. 基础
3. 布局
4. 网格
5. 元素
6. 组件

二、六个部分

源码结构如下：

├─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 中定义的变量，主要作用：

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

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

// $desktop 在 variables.sass 中定义，如下：
// 960px container + 40px
// $desktop: 1000px !default

=desktop
  @media screen and (min- $desktop)
    @content

.container
  position: relative
  +desktop
    margin: 0 auto
     $desktop - 40px

被编译为

.container {
  position: relative; }
  @media screen and (min- 1000px) {
    .container {
      margin: 0 auto;
       960px; } }

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

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

.container {
  margin: 0 auto;
   960px; }

这些样式代码替代 @content 然后包含在 @media screen and (min- $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 重置 ）。主要有：

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

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

generic.sass 中的主要功能有：

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

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

1. 不同设备下的显示还是不显示。
2. 文字居中、居右和居左。
3. 左右中浮动
4. 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"

（完）