高度可定制的响应式 (S)CSS网格。(A highly-customizable, responsive (S)CSS grid.)
Toast 框架是一个网格而已。 很快，它可能有类型样式，而且它的功能在于其高度可定制的设计。
设置任意数量的列，所需的任何 gutter 大小，以及您需要的任何类。 只需编辑_grid.scss文件的变量即可。
你也应该知道，你会疯狂地使用Toast的网格。
<link rel ="stylesheet"href ="css /toast /grid.css">
然后，要使用网格，您将需要一个wrap（在您自己的CSS中提供）和.grid容器。
<div class="container"> <div class="grid"> <div class="grid__col grid__col--1-of-4"> </div> <div class="grid__col grid__col--3-of-4"> </div> <div class="grid__col grid__col--6-of-12"> </div> </div></div>
| 名称与所有者 | daneden/Toast |
|---|---|
| 主编程语言 | CSS |
| 编程语言 | CSS (语言数: 1) |
| 平台 | |
| 许可证 | MIT License |
| 创建于 | 2011-11-21 13:22:45 |
|---|---|
| 推送于 | 2018-12-15 20:22:20 |
| 最后一次提交 | 2015-07-21 09:41:17 |
| 发布数 | 2 |
| 最新版本名称 | 1.1.0 (发布于 2016-02-02 16:29:54) |
| 第一版名称 | 1.0.0 (发布于 2014-08-07 11:48:18) |
| 星数 | 2k |
|---|---|
| 关注者数 | 93 |
| 派生数 | 264 |
| 提交数 | 45 |
| 已启用问题? | |
| 问题数 | 42 |
| 打开的问题数 | 10 |
| 拉请求数 | 7 |
| 打开的拉请求数 | 2 |
| 关闭的拉请求数 | 6 |
| 已启用Wiki? | |
|---|---|
| 已存档? | |
| 是复刻? | |
| 已锁定? | |
| 是镜像? | |
| 是私有? |
The Toast framework is a grid. That's it. Soon, it might have type styles and whatnot, but its power is in its highly customisable design.
Set any number of columns, any gutter size you want, and whatever classes you need. Just edit the _grid.scss file’s variables to your needs.
You should also know that you’d be insane to use Toast’s grid.
To learn more, go to http://daneden.github.io/Toast
Using Toast is easy. First, link to grid.css in your HTML document's head:
<link rel="stylesheet" href="css/toast/grid.css">
Then, to use the grid, you'll need a wrap (provided in your own CSS) and a .grid container.
<div class="container">
<div class="grid">
<div class="grid__col grid__col--1-of-4">
</div>
<div class="grid__col grid__col--3-of-4">
</div>
<div class="grid__col grid__col--6-of-12">
</div>
</div>
</div>
$toast-grid-namespace and $toast-grid-column-namespace adjusts the class names for the grid. With default values, grid wrappers have a class of .grid and columns .grid__col.
$toast-col-groups(n) adjusts column divisions. For example, $toast-col-groups(12) will produce a 12-column grid. $toast-col-groups(3,6,8) will produce a 3-, 6-, and 8-column grid.
$toast-gutter-width is—you guessed it—the gutter
width. Accepts any unit.
$toast-breakpoint-medium and $toast-breakpoint-small are breakpoint placeholders. Columns have hooks to change their behaviour under these breakpoints. See the “Modifiers” section below.
Toast has some modifiers to make different kinds of layouts easier. There are breakpoint hooks to have columns behave differently than their default behaviour under breakpoints:
<div class="grid">
<div class="grid__col--1-of-3 grid__col--m-1-of-2 grid__col--s-1-of-2 grid__col">
This column will behave like a 1-of-2 column under the medium breakpoint and the small breakpoint.
</div>
<div class="grid__col--1-of-3 grid__col--ab grid__col">
This column aligns to the bottom of its row.
</div>
<div class="grid__col--1-of-3 grid__col--am grid__col">
This column aligns to the middle of its row.
</div>
<div class="grid__col--3-of-5 grid__col--centered grid__col">
This column is centered and alone in its row.
</div>
<div class="grid__col--1-of-2 grid__col--d-last grid__col">
This column comes first in the DOM, but appears last in its row.
</div>
<div class="grid__col--1-of-2 grid__col--d-first grid__col">
This column appears last in the DOM, but appears first in its row.
</div>
</div>
That’s it. Have fun.