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 CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: bf420ee8f8414682a5053783fd1eaecb3513196f
4
- data.tar.gz: ad87eacd8774bf10561f74a91bad9774546625b6
3
+ metadata.gz: 9db04c3dba6a2a5737e49441607aad9764d819bf
4
+ data.tar.gz: 2e42ea150942757174b65bbec1973ef58cb7d8e0
5
5
  SHA512:
6
- metadata.gz: f9f7dba16150dfc33a212e0f57634d5faf175010ce7c0b33e04854ece7a3044f785fd785e1c6b0b978c16a92a92c481537840552a691d1277c5d5bca3f05f197
7
- data.tar.gz: b1b2d443d7e921513fdd7a7ae9bd7e3b02b5b342a40b1fcbd9b5d5d2b738c4a1d9eae9a9e53717a19850607ce529ce36ee3c0a910b6ef653ccc87cd2631e8df4
6
+ metadata.gz: a1ed39129c0405b1a29a0255d4f731133a58d420b1e75654f51541b87ee59a395aa1cba50ae854986cedb08cc74926ecbd3dbb9d493d4bd471c15108ed103f38
7
+ data.tar.gz: 0d4f58b8d27475550ad98b208078f15be4f8a30b593adec4f8b5878821be6f553ead8879551d77024ca57e1153c097a408122a74974392ec6cb31c803663a4a6
@@ -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
- %gridstrap-gutter-padding{
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, %gridstrap-gutter-padding;
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-simple(){
1
+ @mixin gridstrap-build-simple {
2
2
  // Base Columns Setup/Build
3
- @include gridstrap-setup-columns();
4
- @include gridstrap-build-columns();
3
+ @include gridstrap-setup-columns;
4
+ @include gridstrap-build-columns;
5
5
  }
@@ -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.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-27 00:00:00.000000000 Z
11
+ date: 2012-01-28 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: compass