compass-griddle 0.1.0 → 0.2.0
Sign up to get free protection for your applications and to get access to all the features.
data/stylesheets/_griddle.scss
CHANGED
@@ -1,2 +1 @@
|
|
1
|
-
@import "griddle/
|
2
|
-
@import "griddle/grid-core";
|
1
|
+
@import "griddle/base";
|
@@ -1,4 +1,4 @@
|
|
1
|
-
/*
|
1
|
+
/* ==========================================================================
|
2
2
|
Grid
|
3
3
|
========================================================================== */
|
4
4
|
|
@@ -18,34 +18,42 @@
|
|
18
18
|
* </div>
|
19
19
|
*/
|
20
20
|
|
21
|
+
@import "griddle-build";
|
22
|
+
|
23
|
+
$grid-direction: left !default; // switch to 'right' for rtl
|
24
|
+
$grid-gutter: 20px !default; // can be px, em, or %
|
25
|
+
|
26
|
+
|
21
27
|
/* Grid core
|
22
28
|
========================================================================== */
|
23
29
|
|
24
|
-
|
30
|
+
/**
|
25
31
|
* Grid container
|
26
32
|
* Must only contain `.grid` or `.grid__cell` components as children.
|
33
|
+
*
|
34
|
+
* 1. Adjustment for child element margins.
|
35
|
+
* 2. Ensure consistent default alignment/
|
36
|
+
* 3. Remove inter-unit whitespace that appears between `inline-block` child
|
37
|
+
* elements. Work for all non-monospace font-families. If you're using a
|
38
|
+
* monospace base font, you will need to set the `grid` font-family to
|
39
|
+
* `sans-serif` and then redeclare the monospace font on the `grid__cell`
|
40
|
+
* objects.
|
41
|
+
* 4. Protect against WebKit bug with optimizelegibility.
|
27
42
|
*/
|
28
43
|
|
29
44
|
.grid {
|
30
45
|
display: block;
|
31
46
|
padding: 0;
|
32
|
-
margin: 0 -0.5 * $grid-gutter;
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
* font-family to `sans-serif` and then redeclare the monospace font on
|
38
|
-
* the `grid__cell` objects.
|
39
|
-
*/
|
40
|
-
letter-spacing: -0.31em;
|
41
|
-
word-spacing: -0.43em;
|
42
|
-
/* Protect against WebKit bug with optimizelegibility */
|
43
|
-
text-rendering: optimizespeed;
|
47
|
+
margin: 0 -0.5 * $grid-gutter; /* 1 */
|
48
|
+
text-align: $grid-direction; /* 2 */
|
49
|
+
letter-spacing: -0.31em; /* 3 */
|
50
|
+
word-spacing: -0.43em; /* 3 */
|
51
|
+
text-rendering: optimizespeed; /* 4 */
|
44
52
|
}
|
45
53
|
|
46
|
-
|
54
|
+
/**
|
47
55
|
* Child `grid` object adjustments
|
48
|
-
* Used for more complex fixed-fluid hybrid grids
|
56
|
+
* Used for more complex fixed-fluid hybrid grids.
|
49
57
|
*/
|
50
58
|
|
51
59
|
.grid > .grid {
|
@@ -54,28 +62,32 @@
|
|
54
62
|
margin-left: 0;
|
55
63
|
}
|
56
64
|
|
57
|
-
|
65
|
+
/**
|
58
66
|
* Grid units
|
59
67
|
* No explicit width by default. Apply `.unit-x-y` classes.
|
68
|
+
*
|
69
|
+
* 1. Fundamentals of the non-float grid layout mechanism.
|
70
|
+
* 2. Apply grid gutter.
|
71
|
+
* 3. Controls vertical positioning of units.
|
72
|
+
* 4. Keeps content correctly aligned with the grid direction.
|
73
|
+
* 5. Reset text defaults.
|
60
74
|
*/
|
61
75
|
|
62
76
|
.grid__cell {
|
77
|
+
-moz-box-sizing: border-box;
|
78
|
+
box-sizing: border-box;
|
63
79
|
width: 100%;
|
64
|
-
display: inline-block;
|
65
|
-
@include box-sizing(border-box);
|
80
|
+
display: inline-block; /* 1 */
|
66
81
|
margin: 0;
|
67
|
-
padding: 0 0.5 * $grid-gutter;
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
|
72
|
-
|
73
|
-
letter-spacing: normal;
|
74
|
-
word-spacing: normal;
|
75
|
-
text-rendering: auto;
|
82
|
+
padding: 0 0.5 * $grid-gutter; /* 2 */
|
83
|
+
vertical-align: top; /* 3 */
|
84
|
+
text-align: $grid-direction; /* 4 */
|
85
|
+
letter-spacing: normal; /* 5 */
|
86
|
+
word-spacing: normal; /* 5 */
|
87
|
+
text-rendering: auto; /* 5 */
|
76
88
|
}
|
77
89
|
|
78
|
-
|
90
|
+
/**
|
79
91
|
* Modifier: horizontally center all grid units
|
80
92
|
* Allows for automatic unit centering irrespective of the number of
|
81
93
|
* units in the grid.
|
@@ -85,7 +97,7 @@
|
|
85
97
|
text-align: center;
|
86
98
|
}
|
87
99
|
|
88
|
-
|
100
|
+
/**
|
89
101
|
* Modifier: horizontally center one unit
|
90
102
|
* Set a specific unit to be horizontally centered. Doesn't affect
|
91
103
|
* any other units. Can still contain a child `grid` object.
|
@@ -0,0 +1,73 @@
|
|
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 & offsets
|
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
|
+
// Initialize variables
|
41
|
+
$i-r: ();
|
42
|
+
$n-r: ();
|
43
|
+
|
44
|
+
@for $i from 1 through $x {
|
45
|
+
// Find the greatest common factor
|
46
|
+
$g: gcf($i, $n);
|
47
|
+
|
48
|
+
@if $g > 1 {
|
49
|
+
// Reduced value of $i
|
50
|
+
$i-r: $i/$g;
|
51
|
+
// Reduced value of $n
|
52
|
+
$n-r: $n/$g;
|
53
|
+
}
|
54
|
+
|
55
|
+
// Check if the reduced value of $n was also supplied in the list
|
56
|
+
// of units to be built
|
57
|
+
$canreduce: contains($units, $n-r);
|
58
|
+
|
59
|
+
// Create units based on fractions
|
60
|
+
.unit-#{$i}-#{$n}#{$modifier} {
|
61
|
+
// Ff this unit can be reduced then extend the previous rule
|
62
|
+
@if $i-r and $canreduce {
|
63
|
+
@extend .unit-#{$i-r}-#{$n-r}#{$modifier};
|
64
|
+
}
|
65
|
+
// Otherwise create a new % width
|
66
|
+
@else {
|
67
|
+
width: percentage($i / $n);
|
68
|
+
}
|
69
|
+
}
|
70
|
+
}
|
71
|
+
}
|
72
|
+
}
|
73
|
+
|
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: compass-griddle
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.
|
4
|
+
version: 0.2.0
|
5
5
|
prerelease:
|
6
6
|
platform: ruby
|
7
7
|
authors:
|
@@ -9,7 +9,7 @@ authors:
|
|
9
9
|
autorequire:
|
10
10
|
bindir: bin
|
11
11
|
cert_chain: []
|
12
|
-
date:
|
12
|
+
date: 2013-02-14 00:00:00.000000000 Z
|
13
13
|
dependencies:
|
14
14
|
- !ruby/object:Gem::Dependency
|
15
15
|
name: compass
|
@@ -36,8 +36,8 @@ extra_rdoc_files: []
|
|
36
36
|
files:
|
37
37
|
- README.md
|
38
38
|
- lib/griddle.rb
|
39
|
-
- stylesheets/griddle/
|
40
|
-
- stylesheets/griddle/
|
39
|
+
- stylesheets/griddle/_base.scss
|
40
|
+
- stylesheets/griddle/_griddle-build.scss
|
41
41
|
- stylesheets/_griddle.scss
|
42
42
|
homepage: https://github.com/leonderijke/compass-griddle
|
43
43
|
licenses: []
|
@@ -1,117 +0,0 @@
|
|
1
|
-
// =============================================================================
|
2
|
-
// Variables, Mixins, and Functions
|
3
|
-
// =============================================================================
|
4
|
-
|
5
|
-
// Variables
|
6
|
-
// =============================================================================
|
7
|
-
|
8
|
-
$grid-direction:left !default; // switch to 'right' for rtl
|
9
|
-
$grid-gutter:20px !default; // can be px, em, or %
|
10
|
-
|
11
|
-
// Functions
|
12
|
-
// =============================================================================
|
13
|
-
|
14
|
-
// Find the greatest common factor
|
15
|
-
// of two integers
|
16
|
-
@function gcf($a, $b) {
|
17
|
-
@if $b == 0 {
|
18
|
-
@return $a;
|
19
|
-
}
|
20
|
-
@else {
|
21
|
-
@return gcf($b, $a % $b)
|
22
|
-
}
|
23
|
-
}
|
24
|
-
|
25
|
-
// Check if a list contains a value
|
26
|
-
@function contains($list, $value) {
|
27
|
-
@if type-of($list) == list {
|
28
|
-
@return not not index($list, $value);
|
29
|
-
}
|
30
|
-
@else {
|
31
|
-
@return $list == $value;
|
32
|
-
}
|
33
|
-
}
|
34
|
-
|
35
|
-
|
36
|
-
// Mixins
|
37
|
-
// =============================================================================
|
38
|
-
|
39
|
-
@mixin box-sizing ($box) {
|
40
|
-
-webkit-box-sizing: $box;
|
41
|
-
-moz-box-sizing: $box;
|
42
|
-
box-sizing: $box;
|
43
|
-
}
|
44
|
-
|
45
|
-
// Fluid grid units & offsets
|
46
|
-
|
47
|
-
// USAGE: provide a space-separated list of integers, each of which represents
|
48
|
-
// the number of parts that make up a grid component. Optionally provide a
|
49
|
-
// modifier suffix that can be used to adjust grids in different contexts (e.g.
|
50
|
-
// viewport dimensions)
|
51
|
-
|
52
|
-
// TODO: work out how to combine rules for numbers that share a greatest common
|
53
|
-
// factor without the unit-list actually containing the fraction to which they
|
54
|
-
// can both be reduced.
|
55
|
-
|
56
|
-
@mixin grid-build-units($units, $modifier: '') {
|
57
|
-
/* Proportional units
|
58
|
-
========================================================================== */
|
59
|
-
|
60
|
-
/*
|
61
|
-
* Specify the proportional width of an object.
|
62
|
-
* Primarily for, but not limited to, use with `.grid__cell` components.
|
63
|
-
* Intentional redundancy build into each set of unit classes.
|
64
|
-
*/
|
65
|
-
|
66
|
-
// step through each value in the list of units
|
67
|
-
@each $n in $units {
|
68
|
-
// this means we can avoid creating rules like `.unit-12-12 {}`
|
69
|
-
$x: $n - 1;
|
70
|
-
|
71
|
-
@for $i from 1 through $x {
|
72
|
-
// find the greatest common factor
|
73
|
-
$g: gcf($i, $n);
|
74
|
-
// initialize variables
|
75
|
-
$i-r: ();
|
76
|
-
$n-r: ();
|
77
|
-
|
78
|
-
@if $g > 1 {
|
79
|
-
// reduced value of $i
|
80
|
-
$i-r: $i/$g;
|
81
|
-
// reduced value of $n
|
82
|
-
$n-r: $n/$g;
|
83
|
-
}
|
84
|
-
|
85
|
-
// check if the reduced value of $n was also supplied
|
86
|
-
// in the list of units to be built
|
87
|
-
$canreduce: contains($units, $n-r);
|
88
|
-
|
89
|
-
// create units based on fractions
|
90
|
-
.unit-#{$i}-#{$n}#{$modifier} {
|
91
|
-
// if this unit can be reduced
|
92
|
-
// then extend the previous rule
|
93
|
-
@if $i-r and $canreduce {
|
94
|
-
@extend .unit-#{$i-r}-#{$n-r}#{$modifier};
|
95
|
-
}
|
96
|
-
// otherwise create a new % width
|
97
|
-
@else {
|
98
|
-
width: percentage($i / $n);
|
99
|
-
}
|
100
|
-
}
|
101
|
-
|
102
|
-
// create unit offsets based on fractions
|
103
|
-
.before-#{$i}-#{$n}#{$modifier} {
|
104
|
-
// if this offset can be reduced
|
105
|
-
// then extend the previous rule
|
106
|
-
@if $i-r and $canreduce {
|
107
|
-
@extend .before-#{$i-r}-#{$n-r}#{$modifier};
|
108
|
-
}
|
109
|
-
// otherwise create a new % margin
|
110
|
-
@else {
|
111
|
-
margin-#{$grid-direction}: percentage($i / $n);
|
112
|
-
}
|
113
|
-
}
|
114
|
-
}
|
115
|
-
}
|
116
|
-
}
|
117
|
-
|