grid-coordinates 1.0.8 → 1.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- data/README.mdown +22 -2
- data/VERSION +1 -1
- data/lib/grid-coordinates.rb +1 -1
- data/stylesheets/_grid-coordinates.sass +48 -29
- data/stylesheets/_grid-coordinates.scss +38 -18
- data/templates/project/index.haml +10 -16
- data/templates/project/screen.css +274 -121
- data/templates/project/screen.sass +20 -44
- metadata +3 -3
data/README.mdown
CHANGED
@@ -22,16 +22,36 @@ See `templates/project/screen.sass` for an example.
|
|
22
22
|
|
23
23
|
// Configure grid coordinates
|
24
24
|
$grid-columns: 12 !default
|
25
|
-
$grid-
|
25
|
+
$grid-width: 60px !default
|
26
26
|
$grid-gutter-width: 20px !default
|
27
|
+
$overflow-allowed: false !default
|
27
28
|
|
28
29
|
@import grid-coordinates
|
29
30
|
|
31
|
+
// Only needed if you're using the classes instead of the mixins
|
30
32
|
@include grid-coordinates
|
31
33
|
|
32
34
|
...
|
33
35
|
|
34
|
-
|
36
|
+
The `$overflow-allowed` setting controls which of Compass' two clearfix mixins is used. The default setting, false, will clip any content that overflows a grid block. If you need overflowing content to remain visible (i.e., a drop-down menu inside a grid block) change this setting the true.
|
37
|
+
|
38
|
+
### Using the Mixins
|
39
|
+
|
40
|
+
Use these mixins in your Sass stylesheets. For an example of this in use, see `templates/project`.
|
41
|
+
|
42
|
+
`@include grid-container`
|
43
|
+
|
44
|
+
`@include nested-grid-container`
|
45
|
+
|
46
|
+
`@include grid(4)`
|
47
|
+
|
48
|
+
`@include grid-prefix(4)`
|
49
|
+
|
50
|
+
`@include grid-suffix(4)`
|
51
|
+
|
52
|
+
`@include grid-full`
|
53
|
+
|
54
|
+
### Using the Classes
|
35
55
|
|
36
56
|
Use the extend classes in your HTML or use them to extend in your Sass stylesheets. For an example of this in use, see `templates/project`.
|
37
57
|
|
data/VERSION
CHANGED
@@ -1 +1 @@
|
|
1
|
-
1.0
|
1
|
+
1.1.0
|
data/lib/grid-coordinates.rb
CHANGED
@@ -4,56 +4,75 @@
|
|
4
4
|
$grid-columns: 12 !default
|
5
5
|
$grid-width: 60px !default
|
6
6
|
$grid-gutter-width: 20px !default
|
7
|
+
$overflow-allowed: false !default
|
7
8
|
|
8
|
-
|
9
|
-
/*
|
10
|
-
Grid-Coordinates by Adam Stacoviak
|
11
|
-
Fork me: http://adamstac.com/grid-coordinates */
|
9
|
+
=grid-coordinates
|
12
10
|
.grid-container
|
13
|
-
|
14
|
-
overflow: hidden
|
15
|
-
width: ($grid-columns * $grid-width) + ($grid-columns * $grid-gutter-width)
|
11
|
+
+grid-container
|
16
12
|
.nested-grid-container
|
17
|
-
|
18
|
-
margin:
|
19
|
-
left: -$grid-gutter-width / 2
|
20
|
-
right: -$grid-gutter-width / 2
|
21
|
-
overflow: hidden
|
22
|
-
width: auto
|
13
|
+
+nested-grid-container
|
23
14
|
.grid-block
|
24
|
-
|
25
|
-
overflow: hidden
|
26
|
-
margin: 0 ($grid-gutter-width / 2)
|
15
|
+
+grid-block
|
27
16
|
@for $i from 1 through $grid-columns
|
28
17
|
.grid-#{$i}
|
29
|
-
|
30
|
-
@extend .grid-block
|
18
|
+
+grid($i)
|
31
19
|
.grid-full
|
32
|
-
|
20
|
+
+grid-full
|
33
21
|
@for $i from 1 through $grid-columns - 1
|
34
22
|
.grid-prefix-#{$i}
|
35
|
-
|
23
|
+
+grid-prefix($i)
|
36
24
|
@for $i from 1 through $grid-columns - 1
|
37
25
|
.grid-suffix-#{$i}
|
38
|
-
|
26
|
+
+grid-suffix($i)
|
39
27
|
|
40
|
-
|
41
|
-
|
28
|
+
=grid-container
|
29
|
+
margin: 0 auto
|
30
|
+
@if $overflow-allowed
|
31
|
+
+pie-clearfix
|
32
|
+
@else
|
33
|
+
+clearfix
|
34
|
+
width: $grid-columns * $grid-width + $grid-columns * $grid-gutter-width
|
35
|
+
|
36
|
+
=nested-grid-container
|
37
|
+
display: inline-block
|
38
|
+
margin:
|
39
|
+
left: -$grid-gutter-width / 2
|
40
|
+
right: -$grid-gutter-width / 2
|
41
|
+
@if $overflow-allowed
|
42
|
+
+pie-clearfix
|
43
|
+
@else
|
44
|
+
+clearfix
|
45
|
+
width: auto
|
42
46
|
|
43
|
-
|
47
|
+
=grid-block
|
48
|
+
+float-left
|
49
|
+
@if $overflow-allowed
|
50
|
+
+pie-clearfix
|
51
|
+
@else
|
52
|
+
+clearfix
|
53
|
+
margin: 0 $grid-gutter-width / 2
|
54
|
+
|
55
|
+
=grid($grid-columns)
|
56
|
+
+grid-width($grid-columns)
|
57
|
+
+grid-block
|
58
|
+
|
59
|
+
=grid-width($grid-columns)
|
44
60
|
@if $grid-columns == 1
|
45
61
|
width: $grid-width
|
46
62
|
@else
|
47
|
-
width:
|
63
|
+
width: $grid-columns * $grid-width + $grid-columns * $grid-gutter-width - $grid-gutter-width
|
64
|
+
|
65
|
+
=grid-full
|
66
|
+
+grid($grid-columns)
|
48
67
|
|
49
|
-
|
68
|
+
=grid-prefix($grid-columns)
|
50
69
|
@if $grid-columns == 1
|
51
70
|
padding-left: $grid-width + $grid-gutter-width
|
52
71
|
@else
|
53
|
-
padding-left:
|
72
|
+
padding-left: $grid-columns * $grid-width + $grid-columns * $grid-gutter-width
|
54
73
|
|
55
|
-
|
74
|
+
=grid-suffix($grid-columns)
|
56
75
|
@if $grid-columns == 1
|
57
76
|
padding-right: $grid-width + $grid-gutter-width
|
58
77
|
@else
|
59
|
-
padding-right:
|
78
|
+
padding-right: $grid-columns * $grid-width + $grid-columns * $grid-gutter-width
|
@@ -4,31 +4,20 @@
|
|
4
4
|
$grid-columns: 12 !default;
|
5
5
|
$grid-width: 60px !default;
|
6
6
|
$grid-gutter-width: 20px !default;
|
7
|
+
$overflow-allowed: false !default;
|
7
8
|
|
8
9
|
@mixin grid-coordinates {
|
9
|
-
/* Grid-Coordinates by Adam Stacoviak
|
10
|
-
* Fork me: http://adamstac.com/grid-coordinates */
|
11
10
|
.grid-container {
|
12
|
-
|
13
|
-
overflow: hidden;
|
14
|
-
width: $grid-columns * $grid-width + $grid-columns * $grid-gutter-width; }
|
11
|
+
@include grid-container; }
|
15
12
|
.nested-grid-container {
|
16
|
-
|
17
|
-
margin: {
|
18
|
-
left: -$grid-gutter-width / 2;
|
19
|
-
right: -$grid-gutter-width / 2; };
|
20
|
-
overflow: hidden;
|
21
|
-
width: auto; }
|
13
|
+
@include nested-grid-container; }
|
22
14
|
.grid-block {
|
23
|
-
@include
|
24
|
-
overflow: hidden;
|
25
|
-
margin: 0 $grid-gutter-width / 2; }
|
15
|
+
@include grid-block; }
|
26
16
|
@for $i from 1 through $grid-columns {
|
27
17
|
.grid-#{$i} {
|
28
|
-
@include grid($i);
|
29
|
-
@extend .grid-block; } }
|
18
|
+
@include grid($i); } }
|
30
19
|
.grid-full {
|
31
|
-
@include grid
|
20
|
+
@include grid-full; }
|
32
21
|
@for $i from 1 through $grid-columns - 1 {
|
33
22
|
.grid-prefix-#{$i} {
|
34
23
|
@include grid-prefix($i); } }
|
@@ -36,8 +25,36 @@ $grid-gutter-width: 20px !default;
|
|
36
25
|
.grid-suffix-#{$i} {
|
37
26
|
@include grid-suffix($i); } } }
|
38
27
|
|
28
|
+
@mixin grid-container {
|
29
|
+
margin: 0 auto;
|
30
|
+
@if $overflow-allowed {
|
31
|
+
@include pie-clearfix; }
|
32
|
+
@else {
|
33
|
+
@include clearfix; }
|
34
|
+
width: $grid-columns * $grid-width + $grid-columns * $grid-gutter-width; }
|
35
|
+
|
36
|
+
@mixin nested-grid-container {
|
37
|
+
display: inline-block;
|
38
|
+
margin: {
|
39
|
+
left: -$grid-gutter-width / 2;
|
40
|
+
right: -$grid-gutter-width / 2; };
|
41
|
+
@if $overflow-allowed {
|
42
|
+
@include pie-clearfix; }
|
43
|
+
@else {
|
44
|
+
@include clearfix; }
|
45
|
+
width: auto; }
|
46
|
+
|
47
|
+
@mixin grid-block {
|
48
|
+
@include float-left;
|
49
|
+
@if $overflow-allowed {
|
50
|
+
@include pie-clearfix; }
|
51
|
+
@else {
|
52
|
+
@include clearfix; }
|
53
|
+
margin: 0 $grid-gutter-width / 2; }
|
54
|
+
|
39
55
|
@mixin grid($grid-columns) {
|
40
|
-
@include grid-width($grid-columns);
|
56
|
+
@include grid-width($grid-columns);
|
57
|
+
@include grid-block; }
|
41
58
|
|
42
59
|
@mixin grid-width($grid-columns) {
|
43
60
|
@if $grid-columns == 1 {
|
@@ -45,6 +62,9 @@ $grid-gutter-width: 20px !default;
|
|
45
62
|
@else {
|
46
63
|
width: $grid-columns * $grid-width + $grid-columns * $grid-gutter-width - $grid-gutter-width; } }
|
47
64
|
|
65
|
+
@mixin grid-full {
|
66
|
+
@include grid($grid-columns); }
|
67
|
+
|
48
68
|
@mixin grid-prefix($grid-columns) {
|
49
69
|
@if $grid-columns == 1 {
|
50
70
|
padding-left: $grid-width + $grid-gutter-width; }
|
@@ -1,23 +1,17 @@
|
|
1
1
|
!!! Strict
|
2
2
|
%html
|
3
3
|
%head
|
4
|
-
%title Grid Coordinates -
|
4
|
+
%title Grid Coordinates - Example
|
5
5
|
%link{:href => "screen.css", :media => "all", :rel => "stylesheet", :type => "text/css"}
|
6
|
-
%body
|
6
|
+
%body
|
7
7
|
#header
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
#nav
|
12
|
-
.content
|
13
|
-
%p nav
|
8
|
+
%h1 Website Name
|
9
|
+
#nav-main
|
10
|
+
This is the main navigation
|
14
11
|
#page
|
15
|
-
#
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
.content
|
20
|
-
%p page-sidebar
|
12
|
+
#content
|
13
|
+
This is the content section
|
14
|
+
#sidebar
|
15
|
+
This is the sidebar section
|
21
16
|
#footer
|
22
|
-
|
23
|
-
%p footer
|
17
|
+
This is the footer section
|
@@ -1,279 +1,432 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
dl, dt, dd, ol, ul, li,
|
7
|
-
fieldset, form, label, legend,
|
8
|
-
table, caption, tbody, tfoot, thead, tr, th, td {
|
9
|
-
margin: 0;
|
10
|
-
padding: 0;
|
11
|
-
border: 0;
|
12
|
-
outline: 0;
|
13
|
-
font-weight: inherit;
|
14
|
-
font-style: inherit;
|
15
|
-
font-size: 100%;
|
16
|
-
font-family: inherit;
|
17
|
-
vertical-align: baseline;
|
1
|
+
.grid-container, #header, #page, #footer {
|
2
|
+
margin: 0 auto;
|
3
|
+
overflow: hidden;
|
4
|
+
*zoom: 1;
|
5
|
+
width: 960px;
|
18
6
|
}
|
19
7
|
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
8
|
+
.nested-grid-container {
|
9
|
+
display: inline-block;
|
10
|
+
margin-left: -5px;
|
11
|
+
margin-right: -5px;
|
12
|
+
overflow: hidden;
|
13
|
+
*zoom: 1;
|
14
|
+
width: auto;
|
24
15
|
}
|
25
16
|
|
26
|
-
|
27
|
-
|
17
|
+
.grid-block {
|
18
|
+
display: inline;
|
19
|
+
float: left;
|
20
|
+
overflow: hidden;
|
21
|
+
*zoom: 1;
|
22
|
+
margin: 0 5px;
|
28
23
|
}
|
29
24
|
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
25
|
+
.grid-1 {
|
26
|
+
width: 30px;
|
27
|
+
display: inline;
|
28
|
+
float: left;
|
29
|
+
overflow: hidden;
|
30
|
+
*zoom: 1;
|
31
|
+
margin: 0 5px;
|
34
32
|
}
|
35
33
|
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
34
|
+
.grid-2 {
|
35
|
+
width: 70px;
|
36
|
+
display: inline;
|
37
|
+
float: left;
|
38
|
+
overflow: hidden;
|
39
|
+
*zoom: 1;
|
40
|
+
margin: 0 5px;
|
40
41
|
}
|
41
42
|
|
42
|
-
|
43
|
-
|
43
|
+
.grid-3 {
|
44
|
+
width: 110px;
|
45
|
+
display: inline;
|
46
|
+
float: left;
|
47
|
+
overflow: hidden;
|
48
|
+
*zoom: 1;
|
49
|
+
margin: 0 5px;
|
44
50
|
}
|
45
|
-
|
46
|
-
|
51
|
+
|
52
|
+
.grid-4 {
|
53
|
+
width: 150px;
|
54
|
+
display: inline;
|
55
|
+
float: left;
|
56
|
+
overflow: hidden;
|
57
|
+
*zoom: 1;
|
58
|
+
margin: 0 5px;
|
47
59
|
}
|
48
60
|
|
49
|
-
|
50
|
-
|
61
|
+
.grid-5 {
|
62
|
+
width: 190px;
|
63
|
+
display: inline;
|
64
|
+
float: left;
|
65
|
+
overflow: hidden;
|
66
|
+
*zoom: 1;
|
67
|
+
margin: 0 5px;
|
51
68
|
}
|
52
69
|
|
53
|
-
|
54
|
-
|
55
|
-
|
70
|
+
.grid-6, #header h1, #page #sidebar {
|
71
|
+
width: 230px;
|
72
|
+
display: inline;
|
73
|
+
float: left;
|
74
|
+
overflow: hidden;
|
75
|
+
*zoom: 1;
|
76
|
+
margin: 0 5px;
|
56
77
|
}
|
57
78
|
|
58
|
-
|
59
|
-
|
60
|
-
|
61
|
-
|
79
|
+
.grid-7 {
|
80
|
+
width: 270px;
|
81
|
+
display: inline;
|
82
|
+
float: left;
|
62
83
|
overflow: hidden;
|
63
|
-
|
84
|
+
*zoom: 1;
|
85
|
+
margin: 0 5px;
|
64
86
|
}
|
65
87
|
|
66
|
-
.
|
67
|
-
|
68
|
-
|
69
|
-
|
88
|
+
.grid-8 {
|
89
|
+
width: 310px;
|
90
|
+
display: inline;
|
91
|
+
float: left;
|
70
92
|
overflow: hidden;
|
71
|
-
|
93
|
+
*zoom: 1;
|
94
|
+
margin: 0 5px;
|
72
95
|
}
|
73
96
|
|
74
|
-
.grid-
|
75
|
-
width:
|
97
|
+
.grid-9 {
|
98
|
+
width: 350px;
|
76
99
|
display: inline;
|
77
100
|
float: left;
|
78
|
-
margin: 0 10px;
|
79
101
|
overflow: hidden;
|
102
|
+
*zoom: 1;
|
103
|
+
margin: 0 5px;
|
80
104
|
}
|
81
105
|
|
82
|
-
.grid-
|
83
|
-
width:
|
106
|
+
.grid-10 {
|
107
|
+
width: 390px;
|
84
108
|
display: inline;
|
85
109
|
float: left;
|
86
|
-
margin: 0 10px;
|
87
110
|
overflow: hidden;
|
111
|
+
*zoom: 1;
|
112
|
+
margin: 0 5px;
|
88
113
|
}
|
89
114
|
|
90
|
-
.grid-
|
91
|
-
width:
|
115
|
+
.grid-11 {
|
116
|
+
width: 430px;
|
92
117
|
display: inline;
|
93
118
|
float: left;
|
94
|
-
margin: 0 10px;
|
95
119
|
overflow: hidden;
|
120
|
+
*zoom: 1;
|
121
|
+
margin: 0 5px;
|
96
122
|
}
|
97
123
|
|
98
|
-
.grid-
|
99
|
-
width:
|
124
|
+
.grid-12 {
|
125
|
+
width: 470px;
|
100
126
|
display: inline;
|
101
127
|
float: left;
|
102
|
-
margin: 0 10px;
|
103
128
|
overflow: hidden;
|
129
|
+
*zoom: 1;
|
130
|
+
margin: 0 5px;
|
104
131
|
}
|
105
132
|
|
106
|
-
.grid-
|
107
|
-
width:
|
133
|
+
.grid-13 {
|
134
|
+
width: 510px;
|
108
135
|
display: inline;
|
109
136
|
float: left;
|
110
|
-
margin: 0 10px;
|
111
137
|
overflow: hidden;
|
138
|
+
*zoom: 1;
|
139
|
+
margin: 0 5px;
|
112
140
|
}
|
113
141
|
|
114
|
-
.grid-
|
115
|
-
width:
|
142
|
+
.grid-14 {
|
143
|
+
width: 550px;
|
116
144
|
display: inline;
|
117
145
|
float: left;
|
118
|
-
margin: 0 10px;
|
119
146
|
overflow: hidden;
|
147
|
+
*zoom: 1;
|
148
|
+
margin: 0 5px;
|
120
149
|
}
|
121
150
|
|
122
|
-
.grid-
|
123
|
-
width:
|
151
|
+
.grid-15 {
|
152
|
+
width: 590px;
|
124
153
|
display: inline;
|
125
154
|
float: left;
|
126
|
-
margin: 0 10px;
|
127
155
|
overflow: hidden;
|
156
|
+
*zoom: 1;
|
157
|
+
margin: 0 5px;
|
128
158
|
}
|
129
159
|
|
130
|
-
.grid-
|
131
|
-
width:
|
160
|
+
.grid-16, #header #nav-main {
|
161
|
+
width: 630px;
|
132
162
|
display: inline;
|
133
163
|
float: left;
|
134
|
-
margin: 0 10px;
|
135
164
|
overflow: hidden;
|
165
|
+
*zoom: 1;
|
166
|
+
margin: 0 5px;
|
136
167
|
}
|
137
168
|
|
138
|
-
.grid-
|
139
|
-
width:
|
169
|
+
.grid-17, #page #content {
|
170
|
+
width: 670px;
|
140
171
|
display: inline;
|
141
172
|
float: left;
|
142
|
-
margin: 0 10px;
|
143
173
|
overflow: hidden;
|
174
|
+
*zoom: 1;
|
175
|
+
margin: 0 5px;
|
144
176
|
}
|
145
177
|
|
146
|
-
.grid-
|
147
|
-
width:
|
178
|
+
.grid-18 {
|
179
|
+
width: 710px;
|
148
180
|
display: inline;
|
149
181
|
float: left;
|
150
|
-
margin: 0 10px;
|
151
182
|
overflow: hidden;
|
183
|
+
*zoom: 1;
|
184
|
+
margin: 0 5px;
|
152
185
|
}
|
153
186
|
|
154
|
-
.grid-
|
155
|
-
width:
|
187
|
+
.grid-19 {
|
188
|
+
width: 750px;
|
156
189
|
display: inline;
|
157
190
|
float: left;
|
158
|
-
margin: 0 10px;
|
159
191
|
overflow: hidden;
|
192
|
+
*zoom: 1;
|
193
|
+
margin: 0 5px;
|
160
194
|
}
|
161
195
|
|
162
|
-
.grid-
|
163
|
-
width:
|
196
|
+
.grid-20 {
|
197
|
+
width: 790px;
|
198
|
+
display: inline;
|
199
|
+
float: left;
|
200
|
+
overflow: hidden;
|
201
|
+
*zoom: 1;
|
202
|
+
margin: 0 5px;
|
203
|
+
}
|
204
|
+
|
205
|
+
.grid-21 {
|
206
|
+
width: 830px;
|
164
207
|
display: inline;
|
165
208
|
float: left;
|
166
|
-
margin: 0 10px;
|
167
209
|
overflow: hidden;
|
210
|
+
*zoom: 1;
|
211
|
+
margin: 0 5px;
|
168
212
|
}
|
169
213
|
|
170
|
-
.grid-
|
171
|
-
width:
|
214
|
+
.grid-22 {
|
215
|
+
width: 870px;
|
172
216
|
display: inline;
|
173
217
|
float: left;
|
174
|
-
margin: 0 10px;
|
175
218
|
overflow: hidden;
|
219
|
+
*zoom: 1;
|
220
|
+
margin: 0 5px;
|
221
|
+
}
|
222
|
+
|
223
|
+
.grid-23 {
|
224
|
+
width: 910px;
|
225
|
+
display: inline;
|
226
|
+
float: left;
|
227
|
+
overflow: hidden;
|
228
|
+
*zoom: 1;
|
229
|
+
margin: 0 5px;
|
230
|
+
}
|
231
|
+
|
232
|
+
.grid-24 {
|
233
|
+
width: 950px;
|
234
|
+
display: inline;
|
235
|
+
float: left;
|
236
|
+
overflow: hidden;
|
237
|
+
*zoom: 1;
|
238
|
+
margin: 0 5px;
|
239
|
+
}
|
240
|
+
|
241
|
+
.grid-full {
|
242
|
+
width: 950px;
|
243
|
+
display: inline;
|
244
|
+
float: left;
|
245
|
+
overflow: hidden;
|
246
|
+
*zoom: 1;
|
247
|
+
margin: 0 5px;
|
176
248
|
}
|
177
249
|
|
178
250
|
.grid-prefix-1 {
|
179
|
-
padding-left:
|
251
|
+
padding-left: 40px;
|
180
252
|
}
|
181
253
|
|
182
254
|
.grid-prefix-2 {
|
183
|
-
padding-left:
|
255
|
+
padding-left: 80px;
|
184
256
|
}
|
185
257
|
|
186
258
|
.grid-prefix-3 {
|
187
|
-
padding-left:
|
259
|
+
padding-left: 120px;
|
188
260
|
}
|
189
261
|
|
190
262
|
.grid-prefix-4 {
|
191
|
-
padding-left:
|
263
|
+
padding-left: 160px;
|
192
264
|
}
|
193
265
|
|
194
266
|
.grid-prefix-5 {
|
195
|
-
padding-left:
|
267
|
+
padding-left: 200px;
|
196
268
|
}
|
197
269
|
|
198
270
|
.grid-prefix-6 {
|
199
|
-
padding-left:
|
271
|
+
padding-left: 240px;
|
200
272
|
}
|
201
273
|
|
202
274
|
.grid-prefix-7 {
|
203
|
-
padding-left:
|
275
|
+
padding-left: 280px;
|
204
276
|
}
|
205
277
|
|
206
278
|
.grid-prefix-8 {
|
207
|
-
padding-left:
|
279
|
+
padding-left: 320px;
|
208
280
|
}
|
209
281
|
|
210
282
|
.grid-prefix-9 {
|
211
|
-
padding-left:
|
283
|
+
padding-left: 360px;
|
212
284
|
}
|
213
285
|
|
214
286
|
.grid-prefix-10 {
|
215
|
-
padding-left:
|
287
|
+
padding-left: 400px;
|
216
288
|
}
|
217
289
|
|
218
290
|
.grid-prefix-11 {
|
291
|
+
padding-left: 440px;
|
292
|
+
}
|
293
|
+
|
294
|
+
.grid-prefix-12 {
|
295
|
+
padding-left: 480px;
|
296
|
+
}
|
297
|
+
|
298
|
+
.grid-prefix-13 {
|
299
|
+
padding-left: 520px;
|
300
|
+
}
|
301
|
+
|
302
|
+
.grid-prefix-14 {
|
303
|
+
padding-left: 560px;
|
304
|
+
}
|
305
|
+
|
306
|
+
.grid-prefix-15 {
|
307
|
+
padding-left: 600px;
|
308
|
+
}
|
309
|
+
|
310
|
+
.grid-prefix-16 {
|
311
|
+
padding-left: 640px;
|
312
|
+
}
|
313
|
+
|
314
|
+
.grid-prefix-17 {
|
315
|
+
padding-left: 680px;
|
316
|
+
}
|
317
|
+
|
318
|
+
.grid-prefix-18 {
|
319
|
+
padding-left: 720px;
|
320
|
+
}
|
321
|
+
|
322
|
+
.grid-prefix-19 {
|
323
|
+
padding-left: 760px;
|
324
|
+
}
|
325
|
+
|
326
|
+
.grid-prefix-20 {
|
327
|
+
padding-left: 800px;
|
328
|
+
}
|
329
|
+
|
330
|
+
.grid-prefix-21 {
|
331
|
+
padding-left: 840px;
|
332
|
+
}
|
333
|
+
|
334
|
+
.grid-prefix-22 {
|
219
335
|
padding-left: 880px;
|
220
336
|
}
|
221
337
|
|
222
|
-
.grid-
|
223
|
-
padding-
|
338
|
+
.grid-prefix-23 {
|
339
|
+
padding-left: 920px;
|
224
340
|
}
|
225
341
|
|
226
|
-
.grid-suffix-
|
227
|
-
padding-right:
|
342
|
+
.grid-suffix-1, #page #content {
|
343
|
+
padding-right: 40px;
|
344
|
+
}
|
345
|
+
|
346
|
+
.grid-suffix-2, #header h1 {
|
347
|
+
padding-right: 80px;
|
228
348
|
}
|
229
349
|
|
230
350
|
.grid-suffix-3 {
|
231
|
-
padding-right:
|
351
|
+
padding-right: 120px;
|
232
352
|
}
|
233
353
|
|
234
354
|
.grid-suffix-4 {
|
235
|
-
padding-right:
|
355
|
+
padding-right: 160px;
|
236
356
|
}
|
237
357
|
|
238
358
|
.grid-suffix-5 {
|
239
|
-
padding-right:
|
359
|
+
padding-right: 200px;
|
240
360
|
}
|
241
361
|
|
242
362
|
.grid-suffix-6 {
|
243
|
-
padding-right:
|
363
|
+
padding-right: 240px;
|
244
364
|
}
|
245
365
|
|
246
366
|
.grid-suffix-7 {
|
247
|
-
padding-right:
|
367
|
+
padding-right: 280px;
|
248
368
|
}
|
249
369
|
|
250
370
|
.grid-suffix-8 {
|
251
|
-
padding-right:
|
371
|
+
padding-right: 320px;
|
252
372
|
}
|
253
373
|
|
254
374
|
.grid-suffix-9 {
|
255
|
-
padding-right:
|
375
|
+
padding-right: 360px;
|
256
376
|
}
|
257
377
|
|
258
378
|
.grid-suffix-10 {
|
259
|
-
padding-right:
|
379
|
+
padding-right: 400px;
|
260
380
|
}
|
261
381
|
|
262
382
|
.grid-suffix-11 {
|
263
|
-
padding-right:
|
383
|
+
padding-right: 440px;
|
264
384
|
}
|
265
385
|
|
266
|
-
.
|
267
|
-
|
268
|
-
|
269
|
-
|
270
|
-
|
386
|
+
.grid-suffix-12 {
|
387
|
+
padding-right: 480px;
|
388
|
+
}
|
389
|
+
|
390
|
+
.grid-suffix-13 {
|
391
|
+
padding-right: 520px;
|
271
392
|
}
|
272
393
|
|
273
|
-
|
274
|
-
|
394
|
+
.grid-suffix-14 {
|
395
|
+
padding-right: 560px;
|
396
|
+
}
|
397
|
+
|
398
|
+
.grid-suffix-15 {
|
399
|
+
padding-right: 600px;
|
400
|
+
}
|
401
|
+
|
402
|
+
.grid-suffix-16 {
|
403
|
+
padding-right: 640px;
|
404
|
+
}
|
405
|
+
|
406
|
+
.grid-suffix-17 {
|
407
|
+
padding-right: 680px;
|
408
|
+
}
|
409
|
+
|
410
|
+
.grid-suffix-18 {
|
411
|
+
padding-right: 720px;
|
412
|
+
}
|
413
|
+
|
414
|
+
.grid-suffix-19 {
|
415
|
+
padding-right: 760px;
|
416
|
+
}
|
417
|
+
|
418
|
+
.grid-suffix-20 {
|
419
|
+
padding-right: 800px;
|
420
|
+
}
|
421
|
+
|
422
|
+
.grid-suffix-21 {
|
423
|
+
padding-right: 840px;
|
424
|
+
}
|
425
|
+
|
426
|
+
.grid-suffix-22 {
|
427
|
+
padding-right: 880px;
|
275
428
|
}
|
276
429
|
|
277
|
-
|
278
|
-
|
430
|
+
.grid-suffix-23 {
|
431
|
+
padding-right: 920px;
|
279
432
|
}
|
@@ -1,50 +1,26 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
font: bold 14px helvetica, arial, sans-serif
|
6
|
-
padding-top: 20px
|
7
|
-
|
8
|
-
// // Configure grid coordinates
|
9
|
-
// $grid-columns: 16
|
10
|
-
// $grid-pixels: 40px
|
11
|
-
// $grid-gutter-width: 20px
|
1
|
+
// Configure grid coordinates
|
2
|
+
$grid-columns: 24
|
3
|
+
$grid-width: 30px
|
4
|
+
$grid-gutter-width: 10px
|
12
5
|
|
13
6
|
@import grid-coordinates
|
14
7
|
|
15
|
-
|
8
|
+
+grid-coordinates
|
16
9
|
|
17
10
|
#header, #page, #footer
|
18
11
|
@extend .grid-container
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
#footer .content
|
35
|
-
@extend .grid-full
|
36
|
-
|
37
|
-
.common
|
38
|
-
background: #444
|
39
|
-
color: #fff
|
40
|
-
margin-bottom: 20px
|
41
|
-
text-align: center
|
42
|
-
|
43
|
-
#brand, #nav, #page-body, #page-sidebar, #footer .content
|
44
|
-
@extend .common
|
45
|
-
|
46
|
-
#brand, #nav, #footer .content
|
47
|
-
line-height: 100px
|
48
|
-
|
49
|
-
#page-body, #page-sidebar
|
50
|
-
line-height: 400px
|
12
|
+
+box-sizing(border-box)
|
13
|
+
|
14
|
+
#header
|
15
|
+
h1
|
16
|
+
@extend .grid-6
|
17
|
+
@extend .grid-suffix-2
|
18
|
+
#nav-main
|
19
|
+
@extend .grid-16
|
20
|
+
|
21
|
+
#page
|
22
|
+
#content
|
23
|
+
@extend .grid-17
|
24
|
+
@extend .grid-suffix-1
|
25
|
+
#sidebar
|
26
|
+
@extend .grid-6
|
metadata
CHANGED
@@ -1,13 +1,13 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: grid-coordinates
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
hash:
|
4
|
+
hash: 19
|
5
5
|
prerelease: false
|
6
6
|
segments:
|
7
7
|
- 1
|
8
|
+
- 1
|
8
9
|
- 0
|
9
|
-
|
10
|
-
version: 1.0.8
|
10
|
+
version: 1.1.0
|
11
11
|
platform: ruby
|
12
12
|
authors:
|
13
13
|
- Adam Stacoviak
|