gridtacular 0.0.1 → 0.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.
- checksums.yaml +4 -4
- data/_gridtacular.scss +43 -47
- metadata +2 -2
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: a72e27a507cd1090b3861bf4c76f79670a8a4227
|
4
|
+
data.tar.gz: 34bc465d1a48fdc4a4f8e2ec0e131f2f992a9790
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 9ad19517ded01f0c6a9e0ef286035d4831bb916fa5aada30ad8dc809b0c138778cc60165f2b6d6d7270a691bf44d8147f5abaeb3ebdcf86aed508694f2e511e4
|
7
|
+
data.tar.gz: 9f0e221bd4a83bd3a69dbba92a6bf0756190b6e00a9f7d1a4b4726f7d627962add7344faec03f8edddd7e9d4f80a50c17aabade4709eb7f5ae857a2016ebdefa
|
data/_gridtacular.scss
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
//
|
2
2
|
// Flexbones Grid System
|
3
3
|
//
|
4
|
-
// Version 1.
|
4
|
+
// Version 1.3
|
5
5
|
// Author: Rory Ashford
|
6
6
|
//
|
7
7
|
|
@@ -25,9 +25,9 @@
|
|
25
25
|
//
|
26
26
|
// Works out the percent width of columns (gutters can be
|
27
27
|
// any unit but columns are always percent bases)
|
28
|
-
@function column-width($
|
29
|
-
$
|
30
|
-
@return $
|
28
|
+
@function column-width($number_of_columns,$total_columns) {
|
29
|
+
$single_col_width: 100 / $total_columns * 1%;
|
30
|
+
@return $single_col_width * $number_of_columns;
|
31
31
|
}
|
32
32
|
|
33
33
|
|
@@ -56,8 +56,8 @@
|
|
56
56
|
//
|
57
57
|
// Used to set grids semantically from within
|
58
58
|
// the stylesheet with no additional HTML markup
|
59
|
-
@mixin span-columns($columns, $
|
60
|
-
width: column-width($columns,$
|
59
|
+
@mixin span-columns($columns, $total_columns){
|
60
|
+
width: column-width($columns,$total_columns);
|
61
61
|
padding-left: $gutter-width;
|
62
62
|
}
|
63
63
|
|
@@ -93,7 +93,7 @@
|
|
93
93
|
// EXPERIMENTAL (Disabled in current build)
|
94
94
|
// feels extremely hacky, doesnt scale particularly well
|
95
95
|
// should it be called per media query?
|
96
|
-
@mixin grid-equal-height($gutter,$
|
96
|
+
@mixin grid-equal-height($gutter,$column_name){
|
97
97
|
.grid--equal-height{
|
98
98
|
display: flex;
|
99
99
|
flex-wrap: wrap;
|
@@ -109,7 +109,7 @@
|
|
109
109
|
|
110
110
|
|
111
111
|
// Grid with no gutters
|
112
|
-
@mixin grid-no-gutter($
|
112
|
+
@mixin grid-no-gutter($column_class,$suffix: null){
|
113
113
|
.grid--no-gutter#{$suffix}{
|
114
114
|
margin-left: 0;
|
115
115
|
|
@@ -130,7 +130,8 @@
|
|
130
130
|
$fractions: ();
|
131
131
|
@for $i from -$numerator through -1{
|
132
132
|
@if($numerator % abs($i) == 0 and $denominator % abs($i) == 0){
|
133
|
-
$
|
133
|
+
$fraction: (abs($i): #{$numerator/abs($i)}-#{$denominator/abs($i)});
|
134
|
+
$fractions: map-merge($fractions, $fraction);
|
134
135
|
}
|
135
136
|
}
|
136
137
|
// return map of all fractions
|
@@ -144,15 +145,15 @@
|
|
144
145
|
// columns divided by the total number of columns.
|
145
146
|
@mixin grid-columns($prefix: null, $suffix: null, $columns: null, $fifths: false, $sevenths: false){
|
146
147
|
@for $i from 1 through $columns{
|
147
|
-
$
|
148
|
-
$
|
148
|
+
$css_classes: equivalent-fractions($i,$columns);
|
149
|
+
$column_class: null;
|
149
150
|
|
150
|
-
@each $
|
151
|
-
$
|
152
|
-
|
151
|
+
@each $key, $css_class in $css_classes{
|
152
|
+
$full_css_class: #{$prefix}#{$css-class}#{$suffix};
|
153
|
+
$column_class: $column_class, $full_css_class;
|
153
154
|
}
|
154
155
|
|
155
|
-
#{$
|
156
|
+
#{$column_class}{
|
156
157
|
width: column-width($i,$columns);
|
157
158
|
}
|
158
159
|
}
|
@@ -161,7 +162,7 @@
|
|
161
162
|
// doesnt divide into fifths.
|
162
163
|
@if($fifths == true){
|
163
164
|
@for $i from 1 through 5{
|
164
|
-
$fifth_class: #{$prefix}#{$i}
|
165
|
+
$fifth_class: #{$prefix}#{$i}-5#{$suffix};
|
165
166
|
|
166
167
|
#{$fifth_class}{
|
167
168
|
width: column-width($i,5);
|
@@ -173,7 +174,7 @@
|
|
173
174
|
// doesnt divide into fifths.
|
174
175
|
@if($sevenths == true){
|
175
176
|
@for $i from 1 through 7{
|
176
|
-
$seventh_class: #{$prefix}#{$i}
|
177
|
+
$seventh_class: #{$prefix}#{$i}-7#{$suffix};
|
177
178
|
|
178
179
|
#{$seventh_class}{
|
179
180
|
width: column-width($i,7);
|
@@ -189,15 +190,15 @@
|
|
189
190
|
// the column by a maximum number of total-columns -1
|
190
191
|
@mixin grid-push($prefix: null, $suffix: null, $columns: null){
|
191
192
|
@for $i from 1 through $columns - 1{
|
192
|
-
$
|
193
|
-
$
|
193
|
+
$css_classes: equivalent-fractions($i,$columns);
|
194
|
+
$push_class: null;
|
194
195
|
|
195
|
-
@each $
|
196
|
-
$
|
197
|
-
|
196
|
+
@each $key, $css_class in $css_classes{
|
197
|
+
$full_css_class: #{$prefix}#{$css_class}#{$suffix};
|
198
|
+
$push_class: $push_class, $full_css_class;
|
198
199
|
}
|
199
200
|
|
200
|
-
#{$
|
201
|
+
#{$push_class}{
|
201
202
|
margin-left: column-width($i,$columns);
|
202
203
|
}
|
203
204
|
}
|
@@ -220,7 +221,7 @@
|
|
220
221
|
//
|
221
222
|
// Outputs the current breakpoint name to quickly debug
|
222
223
|
// each breakpoint.
|
223
|
-
@mixin grid-debug($
|
224
|
+
@mixin grid-debug($breakpoint_name,$debug_bg: #000){
|
224
225
|
body:after{
|
225
226
|
position: fixed;
|
226
227
|
display: block;
|
@@ -243,37 +244,32 @@
|
|
243
244
|
// this way.
|
244
245
|
@mixin grid-generate($grid-args){
|
245
246
|
|
246
|
-
|
247
|
-
|
248
|
-
|
247
|
+
$grids: map-get($grid_args, grids);
|
248
|
+
$column_name: map-get(map-get($grid_args, config), columnclass);
|
249
|
+
$column_prefix: #{'.' + $column_name};
|
250
|
+
$push_prefix: #{'.' + map-get(map-get($grid_args, config), pushclass)};
|
251
|
+
$debug_display: map-get(map-get($grid_args, config), debug);
|
249
252
|
|
250
|
-
|
251
|
-
|
252
|
-
|
253
|
-
|
254
|
-
|
255
|
-
|
256
|
-
@each $grid in $grids{
|
257
|
-
$columns: map-get(value($grid),columns);
|
258
|
-
$suffix: map-get(value($grid),suffix);
|
259
|
-
$breakpoint: map-get(value($grid),breakpoint);
|
260
|
-
$gutter: map-get(value($grid),gutter);
|
253
|
+
@each $grid_name, $grid_map in $grids{
|
254
|
+
$columns: map-get($grid_map,columns);
|
255
|
+
$suffix: map-get($grid_map,suffix);
|
256
|
+
$breakpoint: map-get($grid_map,breakpoint);
|
257
|
+
$gutter: map-get($grid_map,gutter);
|
261
258
|
|
262
259
|
// Debug info
|
263
|
-
$debug-bg: map-get-
|
264
|
-
$debug-name: map-get-
|
260
|
+
$debug-bg: map-get(map-get($grid_map, debug), background);
|
261
|
+
$debug-name: map-get(map-get($grid_map, debug), name);
|
265
262
|
|
266
263
|
// Include the necessary mixins to generate the grids
|
267
264
|
|
268
265
|
@include at-breakpoint($breakpoint){
|
269
266
|
@include grid($gutter);
|
270
|
-
@include grid-no-gutter($
|
271
|
-
|
272
|
-
@include grid-
|
273
|
-
@include grid-
|
274
|
-
@
|
275
|
-
|
276
|
-
@include grid-debug($debug-name,$debug-bg)
|
267
|
+
@include grid-no-gutter($column_name,$suffix);
|
268
|
+
@include grid-columns($column_prefix,$suffix,$columns,true, true);
|
269
|
+
@include grid-push($push_prefix, $suffix, $columns);
|
270
|
+
@include grid-omega($column_prefix, $suffix);
|
271
|
+
@if( $debug_display == true ){
|
272
|
+
@include grid-debug($debug_name,$debug_bg)
|
277
273
|
}
|
278
274
|
}
|
279
275
|
}
|
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.0
|
4
|
+
version: 0.1.0
|
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
|
+
date: 2014-11-11 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: bundler
|