gridstrap 0.1.1 → 0.1.2
Sign up to get free protection for your applications and to get access to all the features.
- 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
|