grids_lite 1.0.0 → 1.0.1
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +31 -10
- data/app/assets/stylesheets/grids_lite/{base.css → base.scss} +4 -2
- data/app/assets/stylesheets/grids_lite/col-10.scss +97 -0
- data/app/assets/stylesheets/grids_lite/col-11.scss +106 -0
- data/app/assets/stylesheets/grids_lite/col-12.scss +115 -0
- data/app/assets/stylesheets/grids_lite/col-13.scss +124 -0
- data/app/assets/stylesheets/grids_lite/col-14.scss +133 -0
- data/app/assets/stylesheets/grids_lite/col-2.scss +25 -0
- data/app/assets/stylesheets/grids_lite/col-3.scss +34 -0
- data/app/assets/stylesheets/grids_lite/col-4.scss +43 -0
- data/app/assets/stylesheets/grids_lite/col-5.scss +52 -0
- data/app/assets/stylesheets/grids_lite/col-6.scss +61 -0
- data/app/assets/stylesheets/grids_lite/col-7.scss +70 -0
- data/app/assets/stylesheets/grids_lite/col-8.scss +79 -0
- data/app/assets/stylesheets/grids_lite/col-9.scss +88 -0
- data/app/assets/stylesheets/grids_lite/mixins.scss +3 -0
- data/grids_lite.gemspec +1 -0
- data/lib/generators/grids_lite_generator.rb +10 -0
- data/lib/generators/templates/variables.scss +3 -0
- data/lib/grids_lite/version.rb +1 -1
- metadata +34 -11
- data/app/assets/stylesheets/grids_lite/col-2.css +0 -22
- data/app/assets/stylesheets/grids_lite/col-3.css +0 -31
- data/app/assets/stylesheets/grids_lite/col-4.css +0 -40
- data/app/assets/stylesheets/grids_lite/col-5.css +0 -49
- data/app/assets/stylesheets/grids_lite/col-6.css +0 -58
- data/app/assets/stylesheets/grids_lite/col-7.css +0 -67
- data/app/assets/stylesheets/grids_lite/col-8.css +0 -76
- /data/app/assets/stylesheets/grids_lite/{col-1.css → col-1.scss} +0 -0
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 6fdc5ba2fac54e175d1466e82074058591cd430c
|
4
|
+
data.tar.gz: 51e01ddf7e4001226acaf65c38852b93a7edbd80
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 13408a9edce5737910723c1922831d114a5824231fbf60669a7794cf0e5e4c7b4a95d59eb0a490b091391cd6236d5b869fbd5920cabf3533eb82a20d23adf842
|
7
|
+
data.tar.gz: 3b030031e1e164aa5b9c526edd3c2306335e83cfd79ef2fa994265c137ae902b7d09e39d51ffdfacbc82a56e2d6806bc50e173433ea62b47e9b2c60297741a87
|
data/README.md
CHANGED
@@ -7,7 +7,7 @@ A responsive grid system doesn't have to be complicated or full of unused styles
|
|
7
7
|
Add this line to your application's Gemfile:
|
8
8
|
|
9
9
|
```ruby
|
10
|
-
gem 'grids_lite'
|
10
|
+
gem 'grids_lite'
|
11
11
|
```
|
12
12
|
|
13
13
|
And then execute:
|
@@ -19,6 +19,7 @@ Or install it yourself as:
|
|
19
19
|
$ gem install grids_lite
|
20
20
|
|
21
21
|
## Setup
|
22
|
+
|
22
23
|
Pick and choose which column stylesheets to include in your asset pipeline. **base is not optional.**
|
23
24
|
|
24
25
|
```
|
@@ -33,6 +34,12 @@ Pick and choose which column stylesheets to include in your asset pipeline. **ba
|
|
33
34
|
*= require "grids_lite/col-6"
|
34
35
|
*= require "grids_lite/col-7"
|
35
36
|
*= require "grids_lite/col-8"
|
37
|
+
*= require "grids_lite/col-9"
|
38
|
+
*= require "grids_lite/col-10"
|
39
|
+
*= require "grids_lite/col-11"
|
40
|
+
*= require "grids_lite/col-12"
|
41
|
+
*= require "grids_lite/col-13"
|
42
|
+
*= require "grids_lite/col-14"
|
36
43
|
```
|
37
44
|
|
38
45
|
|
@@ -91,21 +98,35 @@ Example using gutters
|
|
91
98
|
</div>
|
92
99
|
```
|
93
100
|
|
94
|
-
##
|
101
|
+
## Customize
|
102
|
+
|
103
|
+
To change media query breakpoints and gutter widths run the variables generator
|
104
|
+
```
|
105
|
+
rails g grids_lite variables
|
106
|
+
```
|
107
|
+
|
108
|
+
Then you can change the sass variables in the generated file located at ```app/assets/stylesheets/grids_lite_variables.scss```
|
109
|
+
|
110
|
+
```
|
111
|
+
$med-width: 768px;
|
112
|
+
$lrg-width: 1024px;
|
113
|
+
$gutter-width: 20px;
|
114
|
+
```
|
115
|
+
|
116
|
+
|
117
|
+
|
118
|
+
## Notes
|
95
119
|
|
96
120
|
GridsLite uses ```display: inline-block``` to arrange the columns. To account for the default horizontal space between inline-block elements, GridsLite sets ```font-size: 0``` using the ```columns``` class. This means that **you MUST declare font-sizes for your text elements** with classes, id's, inline or however you wish.
|
97
121
|
|
98
|
-
When using ```gutters```, be aware
|
122
|
+
When using ```gutters```, be aware a side margin is applied to that class and ```col-``` elements have side padding applied to them. It would be advisable when using ```gutters``` to not use any side margin/padding directly on those elements and instead use it above or below them in the dom hierarchy so no conflicts occur.
|
123
|
+
|
99
124
|
|
100
125
|
|
101
126
|
## Future releases
|
102
|
-
|
103
|
-
|
104
|
-
|
105
|
-
- tablet width starting at 768px
|
106
|
-
- desktop width starting at 1024px
|
107
|
-
- gutters distances set to 20px
|
108
|
-
- multiple nesting layers for gutters without extra padding
|
127
|
+
- Be able to nest columns within columns while using gutters and gutters not multiply on each level
|
128
|
+
|
129
|
+
|
109
130
|
|
110
131
|
## Contributing
|
111
132
|
|
@@ -1,5 +1,7 @@
|
|
1
|
+
@import "grids_lite_variables";
|
2
|
+
|
1
3
|
.gutters {
|
2
|
-
margin: 0 -
|
4
|
+
margin: 0 calc(#{$gutter-width} * -0.5);
|
3
5
|
}
|
4
6
|
.gutters [class*=col-] {
|
5
7
|
-webkit-box-sizing: border-box;
|
@@ -7,7 +9,7 @@
|
|
7
9
|
-ms-box-sizing: border-box;
|
8
10
|
-o-box-sizing: border-box;
|
9
11
|
box-sizing: border-box;
|
10
|
-
padding: 0
|
12
|
+
padding: 0 calc(#{$gutter-width} * 0.5);
|
11
13
|
}
|
12
14
|
[class*=col-] {
|
13
15
|
display: inline-block;
|
@@ -0,0 +1,97 @@
|
|
1
|
+
@import "grids_lite_variables";
|
2
|
+
@import "mixins";
|
3
|
+
|
4
|
+
.col-10-10 {
|
5
|
+
@include percentage(10, 10);
|
6
|
+
}
|
7
|
+
.col-9-10 {
|
8
|
+
@include percentage(9, 10);
|
9
|
+
}
|
10
|
+
.col-8-10 {
|
11
|
+
@include percentage(8, 10);
|
12
|
+
}
|
13
|
+
.col-7-10 {
|
14
|
+
@include percentage(7, 10);
|
15
|
+
}
|
16
|
+
.col-6-10 {
|
17
|
+
@include percentage(6, 10);
|
18
|
+
}
|
19
|
+
.col-5-10 {
|
20
|
+
@include percentage(5, 10);
|
21
|
+
}
|
22
|
+
.col-4-10 {
|
23
|
+
@include percentage(4, 10);
|
24
|
+
}
|
25
|
+
.col-3-10 {
|
26
|
+
@include percentage(3, 10);
|
27
|
+
}
|
28
|
+
.col-2-10 {
|
29
|
+
@include percentage(2, 10);
|
30
|
+
}
|
31
|
+
.col-1-10 {
|
32
|
+
@include percentage(1, 10);
|
33
|
+
}
|
34
|
+
@media only screen and (min-width: $med-width) {
|
35
|
+
.col-10-10-med {
|
36
|
+
@include percentage(10, 10);
|
37
|
+
}
|
38
|
+
.col-9-10-med {
|
39
|
+
@include percentage(9, 10);
|
40
|
+
}
|
41
|
+
.col-8-10-med {
|
42
|
+
@include percentage(8, 10);
|
43
|
+
}
|
44
|
+
.col-7-10-med {
|
45
|
+
@include percentage(7, 10);
|
46
|
+
}
|
47
|
+
.col-6-10-med {
|
48
|
+
@include percentage(6, 10);
|
49
|
+
}
|
50
|
+
.col-5-10-med {
|
51
|
+
@include percentage(5, 10);
|
52
|
+
}
|
53
|
+
.col-4-10-med {
|
54
|
+
@include percentage(4, 10);
|
55
|
+
}
|
56
|
+
.col-3-10-med {
|
57
|
+
@include percentage(3, 10);
|
58
|
+
}
|
59
|
+
.col-2-10-med {
|
60
|
+
@include percentage(2, 10);
|
61
|
+
}
|
62
|
+
.col-1-10-med {
|
63
|
+
@include percentage(1, 10);
|
64
|
+
}
|
65
|
+
}
|
66
|
+
@media only screen and (min-width: $lrg-width) {
|
67
|
+
.col-10-10-lrg {
|
68
|
+
@include percentage(10, 10);
|
69
|
+
}
|
70
|
+
.col-9-10-lrg {
|
71
|
+
@include percentage(9, 10);
|
72
|
+
}
|
73
|
+
.col-8-10-lrg {
|
74
|
+
@include percentage(8, 10);
|
75
|
+
}
|
76
|
+
.col-7-10-lrg {
|
77
|
+
@include percentage(7, 10);
|
78
|
+
}
|
79
|
+
.col-6-10-lrg {
|
80
|
+
@include percentage(6, 10);
|
81
|
+
}
|
82
|
+
.col-5-10-lrg {
|
83
|
+
@include percentage(5, 10);
|
84
|
+
}
|
85
|
+
.col-4-10-lrg {
|
86
|
+
@include percentage(4, 10);
|
87
|
+
}
|
88
|
+
.col-3-10-lrg {
|
89
|
+
@include percentage(3, 10);
|
90
|
+
}
|
91
|
+
.col-2-10-lrg {
|
92
|
+
@include percentage(2, 10);
|
93
|
+
}
|
94
|
+
.col-1-10-lrg {
|
95
|
+
@include percentage(1, 10);
|
96
|
+
}
|
97
|
+
}
|
@@ -0,0 +1,106 @@
|
|
1
|
+
@import "grids_lite_variables";
|
2
|
+
@import "mixins";
|
3
|
+
|
4
|
+
.col-11-11 {
|
5
|
+
@include percentage(11, 11);
|
6
|
+
}
|
7
|
+
.col-10-11 {
|
8
|
+
@include percentage(10, 11);
|
9
|
+
}
|
10
|
+
.col-9-11 {
|
11
|
+
@include percentage(9, 11);
|
12
|
+
}
|
13
|
+
.col-8-11 {
|
14
|
+
@include percentage(8, 11);
|
15
|
+
}
|
16
|
+
.col-7-11 {
|
17
|
+
@include percentage(7, 11);
|
18
|
+
}
|
19
|
+
.col-6-11 {
|
20
|
+
@include percentage(6, 11);
|
21
|
+
}
|
22
|
+
.col-5-11 {
|
23
|
+
@include percentage(5, 11);
|
24
|
+
}
|
25
|
+
.col-4-11 {
|
26
|
+
@include percentage(4, 11);
|
27
|
+
}
|
28
|
+
.col-3-11 {
|
29
|
+
@include percentage(3, 11);
|
30
|
+
}
|
31
|
+
.col-2-11 {
|
32
|
+
@include percentage(2, 11);
|
33
|
+
}
|
34
|
+
.col-1-11 {
|
35
|
+
@include percentage(1, 11);
|
36
|
+
}
|
37
|
+
@media only screen and (min-width: $med-width) {
|
38
|
+
.col-11-11-med {
|
39
|
+
@include percentage(11, 11);
|
40
|
+
}
|
41
|
+
.col-10-11-med {
|
42
|
+
@include percentage(10, 11);
|
43
|
+
}
|
44
|
+
.col-9-11-med {
|
45
|
+
@include percentage(9, 11);
|
46
|
+
}
|
47
|
+
.col-8-11-med {
|
48
|
+
@include percentage(8, 11);
|
49
|
+
}
|
50
|
+
.col-7-11-med {
|
51
|
+
@include percentage(7, 11);
|
52
|
+
}
|
53
|
+
.col-6-11-med {
|
54
|
+
@include percentage(6, 11);
|
55
|
+
}
|
56
|
+
.col-5-11-med {
|
57
|
+
@include percentage(5, 11);
|
58
|
+
}
|
59
|
+
.col-4-11-med {
|
60
|
+
@include percentage(4, 11);
|
61
|
+
}
|
62
|
+
.col-3-11-med {
|
63
|
+
@include percentage(3, 11);
|
64
|
+
}
|
65
|
+
.col-2-11-med {
|
66
|
+
@include percentage(2, 11);
|
67
|
+
}
|
68
|
+
.col-1-11-med {
|
69
|
+
@include percentage(1, 11);
|
70
|
+
}
|
71
|
+
}
|
72
|
+
@media only screen and (min-width: $lrg-width) {
|
73
|
+
.col-11-11-lrg {
|
74
|
+
@include percentage(11, 11);
|
75
|
+
}
|
76
|
+
.col-10-11-lrg {
|
77
|
+
@include percentage(10, 11);
|
78
|
+
}
|
79
|
+
.col-9-11-lrg {
|
80
|
+
@include percentage(9, 11);
|
81
|
+
}
|
82
|
+
.col-8-11-lrg {
|
83
|
+
@include percentage(8, 11);
|
84
|
+
}
|
85
|
+
.col-7-11-lrg {
|
86
|
+
@include percentage(7, 11);
|
87
|
+
}
|
88
|
+
.col-6-11-lrg {
|
89
|
+
@include percentage(6, 11);
|
90
|
+
}
|
91
|
+
.col-5-11-lrg {
|
92
|
+
@include percentage(5, 11);
|
93
|
+
}
|
94
|
+
.col-4-11-lrg {
|
95
|
+
@include percentage(4, 11);
|
96
|
+
}
|
97
|
+
.col-3-11-lrg {
|
98
|
+
@include percentage(3, 11);
|
99
|
+
}
|
100
|
+
.col-2-11-lrg {
|
101
|
+
@include percentage(2, 11);
|
102
|
+
}
|
103
|
+
.col-1-11-lrg {
|
104
|
+
@include percentage(1, 11);
|
105
|
+
}
|
106
|
+
}
|
@@ -0,0 +1,115 @@
|
|
1
|
+
@import "grids_lite_variables";
|
2
|
+
@import "mixins";
|
3
|
+
|
4
|
+
.col-12-12 {
|
5
|
+
@include percentage(12, 12);
|
6
|
+
}
|
7
|
+
.col-11-12 {
|
8
|
+
@include percentage(11, 12);
|
9
|
+
}
|
10
|
+
.col-10-12 {
|
11
|
+
@include percentage(10, 12);
|
12
|
+
}
|
13
|
+
.col-9-12 {
|
14
|
+
@include percentage(9, 12);
|
15
|
+
}
|
16
|
+
.col-8-12 {
|
17
|
+
@include percentage(8, 12);
|
18
|
+
}
|
19
|
+
.col-7-12 {
|
20
|
+
@include percentage(7, 12);
|
21
|
+
}
|
22
|
+
.col-6-12 {
|
23
|
+
@include percentage(6, 12);
|
24
|
+
}
|
25
|
+
.col-5-12 {
|
26
|
+
@include percentage(5, 12);
|
27
|
+
}
|
28
|
+
.col-4-12 {
|
29
|
+
@include percentage(4, 12);
|
30
|
+
}
|
31
|
+
.col-3-12 {
|
32
|
+
@include percentage(3, 12);
|
33
|
+
}
|
34
|
+
.col-2-12 {
|
35
|
+
@include percentage(2, 12);
|
36
|
+
}
|
37
|
+
.col-1-12 {
|
38
|
+
@include percentage(1, 12);
|
39
|
+
}
|
40
|
+
@media only screen and (min-width: $med-width) {
|
41
|
+
.col-12-12-med {
|
42
|
+
@include percentage(12, 12);
|
43
|
+
}
|
44
|
+
.col-11-12-med {
|
45
|
+
@include percentage(11, 12);
|
46
|
+
}
|
47
|
+
.col-10-12-med {
|
48
|
+
@include percentage(10, 12);
|
49
|
+
}
|
50
|
+
.col-9-12-med {
|
51
|
+
@include percentage(9, 12);
|
52
|
+
}
|
53
|
+
.col-8-12-med {
|
54
|
+
@include percentage(8, 12);
|
55
|
+
}
|
56
|
+
.col-7-12-med {
|
57
|
+
@include percentage(7, 12);
|
58
|
+
}
|
59
|
+
.col-6-12-med {
|
60
|
+
@include percentage(6, 12);
|
61
|
+
}
|
62
|
+
.col-5-12-med {
|
63
|
+
@include percentage(5, 12);
|
64
|
+
}
|
65
|
+
.col-4-12-med {
|
66
|
+
@include percentage(4, 12);
|
67
|
+
}
|
68
|
+
.col-3-12-med {
|
69
|
+
@include percentage(3, 12);
|
70
|
+
}
|
71
|
+
.col-2-12-med {
|
72
|
+
@include percentage(2, 12);
|
73
|
+
}
|
74
|
+
.col-1-12-med {
|
75
|
+
@include percentage(1, 12);
|
76
|
+
}
|
77
|
+
}
|
78
|
+
@media only screen and (min-width: $lrg-width) {
|
79
|
+
.col-12-12-lrg {
|
80
|
+
@include percentage(12, 12);
|
81
|
+
}
|
82
|
+
.col-11-12-lrg {
|
83
|
+
@include percentage(11, 12);
|
84
|
+
}
|
85
|
+
.col-10-12-lrg {
|
86
|
+
@include percentage(10, 12);
|
87
|
+
}
|
88
|
+
.col-9-12-lrg {
|
89
|
+
@include percentage(9, 12);
|
90
|
+
}
|
91
|
+
.col-8-12-lrg {
|
92
|
+
@include percentage(8, 12);
|
93
|
+
}
|
94
|
+
.col-7-12-lrg {
|
95
|
+
@include percentage(7, 12);
|
96
|
+
}
|
97
|
+
.col-6-12-lrg {
|
98
|
+
@include percentage(6, 12);
|
99
|
+
}
|
100
|
+
.col-5-12-lrg {
|
101
|
+
@include percentage(5, 12);
|
102
|
+
}
|
103
|
+
.col-4-12-lrg {
|
104
|
+
@include percentage(4, 12);
|
105
|
+
}
|
106
|
+
.col-3-12-lrg {
|
107
|
+
@include percentage(3, 12);
|
108
|
+
}
|
109
|
+
.col-2-12-lrg {
|
110
|
+
@include percentage(2, 12);
|
111
|
+
}
|
112
|
+
.col-1-12-lrg {
|
113
|
+
@include percentage(1, 12);
|
114
|
+
}
|
115
|
+
}
|
@@ -0,0 +1,124 @@
|
|
1
|
+
@import "grids_lite_variables";
|
2
|
+
@import "mixins";
|
3
|
+
|
4
|
+
.col-13-13 {
|
5
|
+
@include percentage(13, 13);
|
6
|
+
}
|
7
|
+
.col-12-13 {
|
8
|
+
@include percentage(12, 13);
|
9
|
+
}
|
10
|
+
.col-11-13 {
|
11
|
+
@include percentage(11, 13);
|
12
|
+
}
|
13
|
+
.col-10-13 {
|
14
|
+
@include percentage(10, 13);
|
15
|
+
}
|
16
|
+
.col-9-13 {
|
17
|
+
@include percentage(9, 13);
|
18
|
+
}
|
19
|
+
.col-8-13 {
|
20
|
+
@include percentage(8, 13);
|
21
|
+
}
|
22
|
+
.col-7-13 {
|
23
|
+
@include percentage(7, 13);
|
24
|
+
}
|
25
|
+
.col-6-13 {
|
26
|
+
@include percentage(6, 13);
|
27
|
+
}
|
28
|
+
.col-5-13 {
|
29
|
+
@include percentage(5, 13);
|
30
|
+
}
|
31
|
+
.col-4-13 {
|
32
|
+
@include percentage(4, 13);
|
33
|
+
}
|
34
|
+
.col-3-13 {
|
35
|
+
@include percentage(3, 13);
|
36
|
+
}
|
37
|
+
.col-2-13 {
|
38
|
+
@include percentage(2, 13);
|
39
|
+
}
|
40
|
+
.col-1-13 {
|
41
|
+
@include percentage(1, 13);
|
42
|
+
}
|
43
|
+
@media only screen and (min-width: $med-width) {
|
44
|
+
.col-13-13-med {
|
45
|
+
@include percentage(13, 13);
|
46
|
+
}
|
47
|
+
.col-12-13-med {
|
48
|
+
@include percentage(12, 13);
|
49
|
+
}
|
50
|
+
.col-11-13-med {
|
51
|
+
@include percentage(11, 13);
|
52
|
+
}
|
53
|
+
.col-10-13-med {
|
54
|
+
@include percentage(10, 13);
|
55
|
+
}
|
56
|
+
.col-9-13-med {
|
57
|
+
@include percentage(9, 13);
|
58
|
+
}
|
59
|
+
.col-8-13-med {
|
60
|
+
@include percentage(8, 13);
|
61
|
+
}
|
62
|
+
.col-7-13-med {
|
63
|
+
@include percentage(7, 13);
|
64
|
+
}
|
65
|
+
.col-6-13-med {
|
66
|
+
@include percentage(6, 13);
|
67
|
+
}
|
68
|
+
.col-5-13-med {
|
69
|
+
@include percentage(5, 13);
|
70
|
+
}
|
71
|
+
.col-4-13-med {
|
72
|
+
@include percentage(4, 13);
|
73
|
+
}
|
74
|
+
.col-3-13-med {
|
75
|
+
@include percentage(3, 13);
|
76
|
+
}
|
77
|
+
.col-2-13-med {
|
78
|
+
@include percentage(2, 13);
|
79
|
+
}
|
80
|
+
.col-1-13-med {
|
81
|
+
@include percentage(1, 13);
|
82
|
+
}
|
83
|
+
}
|
84
|
+
@media only screen and (min-width: $lrg-width) {
|
85
|
+
.col-13-13-lrg {
|
86
|
+
@include percentage(13, 13);
|
87
|
+
}
|
88
|
+
.col-12-13-lrg {
|
89
|
+
@include percentage(12, 13);
|
90
|
+
}
|
91
|
+
.col-11-13-lrg {
|
92
|
+
@include percentage(11, 13);
|
93
|
+
}
|
94
|
+
.col-10-13-lrg {
|
95
|
+
@include percentage(10, 13);
|
96
|
+
}
|
97
|
+
.col-9-13-lrg {
|
98
|
+
@include percentage(9, 13);
|
99
|
+
}
|
100
|
+
.col-8-13-lrg {
|
101
|
+
@include percentage(8, 13);
|
102
|
+
}
|
103
|
+
.col-7-13-lrg {
|
104
|
+
@include percentage(7, 13);
|
105
|
+
}
|
106
|
+
.col-6-13-lrg {
|
107
|
+
@include percentage(6, 13);
|
108
|
+
}
|
109
|
+
.col-5-13-lrg {
|
110
|
+
@include percentage(5, 13);
|
111
|
+
}
|
112
|
+
.col-4-13-lrg {
|
113
|
+
@include percentage(4, 13);
|
114
|
+
}
|
115
|
+
.col-3-13-lrg {
|
116
|
+
@include percentage(3, 13);
|
117
|
+
}
|
118
|
+
.col-2-13-lrg {
|
119
|
+
@include percentage(2, 13);
|
120
|
+
}
|
121
|
+
.col-1-13-lrg {
|
122
|
+
@include percentage(1, 13);
|
123
|
+
}
|
124
|
+
}
|
@@ -0,0 +1,133 @@
|
|
1
|
+
@import "grids_lite_variables";
|
2
|
+
@import "mixins";
|
3
|
+
|
4
|
+
.col-14-14 {
|
5
|
+
@include percentage(14, 14);
|
6
|
+
}
|
7
|
+
.col-13-14 {
|
8
|
+
@include percentage(13, 14);
|
9
|
+
}
|
10
|
+
.col-12-14 {
|
11
|
+
@include percentage(12, 14);
|
12
|
+
}
|
13
|
+
.col-11-14 {
|
14
|
+
@include percentage(11, 14);
|
15
|
+
}
|
16
|
+
.col-10-14 {
|
17
|
+
@include percentage(10, 14);
|
18
|
+
}
|
19
|
+
.col-9-14 {
|
20
|
+
@include percentage(9, 14);
|
21
|
+
}
|
22
|
+
.col-8-14 {
|
23
|
+
@include percentage(8, 14);
|
24
|
+
}
|
25
|
+
.col-7-14 {
|
26
|
+
@include percentage(7, 14);
|
27
|
+
}
|
28
|
+
.col-6-14 {
|
29
|
+
@include percentage(6, 14);
|
30
|
+
}
|
31
|
+
.col-5-14 {
|
32
|
+
@include percentage(5, 14);
|
33
|
+
}
|
34
|
+
.col-4-14 {
|
35
|
+
@include percentage(4, 14);
|
36
|
+
}
|
37
|
+
.col-3-14 {
|
38
|
+
@include percentage(3, 14);
|
39
|
+
}
|
40
|
+
.col-2-14 {
|
41
|
+
@include percentage(2, 14);
|
42
|
+
}
|
43
|
+
.col-1-13 {
|
44
|
+
@include percentage(1, 14);
|
45
|
+
}
|
46
|
+
@media only screen and (min-width: $med-width) {
|
47
|
+
.col-14-14-med {
|
48
|
+
@include percentage(14, 14);
|
49
|
+
}
|
50
|
+
.col-13-14-med {
|
51
|
+
@include percentage(13, 14);
|
52
|
+
}
|
53
|
+
.col-12-14-med {
|
54
|
+
@include percentage(12, 14);
|
55
|
+
}
|
56
|
+
.col-11-14-med {
|
57
|
+
@include percentage(11, 14);
|
58
|
+
}
|
59
|
+
.col-10-14-med {
|
60
|
+
@include percentage(10, 14);
|
61
|
+
}
|
62
|
+
.col-9-14-med {
|
63
|
+
@include percentage(9, 14);
|
64
|
+
}
|
65
|
+
.col-8-14-med {
|
66
|
+
@include percentage(8, 14);
|
67
|
+
}
|
68
|
+
.col-7-14-med {
|
69
|
+
@include percentage(7, 14);
|
70
|
+
}
|
71
|
+
.col-6-14-med {
|
72
|
+
@include percentage(6, 14);
|
73
|
+
}
|
74
|
+
.col-5-14-med {
|
75
|
+
@include percentage(5, 14);
|
76
|
+
}
|
77
|
+
.col-4-14-med {
|
78
|
+
@include percentage(4, 14);
|
79
|
+
}
|
80
|
+
.col-3-14-med {
|
81
|
+
@include percentage(3, 14);
|
82
|
+
}
|
83
|
+
.col-2-14-med {
|
84
|
+
@include percentage(2, 14);
|
85
|
+
}
|
86
|
+
.col-1-13-med {
|
87
|
+
@include percentage(1, 14);
|
88
|
+
}
|
89
|
+
}
|
90
|
+
@media only screen and (min-width: $lrg-width) {
|
91
|
+
.col-14-14-lrg {
|
92
|
+
@include percentage(14, 14);
|
93
|
+
}
|
94
|
+
.col-13-14-lrg {
|
95
|
+
@include percentage(13, 14);
|
96
|
+
}
|
97
|
+
.col-12-14-lrg {
|
98
|
+
@include percentage(12, 14);
|
99
|
+
}
|
100
|
+
.col-11-14-lrg {
|
101
|
+
@include percentage(11, 14);
|
102
|
+
}
|
103
|
+
.col-10-14-lrg {
|
104
|
+
@include percentage(10, 14);
|
105
|
+
}
|
106
|
+
.col-9-14-lrg {
|
107
|
+
@include percentage(9, 14);
|
108
|
+
}
|
109
|
+
.col-8-14-lrg {
|
110
|
+
@include percentage(8, 14);
|
111
|
+
}
|
112
|
+
.col-7-14-lrg {
|
113
|
+
@include percentage(7, 14);
|
114
|
+
}
|
115
|
+
.col-6-14-lrg {
|
116
|
+
@include percentage(6, 14);
|
117
|
+
}
|
118
|
+
.col-5-14-lrg {
|
119
|
+
@include percentage(5, 14);
|
120
|
+
}
|
121
|
+
.col-4-14-lrg {
|
122
|
+
@include percentage(4, 14);
|
123
|
+
}
|
124
|
+
.col-3-14-lrg {
|
125
|
+
@include percentage(3, 14);
|
126
|
+
}
|
127
|
+
.col-2-14-lrg {
|
128
|
+
@include percentage(2, 14);
|
129
|
+
}
|
130
|
+
.col-1-13-lrg {
|
131
|
+
@include percentage(1, 14);
|
132
|
+
}
|
133
|
+
}
|
@@ -0,0 +1,25 @@
|
|
1
|
+
@import "grids_lite_variables";
|
2
|
+
@import "mixins";
|
3
|
+
|
4
|
+
.col-2-2 {
|
5
|
+
@include percentage(2, 2);
|
6
|
+
}
|
7
|
+
.col-1-2 {
|
8
|
+
@include percentage(1, 2);
|
9
|
+
}
|
10
|
+
@media only screen and (min-width: $med-width) {
|
11
|
+
.col-2-2-med {
|
12
|
+
@include percentage(2, 2);
|
13
|
+
}
|
14
|
+
.col-1-2-med {
|
15
|
+
@include percentage(1, 2);
|
16
|
+
}
|
17
|
+
}
|
18
|
+
@media only screen and (min-width: $lrg-width) {
|
19
|
+
.col-2-2-lrg {
|
20
|
+
@include percentage(2, 2);
|
21
|
+
}
|
22
|
+
.col-1-2-lrg {
|
23
|
+
@include percentage(1, 2);
|
24
|
+
}
|
25
|
+
}
|