Mercurial > hg > mpiwgzen_wide

comparison sass-extensions/zen-grids/README.txt @ 0:a3750d724105 default tip

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
initital
author Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
date Tue, 02 Jun 2015 09:16:36 +0200
parents
children
comparison
equal deleted inserted replaced
-1:000000000000 0:a3750d724105
1 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.