mindy 0.1.1 → 0.1.2
Sign up to get free protection for your applications and to get access to all the features.
- data/lib/mindy.rb +2 -2
- data/stylesheets/mindy/grid/_grid.scss +27 -37
- data/stylesheets/mindy/utils/_mixins.scss +9 -0
- metadata +3 -3
data/lib/mindy.rb
CHANGED
@@ -3,34 +3,30 @@
|
|
3
3
|
|
4
4
|
// Default 978px grid
|
5
5
|
// -------------------------
|
6
|
-
$gridFluid:
|
7
|
-
|
6
|
+
$gridFluid: false;
|
8
7
|
$gridColumns: 12 !default;
|
9
8
|
$gridColumnWidth: 54px !default;
|
10
9
|
$gridGutterWidth: 30px !default;
|
11
|
-
$
|
10
|
+
$gridWidth: 978px !default;
|
12
11
|
|
13
|
-
|
14
|
-
@if $gridFluid == true {
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
} @else {
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
12
|
+
@mixin generateGrid($gridFluid) {
|
13
|
+
@if $gridFluid == true {
|
14
|
+
$gridWidth: ($gridColumns * $gridColumnWidth) + ($gridGutterWidth * ($gridColumns - 1)) !default;
|
15
|
+
$gridColumnWidth: percentage($gridColumnWidth/$gridWidth);
|
16
|
+
$gridGutterWidth: percentage($gridGutterWidth/$gridWidth);
|
17
|
+
} @else {
|
18
|
+
@if $gridWidth == 1378px { $gridColumns: 16; $gridColumnWidth: 58; $gridGutterWidth: 30; }
|
19
|
+
@else if $gridWidth == 1218px { $gridColumns: 16; $gridColumnWidth: 48; $gridGutterWidth: 30; }
|
20
|
+
@else if $gridWidth == 748px { $gridColumns: 12; $gridColumnWidth: 44; $gridGutterWidth: 20; }
|
21
|
+
@else if $gridWidth == 300px { $gridColumns: 8; $gridColumnWidth: 27; $gridGutterWidth: 12; }
|
22
|
+
}
|
23
23
|
}
|
24
24
|
|
25
25
|
// column mixin
|
26
26
|
@mixin column($n,$first:false) {
|
27
27
|
@include float-left;
|
28
28
|
|
29
|
-
@
|
30
|
-
@include grid-fluid-column($n);
|
31
|
-
} @else {
|
32
|
-
@include grid-column($n);
|
33
|
-
}
|
29
|
+
@include grid-column($n);
|
34
30
|
|
35
31
|
@if $first == true {
|
36
32
|
margin-left: 0;
|
@@ -40,16 +36,15 @@ $gridRowWidth: 978px !default;
|
|
40
36
|
}
|
41
37
|
|
42
38
|
// print layout styles
|
43
|
-
@mixin grid(
|
39
|
+
@mixin grid() {
|
40
|
+
@include generateGrid($gridFluid);
|
41
|
+
|
44
42
|
.column {
|
45
|
-
//float: left;
|
46
43
|
@include float-left;
|
47
44
|
|
45
|
+
margin-left: $gridGutterWidth;
|
48
46
|
@if $gridFluid == true {
|
49
|
-
*margin-left: $gridGutterWidth - (.5 / $
|
50
|
-
margin-left: $gridGutterWidth;
|
51
|
-
} @else {
|
52
|
-
margin-left: $gridGutterWidth;
|
47
|
+
*margin-left: $gridGutterWidth - (.5 / $gridWidth * 100px * 1%);
|
53
48
|
}
|
54
49
|
|
55
50
|
&:last-child {
|
@@ -65,11 +60,12 @@ $gridRowWidth: 978px !default;
|
|
65
60
|
}
|
66
61
|
|
67
62
|
// base mixins
|
68
|
-
@mixin layout(
|
63
|
+
@mixin layout() {
|
64
|
+
//@debug "$gridFluid is #{$gridFluid}";
|
69
65
|
@if $gridFluid == true {
|
70
66
|
width: 100%;
|
71
67
|
} @else {
|
72
|
-
width: $
|
68
|
+
width: $gridWidth;
|
73
69
|
margin-left: auto;
|
74
70
|
margin-right: auto;
|
75
71
|
}
|
@@ -79,14 +75,10 @@ $gridRowWidth: 978px !default;
|
|
79
75
|
@mixin grid-generate-column($gridFluid, $gridColumns, $gridColumnWidth, $gridGutterWidth) {
|
80
76
|
@while $gridColumns > 0 {
|
81
77
|
.column#{$gridColumns} {
|
82
|
-
|
78
|
+
@extend .column;
|
83
79
|
}
|
84
80
|
.column#{$gridColumns} {
|
85
|
-
@
|
86
|
-
@include grid-fluid-column($gridColumns, $gridColumnWidth, $gridGutterWidth);
|
87
|
-
} @else {
|
88
|
-
@include grid-column($gridColumns, $gridColumnWidth, $gridGutterWidth);
|
89
|
-
}
|
81
|
+
@include grid-column($gridColumns, $gridColumnWidth, $gridGutterWidth);
|
90
82
|
}
|
91
83
|
$gridColumns: $gridColumns - 1;
|
92
84
|
}
|
@@ -94,9 +86,7 @@ $gridRowWidth: 978px !default;
|
|
94
86
|
|
95
87
|
@mixin grid-column($gridColumns, $gridColumnWidth, $gridGutterWidth) {
|
96
88
|
width: ($gridColumnWidth * $gridColumns) + ($gridGutterWidth * ($gridColumns - 1));
|
97
|
-
|
98
|
-
|
99
|
-
|
100
|
-
width: ($gridColumnWidth * $gridColumns) + ($gridGutterWidth * ($gridColumns - 1));
|
101
|
-
*width: ($gridColumnWidth * $gridColumns) + ($gridGutterWidth * ($gridColumns - 1)) - (.5 / $gridRowWidth * 100px * 1%);
|
89
|
+
@if $gridFluid == true {
|
90
|
+
*width: ($gridColumnWidth * $gridColumns) + ($gridGutterWidth * ($gridColumns - 1)) - (.5 / $gridWidth * 100px * 1%);
|
91
|
+
}
|
102
92
|
}
|
@@ -1,4 +1,5 @@
|
|
1
1
|
@import "compass/css3";
|
2
|
+
@import "compass/utilities";
|
2
3
|
|
3
4
|
// Add percentage of white to a color
|
4
5
|
@function tint($color, $percent){
|
@@ -91,4 +92,12 @@
|
|
91
92
|
&:after {
|
92
93
|
clear: both;
|
93
94
|
}
|
95
|
+
}
|
96
|
+
|
97
|
+
.float-right {
|
98
|
+
@include float-right;
|
99
|
+
}
|
100
|
+
|
101
|
+
.float-left {
|
102
|
+
@include float-left;
|
94
103
|
}
|
metadata
CHANGED
@@ -5,8 +5,8 @@ version: !ruby/object:Gem::Version
|
|
5
5
|
segments:
|
6
6
|
- 0
|
7
7
|
- 1
|
8
|
-
-
|
9
|
-
version: 0.1.
|
8
|
+
- 2
|
9
|
+
version: 0.1.2
|
10
10
|
platform: ruby
|
11
11
|
authors:
|
12
12
|
- Falaleev Maxim
|
@@ -14,7 +14,7 @@ autorequire:
|
|
14
14
|
bindir: bin
|
15
15
|
cert_chain: []
|
16
16
|
|
17
|
-
date: 2012-09-
|
17
|
+
date: 2012-09-28 00:00:00 +04:00
|
18
18
|
default_executable:
|
19
19
|
dependencies:
|
20
20
|
- !ruby/object:Gem::Dependency
|