gridstrap 0.1.1 → 0.1.2
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 -6
- data/stylesheets/inc/_mixins.scss +27 -23
- data/stylesheets/inc/build/_down.scss +13 -9
- data/stylesheets/inc/build/_exact.scss +18 -9
- data/stylesheets/inc/build/_none.scss +3 -3
- data/stylesheets/inc/build/_up.scss +13 -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: 9db04c3dba6a2a5737e49441607aad9764d819bf
|
|
4
|
+
data.tar.gz: 2e42ea150942757174b65bbec1973ef58cb7d8e0
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: a1ed39129c0405b1a29a0255d4f731133a58d420b1e75654f51541b87ee59a395aa1cba50ae854986cedb08cc74926ecbd3dbb9d493d4bd471c15108ed103f38
|
|
7
|
+
data.tar.gz: 0d4f58b8d27475550ad98b208078f15be4f8a30b593adec4f8b5878821be6f553ead8879551d77024ca57e1153c097a408122a74974392ec6cb31c803663a4a6
|
data/stylesheets/inc/_build.scss
CHANGED
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
// @param mixed $cols The number of columns
|
|
24
24
|
// @param mixed $gutter The width of the gutter
|
|
25
25
|
|
|
26
|
-
@mixin gridstrap($responsive: "none", $cols: 0, $gutter: 0){
|
|
26
|
+
@mixin gridstrap($responsive: "none", $cols: 0, $gutter: 0) {
|
|
27
27
|
@if $cols != 0 {
|
|
28
28
|
$gridstrap-cols: $cols;
|
|
29
29
|
}
|
|
@@ -33,19 +33,19 @@
|
|
|
33
33
|
}
|
|
34
34
|
|
|
35
35
|
// Base Grid Setup
|
|
36
|
-
@include gridstrap-base
|
|
36
|
+
@include gridstrap-base;
|
|
37
37
|
|
|
38
38
|
// Use appropriate buid mixin
|
|
39
39
|
@if $responsive == "none" {
|
|
40
|
-
@include gridstrap-build-simple
|
|
40
|
+
@include gridstrap-build-simple;
|
|
41
41
|
}
|
|
42
42
|
@else if $responsive == "up" {
|
|
43
|
-
@include gridstrap-build-up
|
|
43
|
+
@include gridstrap-build-up;
|
|
44
44
|
}
|
|
45
45
|
@else if $responsive == "down" {
|
|
46
|
-
@include gridstrap-build-down
|
|
46
|
+
@include gridstrap-build-down;
|
|
47
47
|
}
|
|
48
48
|
@else if $responsive == "exact" {
|
|
49
|
-
@include gridstrap-build-exact
|
|
49
|
+
@include gridstrap-build-exact;
|
|
50
50
|
}
|
|
51
51
|
}
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
//
|
|
10
10
|
// @param string $uses... The list of modifiers to use.
|
|
11
11
|
|
|
12
|
-
@mixin gridstrap-use($uses...){
|
|
12
|
+
@mixin gridstrap-use($uses...) {
|
|
13
13
|
// Default all to false
|
|
14
14
|
$gridstrap-use-span: false;
|
|
15
15
|
$gridstrap-use-of: false;
|
|
@@ -45,41 +45,45 @@
|
|
|
45
45
|
// Internal Use.
|
|
46
46
|
// Sets up placeholders and contianer/row styling.
|
|
47
47
|
|
|
48
|
-
@mixin gridstrap-base
|
|
49
|
-
|
|
48
|
+
@mixin gridstrap-base {
|
|
49
|
+
*, *:before, *:after {
|
|
50
|
+
@include box-sizing(border-box);
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
%gridstrap-gutter-padding {
|
|
50
54
|
padding-right: $gridstrap-gutter-half;
|
|
51
55
|
padding-left: $gridstrap-gutter-half;
|
|
52
56
|
}
|
|
53
57
|
|
|
54
|
-
%gridstrap-col{
|
|
58
|
+
%gridstrap-col {
|
|
55
59
|
@extend %gridstrap-gutter-padding;
|
|
56
60
|
float: left;
|
|
57
61
|
position: relative;
|
|
58
62
|
min-height: 1px;
|
|
59
63
|
}
|
|
60
64
|
|
|
61
|
-
%gridstrap-span{
|
|
65
|
+
%gridstrap-span {
|
|
62
66
|
@extend %gridstrap-gutter-padding;
|
|
63
67
|
margin-left: auto;
|
|
64
68
|
margin-right: auto;
|
|
65
69
|
}
|
|
66
70
|
|
|
67
|
-
%gridstrap-clearfix{
|
|
71
|
+
%gridstrap-clearfix {
|
|
68
72
|
@include pie-clearfix();
|
|
69
73
|
}
|
|
70
74
|
|
|
71
75
|
.container,
|
|
72
|
-
.container-fluid{
|
|
73
|
-
@extend %gridstrap-clearfix
|
|
76
|
+
.container-fluid {
|
|
77
|
+
@extend %gridstrap-clearfix;
|
|
74
78
|
position: relative;
|
|
75
79
|
margin-left: auto;
|
|
76
80
|
margin-right: auto;
|
|
77
81
|
}
|
|
78
82
|
|
|
79
|
-
.row{
|
|
83
|
+
.row {
|
|
80
84
|
@extend %gridstrap-clearfix;
|
|
81
|
-
margin-left: $gridstrap-gutter-half;
|
|
82
|
-
margin-right: $gridstrap-gutter-half;
|
|
85
|
+
margin-left: -1 * $gridstrap-gutter-half;
|
|
86
|
+
margin-right: -1 * $gridstrap-gutter-half;
|
|
83
87
|
}
|
|
84
88
|
}
|
|
85
89
|
|
|
@@ -90,18 +94,18 @@
|
|
|
90
94
|
//
|
|
91
95
|
// @param string $midfix Optional The midfix to use on the classes
|
|
92
96
|
|
|
93
|
-
@mixin gridstrap-setup-columns($midfix:""){
|
|
97
|
+
@mixin gridstrap-setup-columns($midfix:"") {
|
|
94
98
|
@if $midfix != "" {
|
|
95
99
|
$midfix: $midfix + "-";
|
|
96
100
|
}
|
|
97
101
|
|
|
98
102
|
@for $i from 1 through $gridstrap-cols {
|
|
99
|
-
.col-#{$midfix}#{$i}{
|
|
103
|
+
.col-#{$midfix}#{$i} {
|
|
100
104
|
@extend %gridstrap-col;
|
|
101
105
|
}
|
|
102
106
|
|
|
103
107
|
@if $gridstrap-use-span {
|
|
104
|
-
.span-#{$midfix}#{$i}{
|
|
108
|
+
.span-#{$midfix}#{$i} {
|
|
105
109
|
@extend %gridstrap-span;
|
|
106
110
|
}
|
|
107
111
|
}
|
|
@@ -125,18 +129,18 @@
|
|
|
125
129
|
@for $i from 1 through $gridstrap-cols {
|
|
126
130
|
$width: ($i / $gridstrap-cols) * 100%;
|
|
127
131
|
|
|
128
|
-
.col-#{$midfix}#{$i}{
|
|
132
|
+
.col-#{$midfix}#{$i} {
|
|
129
133
|
width: $width;
|
|
130
134
|
}
|
|
131
135
|
|
|
132
136
|
@if $gridstrap-use-span {
|
|
133
|
-
.span-#{$midfix}#{$i}{
|
|
137
|
+
.span-#{$midfix}#{$i} {
|
|
134
138
|
width: $width;
|
|
135
139
|
}
|
|
136
140
|
}
|
|
137
141
|
|
|
138
142
|
@if $gridstrap-use-of {
|
|
139
|
-
.of-#{$midfix}#{$i}{
|
|
143
|
+
.of-#{$midfix}#{$i} {
|
|
140
144
|
width: 100% / $i;
|
|
141
145
|
}
|
|
142
146
|
}
|
|
@@ -144,17 +148,17 @@
|
|
|
144
148
|
// No modifiers for final column
|
|
145
149
|
@if $i < $gridstrap-cols {
|
|
146
150
|
@if $gridstrap-use-offset {
|
|
147
|
-
.offset-#{$midfix}#{$i}{
|
|
151
|
+
.offset-#{$midfix}#{$i} {
|
|
148
152
|
margin-left: $width;
|
|
149
153
|
}
|
|
150
154
|
}
|
|
151
155
|
@if $gridstrap-use-push {
|
|
152
|
-
.push-#{$midfix}#{$i}{
|
|
156
|
+
.push-#{$midfix}#{$i} {
|
|
153
157
|
left: $width;
|
|
154
158
|
}
|
|
155
159
|
}
|
|
156
160
|
@if $gridstrap-use-pull {
|
|
157
|
-
.pull-#{$midfix}#{$i}{
|
|
161
|
+
.pull-#{$midfix}#{$i} {
|
|
158
162
|
right: $width;
|
|
159
163
|
}
|
|
160
164
|
}
|
|
@@ -163,17 +167,17 @@
|
|
|
163
167
|
|
|
164
168
|
// Add resets
|
|
165
169
|
@if $gridstrap-use-offset {
|
|
166
|
-
.offset-#{$midfix}0{
|
|
170
|
+
.offset-#{$midfix}0 {
|
|
167
171
|
margin-left: 0;
|
|
168
172
|
}
|
|
169
173
|
}
|
|
170
174
|
@if $gridstrap-use-push {
|
|
171
|
-
.push-#{$midfix}0{
|
|
175
|
+
.push-#{$midfix}0 {
|
|
172
176
|
margin-left: 0;
|
|
173
177
|
}
|
|
174
178
|
}
|
|
175
179
|
@if $gridstrap-use-pull {
|
|
176
|
-
.pull-#{$midfix}0{
|
|
180
|
+
.pull-#{$midfix}0 {
|
|
177
181
|
margin-left: 0;
|
|
178
182
|
}
|
|
179
183
|
}
|
|
@@ -1,34 +1,38 @@
|
|
|
1
|
-
@mixin gridstrap-build-down
|
|
2
|
-
@include gridstrap-build-simple
|
|
1
|
+
@mixin gridstrap-build-down {
|
|
2
|
+
@include gridstrap-build-simple;
|
|
3
3
|
|
|
4
4
|
// Tablet/Desktop/Widescreen Columns Setup
|
|
5
5
|
@include gridstrap-setup-columns("xs");
|
|
6
6
|
@include gridstrap-setup-columns("sm");
|
|
7
7
|
@include gridstrap-setup-columns("lg");
|
|
8
8
|
|
|
9
|
-
.container{
|
|
9
|
+
.container {
|
|
10
10
|
max-width: $md-screen - $gridstrap-gutter;
|
|
11
11
|
}
|
|
12
12
|
|
|
13
13
|
// Large (Widescreen) and up
|
|
14
|
-
@include lg-screen-min{
|
|
15
|
-
.container{
|
|
14
|
+
@include lg-screen-min {
|
|
15
|
+
.container {
|
|
16
16
|
max-width: $lg-screen - $gridstrap-gutter;
|
|
17
17
|
}
|
|
18
18
|
@include gridstrap-build-columns("lg");
|
|
19
19
|
}
|
|
20
20
|
|
|
21
21
|
// Small (Tablet) and down
|
|
22
|
-
@include sm-screen-max{
|
|
23
|
-
.container{
|
|
22
|
+
@include sm-screen-max {
|
|
23
|
+
.container {
|
|
24
24
|
max-width: $sm-screen - $gridstrap-gutter;
|
|
25
25
|
}
|
|
26
26
|
@include gridstrap-build-columns("sm");
|
|
27
27
|
}
|
|
28
28
|
|
|
29
29
|
// Extra-Small (Mobile) and down
|
|
30
|
-
@include xs-screen{
|
|
31
|
-
.container
|
|
30
|
+
@include xs-screen {
|
|
31
|
+
.container,
|
|
32
|
+
.container-fluid {
|
|
33
|
+
@include gridstrap-gutter-padding;
|
|
34
|
+
}
|
|
35
|
+
.container {
|
|
32
36
|
max-width: none;
|
|
33
37
|
}
|
|
34
38
|
@include gridstrap-build-columns("xs");
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
@mixin gridstrap-build-exact
|
|
1
|
+
@mixin gridstrap-build-exact {
|
|
2
2
|
// Mobile/Tablet/Desktop/Widescreen Columns Setup
|
|
3
3
|
@include gridstrap-setup-columns("xs");
|
|
4
4
|
@include gridstrap-setup-columns("sm");
|
|
@@ -6,32 +6,41 @@
|
|
|
6
6
|
@include gridstrap-setup-columns("lg");
|
|
7
7
|
|
|
8
8
|
// Extra-Small (Mobile) and down
|
|
9
|
-
@include xs-screen($gridstrap-gutter){
|
|
10
|
-
.container{
|
|
9
|
+
@include xs-screen($gridstrap-gutter) {
|
|
10
|
+
.container {
|
|
11
11
|
max-width: none;
|
|
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
|
+
}
|
|
15
24
|
|
|
16
25
|
// Small (Tablet) only
|
|
17
|
-
@include sm-screen{
|
|
18
|
-
.container{
|
|
26
|
+
@include sm-screen {
|
|
27
|
+
.container {
|
|
19
28
|
max-width: $sm-screen - $gridstrap-gutter;
|
|
20
29
|
}
|
|
21
30
|
@include gridstrap-build-columns("sm");
|
|
22
31
|
}
|
|
23
32
|
|
|
24
33
|
// Medium (Desktop) only
|
|
25
|
-
@include md-screen{
|
|
26
|
-
.container{
|
|
34
|
+
@include md-screen {
|
|
35
|
+
.container {
|
|
27
36
|
max-width: $md-screen - $gridstrap-gutter;
|
|
28
37
|
}
|
|
29
38
|
@include gridstrap-build-columns("md");
|
|
30
39
|
}
|
|
31
40
|
|
|
32
41
|
// Large (Widescreen) only
|
|
33
|
-
@include lg-screen{
|
|
34
|
-
.container{
|
|
42
|
+
@include lg-screen {
|
|
43
|
+
.container {
|
|
35
44
|
max-width: $lg-screen - $gridstrap-gutter;
|
|
36
45
|
}
|
|
37
46
|
@include gridstrap-build-columns("lg");
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
@mixin gridstrap-build-up
|
|
2
|
-
@include gridstrap-build-simple
|
|
1
|
+
@mixin gridstrap-build-up {
|
|
2
|
+
@include gridstrap-build-simple;
|
|
3
3
|
|
|
4
4
|
// Tablet/Desktop/Widescreen Columns Setup
|
|
5
5
|
@include gridstrap-setup-columns("sm");
|
|
@@ -7,24 +7,29 @@
|
|
|
7
7
|
@include gridstrap-setup-columns("lg");
|
|
8
8
|
|
|
9
9
|
// Small (Tablet) and Up
|
|
10
|
-
@include sm-screen-min{
|
|
11
|
-
.container
|
|
10
|
+
@include sm-screen-min {
|
|
11
|
+
.container,
|
|
12
|
+
.container-fluid {
|
|
13
|
+
padding-left: 0;
|
|
14
|
+
padding-right: 0;
|
|
15
|
+
}
|
|
16
|
+
.container {
|
|
12
17
|
max-width: $sm-screen - $gridstrap-gutter;
|
|
13
18
|
}
|
|
14
19
|
@include gridstrap-build-columns("sm");
|
|
15
20
|
}
|
|
16
21
|
|
|
17
22
|
// Medium (Desktop) and up
|
|
18
|
-
@include md-screen-min{
|
|
19
|
-
.container{
|
|
23
|
+
@include md-screen-min {
|
|
24
|
+
.container {
|
|
20
25
|
max-width: $md-screen - $gridstrap-gutter;
|
|
21
26
|
}
|
|
22
27
|
@include gridstrap-build-columns("md");
|
|
23
28
|
}
|
|
24
29
|
|
|
25
30
|
// Large (Widescreen) and up
|
|
26
|
-
@include lg-screen{
|
|
27
|
-
.container{
|
|
31
|
+
@include lg-screen {
|
|
32
|
+
.container {
|
|
28
33
|
max-width: $lg-screen - $gridstrap-gutter;
|
|
29
34
|
}
|
|
30
35
|
@include gridstrap-build-columns("lg");
|
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.2
|
|
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-28 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: compass
|