1 |
87dbc3bf
|
Benjamin Luce
|
ABOUT zen-grids
|
2 |
|
|
---------------
|
3 |
|
|
|
4 |
|
|
Zen Grids is an intuitive, flexible grid system that leverages the natural
|
5 |
|
|
source order of your content to make it easier to create fluid responsive
|
6 |
|
|
designs. With an easy-to-use Sass mixin set, the Zen Grids system can be applied
|
7 |
|
|
to an infinite number of layouts, including responsive, adaptive, fluid and
|
8 |
|
|
fixed-width layouts.
|
9 |
|
|
|
10 |
|
|
More information can be found at http://zengrids.com
|
11 |
|
|
|
12 |
|
|
|
13 |
|
|
USAGE
|
14 |
|
|
-----
|
15 |
|
|
|
16 |
|
|
Here's a simple example: a content column with a sidebar on each side, aligned
|
17 |
|
|
to a 12 column grid.
|
18 |
|
|
|
19 |
|
|
@import "zen";
|
20 |
|
|
|
21 |
|
|
$zen-gutter-width: 40px; // Set the gutter size. A half-gutter is used on
|
22 |
|
|
// each side of each column.
|
23 |
|
|
|
24 |
|
|
.container {
|
25 |
|
|
@include zen-grid-container(); // Define the container for your grid items.
|
26 |
|
|
}
|
27 |
|
|
|
28 |
|
|
$zen-column-count: 12; // Set the number of grid columns to use in this media
|
29 |
|
|
// query. You'll likely want a different grid for
|
30 |
|
|
// different screen sizes.
|
31 |
|
|
|
32 |
|
|
@media all and (min-width: 50em) {
|
33 |
|
|
.sidebar1 {
|
34 |
|
|
@include zen-grid-item(3, 1); // Span 3 columns starting in 1st column.
|
35 |
|
|
}
|
36 |
|
|
.content {
|
37 |
|
|
@include zen-grid-item(6, 4); // Span 6 columns starting in 4th column.
|
38 |
|
|
}
|
39 |
|
|
.sidebar2 {
|
40 |
|
|
@include zen-grid-item(3, 10); // Span 3 columns starting in 10th column.
|
41 |
|
|
}
|
42 |
|
|
}
|
43 |
|
|
|
44 |
|
|
Within the .container element, the .sidebar1, .sidebar2 and .content elements
|
45 |
|
|
can be in any order.
|
46 |
|
|
|
47 |
|
|
Zen Grids has built-in support for the Box-sizing Polyfill which adds
|
48 |
|
|
"box-sizing: border-box" support to IE7 and earlier.
|
49 |
|
|
|
50 |
|
|
- Download the polyfill at https://github.com/Schepp/box-sizing-polyfill
|
51 |
|
|
- Place the boxsizing.htc file in your website.
|
52 |
|
|
- Set Zen Grids' $box-sizing-polyfill-path variable to the absolute path to the
|
53 |
|
|
boxsizing.htc file on your website. For example:
|
54 |
|
|
$box-sizing-polyfill-path: "/scripts/polyfills/boxsizing.htc";
|
55 |
|
|
|
56 |
|
|
|
57 |
|
|
INSTALLATION
|
58 |
|
|
------------
|
59 |
|
|
|
60 |
|
|
Zen grids is distributed as a Ruby Gem. On your computer, simply run:
|
61 |
|
|
|
62 |
|
|
sudo gem install zen-grids
|
63 |
|
|
|
64 |
|
|
If you are using Compass (and you should!) then you can add it to an existing
|
65 |
|
|
project by editing the project's configuration file, config.rb, and adding this
|
66 |
|
|
line:
|
67 |
|
|
|
68 |
|
|
require 'zen-grids'
|
69 |
|
|
|
70 |
|
|
You can then start using Zen Grids in your Sass files. Just add this line to one
|
71 |
|
|
of your .sass or .scss files and start creating!
|
72 |
|
|
|
73 |
|
|
@import "zen";
|
74 |
|
|
|
75 |
|
|
|
76 |
|
|
REQUIREMENTS
|
77 |
|
|
------------
|
78 |
|
|
|
79 |
|
|
- Sass 3.2 or later
|
80 |
|
|
|
81 |
|
|
For the zen/background module only:
|
82 |
|
|
- Compass 0.12 or later
|
83 |
|
|
|
84 |
|
|
|
85 |
|
|
LICENSE
|
86 |
|
|
-------
|
87 |
|
|
|
88 |
|
|
Available under the GPL v2 license. See LICENSE.txt. |