gridstrap 0.1.6 → 1.0.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/stylesheets/inc/_build.scss +6 -3
- data/stylesheets/inc/_mixins.scss +65 -23
- data/stylesheets/inc/_vars.scss +16 -8
- data/stylesheets/inc/build/_down.scss +4 -15
- data/stylesheets/inc/build/_exact.scss +5 -17
- data/stylesheets/inc/build/_up.scss +3 -12
- metadata +8 -8
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA1:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 8dd8b7359e4ff3ee7c9d92133c0759d0a5866b5a
|
|
4
|
+
data.tar.gz: 8e02d55f2f39dd95350c129a8f20451ed0923444
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: a41ccdd5fca7e2e4de8691e8ee3422083d9638d66a81c9eadac6d2f49114343d3e823b84d01ab864d1ad51f388c3368517ed5f565f175184ba95d971c444d34f
|
|
7
|
+
data.tar.gz: 8f610e93f55349e182dd208ea9531e867578b8e3eccc0bd75d3ec1904d216e8f5e6f89b9501e9e88875f84fdc7fbd23523961b3c035025b9a6de18e542a65455
|
data/stylesheets/inc/_build.scss
CHANGED
|
@@ -22,15 +22,18 @@
|
|
|
22
22
|
// @param string $responsive The responsive mode to use
|
|
23
23
|
// @param mixed $cols The number of columns
|
|
24
24
|
// @param mixed $gutter The width of the gutter
|
|
25
|
+
// @param mixed $fluid Make the columns % or px based
|
|
25
26
|
|
|
26
|
-
@mixin gridstrap($responsive: "none", $cols: 0, $gutter: 0) {
|
|
27
|
+
@mixin gridstrap($responsive: "none", $fluid: true, $cols: 0, $gutter: 0) {
|
|
27
28
|
@if $cols != 0 {
|
|
28
|
-
$gridstrap-cols: $cols;
|
|
29
|
+
$gridstrap-cols: $cols !global;
|
|
29
30
|
}
|
|
30
31
|
@if $gutter != 0 {
|
|
31
|
-
$gridstrap-gutter: $gutter;
|
|
32
|
+
$gridstrap-gutter: $gutter !global;
|
|
32
33
|
}
|
|
33
34
|
|
|
35
|
+
$gridstrap-fluid: $fluid !global;
|
|
36
|
+
|
|
34
37
|
// Base Grid Setup
|
|
35
38
|
@include gridstrap-base;
|
|
36
39
|
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
@import "compass/css3/box-sizing";
|
|
2
2
|
@import "compass/utilities/general/clearfix";
|
|
3
3
|
|
|
4
|
-
// Variable setup mixin.
|
|
4
|
+
// -Use- Variable setup mixin.
|
|
5
5
|
//
|
|
6
6
|
// Pass a list of column modifiers you intend to use.
|
|
7
7
|
//
|
|
@@ -15,38 +15,58 @@
|
|
|
15
15
|
|
|
16
16
|
@mixin gridstrap-use($uses...) {
|
|
17
17
|
// Default all to false
|
|
18
|
-
$gridstrap-use-span: false;
|
|
19
|
-
$gridstrap-use-of: false;
|
|
20
|
-
$gridstrap-use-offset: false;
|
|
21
|
-
$gridstrap-use-push: false;
|
|
22
|
-
$gridstrap-use-pull: false;
|
|
23
|
-
$gridstrap-use-rtl: false;
|
|
18
|
+
$gridstrap-use-span: false !global;
|
|
19
|
+
$gridstrap-use-of: false !global;
|
|
20
|
+
$gridstrap-use-offset: false !global;
|
|
21
|
+
$gridstrap-use-push: false !global;
|
|
22
|
+
$gridstrap-use-pull: false !global;
|
|
23
|
+
$gridstrap-use-rtl: false !global;
|
|
24
24
|
|
|
25
25
|
// If first $use isn"t "all"...
|
|
26
26
|
@if nth($uses, 1) != "all" {
|
|
27
27
|
// Loop through and set matched options to true
|
|
28
28
|
@each $use in $uses {
|
|
29
29
|
@if $use == "span" {
|
|
30
|
-
$gridstrap-use-span: true;
|
|
30
|
+
$gridstrap-use-span: true !global;
|
|
31
31
|
} @else if $use == "of" {
|
|
32
|
-
$gridstrap-use-of: true;
|
|
32
|
+
$gridstrap-use-of: true !global;
|
|
33
33
|
} @else if $use == "offset" {
|
|
34
|
-
$gridstrap-use-offset: true;
|
|
34
|
+
$gridstrap-use-offset: true !global;
|
|
35
35
|
} @else if $use == "move" {
|
|
36
|
-
$gridstrap-use-push: true;
|
|
37
|
-
$gridstrap-use-pull: true;
|
|
36
|
+
$gridstrap-use-push: true !global;
|
|
37
|
+
$gridstrap-use-pull: true !global;
|
|
38
38
|
} @else if $use == "rtl" {
|
|
39
|
-
$gridstrap-use-rtl: true;
|
|
39
|
+
$gridstrap-use-rtl: true !global;
|
|
40
40
|
}
|
|
41
41
|
}
|
|
42
42
|
} @else {
|
|
43
43
|
// Make all true
|
|
44
|
-
$gridstrap-use-span: true;
|
|
45
|
-
$gridstrap-use-of: true;
|
|
46
|
-
$gridstrap-use-offset: true;
|
|
47
|
-
$gridstrap-use-push: true;
|
|
48
|
-
$gridstrap-use-pull: true;
|
|
49
|
-
$gridstrap-use-rtl: true;
|
|
44
|
+
$gridstrap-use-span: true !global;
|
|
45
|
+
$gridstrap-use-of: true !global;
|
|
46
|
+
$gridstrap-use-offset: true !global;
|
|
47
|
+
$gridstrap-use-push: true !global;
|
|
48
|
+
$gridstrap-use-pull: true !global;
|
|
49
|
+
$gridstrap-use-rtl: true !global;
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
// Container setup mixin.
|
|
54
|
+
//
|
|
55
|
+
// Pass the small, medium and large container sizes to use.
|
|
56
|
+
//
|
|
57
|
+
// @param number $sm The small (e.g. tablet) container width
|
|
58
|
+
// @param number $md The medium (e.g. laptop) container width
|
|
59
|
+
// @param number $lg The large (e.g. desktop) container width
|
|
60
|
+
|
|
61
|
+
@mixin gridstrap-sizes($sm: 0, $md: 0, $lg: 0) {
|
|
62
|
+
@if $sm != 0{
|
|
63
|
+
$gridstrap-container-sm: $sm !global;
|
|
64
|
+
}
|
|
65
|
+
@if $md != 0{
|
|
66
|
+
$gridstrap-container-md: $md !global;
|
|
67
|
+
}
|
|
68
|
+
@if $lg != 0{
|
|
69
|
+
$gridstrap-container-lg: $lg !global;
|
|
50
70
|
}
|
|
51
71
|
}
|
|
52
72
|
|
|
@@ -137,16 +157,17 @@
|
|
|
137
157
|
// Applies $midfix to class names if present.
|
|
138
158
|
// e.g. "sm" > .col-sm-X
|
|
139
159
|
//
|
|
140
|
-
// @param string $midfix
|
|
160
|
+
// @param string $midfix Optional The midfix to use on the classes
|
|
161
|
+
// @param number $container The container size to base the widths on
|
|
141
162
|
|
|
142
|
-
@mixin gridstrap-build-columns($midfix: "") {
|
|
163
|
+
@mixin gridstrap-build-columns($midfix: "", $container: 100%) {
|
|
143
164
|
@if $midfix != "" {
|
|
144
165
|
$midfix: $midfix + "-";
|
|
145
166
|
}
|
|
146
167
|
|
|
147
168
|
// Add classes/modifiers for each column number
|
|
148
169
|
@for $i from 1 through $gridstrap-cols {
|
|
149
|
-
$gs-col-width: ($i / $gridstrap-cols) *
|
|
170
|
+
$gs-col-width: ($i / $gridstrap-cols) * $container;
|
|
150
171
|
|
|
151
172
|
.col-#{$midfix}#{$i} {
|
|
152
173
|
width: $gs-col-width;
|
|
@@ -160,7 +181,7 @@
|
|
|
160
181
|
|
|
161
182
|
@if $gridstrap-use-of {
|
|
162
183
|
.of-#{$midfix}#{$i} {
|
|
163
|
-
width:
|
|
184
|
+
width: $container / $i;
|
|
164
185
|
}
|
|
165
186
|
}
|
|
166
187
|
|
|
@@ -260,4 +281,25 @@
|
|
|
260
281
|
}
|
|
261
282
|
}
|
|
262
283
|
}
|
|
284
|
+
}
|
|
285
|
+
|
|
286
|
+
// Setup a breakpoint for columns of a certain prefix and container size
|
|
287
|
+
//
|
|
288
|
+
// Will set the container width and call the build-columns mixin,
|
|
289
|
+
// passing the appropriate contianer size based on $gridstrap-fluid
|
|
290
|
+
//
|
|
291
|
+
//
|
|
292
|
+
|
|
293
|
+
@mixin gridstrap-breakpoint($width, $midfix: ''){
|
|
294
|
+
$container: 100%;
|
|
295
|
+
|
|
296
|
+
@if $width != 'auto' {
|
|
297
|
+
$container: if($gridstrap-fluid, 100%, $width);
|
|
298
|
+
}
|
|
299
|
+
|
|
300
|
+
.container {
|
|
301
|
+
width: $width;
|
|
302
|
+
}
|
|
303
|
+
|
|
304
|
+
@include gridstrap-build-columns($midfix, $container);
|
|
263
305
|
}
|
data/stylesheets/inc/_vars.scss
CHANGED
|
@@ -1,11 +1,19 @@
|
|
|
1
|
+
// Fluid or Static mode? (percentage or pixel column widths
|
|
2
|
+
$gridstrap-fluid: true !default;
|
|
3
|
+
|
|
1
4
|
// Column/Gutter values
|
|
2
|
-
$gridstrap-cols:
|
|
3
|
-
$gridstrap-gutter:
|
|
5
|
+
$gridstrap-cols: 12 !default;
|
|
6
|
+
$gridstrap-gutter: 30px !default;
|
|
7
|
+
|
|
8
|
+
// Container width values
|
|
9
|
+
$gridstrap-container-sm: 750px;
|
|
10
|
+
$gridstrap-container-md: 970px;
|
|
11
|
+
$gridstrap-container-lg: 1170px;
|
|
4
12
|
|
|
5
13
|
// Span and Modifer class options
|
|
6
|
-
$gridstrap-use-span:
|
|
7
|
-
$gridstrap-use-of:
|
|
8
|
-
$gridstrap-use-offset:
|
|
9
|
-
$gridstrap-use-push:
|
|
10
|
-
$gridstrap-use-pull:
|
|
11
|
-
$gridstrap-use-rtl:
|
|
14
|
+
$gridstrap-use-span: true !default;
|
|
15
|
+
$gridstrap-use-of: true !default;
|
|
16
|
+
$gridstrap-use-offset: true !default;
|
|
17
|
+
$gridstrap-use-push: true !default;
|
|
18
|
+
$gridstrap-use-pull: true !default;
|
|
19
|
+
$gridstrap-use-rtl: false !default;
|
|
@@ -1,9 +1,7 @@
|
|
|
1
1
|
@mixin gridstrap-build-down {
|
|
2
2
|
@include gridstrap-build-simple;
|
|
3
3
|
|
|
4
|
-
|
|
5
|
-
width: $md-screen - $gridstrap-gutter;
|
|
6
|
-
}
|
|
4
|
+
@include gridstrap-breakpoint($gridstrap-container-md, "");
|
|
7
5
|
|
|
8
6
|
// Tablet/Desktop/Widescreen Columns Setup
|
|
9
7
|
@include gridstrap-setup-columns("xs");
|
|
@@ -12,25 +10,16 @@
|
|
|
12
10
|
|
|
13
11
|
// Large (Widescreen) and up
|
|
14
12
|
@include lg-screen {
|
|
15
|
-
|
|
16
|
-
width: $lg-screen - $gridstrap-gutter;
|
|
17
|
-
}
|
|
18
|
-
@include gridstrap-build-columns("lg");
|
|
13
|
+
@include gridstrap-breakpoint($gridstrap-container-lg, "lg");
|
|
19
14
|
}
|
|
20
15
|
|
|
21
16
|
// Small (Tablet) and down
|
|
22
17
|
@include sm-screen-max {
|
|
23
|
-
|
|
24
|
-
width: $sm-screen - $gridstrap-gutter;
|
|
25
|
-
}
|
|
26
|
-
@include gridstrap-build-columns("sm");
|
|
18
|
+
@include gridstrap-breakpoint($gridstrap-container-sm, "sm");
|
|
27
19
|
}
|
|
28
20
|
|
|
29
21
|
// Extra-Small (Mobile) and down
|
|
30
22
|
@include xs-screen {
|
|
31
|
-
|
|
32
|
-
width: auto;
|
|
33
|
-
}
|
|
34
|
-
@include gridstrap-build-columns("xs");
|
|
23
|
+
@include gridstrap-breakpoint(auto, "xs");
|
|
35
24
|
}
|
|
36
25
|
}
|
|
@@ -6,34 +6,22 @@
|
|
|
6
6
|
@include gridstrap-setup-columns("lg");
|
|
7
7
|
|
|
8
8
|
// Extra-Small (Mobile) and down
|
|
9
|
-
@include xs-screen
|
|
10
|
-
|
|
11
|
-
width: auto;
|
|
12
|
-
}
|
|
13
|
-
@include gridstrap-build-columns("xs");
|
|
9
|
+
@include xs-screen {
|
|
10
|
+
@include gridstrap-breakpoint(auto, "xs");
|
|
14
11
|
}
|
|
15
12
|
|
|
16
13
|
// Small (Tablet) only
|
|
17
14
|
@include sm-screen {
|
|
18
|
-
|
|
19
|
-
width: $sm-screen - $gridstrap-gutter;
|
|
20
|
-
}
|
|
21
|
-
@include gridstrap-build-columns("sm");
|
|
15
|
+
@include gridstrap-breakpoint($gridstrap-container-sm, "sm");
|
|
22
16
|
}
|
|
23
17
|
|
|
24
18
|
// Medium (Desktop) only
|
|
25
19
|
@include md-screen {
|
|
26
|
-
|
|
27
|
-
width: $md-screen - $gridstrap-gutter;
|
|
28
|
-
}
|
|
29
|
-
@include gridstrap-build-columns("md");
|
|
20
|
+
@include gridstrap-breakpoint($gridstrap-container-md, "md");
|
|
30
21
|
}
|
|
31
22
|
|
|
32
23
|
// Large (Widescreen) only
|
|
33
24
|
@include lg-screen {
|
|
34
|
-
|
|
35
|
-
width: $lg-screen - $gridstrap-gutter;
|
|
36
|
-
}
|
|
37
|
-
@include gridstrap-build-columns("lg");
|
|
25
|
+
@include gridstrap-breakpoint($gridstrap-container-lg, "lg");
|
|
38
26
|
}
|
|
39
27
|
}
|
|
@@ -8,25 +8,16 @@
|
|
|
8
8
|
|
|
9
9
|
// Small (Tablet) and Up
|
|
10
10
|
@include sm-screen-min {
|
|
11
|
-
|
|
12
|
-
width: $sm-screen - $gridstrap-gutter;
|
|
13
|
-
}
|
|
14
|
-
@include gridstrap-build-columns("sm");
|
|
11
|
+
@include gridstrap-breakpoint($gridstrap-container-sm, "sm");
|
|
15
12
|
}
|
|
16
13
|
|
|
17
14
|
// Medium (Desktop) and up
|
|
18
15
|
@include md-screen-min {
|
|
19
|
-
|
|
20
|
-
width: $md-screen - $gridstrap-gutter;
|
|
21
|
-
}
|
|
22
|
-
@include gridstrap-build-columns("md");
|
|
16
|
+
@include gridstrap-breakpoint($gridstrap-container-md, "md");
|
|
23
17
|
}
|
|
24
18
|
|
|
25
19
|
// Large (Widescreen) and up
|
|
26
20
|
@include lg-screen {
|
|
27
|
-
|
|
28
|
-
width: $lg-screen - $gridstrap-gutter;
|
|
29
|
-
}
|
|
30
|
-
@include gridstrap-build-columns("lg");
|
|
21
|
+
@include gridstrap-breakpoint($gridstrap-container-lg, "lg");
|
|
31
22
|
}
|
|
32
23
|
}
|
metadata
CHANGED
|
@@ -1,41 +1,41 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: gridstrap
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.
|
|
4
|
+
version: 1.0.0
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Doug Wollison
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2014-
|
|
11
|
+
date: 2014-08-11 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: compass
|
|
15
15
|
requirement: !ruby/object:Gem::Requirement
|
|
16
16
|
requirements:
|
|
17
|
-
- -
|
|
17
|
+
- - ">="
|
|
18
18
|
- !ruby/object:Gem::Version
|
|
19
19
|
version: '0.11'
|
|
20
20
|
type: :runtime
|
|
21
21
|
prerelease: false
|
|
22
22
|
version_requirements: !ruby/object:Gem::Requirement
|
|
23
23
|
requirements:
|
|
24
|
-
- -
|
|
24
|
+
- - ">="
|
|
25
25
|
- !ruby/object:Gem::Version
|
|
26
26
|
version: '0.11'
|
|
27
27
|
- !ruby/object:Gem::Dependency
|
|
28
28
|
name: handysass
|
|
29
29
|
requirement: !ruby/object:Gem::Requirement
|
|
30
30
|
requirements:
|
|
31
|
-
- -
|
|
31
|
+
- - ">="
|
|
32
32
|
- !ruby/object:Gem::Version
|
|
33
33
|
version: 0.1.0
|
|
34
34
|
type: :runtime
|
|
35
35
|
prerelease: false
|
|
36
36
|
version_requirements: !ruby/object:Gem::Requirement
|
|
37
37
|
requirements:
|
|
38
|
-
- -
|
|
38
|
+
- - ">="
|
|
39
39
|
- !ruby/object:Gem::Version
|
|
40
40
|
version: 0.1.0
|
|
41
41
|
description: A bootstrap inspired grid system kit for Compass.
|
|
@@ -64,12 +64,12 @@ require_paths:
|
|
|
64
64
|
- lib
|
|
65
65
|
required_ruby_version: !ruby/object:Gem::Requirement
|
|
66
66
|
requirements:
|
|
67
|
-
- -
|
|
67
|
+
- - ">="
|
|
68
68
|
- !ruby/object:Gem::Version
|
|
69
69
|
version: '0'
|
|
70
70
|
required_rubygems_version: !ruby/object:Gem::Requirement
|
|
71
71
|
requirements:
|
|
72
|
-
- -
|
|
72
|
+
- - ">="
|
|
73
73
|
- !ruby/object:Gem::Version
|
|
74
74
|
version: '0'
|
|
75
75
|
requirements: []
|