Gridism 开源项目教程

2024-08-22 10:34:01作者：郜逊炳

1. 项目的目录结构及介绍

Gridism 项目的目录结构相对简单，主要包含以下几个部分：

gridism/
├── _includes/
│   └── grid.html
├── _layouts/
│   └── default.html
├── css/
│   └── main.css
├── images/
│   └── grid.png
├── index.html
└── README.md

_includes/ 目录：包含项目的部分文件，如 grid.html 用于定义网格布局。
_layouts/ 目录：包含项目的布局文件，如 default.html 是默认的页面布局。
css/ 目录：包含项目的样式文件，如 main.css 是主要的样式表。
images/ 目录：包含项目的图片文件，如 grid.png 是网格示意图。
index.html 文件：项目的主页文件。
README.md 文件：项目的说明文档。

2. 项目的启动文件介绍

Gridism 项目的启动文件是 index.html。这个文件是项目的主页，包含了基本的 HTML 结构和链接到的样式表及布局文件。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Gridism</title>
  <link rel="stylesheet" href="css/main.css">
</head>
<body>
  <div class="container">
    {% include grid.html %}
  </div>
</body>
</html>

在这个文件中，通过 <link rel="stylesheet" href="css/main.css"> 引入了样式表，并通过 {% include grid.html %} 包含了网格布局的定义。

3. 项目的配置文件介绍

Gridism 项目没有明显的配置文件，其主要的配置和设置都分散在各个 HTML 和 CSS 文件中。例如，样式表 css/main.css 中定义了网格的样式和布局：

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

.grid {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -10px;
}

.grid__item {
  padding: 0 10px;
  box-sizing: border-box;
}