├── CHANGELOG.md
├── LICENSE.md
├── README.md
├── _griddle-build.scss
├── _griddle.scss
└── bower.json
/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | === HEAD
2 |
3 | === 0.3.0 (August 25, 2013)
4 |
5 | * Add `left` and `right` position modifiers for grids and cells.
6 | * Make the SCSS files partials so that they aren't compiled to CSS.
7 |
8 | === 0.2.2 (March 17, 2013)
9 |
10 | * Fix whitespace collapse in Chrome 25.
11 | * Minor code clarity improvements.
12 |
13 | === 0.2.1 (February 19, 2013)
14 |
15 | * Fix grid builder unit rule-consolidation
16 |
17 | === 0.2.0 (February 14, 2013)
18 |
19 | * Remove support for "push" classes.
20 | * Rename Griddle SCSS files.
21 | * Remove example files and compiled CSS.
22 | * Remove bash script.
23 | * Add CHANGELOG.
24 | * Add LICENSE.
25 |
26 | === 0.1.0 (May 08, 2012)
27 |
28 | * Initial release.
29 |
--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
1 | Copyright (c) Nicolas Gallagher
2 |
3 | Permission is hereby granted, free of charge, to any person obtaining a copy of
4 | this software and associated documentation files (the "Software"), to deal in
5 | the Software without restriction, including without limitation the rights to
6 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
7 | of the Software, and to permit persons to whom the Software is furnished to do
8 | so, subject to the following conditions:
9 |
10 | The above copyright notice and this permission notice shall be included in all
11 | copies or substantial portions of the Software.
12 |
13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
15 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
16 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
17 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
18 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
19 | SOFTWARE.
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Griddle
2 |
3 | 
4 |
5 | Griddle is a CSS grid system for modern browsers. It is generated from a set of
6 | Sass functions and mixins. The grid uses `inline-block` and `box-sizing` to
7 | provide features that float-based layouts cannot.
8 |
9 | [Project page](http://necolas.github.com/griddle/)
10 |
11 | [Contribution guidelines](https://github.com/necolas/issue-guidelines)
12 |
13 | ## Installation
14 |
15 | * Download: [zip](https://github.com/necolas/griddle/zipball/master)
16 | * [Bower](http://bower.io/): `bower install --save griddle`
17 | * Git: `git clone https://github.com/necolas/griddle.git`
18 |
19 | ## Features
20 |
21 | * Fluid layout.
22 | * Intelligent cell wrapping.
23 | * Horizontal centering of cells.
24 | * Custom vertical alignment of cells (top, bottom, or middle).
25 | * Cell width is controlled independently of grid gutter.
26 | * Infinite nesting.
27 | * Built-in redundancy coupled with automatic consolidation of rules in compiled
28 | CSS.
29 | * Modify the grid at different breakpoints for responsive layouts.
30 | * RTL support.
31 |
32 | ## How to use it
33 |
34 | The grid system is suitable whether or not you choose to develop "mobile
35 | first". Import `griddle` to "initialize" the grid at a given breakpoint.
36 |
37 | The `griddle-build()` mixin handles the generation of styles for grids. It can
38 | accept a space-separated list of integers, each of which results in the
39 | creation of a grid with that many parts. For example:
40 |
41 | ```scss
42 | @import "griddle";
43 | // Create 2, 3, and 4 column grids
44 | @include griddle-build(2 3 4);
45 | ```
46 |
47 | The mixin also accepts a string as a second (optional) argument. This can be
48 | used to generate modified selectors to override the width of a cell at
49 | different breakpoints. For example:
50 |
51 | ```scss
52 | @media (min-width: 40em) {
53 | // Create 2, 3, 4, 5, 6, and 12 column grids (wider screens)
54 | @include griddle-build(2 3 4 5 6 12, '--desktop');
55 | }
56 | ```
57 |
58 | Each grid cell is created in the same way, using HTML classes. You can have a
59 | cell that is 50% wide at narrow viewports, but 25% wide at wider viewports when
60 | the styles are applied to the modifier class:
61 |
62 | ```html
63 |
64 | ...
65 |
66 | ```
67 |
68 | Feel free to customize the default class name pattern to suit your personal
69 | preferences.
70 |
71 | ## Browser support
72 |
73 | * Google Chrome
74 | * Firefox
75 | * Safari
76 | * Opera
77 | * Internet Explorer 8+
78 |
79 | ## License
80 |
81 | MIT License
82 |
--------------------------------------------------------------------------------
/_griddle-build.scss:
--------------------------------------------------------------------------------
1 | // =============================================================================
2 | // Griddle functions
3 | // =============================================================================
4 |
5 | // Find the greatest common factor of two integers
6 |
7 | @function gcf($a, $b) {
8 | @if $b == 0 { @return $a; }
9 | @else { @return gcf($b, $a % $b); }
10 | }
11 |
12 | // Check if a list contains a value
13 |
14 | @function contains($list, $value) {
15 | @if type-of($list) == list { @return not not index($list, $value); }
16 | @else { @return $list == $value; }
17 | }
18 |
19 | // Fluid grid units
20 |
21 | // USAGE: provide a space-separated list of integers, each of which represents
22 | // the number of parts that make up a grid component. Optionally provide a
23 | // modifier suffix that can be used to adjust grids in different contexts (e.g.
24 | // viewport dimensions).
25 |
26 | @mixin griddle-build($units, $modifier: '') {
27 |
28 | /* Proportional units
29 | ========================================================================== */
30 |
31 | /*
32 | * Specify the proportional width of an object.
33 | * Primarily for, but not limited to, use with `.grid__cell` components.
34 | * Intentional redundancy build into each set of unit classes.
35 | */
36 |
37 | @each $n in $units {
38 | // Avoid creating rules like `.unit-12-12 {}`
39 | $x: $n - 1;
40 |
41 | @for $i from 1 through $x {
42 | // Initialize variables
43 | $i-r: 0;
44 | $n-r: 0;
45 |
46 | // Find the greatest common factor
47 | $g: gcf($i, $n);
48 |
49 | @if $g > 1 {
50 | // Reduced value of $i
51 | $i-r: $i/$g;
52 | // Reduced value of $n
53 | $n-r: $n/$g;
54 | }
55 |
56 | // Check if the reduced value of $n was also supplied in the list
57 | // of units to be built
58 | $canreduce: contains($units, $n-r);
59 |
60 | // Create units based on fractions
61 | .unit-#{$i}-#{$n}#{$modifier} {
62 | // If this unit can be reduced then extend the previous rule
63 | @if $canreduce {
64 | @extend .unit-#{$i-r}-#{$n-r}#{$modifier};
65 | }
66 | // Otherwise create a new % width
67 | @else {
68 | width: percentage($i / $n);
69 | }
70 | }
71 | }
72 | }
73 | }
74 |
75 |
--------------------------------------------------------------------------------
/_griddle.scss:
--------------------------------------------------------------------------------
1 | /* ==========================================================================
2 | Grid
3 | ========================================================================== */
4 |
5 | /*
6 | * Example uses:
7 | *
8 | *
9 | *
10 | *
11 | *
12 | *
13 | *