archetype-grid 1.0.0.alpha.1

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.
checksums.yaml ADDED
@@ -0,0 +1,7 @@
1
+ ---
2
+ SHA1:
3
+ metadata.gz: b5b44403d00c6dfc6d8e2fdcbdf8e654cf4e9d9e
4
+ data.tar.gz: 41dd99375b1225e56952630f2909685037b892cf
5
+ SHA512:
6
+ metadata.gz: 1b8fc305377367d7f68ea4bc2a07d09d14ceb522c52e657b45302da5371e6416b4bd62ae49c43985ec98f8e27f5d833139bb09b62d334a2129bbfbb640b33b62
7
+ data.tar.gz: 572dc18d0c29c04c6ce7b4e8de7fea1d54c1021947a4b099e71d4d2e81ed4bcae3e2aca4e7f078c5be74d66262d62a2b813b154e76889ee8ff9095352fc26370
data/LICENSE ADDED
@@ -0,0 +1,16 @@
1
+ Archetype
2
+ Copyright (c) 2013 LinkedIn Corp. All rights reserved.
3
+ Apache Software License 2.0
4
+
5
+
6
+ Licensed under the Apache License, Version 2.0 (the "License");
7
+ you may not use this file except in compliance with the License.
8
+ You may obtain a copy of the License at
9
+
10
+ http://www.apache.org/licenses/LICENSE-2.0
11
+
12
+ Unless required by applicable law or agreed to in writing, software
13
+ distributed under the License is distributed on an "AS IS" BASIS,
14
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
15
+ See the License for the specific language governing permissions and
16
+ limitations under the License.
@@ -0,0 +1,3 @@
1
+ module ArchetypeGrid
2
+ VERSION = File.read(File.join(File.dirname(__FILE__), "..", "..", "VERSION")).strip
3
+ end
@@ -0,0 +1,9 @@
1
+ require 'archetype'
2
+
3
+ #
4
+ # register as an Archetype extension
5
+ #
6
+ Archetype::Extensions.register(
7
+ File.basename(__FILE__, '.rb'),
8
+ :path => File.expand_path(File.join(File.dirname(__FILE__), ".."))
9
+ )
@@ -0,0 +1,8 @@
1
+ // ensure the core is loaded
2
+ @import "archetype/core";
3
+
4
+ // load the grid
5
+ @import "grid/core";
6
+
7
+ // intialize
8
+ @import "grid/init";
@@ -0,0 +1,11 @@
1
+ // grids
2
+ $CONFIG_GRID_COLUMN: 31px !default; // column width
3
+ $CONFIG_GRID_GUTTER: 10px !default; // gutter width (margin)
4
+ $CONFIG_GRID_MAX_COLUMNS: 24 !default; // max number of columns on the grid
5
+ $CONFIG_GRID_MIN_THRESHOLD: 1.0 !default; // minimum threshold for fractional columns
6
+ $CONFIG_GRID_ALLOWED_DIVISORS: (3) !default; // allowed list of divisors e.g. (3, 4, 5) => (1/3, 2/3, 1/4, 2/4, 3/4, 1/5, 2/5, 3/5, 4/5)
7
+ $CONFIG_GRID_ALLOWED_DIVISABLE: (8, 10, 12, 14, 16, 18, 20, $CONFIG_GRID_MAX_COLUMNS) !default; // list of specific column widths
8
+ $CONFIG_GRID_OFFSET_METHOD: margin !default; // offset method to use [padding|margin|position]
9
+ $CONFIG_GRID_ALIGN_METHOD: float !default; // alignment method [float|inline-block|table-cell] (NOTE: table-cell doesn't work in all cases
10
+ $CONFIG_GRID_DEBUG: false !default; // debugging mode
11
+ $CONFIG_GRID_SPACING_FACTOR: 4 !default; // the factor to use when converting grid indents/outdents to horizontal units
@@ -0,0 +1,5 @@
1
+ // register module
2
+ $a-blackhole: register-archetype-module(archetype/grid);
3
+
4
+ @import "config";
5
+ @import "grid";
@@ -0,0 +1,368 @@
1
+ // this is the grid framework
2
+ // @category grid
3
+
4
+ // calculate the width of a grid block
5
+ // @function _getGridWidth
6
+ // @private
7
+ // @param $columns {Number} the number or fraction of columns to span, if fraction, must specify $of
8
+ // @param $of {Number} the total number of columns spanned, only use with fractional $columns
9
+ // @param $indent {List} total indent for both left and right sides (needed to adjust for box-model padding)
10
+ // @return $width {Number} calculated width
11
+ // @usage:
12
+ // _getGridWidth(5) => width of 5 columns
13
+ // _getGridWidth(1/3, $of: 8) => splits an 8 column grid into 1/3
14
+ // _getGridWidth(5, $indent: (10px 0px)) => subtracts the $indent from the total width
15
+ @function _getGridWidth($columns, $of: false, $indent: false) {
16
+ $width: 0;
17
+ // if we're doing 1/3, 2/3, etc...
18
+ @if($of or $columns < 1) {
19
+ @if(type-of($of) != number) {
20
+ $of: $CONFIG_GRID_MAX_COLUMNS;
21
+ }
22
+
23
+ // check if the divisors conform to our restrictions
24
+ @if($CONFIG_GRID_ALLOWED_DIVISORS) {
25
+ $allowed-column-factors: ();
26
+ @each $divisor in $CONFIG_GRID_ALLOWED_DIVISORS {
27
+ $numerator: $divisor;
28
+ @while($numerator > 0) {
29
+ $numerator: ($numerator - 1);
30
+ $allowed-column-factors: append($allowed-column-factors, ($numerator / $divisor));
31
+ }
32
+ }
33
+ @if(not index($allowed-column-factors, $columns)) {
34
+ @warn "[archetype:grid] you can't divide a block into #{columns}";
35
+ $columns: 1;
36
+ }
37
+ }
38
+ // check if the specified columns are valid
39
+ @if($CONFIG_GRID_ALLOWED_DIVISABLE) {
40
+ @if(not index($CONFIG_GRID_ALLOWED_DIVISABLE, $of)) {
41
+ @warn "[archetype:grid] you can't divide #{of} columns";
42
+ $of: $CONFIG_GRID_MAX_COLUMNS;
43
+ }
44
+ }
45
+
46
+ $columns: ($columns * $of);
47
+ @if($columns < $CONFIG_GRID_MIN_THRESHOLD and $columns > 0) {
48
+ @warn "[archetype:grid] #{$columns} of #{$of} columns is too small. Use a larger column size";
49
+ $columns: $CONFIG_GRID_MIN_THRESHOLD;
50
+ }
51
+ }
52
+ // calculate
53
+ $width: ($columns * $CONFIG_GRID_COLUMN) + (($columns - 1) * $CONFIG_GRID_GUTTER);
54
+
55
+ @if(length($indent) == 2) {
56
+ $width: ($width - nth($indent,1) - nth($indent,2));
57
+ }
58
+ @return $width;
59
+ }
60
+
61
+ // abstract function to indent or outdent a grid block
62
+ // @function _gridDent
63
+ // @private
64
+ // @param $list {List} list of dents
65
+ // @param $left {Number} the number of units to dent left
66
+ // @param $right {Number} the number of units to dent right
67
+ // @param $direction {String} [in|out] the direction to dent
68
+ // @param $abuse {Boolean} @see _archetype_integerize
69
+ // @return $dent {List} list of dents
70
+ @function _gridDent($list: false, $left: 0, $right: 0, $direction: in, $abuse: false) {
71
+ $factor: if($direction == out, -1, 1) * $CONFIG_GRID_SPACING_FACTOR;
72
+ $dent: ();
73
+ $list: get-collection($list, ($left $right), $min: 2);
74
+
75
+ @each $unit in $list {
76
+ $unit: ($factor * $unit);
77
+ $dent: append($dent, horizontal-spacing($unit, $abuse: $abuse), space);
78
+ }
79
+
80
+ @if(length($dent) == 1) {
81
+ $dent: append($dent, $dent);
82
+ }
83
+
84
+ @return $dent;
85
+ }
86
+
87
+ // calculate indents on a grid block
88
+ // @function grid-indent
89
+ // @param $list {List} list of indents
90
+ // @param $left {Number} the number of units to indent left
91
+ // @param $right {Number} the number of units to indent right
92
+ // @param $abuse {Boolean} @see _archetype_integerize
93
+ // @return {List} list of indents
94
+ @function grid-indent($list: false, $left: 0, $right: 0, $abuse: false) {
95
+ @return _gridDent($list, $left, $right, $direction: in, $abuse: $abuse);
96
+ }
97
+
98
+ // calculate outdents on a grid block
99
+ // @function grid-outdent
100
+ // @param $list {List} list of outdents
101
+ // @param $left {Number} the number of units to outdent left
102
+ // @param $right {Number} the number of units to outdent right
103
+ // @param $abuse {Boolean} @see _archetype_integerize
104
+ // @return {List} list of outdents
105
+ @function grid-outdent($list: false, $left: 0, $right: 0, $abuse: false) {
106
+ @return _gridDent($list, $left, $right, $direction: out, $abuse: $abuse);
107
+ }
108
+
109
+ // generate the negative margins needed for a grid-outdent
110
+ // @mixin grid-outdent
111
+ // @param $list {List} list of outdents
112
+ // @param $left {Number} the number of units to outdent left
113
+ // @param $right {Number} the number of units to outdent right
114
+ @mixin grid-outdent($list: false, $left: 0, $right: 0) {
115
+ $outdent: grid-outdent($list, $left, $right);
116
+ @include grid-output-left-right(margin, $outdent);
117
+ @include hack-negative-margin();
118
+ }
119
+
120
+ // calculate offsets for a grid block
121
+ // @function grid-offset
122
+ // @param $list {List} list of offsets
123
+ // @param $left {Number} the number of columns to offset left
124
+ // @param $right {Number} the number of columns to offset right
125
+ // @param $of {Number} the total number of columns, used if $left/$right are fractional
126
+ // @return {List} list of offsets
127
+ @function grid-offset($list: false, $left: 0, $right: 0, $of: false) {
128
+ $list: get-collection($list, ($left, $right), $min: 2);
129
+ $left: nth($list,1);
130
+ $left: if($left > 0, _getGridWidth($columns: $left, $of: $of) + $CONFIG_GRID_GUTTER, 0);
131
+ $right: nth($list,2);
132
+ $right: if($right > 0, _getGridWidth($columns: $right, $of: $of) + $CONFIG_GRID_GUTTER, 0);
133
+ @return ($left, $right);
134
+ }
135
+ // convenience mixin for grid-offset
136
+ @mixin grid-offset($list: false, $left: 0, $right: 0, $of: false, $first: false, $method: $CONFIG_GRID_OFFSET_METHOD) {
137
+ $offset: grid-offset($list: $list, $left: $left, $right: $right, $of: $of);
138
+ @if($method == position) {
139
+ @include grid-offset-position($offset: $offset);
140
+ }
141
+ @else {
142
+ @include grid-offset-margin($offset: $offset, $first: $first);
143
+ }
144
+ }
145
+ // convenience method for using the position offset method
146
+ @mixin grid-offset-position($offset) {
147
+ position: relative;
148
+ @include grid-output-left-right($values: $offset);
149
+ }
150
+ // convenience method for using the margin offset method
151
+ @mixin grid-offset-margin($offset, $first: false, $outdent: false) {
152
+ $outdent: get-collection($outdent, 0, $min: 2);
153
+ $gutter: if($first, 0, $CONFIG_GRID_GUTTER);
154
+ @include grid-output-left-right(margin, list-add($outdent, list-add($offset, ($gutter $gutter))), $ignore: ($gutter));
155
+ @include hack-negative-margin();
156
+ }
157
+
158
+ // calculate push (offset) for a grid block
159
+ // @function grid-push
160
+ // @param $columns {List} the number of columns to offset left
161
+ // @param $of {Number} the total number of columns, used if $left is fractional
162
+ // @return {List} list of pushes
163
+ @function grid-push($columns: 0, $of: false) {
164
+ @return grid-offset($left: $columns, $of: $of);
165
+ }
166
+ // convenience mixin for grid-push
167
+ @mixin grid-push($columns:0, $of: false, $first: false, $method: position) {
168
+ @include grid-offset($left: $columns, $of: $of, $first: false, $method: $method);
169
+ }
170
+
171
+ // calculate pull (offset) for a grid block
172
+ // @function grid-pull
173
+ // @param $columns {List} the number of columns to offset right
174
+ // @param $of {Number} the total number of columns, used if $right is fractional
175
+ // @return {List} list of pulls
176
+ @function grid-pull($columns: 0, $of: false) {
177
+ @return grid-offset($right: $columns, $of: $of);
178
+ }
179
+ // convenience mixin for grid-push
180
+ @mixin grid-pull($columns: 0, $of: false, $first: false, $method: position) {
181
+ @include grid-offset($right: $columns, $of: $of, $first: false, $method: $method);
182
+ }
183
+
184
+ // this makes it possible to undo $first: true
185
+ // @mixin grid-not-first
186
+ @mixin grid-not-first() {
187
+ margin-left: $CONFIG_GRID_GUTTER;
188
+ }
189
+
190
+ // this makes it possible to force a non first-column to behave as a first-column
191
+ // @mixin grid-is-first
192
+ @mixin grid-is-first() {
193
+ margin-left: 0;
194
+ }
195
+
196
+ // given a set of values, output the left and right properties
197
+ // @mixin grid-output-left-right
198
+ // @param $property {String} prefix [margin|padding|border|etc] if false, no prefix is used
199
+ // @param $values {List} the list of values to output e.g. (10px 5px). if only one value (10px), it's used for both left and right
200
+ // @param $ignore {List} list of values to ignore, @see if-set
201
+ @mixin grid-output-left-right($property: false, $values: false, $ignore: false) {
202
+ $property: if($property, unquote('#{$property}-'), unquote(''));
203
+ $left: 0;
204
+ @if(length($values) > 0) {
205
+ $left: nth($values,1);
206
+ }
207
+ $right: 0;
208
+ @if(length($values) > 1) {
209
+ $right: nth($values,2);
210
+ }
211
+ @include if-set(#{$property}left, $left, $ignore: $ignore);
212
+ @include if-set(#{$property}right, $right, $ignore: $ignore);
213
+ }
214
+
215
+ // this lets rows clear the floated containers
216
+ // @mixin grid-row
217
+ // @param $debug {Boolean} use debug stylings
218
+ @mixin grid-row($debug: false) {
219
+ @include grid-block(true);
220
+ @include debug-hover-box(rgb(255, 0, 255), $if: ($debug or $CONFIG_GRID_DEBUG));
221
+ }
222
+
223
+ // output the block methods
224
+ // @mixin grid-block
225
+ // @param $row {Boolean} is this block a row
226
+ @mixin grid-block($row: false) {
227
+ // FLOAT
228
+ @if($CONFIG_GRID_ALIGN_METHOD == float){
229
+ @if($row) {
230
+ @include legacy-pie-clearfix();
231
+ }
232
+ @else {
233
+ // make it a floater
234
+ float: left;
235
+ }
236
+ }
237
+ // INLINE-BLOCK
238
+ @else if($CONFIG_GRID_ALIGN_METHOD == inline-block) {
239
+ @if($row) {
240
+ // fix to collapse white space between inline-block elements
241
+ letter-spacing: -0.313em; // webkit
242
+ @if(support-legacy-browser('ie', '7', $threshold: $critical-usage-threshold)) {
243
+ *letter-spacing: normal; // restore for IE6/7
244
+ }
245
+ word-spacing: -0.438em; // IE/firefox
246
+ // other methods: no browsers support this yet
247
+ // http://dev.w3.org/csswg/css3-text/#white-space-collapsing
248
+ //white-space-collapse: discard;
249
+ //text-space-collapse: collapse;
250
+ }
251
+ @else {
252
+ @include inline-block();
253
+ vertical-align: top;
254
+ // restore spacing @see grid-row
255
+ letter-spacing: normal;
256
+ word-spacing: normal;
257
+ }
258
+ }
259
+ // TABLE-CELL (doesn't work well)
260
+ @else if($CONFIG_GRID_ALIGN_METHOD == table-cell) {
261
+ @warn "[archetype:grid] table-cell method doesn't work yet!";
262
+ @if($row) {
263
+ display: table;
264
+ // table cells don't respect margin, so we have to use border-spacing
265
+ border-spacing: $CONFIG_GRID_GUTTER 0;
266
+ }
267
+ @else {
268
+ @if(support-legacy-browser('ie', '7', $threshold: $critical-usage-threshold)) {
269
+ *display: inline;
270
+ }
271
+ display: table-cell;
272
+ vertical-align: top;
273
+ @include has-layout();
274
+ }
275
+ }
276
+ }
277
+
278
+ // convenience method for creating a grid canvas, @see grid
279
+ // @mixin grid-canvas
280
+ // @param $columns {Number} the number or fraction of columns to span, if fraction, must specify $of
281
+ // @param $of {Number} the total number of columns spanned, only use with fractional $columns
282
+ // @param $debug {Boolean} use debug stylings
283
+ @mixin grid-canvas($columns: false, $of: false, $debug: false) {
284
+ @include grid($columns: $columns, $of: $of, $debug: $debug, $canvas: true);
285
+ }
286
+
287
+ // the main grid mixin
288
+ // @mixin grid
289
+ // @param $columns {Number} the number or fraction of columns to span, if fraction, must specify $of
290
+ // @param $first {Boolean} is this the first grid block of a row
291
+ // @param $of {Number} the total number of columns spanned, only use with fractional $columns
292
+ // @param $indent {List} the grid indents @see grid-indent
293
+ // @param $outdent {List} the grid outdents @see grid-outdent
294
+ // @param $offset {List} the grid offsets @see grid-offset, grid-push, grid-pull
295
+ // @param $canvas {Boolean} treat this grid block as a canvas; a canvas is a non-floated, centered grid-block
296
+ // @param $row {Boolean} @see grid-row
297
+ // @param $center {Boolean} whether or not to center the grid block
298
+ // @param $debug {Boolean} use debug stylings
299
+ @mixin grid($columns: false, $first: false, $of: false, $indent: false, $outdent: false, $offset: false, $offset-method: $CONFIG_GRID_OFFSET_METHOD, $canvas: false, $row: false, $center: false, $debug: false) {
300
+ @if($row) {
301
+ @include grid-row($debug: $debug);
302
+ }
303
+ @else {
304
+ @if(not $columns) {
305
+ $columns: $CONFIG_GRID_MAX_COLUMNS;
306
+ }
307
+
308
+ $width: _getGridWidth($columns, $of, $indent);
309
+
310
+ // margin
311
+ @if(not ($first or $canvas or $center)) {
312
+ @include grid-not-first();
313
+ }
314
+
315
+ @if($canvas or $center) {
316
+ // center it
317
+ margin-left: auto;
318
+ margin-right: auto;
319
+
320
+ // debug
321
+ @if(is-debug-enabled($debug or $CONFIG_GRID_DEBUG)) {
322
+ @include column-grid-background($CONFIG_GRID_MAX_COLUMNS, $CONFIG_GRID_COLUMN, $CONFIG_GRID_GUTTER);
323
+ }
324
+
325
+ @if($CONFIG_GRID_ALIGN_METHOD == inline-block) {
326
+ // the inline-block method needs to use horizontal overflow on the canvas to prevent an unwanted scrollbar
327
+ //overflow-x: hidden;
328
+ }
329
+ }
330
+ @else {
331
+ // align the block
332
+ @include grid-block();
333
+ // debug
334
+ @include debug-hover-box($if: ($debug or $CONFIG_GRID_DEBUG));
335
+ }
336
+
337
+ // offset (push, pull)
338
+ @if($offset) {
339
+ // ... with positioning
340
+ @if($offset-method == position) {
341
+ @include grid-offset-position($offset);
342
+ }
343
+ // ... with margin (adjust outdent)
344
+ @else if($offset-method == margin) {
345
+ @include grid-offset-margin($offset: $offset, $first: $first, $outdent: $outdent);
346
+ $outdent: false;
347
+ }
348
+ // ... with padding (adjust indent)
349
+ @else {
350
+ $indent: list-add(get-collection($indent, 0, $min: 2), $offset);
351
+ }
352
+ }
353
+
354
+ // indent
355
+ @if($indent) {
356
+ @include grid-output-left-right(padding, $indent);
357
+ }
358
+
359
+ // outdent
360
+ @if($outdent) {
361
+ @include grid-output-left-right(margin, $outdent);
362
+ @include hack-negative-margin();
363
+ }
364
+
365
+ // width
366
+ width: $width;
367
+ }
368
+ }
@@ -0,0 +1,5 @@
1
+ $a-blackhole: require-archetype-modules(archetype/grid);
2
+
3
+ @include unless-archetype-module-initalized(archetype/grid) {
4
+ /* intializing grid/init */
5
+ }
@@ -0,0 +1,4 @@
1
+ description "An Archetype extension for complex, fixed-width grid based layouts"
2
+
3
+ no_configuration_file!
4
+ skip_compilation!
metadata ADDED
@@ -0,0 +1,71 @@
1
+ --- !ruby/object:Gem::Specification
2
+ name: archetype-grid
3
+ version: !ruby/object:Gem::Version
4
+ version: 1.0.0.alpha.1
5
+ platform: ruby
6
+ authors:
7
+ - Eugene ONeill
8
+ - LinkedIn
9
+ autorequire:
10
+ bindir: bin
11
+ cert_chain: []
12
+ date: 2014-03-24 00:00:00.000000000 Z
13
+ dependencies:
14
+ - !ruby/object:Gem::Dependency
15
+ name: archetype
16
+ requirement: !ruby/object:Gem::Requirement
17
+ requirements:
18
+ - - "~>"
19
+ - !ruby/object:Gem::Version
20
+ version: 1.0.0.alpha.1
21
+ type: :runtime
22
+ prerelease: false
23
+ version_requirements: !ruby/object:Gem::Requirement
24
+ requirements:
25
+ - - "~>"
26
+ - !ruby/object:Gem::Version
27
+ version: 1.0.0.alpha.1
28
+ description: An Archetype extension for complex, fixed-width grid based layouts
29
+ email: oneill.eugene@gmail.com
30
+ executables: []
31
+ extensions: []
32
+ extra_rdoc_files: []
33
+ files:
34
+ - "/Users/eoneill/workspace/archetype/extensions/archetype-grid/CHANGELOG.md"
35
+ - "/Users/eoneill/workspace/archetype/extensions/archetype-grid/README.md"
36
+ - "/Users/eoneill/workspace/archetype/extensions/archetype-grid/VERSION"
37
+ - "/Users/eoneill/workspace/archetype/extensions/archetype-grid/lib/archetype-grid.rb"
38
+ - "/Users/eoneill/workspace/archetype/extensions/archetype-grid/lib/archetype-grid/version.rb"
39
+ - "/Users/eoneill/workspace/archetype/extensions/archetype-grid/stylesheets/archetype/_grid.scss"
40
+ - "/Users/eoneill/workspace/archetype/extensions/archetype-grid/stylesheets/archetype/grid/_config.scss"
41
+ - "/Users/eoneill/workspace/archetype/extensions/archetype-grid/stylesheets/archetype/grid/_core.scss"
42
+ - "/Users/eoneill/workspace/archetype/extensions/archetype-grid/stylesheets/archetype/grid/_grid.scss"
43
+ - "/Users/eoneill/workspace/archetype/extensions/archetype-grid/stylesheets/archetype/grid/_init.scss"
44
+ - "/Users/eoneill/workspace/archetype/extensions/archetype-grid/templates/project/manifest.rb"
45
+ - LICENSE
46
+ homepage: http://www.archetypecss.com/extensions/archetype-grid
47
+ licenses:
48
+ - Apache License (2.0)
49
+ metadata: {}
50
+ post_install_message:
51
+ rdoc_options: []
52
+ require_paths:
53
+ - lib
54
+ required_ruby_version: !ruby/object:Gem::Requirement
55
+ requirements:
56
+ - - ">="
57
+ - !ruby/object:Gem::Version
58
+ version: '0'
59
+ required_rubygems_version: !ruby/object:Gem::Requirement
60
+ requirements:
61
+ - - ">"
62
+ - !ruby/object:Gem::Version
63
+ version: 1.3.1
64
+ requirements: []
65
+ rubyforge_project:
66
+ rubygems_version: 2.2.2
67
+ signing_key:
68
+ specification_version: 4
69
+ summary: Archetype Grid Extension
70
+ test_files: []
71
+ has_rdoc: