gridtacular 0.1.2 → 0.1.4
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 +4 -4
- data/.gitignore +14 -0
- data/Gemfile +4 -0
- data/LICENSE.txt +22 -0
- data/README.md +203 -0
- data/Rakefile +2 -0
- data/gridtacular.gemspec +23 -0
- data/{_gridtacular.scss → lib/_gridtacular.scss} +25 -20
- data/lib/gridtacular.rb +5 -0
- data/lib/gridtacular/version.rb +3 -0
- metadata +14 -6
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA1:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 5f57b0a08e9a953bda772a536a90f1eb63637e8e
|
|
4
|
+
data.tar.gz: 0747a6b42ed9184425812df99cfb7fb2836c11c2
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 72525e076a1c5444cbefe29d522a24ed9eeedb31b07374c979ebe02816122e8ab88d0e7aa50a3ddb51ebe2ae5d483bf7487d27ee93906cf468fc75b99b75977e
|
|
7
|
+
data.tar.gz: 50bfa6f55ded1cf5d060bb1fb15da5b01641d9b0c050088d2575d43237811704559f1fe859d3d13d80a4ae9b0aa4e636974cd7ac3907a05fb6e9b8745bd3364c
|
data/.gitignore
ADDED
data/Gemfile
ADDED
data/LICENSE.txt
ADDED
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
Copyright (c) 2014 Rory Ashford
|
|
2
|
+
|
|
3
|
+
MIT License
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining
|
|
6
|
+
a copy of this software and associated documentation files (the
|
|
7
|
+
"Software"), to deal in the Software without restriction, including
|
|
8
|
+
without limitation the rights to use, copy, modify, merge, publish,
|
|
9
|
+
distribute, sublicense, and/or sell copies of the Software, and to
|
|
10
|
+
permit persons to whom the Software is furnished to do so, subject to
|
|
11
|
+
the following conditions:
|
|
12
|
+
|
|
13
|
+
The above copyright notice and this permission notice shall be
|
|
14
|
+
included in all copies or substantial portions of the Software.
|
|
15
|
+
|
|
16
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
|
17
|
+
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
|
18
|
+
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
|
|
19
|
+
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
|
|
20
|
+
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
|
|
21
|
+
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
|
|
22
|
+
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
data/README.md
ADDED
|
@@ -0,0 +1,203 @@
|
|
|
1
|
+
# Gridtacular
|
|
2
|
+
|
|
3
|
+
[](http://badge.fury.io/rb/gridtacular)
|
|
4
|
+
|
|
5
|
+
A Sass based responsive CSS grid system. Built with flexibility and scalability in mind.
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
### Table of Contents
|
|
9
|
+
**[Installation](#installation)**
|
|
10
|
+
**[Usage](#usage)**
|
|
11
|
+
**[Examples](#examples)**
|
|
12
|
+
**[Why Multiple Grids](#why-multiple-grids)**
|
|
13
|
+
**[Debugging](#debugging)**
|
|
14
|
+
**[Reference](#reference)**
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
## Installation
|
|
19
|
+
|
|
20
|
+
If you have ruby istalled its simple:
|
|
21
|
+
|
|
22
|
+
$ gem install gridtacular
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
And make sure to include Gridtacular in your Sass stylesheet:
|
|
26
|
+
|
|
27
|
+
```scss
|
|
28
|
+
@import "gridtacular";
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
Or you can save gridtacular.scss into your Sass workflow. Whatever floats your boat.
|
|
32
|
+
|
|
33
|
+
## Usage
|
|
34
|
+
|
|
35
|
+
`$grid-args` takes two sub maps as arguments to configure the grid;'config' and 'grids'. Config settings are global and used across all grids. Grids is where each grid is defined.
|
|
36
|
+
|
|
37
|
+
```scss
|
|
38
|
+
$grid_args:(
|
|
39
|
+
config: (
|
|
40
|
+
setting-name: setting-value
|
|
41
|
+
),
|
|
42
|
+
grids: (
|
|
43
|
+
breakpoint-name: (
|
|
44
|
+
setting-name: setting-value
|
|
45
|
+
)
|
|
46
|
+
)
|
|
47
|
+
);
|
|
48
|
+
|
|
49
|
+
@include grid_generate($grid_args);
|
|
50
|
+
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
## Examples
|
|
54
|
+
|
|
55
|
+
### Example 1 - a simple 6 column grid
|
|
56
|
+
|
|
57
|
+
the following example will output a simple 6 column grid:
|
|
58
|
+
|
|
59
|
+
```scss
|
|
60
|
+
$grid_args:(
|
|
61
|
+
config: (
|
|
62
|
+
columnclass: 'span--',
|
|
63
|
+
pushclass: 'push--'
|
|
64
|
+
),
|
|
65
|
+
grids: (
|
|
66
|
+
mysimplegrid: (
|
|
67
|
+
columns: 6,
|
|
68
|
+
gutter: 10px
|
|
69
|
+
)
|
|
70
|
+
)
|
|
71
|
+
);
|
|
72
|
+
|
|
73
|
+
@include grid_generate($grid_args);
|
|
74
|
+
|
|
75
|
+
```
|
|
76
|
+
|
|
77
|
+
### Example 2 - Different grids at different breakpoints
|
|
78
|
+
|
|
79
|
+
Generate a grid and classes for multiple grids at different breakpoints. As you can see there is a lot of flexibility in terms of naming things. We recommend using BEM syntax (which we use throughout the examples e.g. .span--1-12--small ).
|
|
80
|
+
|
|
81
|
+
|
|
82
|
+
|
|
83
|
+
```scss
|
|
84
|
+
$grid_args:(
|
|
85
|
+
config: (
|
|
86
|
+
columnclass: 'span--',
|
|
87
|
+
pushclass: 'push--'
|
|
88
|
+
),
|
|
89
|
+
grids: (
|
|
90
|
+
small: (
|
|
91
|
+
columns: 6,
|
|
92
|
+
suffix: null,
|
|
93
|
+
breakpoint: null,
|
|
94
|
+
gutter: 10px
|
|
95
|
+
),
|
|
96
|
+
medium: (
|
|
97
|
+
columns: 12,
|
|
98
|
+
suffix: '--m',
|
|
99
|
+
breakpoint: 800px null,
|
|
100
|
+
gutter: 20px
|
|
101
|
+
),
|
|
102
|
+
large: (
|
|
103
|
+
columns: 12,
|
|
104
|
+
suffix: '--l',
|
|
105
|
+
breakpoint: 1200px null,
|
|
106
|
+
gutter: 30px
|
|
107
|
+
)
|
|
108
|
+
)
|
|
109
|
+
);
|
|
110
|
+
|
|
111
|
+
@include grid_generate($grid_args);
|
|
112
|
+
|
|
113
|
+
```
|
|
114
|
+
|
|
115
|
+
### Why multiple grids?
|
|
116
|
+
|
|
117
|
+
You may be thinking, why multiple grids? why isnt one enough? Well consider the following scenario:
|
|
118
|
+
|
|
119
|
+
You are building a responsive image grid. You want the grid to be 6 thumbnails across at the largest breakpoint, 4 thumbnails across at the medium breakpoint and you want each image to fill a full row at the smallest breakpoint.
|
|
120
|
+
|
|
121
|
+
Here is how to simply achieve that: (assuming that you are using example 2 above).
|
|
122
|
+
|
|
123
|
+
```html
|
|
124
|
+
<div class="grid">
|
|
125
|
+
<div class="span--1-1 span--1-4--m span--1-6--l">
|
|
126
|
+
<img src="funnycat.jpg">
|
|
127
|
+
</div>
|
|
128
|
+
<div class="span--1-1 span--1-4--m span--1-6--l">
|
|
129
|
+
<img src="funnycat.jpg">
|
|
130
|
+
</div>
|
|
131
|
+
<div class="span--1-1 span--1-4--m span--1-6--l">
|
|
132
|
+
<img src="funnycat.jpg">
|
|
133
|
+
</div>
|
|
134
|
+
<div class="span--1-1 span--1-4--m span--1-6--l">
|
|
135
|
+
<img src="funnycat.jpg">
|
|
136
|
+
</div>
|
|
137
|
+
<div class="span--1-1 span--1-4--m span--1-6--l">
|
|
138
|
+
<img src="funnycat.jpg">
|
|
139
|
+
</div>
|
|
140
|
+
<div class="span--1-1 span--1-4--m span--1-6--l">
|
|
141
|
+
<img src="funnycat.jpg">
|
|
142
|
+
</div>
|
|
143
|
+
</div>
|
|
144
|
+
```
|
|
145
|
+
|
|
146
|
+
## Debugging
|
|
147
|
+
|
|
148
|
+
Sometimes it's useful when developing a responsive site to be able to see at a glance which breakpoint you are viewing.
|
|
149
|
+
|
|
150
|
+
We added some functionality to Gridtacular to do just that. Include `debug: true` in your config arguments to activate the debug console:
|
|
151
|
+
|
|
152
|
+
```scss
|
|
153
|
+
$grid_args:(
|
|
154
|
+
config: (
|
|
155
|
+
debug: true
|
|
156
|
+
)
|
|
157
|
+
);
|
|
158
|
+
```
|
|
159
|
+
|
|
160
|
+
You can customise the background colours so that its different at each breakpoint, making it really simple to see each transition from one breakpoint to another.
|
|
161
|
+
|
|
162
|
+
```scss
|
|
163
|
+
small: (
|
|
164
|
+
columns: 12,
|
|
165
|
+
suffix: null,
|
|
166
|
+
breakpoint: null,
|
|
167
|
+
gutter: 10px,
|
|
168
|
+
debug: (
|
|
169
|
+
background: #13a2f7,
|
|
170
|
+
name: 'Small'
|
|
171
|
+
)
|
|
172
|
+
)
|
|
173
|
+
```
|
|
174
|
+
|
|
175
|
+
## Reference
|
|
176
|
+
|
|
177
|
+
### Config Settings
|
|
178
|
+
|
|
179
|
+
|Setting|Type|Default|Description|
|
|
180
|
+
|---|---|---|---|
|
|
181
|
+
|columnclass|`string`|`span--`|grid item class prefix e.g. `span--` (dont include '.' beforehand)|
|
|
182
|
+
|pushclass|`String`|`push--`|push item class prefix e.g. `push--` |
|
|
183
|
+
|debug|`boolean`|`false`|Enable visual debugging|
|
|
184
|
+
|
|
185
|
+
|
|
186
|
+
### Grid Settings
|
|
187
|
+
|
|
188
|
+
|Setting|Type|Default|Description|
|
|
189
|
+
|---|---|---|---|
|
|
190
|
+
|columns|`integer`|12|Number of columns in the grid|
|
|
191
|
+
|suffix|`string`|n/a|Suffix that references the current breakpoint e.g. '--small'|
|
|
192
|
+
|breakpoint|`list`|`null`| The css min and max widths of the breakpoint (accepts any css unit) e.g. '0, 800px'|
|
|
193
|
+
|gutter|`string`|`20px`|Gutter width. Accepts any css unit|
|
|
194
|
+
|debug|`map`|n/a|Map of configurable debug values|
|
|
195
|
+
|
|
196
|
+
#### Debug settings
|
|
197
|
+
|
|
198
|
+
If you have enabled debugging you can supply additional map parameters within debug per grid to setup background colours and add the breakpoint name.
|
|
199
|
+
|
|
200
|
+
|Setting|Type|Default|Description|
|
|
201
|
+
|---|---|---|---|
|
|
202
|
+
|background|`string`|`span--`|grid item class prefix e.g. `span--` (dont include '.' beforehand)|
|
|
203
|
+
|name|`string`|n/a|push item class prefix e.g. `push--` |
|
data/Rakefile
ADDED
data/gridtacular.gemspec
ADDED
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
# coding: utf-8
|
|
2
|
+
lib = File.expand_path('../lib', __FILE__)
|
|
3
|
+
$LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
|
|
4
|
+
require 'gridtacular/version'
|
|
5
|
+
|
|
6
|
+
Gem::Specification.new do |spec|
|
|
7
|
+
spec.name = "gridtacular"
|
|
8
|
+
spec.version = Gridtacular::VERSION
|
|
9
|
+
spec.authors = ["Rory Ashford"]
|
|
10
|
+
spec.email = ["rory@roikles.com"]
|
|
11
|
+
spec.summary = %q{Gridtacular — Sass Grid system}
|
|
12
|
+
spec.description = %q{Powerful Sass grid system that fits into your existing workflow.}
|
|
13
|
+
spec.homepage = "https://github.com/roikles/Gridtacular"
|
|
14
|
+
spec.license = "MIT"
|
|
15
|
+
|
|
16
|
+
spec.files = `git ls-files`.split($/)
|
|
17
|
+
spec.executables = spec.files.grep(%r{^bin/}) { |f| File.basename(f) }
|
|
18
|
+
spec.test_files = spec.files.grep(%r{^(test|spec|features)/})
|
|
19
|
+
spec.require_paths = ["lib"]
|
|
20
|
+
|
|
21
|
+
spec.add_development_dependency "bundler", "~> 1.7"
|
|
22
|
+
spec.add_development_dependency "rake", "~> 10.0"
|
|
23
|
+
end
|
|
@@ -1,14 +1,15 @@
|
|
|
1
|
-
//
|
|
1
|
+
//
|
|
2
|
+
// Flexbones Grid System
|
|
2
3
|
//
|
|
3
|
-
// Version 0.1.
|
|
4
|
-
// Author: Rory Ashford
|
|
5
|
-
//
|
|
4
|
+
// Version 0.1.1
|
|
5
|
+
// Author: Rory Ashford
|
|
6
|
+
//
|
|
6
7
|
|
|
7
8
|
// Set variable defaults
|
|
8
9
|
|
|
9
10
|
$column_name: "span--" !default;
|
|
10
|
-
$
|
|
11
|
-
$debug_display:
|
|
11
|
+
$push_name: "push--" !default;
|
|
12
|
+
$debug_display: false !default;
|
|
12
13
|
|
|
13
14
|
|
|
14
15
|
// Clearfix mixin
|
|
@@ -164,7 +165,7 @@ $debug_display: true !default;
|
|
|
164
165
|
}
|
|
165
166
|
|
|
166
167
|
// Add fifths where total columns
|
|
167
|
-
//
|
|
168
|
+
// dont divide into fifths.
|
|
168
169
|
@if($fifths == true){
|
|
169
170
|
@for $i from 1 through 5{
|
|
170
171
|
$fifth_class: #{$prefix}#{$i}-5#{$suffix};
|
|
@@ -176,7 +177,7 @@ $debug_display: true !default;
|
|
|
176
177
|
}
|
|
177
178
|
|
|
178
179
|
// Add sevenths where total columns
|
|
179
|
-
//
|
|
180
|
+
// dont divide into sevenths.
|
|
180
181
|
@if($sevenths == true){
|
|
181
182
|
@for $i from 1 through 7{
|
|
182
183
|
$seventh_class: #{$prefix}#{$i}-7#{$suffix};
|
|
@@ -261,7 +262,7 @@ $debug_display: true !default;
|
|
|
261
262
|
|
|
262
263
|
// If pushclass has been defined
|
|
263
264
|
@if( map-has-key(map-get($grid_args, config), pushclass) ){
|
|
264
|
-
$
|
|
265
|
+
$push_name: #{'.' + map-get(map-get($grid_args, config), pushclass)};
|
|
265
266
|
}
|
|
266
267
|
|
|
267
268
|
// If debug has been defined
|
|
@@ -276,6 +277,7 @@ $debug_display: true !default;
|
|
|
276
277
|
|
|
277
278
|
$grids: map-get($grid_args, grids);
|
|
278
279
|
$column_prefix: #{'.' + $column_name};
|
|
280
|
+
$push_prefix: #{'.' + $push_name};
|
|
279
281
|
|
|
280
282
|
@each $grid_name, $grid_map in $grids{
|
|
281
283
|
|
|
@@ -297,7 +299,7 @@ $debug_display: true !default;
|
|
|
297
299
|
// If column class has been defined
|
|
298
300
|
@if( map-has-key($grid_map, suffix) ){
|
|
299
301
|
$suffix: map-get($grid_map,suffix);
|
|
300
|
-
}
|
|
302
|
+
}
|
|
301
303
|
|
|
302
304
|
// If column class has been defined
|
|
303
305
|
@if( map-has-key($grid_map, breakpoint) ){
|
|
@@ -311,17 +313,20 @@ $debug_display: true !default;
|
|
|
311
313
|
|
|
312
314
|
// Debug info
|
|
313
315
|
|
|
314
|
-
|
|
315
|
-
@if( map-has-key(map-get($grid_map, debug), background) ){
|
|
316
|
-
$debug-bg: map-get(map-get($grid_map, debug), background);
|
|
317
|
-
}
|
|
316
|
+
@if( map-has-key($grid_map, debug)) {
|
|
318
317
|
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
318
|
+
// If debug background is defined
|
|
319
|
+
@if( map-has-key(map-get($grid_map, debug), background) ){
|
|
320
|
+
$debug-bg: map-get(map-get($grid_map, debug), background);
|
|
321
|
+
}
|
|
322
|
+
|
|
323
|
+
// If debug name is defined
|
|
324
|
+
@if( map-has-key(map-get($grid_map, debug), name) ){
|
|
325
|
+
$debug-name: map-get(map-get($grid_map, debug), name);
|
|
326
|
+
}
|
|
327
|
+
}
|
|
323
328
|
|
|
324
|
-
|
|
329
|
+
// Include the necessary mixins to generate the grids
|
|
325
330
|
@include at-breakpoint($breakpoint){
|
|
326
331
|
|
|
327
332
|
@include grid($gutter);
|
|
@@ -334,7 +339,7 @@ $debug_display: true !default;
|
|
|
334
339
|
@include grid-debug($debug_name,$debug_bg)
|
|
335
340
|
}
|
|
336
341
|
|
|
337
|
-
}
|
|
342
|
+
}
|
|
338
343
|
}
|
|
339
344
|
|
|
340
345
|
} @else{
|
data/lib/gridtacular.rb
ADDED
metadata
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: gridtacular
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.1.
|
|
4
|
+
version: 0.1.4
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Rory Ashford
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2014-11-
|
|
11
|
+
date: 2014-11-12 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: bundler
|
|
@@ -38,15 +38,23 @@ dependencies:
|
|
|
38
38
|
- - ~>
|
|
39
39
|
- !ruby/object:Gem::Version
|
|
40
40
|
version: '10.0'
|
|
41
|
-
description: Powerful grid system that fits into your existing workflow.
|
|
41
|
+
description: Powerful Sass grid system that fits into your existing workflow.
|
|
42
42
|
email:
|
|
43
43
|
- rory@roikles.com
|
|
44
44
|
executables: []
|
|
45
45
|
extensions: []
|
|
46
46
|
extra_rdoc_files: []
|
|
47
47
|
files:
|
|
48
|
-
-
|
|
49
|
-
|
|
48
|
+
- .gitignore
|
|
49
|
+
- Gemfile
|
|
50
|
+
- LICENSE.txt
|
|
51
|
+
- README.md
|
|
52
|
+
- Rakefile
|
|
53
|
+
- gridtacular.gemspec
|
|
54
|
+
- lib/_gridtacular.scss
|
|
55
|
+
- lib/gridtacular.rb
|
|
56
|
+
- lib/gridtacular/version.rb
|
|
57
|
+
homepage: https://github.com/roikles/Gridtacular
|
|
50
58
|
licenses:
|
|
51
59
|
- MIT
|
|
52
60
|
metadata: {}
|
|
@@ -66,7 +74,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
|
66
74
|
version: '0'
|
|
67
75
|
requirements: []
|
|
68
76
|
rubyforge_project:
|
|
69
|
-
rubygems_version: 2.
|
|
77
|
+
rubygems_version: 2.4.3
|
|
70
78
|
signing_key:
|
|
71
79
|
specification_version: 4
|
|
72
80
|
summary: Gridtacular — Sass Grid system
|