gridstrap 0.1.2 → 0.1.3
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/README.md +4 -0
- data/stylesheets/inc/_build.scss +0 -1
- data/stylesheets/inc/_mixins.scss +8 -8
- data/stylesheets/inc/_vars.scss +7 -8
- data/stylesheets/inc/build/_down.scss +7 -11
- data/stylesheets/inc/build/_exact.scss +4 -13
- data/stylesheets/inc/build/_up.scss +3 -8
- 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: 62034cb22f4286cdbdf40321fafb4ad088797e85
|
|
4
|
+
data.tar.gz: 86468136d7e49322ce32507a73fcb5c932c702cd
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: c6fe68a1033a4dff1adafd43697982bdc503d724293727b694c9e22b3b7cd454ba20ae112991f37185b4cbd1b2e767aa61b9f6b99127345571ff767197b4c304
|
|
7
|
+
data.tar.gz: 9263e0eed58ad7cda13a4bb8506c50b49aaa8a67e539c100b5ab2cbed59d36331cdfc14dd6f5773a51d78fe3284f18cba30c3ea17a7267e11d4dc16b6b8d53a1
|
data/README.md
CHANGED
|
@@ -53,6 +53,10 @@ modes are listed below:
|
|
|
53
53
|
to their respective breakpoints.
|
|
54
54
|
* `"none"`: No responsive, just a simple grid. You will have to specify the
|
|
55
55
|
size for the .container when using this.
|
|
56
|
+
|
|
57
|
+
You can specify the breakpoints used via $sm/md/lg-screen variables. These
|
|
58
|
+
widths should be the width of the container + the gutter width. For example,
|
|
59
|
+
`$lg-screen: 1200px` and `$gutter: 30px` will result in a container of 1170px.
|
|
56
60
|
|
|
57
61
|
Gridstrap comes with a few additional classes:
|
|
58
62
|
|
data/stylesheets/inc/_build.scss
CHANGED
|
@@ -50,20 +50,20 @@
|
|
|
50
50
|
@include box-sizing(border-box);
|
|
51
51
|
}
|
|
52
52
|
|
|
53
|
-
%gridstrap-
|
|
54
|
-
padding-
|
|
55
|
-
padding-
|
|
53
|
+
%gridstrap-padding {
|
|
54
|
+
padding-left: $gridstrap-gutter * .5;
|
|
55
|
+
padding-right: $gridstrap-gutter * .5;
|
|
56
56
|
}
|
|
57
57
|
|
|
58
58
|
%gridstrap-col {
|
|
59
|
-
@extend %gridstrap-
|
|
59
|
+
@extend %gridstrap-padding;
|
|
60
60
|
float: left;
|
|
61
61
|
position: relative;
|
|
62
62
|
min-height: 1px;
|
|
63
63
|
}
|
|
64
64
|
|
|
65
65
|
%gridstrap-span {
|
|
66
|
-
@extend %gridstrap-
|
|
66
|
+
@extend %gridstrap-padding;
|
|
67
67
|
margin-left: auto;
|
|
68
68
|
margin-right: auto;
|
|
69
69
|
}
|
|
@@ -74,7 +74,7 @@
|
|
|
74
74
|
|
|
75
75
|
.container,
|
|
76
76
|
.container-fluid {
|
|
77
|
-
@extend %gridstrap-clearfix;
|
|
77
|
+
@extend %gridstrap-clearfix, %gridstrap-padding;
|
|
78
78
|
position: relative;
|
|
79
79
|
margin-left: auto;
|
|
80
80
|
margin-right: auto;
|
|
@@ -82,8 +82,8 @@
|
|
|
82
82
|
|
|
83
83
|
.row {
|
|
84
84
|
@extend %gridstrap-clearfix;
|
|
85
|
-
margin-left: -
|
|
86
|
-
margin-right: -
|
|
85
|
+
margin-left: $gridstrap-gutter * -.5;
|
|
86
|
+
margin-right: $gridstrap-gutter * -.5;
|
|
87
87
|
}
|
|
88
88
|
}
|
|
89
89
|
|
data/stylesheets/inc/_vars.scss
CHANGED
|
@@ -1,11 +1,10 @@
|
|
|
1
1
|
// Column/Gutter values
|
|
2
|
-
$gridstrap-cols:
|
|
3
|
-
$gridstrap-gutter:
|
|
4
|
-
$gridstrap-gutter-half: $gridstrap-gutter / 2;
|
|
2
|
+
$gridstrap-cols: 12 !default;
|
|
3
|
+
$gridstrap-gutter: 30px !default;
|
|
5
4
|
|
|
6
5
|
// Span and Modifer class options
|
|
7
|
-
$gridstrap-use-span:
|
|
8
|
-
$gridstrap-use-of:
|
|
9
|
-
$gridstrap-use-offset:
|
|
10
|
-
$gridstrap-use-push:
|
|
11
|
-
$gridstrap-use-pull:
|
|
6
|
+
$gridstrap-use-span: true !default;
|
|
7
|
+
$gridstrap-use-of: true !default;
|
|
8
|
+
$gridstrap-use-offset: true !default;
|
|
9
|
+
$gridstrap-use-push: true !default;
|
|
10
|
+
$gridstrap-use-pull: true !default;
|
|
@@ -1,19 +1,19 @@
|
|
|
1
1
|
@mixin gridstrap-build-down {
|
|
2
2
|
@include gridstrap-build-simple;
|
|
3
|
+
|
|
4
|
+
.container {
|
|
5
|
+
width: $md-screen;
|
|
6
|
+
}
|
|
3
7
|
|
|
4
8
|
// Tablet/Desktop/Widescreen Columns Setup
|
|
5
9
|
@include gridstrap-setup-columns("xs");
|
|
6
10
|
@include gridstrap-setup-columns("sm");
|
|
7
11
|
@include gridstrap-setup-columns("lg");
|
|
8
12
|
|
|
9
|
-
.container {
|
|
10
|
-
max-width: $md-screen - $gridstrap-gutter;
|
|
11
|
-
}
|
|
12
|
-
|
|
13
13
|
// Large (Widescreen) and up
|
|
14
14
|
@include lg-screen-min {
|
|
15
15
|
.container {
|
|
16
|
-
|
|
16
|
+
width: $lg-screen;
|
|
17
17
|
}
|
|
18
18
|
@include gridstrap-build-columns("lg");
|
|
19
19
|
}
|
|
@@ -21,19 +21,15 @@
|
|
|
21
21
|
// Small (Tablet) and down
|
|
22
22
|
@include sm-screen-max {
|
|
23
23
|
.container {
|
|
24
|
-
|
|
24
|
+
width: $sm-screen;
|
|
25
25
|
}
|
|
26
26
|
@include gridstrap-build-columns("sm");
|
|
27
27
|
}
|
|
28
28
|
|
|
29
29
|
// Extra-Small (Mobile) and down
|
|
30
30
|
@include xs-screen {
|
|
31
|
-
.container,
|
|
32
|
-
.container-fluid {
|
|
33
|
-
@include gridstrap-gutter-padding;
|
|
34
|
-
}
|
|
35
31
|
.container {
|
|
36
|
-
|
|
32
|
+
width: auto;
|
|
37
33
|
}
|
|
38
34
|
@include gridstrap-build-columns("xs");
|
|
39
35
|
}
|
|
@@ -8,24 +8,15 @@
|
|
|
8
8
|
// Extra-Small (Mobile) and down
|
|
9
9
|
@include xs-screen($gridstrap-gutter) {
|
|
10
10
|
.container {
|
|
11
|
-
|
|
11
|
+
width: auto;
|
|
12
12
|
}
|
|
13
13
|
@include gridstrap-build-columns("xs");
|
|
14
14
|
}
|
|
15
|
-
|
|
16
|
-
// Small (Tablet) and up
|
|
17
|
-
@include sm-screen-min {
|
|
18
|
-
.container,
|
|
19
|
-
.container-fluid {
|
|
20
|
-
padding-left: 0;
|
|
21
|
-
padding-right: 0;
|
|
22
|
-
}
|
|
23
|
-
}
|
|
24
15
|
|
|
25
16
|
// Small (Tablet) only
|
|
26
17
|
@include sm-screen {
|
|
27
18
|
.container {
|
|
28
|
-
|
|
19
|
+
width: $sm-screen;
|
|
29
20
|
}
|
|
30
21
|
@include gridstrap-build-columns("sm");
|
|
31
22
|
}
|
|
@@ -33,7 +24,7 @@
|
|
|
33
24
|
// Medium (Desktop) only
|
|
34
25
|
@include md-screen {
|
|
35
26
|
.container {
|
|
36
|
-
|
|
27
|
+
width: $md-screen;
|
|
37
28
|
}
|
|
38
29
|
@include gridstrap-build-columns("md");
|
|
39
30
|
}
|
|
@@ -41,7 +32,7 @@
|
|
|
41
32
|
// Large (Widescreen) only
|
|
42
33
|
@include lg-screen {
|
|
43
34
|
.container {
|
|
44
|
-
|
|
35
|
+
width: $lg-screen;
|
|
45
36
|
}
|
|
46
37
|
@include gridstrap-build-columns("lg");
|
|
47
38
|
}
|
|
@@ -8,13 +8,8 @@
|
|
|
8
8
|
|
|
9
9
|
// Small (Tablet) and Up
|
|
10
10
|
@include sm-screen-min {
|
|
11
|
-
.container,
|
|
12
|
-
.container-fluid {
|
|
13
|
-
padding-left: 0;
|
|
14
|
-
padding-right: 0;
|
|
15
|
-
}
|
|
16
11
|
.container {
|
|
17
|
-
|
|
12
|
+
width: $sm-screen;
|
|
18
13
|
}
|
|
19
14
|
@include gridstrap-build-columns("sm");
|
|
20
15
|
}
|
|
@@ -22,7 +17,7 @@
|
|
|
22
17
|
// Medium (Desktop) and up
|
|
23
18
|
@include md-screen-min {
|
|
24
19
|
.container {
|
|
25
|
-
|
|
20
|
+
width: $md-screen;
|
|
26
21
|
}
|
|
27
22
|
@include gridstrap-build-columns("md");
|
|
28
23
|
}
|
|
@@ -30,7 +25,7 @@
|
|
|
30
25
|
// Large (Widescreen) and up
|
|
31
26
|
@include lg-screen {
|
|
32
27
|
.container {
|
|
33
|
-
|
|
28
|
+
width: $lg-screen;
|
|
34
29
|
}
|
|
35
30
|
@include gridstrap-build-columns("lg");
|
|
36
31
|
}
|
metadata
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: gridstrap
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.1.
|
|
4
|
+
version: 0.1.3
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Doug Wollison
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2012-01-
|
|
11
|
+
date: 2012-01-29 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: compass
|