compass-grid-plugin 0.0.1
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.
- data/.gitignore +8 -0
- data/README.md +88 -0
- data/compass-grid-plugin.gemspec +21 -0
- data/example/config.rb +27 -0
- data/example/css/example.css +97 -0
- data/example/css/media.css +618 -0
- data/example/css/percentage.css +544 -0
- data/example/css/test.css +113 -0
- data/example/example.html +40 -0
- data/example/i/dino-1.jpg +0 -0
- data/example/i/dino-2.png +0 -0
- data/example/media.html +67 -0
- data/example/percentage.html +430 -0
- data/example/scss/example.scss +55 -0
- data/example/scss/media.scss +347 -0
- data/example/scss/percentage.scss +68 -0
- data/example/scss/test.scss +30 -0
- data/example/test.html +216 -0
- data/lib/compass-grid.rb +5 -0
- data/lib/compass/grid.rb +7 -0
- data/lib/compass/grid/version.rb +5 -0
- data/stylesheets/_grid.scss +127 -0
- data/stylesheets/grid/_fluid.scss +131 -0
- data/templates/project/manifest.rb +17 -0
- data/templates/project/partials/_base.scss +7 -0
- data/templates/project/screen.scss +9 -0
- metadata +89 -0
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
// import the grid
|
|
2
|
+
@import "grid";
|
|
3
|
+
@include grid-css;
|
|
4
|
+
|
|
5
|
+
.column {
|
|
6
|
+
background-color: #ccc;
|
|
7
|
+
margin-bottom: $grid-gutter-width;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.borders {
|
|
11
|
+
.column {
|
|
12
|
+
border: 2px solid black;
|
|
13
|
+
}
|
|
14
|
+
@for $i from 1 through $grid-columns {
|
|
15
|
+
.grid-#{$i} { width: grid-width($i, -4px); }
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.padding {
|
|
20
|
+
.column {
|
|
21
|
+
padding: 0 $grid-gutter-width/2;
|
|
22
|
+
}
|
|
23
|
+
@for $i from 1 through $grid-columns {
|
|
24
|
+
.grid-#{$i} { width: grid-width($i, -$grid-gutter-width); }
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
// add a clearfix rule, requires compass
|
|
29
|
+
@import "compass/utilities/general/clearfix";
|
|
30
|
+
.clearfix { @include pie-clearfix; }
|
data/example/test.html
ADDED
|
@@ -0,0 +1,216 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
|
|
3
|
+
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
|
|
4
|
+
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
|
|
5
|
+
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
|
|
6
|
+
<head>
|
|
7
|
+
<meta charset="utf-8">
|
|
8
|
+
|
|
9
|
+
<title>1KB SCSS Grid Test Page</title>
|
|
10
|
+
<meta name="description" content="">
|
|
11
|
+
<meta name="author" content="">
|
|
12
|
+
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
13
|
+
|
|
14
|
+
<link rel="stylesheet" href="css/test.css">
|
|
15
|
+
</head>
|
|
16
|
+
|
|
17
|
+
<body>
|
|
18
|
+
<!-- normal -->
|
|
19
|
+
<div class="page">
|
|
20
|
+
<h2>Normal</h2>
|
|
21
|
+
<div class="row">
|
|
22
|
+
<div class="column grid-1">1</div>
|
|
23
|
+
<div class="column grid-11">11</div>
|
|
24
|
+
</div>
|
|
25
|
+
<div class="row">
|
|
26
|
+
<div class="column grid-2">2</div>
|
|
27
|
+
<div class="column grid-10">10</div>
|
|
28
|
+
</div>
|
|
29
|
+
<div class="row">
|
|
30
|
+
<div class="column grid-3">3</div>
|
|
31
|
+
<div class="column grid-9">9</div>
|
|
32
|
+
</div>
|
|
33
|
+
<div class="row">
|
|
34
|
+
<div class="column grid-4">4</div>
|
|
35
|
+
<div class="column grid-8">8</div>
|
|
36
|
+
</div>
|
|
37
|
+
<div class="row">
|
|
38
|
+
<div class="column grid-5">5</div>
|
|
39
|
+
<div class="column grid-7">7</div>
|
|
40
|
+
</div>
|
|
41
|
+
<div class="row">
|
|
42
|
+
<div class="column grid-6">6</div>
|
|
43
|
+
<div class="column grid-6">6</div>
|
|
44
|
+
</div>
|
|
45
|
+
<div class="row">
|
|
46
|
+
<div class="column grid-12">12</div>
|
|
47
|
+
</div>
|
|
48
|
+
</div>
|
|
49
|
+
|
|
50
|
+
<!-- borders -->
|
|
51
|
+
<div class="page borders">
|
|
52
|
+
<h2>Borders</h2>
|
|
53
|
+
<div class="row">
|
|
54
|
+
<div class="column grid-1">1</div>
|
|
55
|
+
<div class="column grid-11">11</div>
|
|
56
|
+
</div>
|
|
57
|
+
<div class="row">
|
|
58
|
+
<div class="column grid-2">2</div>
|
|
59
|
+
<div class="column grid-10">10</div>
|
|
60
|
+
</div>
|
|
61
|
+
<div class="row">
|
|
62
|
+
<div class="column grid-3">3</div>
|
|
63
|
+
<div class="column grid-9">9</div>
|
|
64
|
+
</div>
|
|
65
|
+
<div class="row">
|
|
66
|
+
<div class="column grid-4">4</div>
|
|
67
|
+
<div class="column grid-8">8</div>
|
|
68
|
+
</div>
|
|
69
|
+
<div class="row">
|
|
70
|
+
<div class="column grid-5">5</div>
|
|
71
|
+
<div class="column grid-7">7</div>
|
|
72
|
+
</div>
|
|
73
|
+
<div class="row">
|
|
74
|
+
<div class="column grid-6">6</div>
|
|
75
|
+
<div class="column grid-6">6</div>
|
|
76
|
+
</div>
|
|
77
|
+
<div class="row">
|
|
78
|
+
<div class="column grid-12">12</div>
|
|
79
|
+
</div>
|
|
80
|
+
</div>
|
|
81
|
+
|
|
82
|
+
<!-- padding -->
|
|
83
|
+
<div class="page padding">
|
|
84
|
+
<h2>Padding</h2>
|
|
85
|
+
<div class="row">
|
|
86
|
+
<div class="column grid-1">1</div>
|
|
87
|
+
<div class="column grid-11">11</div>
|
|
88
|
+
</div>
|
|
89
|
+
<div class="row">
|
|
90
|
+
<div class="column grid-2">2</div>
|
|
91
|
+
<div class="column grid-10">10</div>
|
|
92
|
+
</div>
|
|
93
|
+
<div class="row">
|
|
94
|
+
<div class="column grid-3">3</div>
|
|
95
|
+
<div class="column grid-9">9</div>
|
|
96
|
+
</div>
|
|
97
|
+
<div class="row">
|
|
98
|
+
<div class="column grid-4">4</div>
|
|
99
|
+
<div class="column grid-8">8</div>
|
|
100
|
+
</div>
|
|
101
|
+
<div class="row">
|
|
102
|
+
<div class="column grid-5">5</div>
|
|
103
|
+
<div class="column grid-7">7</div>
|
|
104
|
+
</div>
|
|
105
|
+
<div class="row">
|
|
106
|
+
<div class="column grid-6">6</div>
|
|
107
|
+
<div class="column grid-6">6</div>
|
|
108
|
+
</div>
|
|
109
|
+
<div class="row">
|
|
110
|
+
<div class="column grid-12">12</div>
|
|
111
|
+
</div>
|
|
112
|
+
</div>
|
|
113
|
+
|
|
114
|
+
<!-- before -->
|
|
115
|
+
<div class="page">
|
|
116
|
+
<h2>Offset Before</h2>
|
|
117
|
+
<div class="row">
|
|
118
|
+
<div class="column grid-10">10</div>
|
|
119
|
+
<div class="column grid-1 before-1">1 before</div>
|
|
120
|
+
</div>
|
|
121
|
+
<div class="row">
|
|
122
|
+
<div class="column grid-9">9</div>
|
|
123
|
+
<div class="column grid-1 before-2">2 before</div>
|
|
124
|
+
</div>
|
|
125
|
+
<div class="row">
|
|
126
|
+
<div class="column grid-8">8</div>
|
|
127
|
+
<div class="column grid-1 before-3">3 before</div>
|
|
128
|
+
</div>
|
|
129
|
+
<div class="row">
|
|
130
|
+
<div class="column grid-7">7</div>
|
|
131
|
+
<div class="column grid-1 before-4">4 before</div>
|
|
132
|
+
</div>
|
|
133
|
+
<div class="row">
|
|
134
|
+
<div class="column grid-6">6</div>
|
|
135
|
+
<div class="column grid-1 before-5">5 before</div>
|
|
136
|
+
</div>
|
|
137
|
+
<div class="row">
|
|
138
|
+
<div class="column grid-5">5</div>
|
|
139
|
+
<div class="column grid-1 before-6">6 before</div>
|
|
140
|
+
</div>
|
|
141
|
+
<div class="row">
|
|
142
|
+
<div class="column grid-4">4</div>
|
|
143
|
+
<div class="column grid-1 before-7">7 before</div>
|
|
144
|
+
</div>
|
|
145
|
+
<div class="row">
|
|
146
|
+
<div class="column grid-3">3</div>
|
|
147
|
+
<div class="column grid-1 before-8">8 before</div>
|
|
148
|
+
</div>
|
|
149
|
+
<div class="row">
|
|
150
|
+
<div class="column grid-2">2</div>
|
|
151
|
+
<div class="column grid-1 before-9">9 before</div>
|
|
152
|
+
</div>
|
|
153
|
+
<div class="row">
|
|
154
|
+
<div class="column grid-1">1</div>
|
|
155
|
+
<div class="column grid-1 before-10">10 before</div>
|
|
156
|
+
</div>
|
|
157
|
+
<div class="row">
|
|
158
|
+
<div class="column grid-1 before-11">11 before</div>
|
|
159
|
+
</div>
|
|
160
|
+
<div class="row">
|
|
161
|
+
<div class="column grid-12">12</div>
|
|
162
|
+
</div>
|
|
163
|
+
</div>
|
|
164
|
+
|
|
165
|
+
<!-- after -->
|
|
166
|
+
<div class="page">
|
|
167
|
+
<h2>Offset After</h2>
|
|
168
|
+
<div class="row">
|
|
169
|
+
<div class="column grid-1 after-1">1 after</div>
|
|
170
|
+
<div class="column grid-10">10</div>
|
|
171
|
+
</div>
|
|
172
|
+
<div class="row">
|
|
173
|
+
<div class="column grid-1 after-2">2 after</div>
|
|
174
|
+
<div class="column grid-9">9</div>
|
|
175
|
+
</div>
|
|
176
|
+
<div class="row">
|
|
177
|
+
<div class="column grid-1 after-3">3 after</div>
|
|
178
|
+
<div class="column grid-8">8</div>
|
|
179
|
+
</div>
|
|
180
|
+
<div class="row">
|
|
181
|
+
<div class="column grid-1 after-4">4 after</div>
|
|
182
|
+
<div class="column grid-7">7</div>
|
|
183
|
+
</div>
|
|
184
|
+
<div class="row">
|
|
185
|
+
<div class="column grid-1 after-5">5 after</div>
|
|
186
|
+
<div class="column grid-6">6</div>
|
|
187
|
+
</div>
|
|
188
|
+
<div class="row">
|
|
189
|
+
<div class="column grid-1 after-6">6 after</div>
|
|
190
|
+
<div class="column grid-5">5</div>
|
|
191
|
+
</div>
|
|
192
|
+
<div class="row">
|
|
193
|
+
<div class="column grid-1 after-7">7 after</div>
|
|
194
|
+
<div class="column grid-4">4</div>
|
|
195
|
+
</div>
|
|
196
|
+
<div class="row">
|
|
197
|
+
<div class="column grid-1 after-8">8 after</div>
|
|
198
|
+
<div class="column grid-3">3</div>
|
|
199
|
+
</div>
|
|
200
|
+
<div class="row">
|
|
201
|
+
<div class="column grid-1 after-9">9 after</div>
|
|
202
|
+
<div class="column grid-2">2</div>
|
|
203
|
+
</div>
|
|
204
|
+
<div class="row">
|
|
205
|
+
<div class="column grid-1 after-10">10 after</div>
|
|
206
|
+
<div class="column grid-1">1</div>
|
|
207
|
+
</div>
|
|
208
|
+
<div class="row">
|
|
209
|
+
<div class="column grid-1 after-11">11 after</div>
|
|
210
|
+
</div>
|
|
211
|
+
<div class="row">
|
|
212
|
+
<div class="column grid-12">12</div>
|
|
213
|
+
</div>
|
|
214
|
+
</div>
|
|
215
|
+
</body>
|
|
216
|
+
</html>
|
data/lib/compass-grid.rb
ADDED
data/lib/compass/grid.rb
ADDED
|
@@ -0,0 +1,127 @@
|
|
|
1
|
+
// Compass Clearfix
|
|
2
|
+
@import "compass/utilities/general/clearfix";
|
|
3
|
+
|
|
4
|
+
//-----------------------------------
|
|
5
|
+
// Defaults
|
|
6
|
+
//-----------------------------------
|
|
7
|
+
$grid-column-width: 60px !default;
|
|
8
|
+
$grid-gutter-width: 20px !default;
|
|
9
|
+
$grid-columns: 12 !default;
|
|
10
|
+
|
|
11
|
+
// apply fixes for IE6
|
|
12
|
+
//$grid-extend-clearfix: true !default;
|
|
13
|
+
$grid-clearfix-class: true !default;
|
|
14
|
+
$grid-support-for-ie6: false !default;
|
|
15
|
+
|
|
16
|
+
@if $grid-clearfix-class {
|
|
17
|
+
.clearfix {
|
|
18
|
+
@if $grid-clearfix-class == clearfix {
|
|
19
|
+
@include clearfix;
|
|
20
|
+
} @else if $grid-clearfix-class == legacy-pie-clearfix {
|
|
21
|
+
@include legacy-pie-clearfix;
|
|
22
|
+
} @else {
|
|
23
|
+
@include pie-clearfix;
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
//-----------------------------------
|
|
29
|
+
// Column Widths
|
|
30
|
+
//-----------------------------------
|
|
31
|
+
|
|
32
|
+
// apply a width to a column
|
|
33
|
+
@mixin grid($i, $plus: 0) {
|
|
34
|
+
width: grid-column-width($i, $plus);
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
// return a width
|
|
38
|
+
@function grid-column-width($i, $plus: 0) {
|
|
39
|
+
@return $grid-column-width * $i + $grid-gutter-width * ($i - 1) + $plus;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
//-----------------------------------
|
|
43
|
+
// Containers
|
|
44
|
+
//-----------------------------------
|
|
45
|
+
|
|
46
|
+
// specify a container as a page
|
|
47
|
+
@mixin grid-page($i: $grid-columns, $plus: 0) {
|
|
48
|
+
@extend .clearfix;
|
|
49
|
+
width: grid-column-width($i, $plus + $grid-gutter-width);
|
|
50
|
+
margin: 0 auto;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
// specify a container as a row
|
|
54
|
+
@mixin grid-row($page: false) {
|
|
55
|
+
@extend .clearfix;
|
|
56
|
+
width: auto;
|
|
57
|
+
|
|
58
|
+
// rows directly inside a page don't need the negative margin
|
|
59
|
+
@if $page {
|
|
60
|
+
margin: 0 0;
|
|
61
|
+
} @else {
|
|
62
|
+
margin: 0 (-$grid-gutter-width / 2);
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
//-----------------------------------
|
|
67
|
+
// Columns
|
|
68
|
+
//-----------------------------------
|
|
69
|
+
|
|
70
|
+
// specify a column
|
|
71
|
+
@mixin grid-column($i: false, $plus: 0) {
|
|
72
|
+
margin: 0 ($grid-gutter-width / 2);
|
|
73
|
+
float: left;
|
|
74
|
+
|
|
75
|
+
@if $grid-support-for-ie6 { display: inline; }
|
|
76
|
+
|
|
77
|
+
// apply a width
|
|
78
|
+
@if $i { @include grid($i, $plus); }
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
// alter the margins of a column
|
|
82
|
+
@mixin grid-offset($i: 1, $plus: 0, $side: left) {
|
|
83
|
+
margin-#{$side}: (grid-column-width($i, $grid-gutter-width + $plus) + ($grid-gutter-width/2));
|
|
84
|
+
}
|
|
85
|
+
@mixin grid-offset-left($i: 1, $plus: 0) {
|
|
86
|
+
@include grid-offset($i, $plus, left);
|
|
87
|
+
}
|
|
88
|
+
@mixin grid-offset-right($i: 1, $plus: 0) {
|
|
89
|
+
@include grid-offset($i, $plus, right);
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
//-----------------------------------
|
|
93
|
+
// Default Styles
|
|
94
|
+
//-----------------------------------
|
|
95
|
+
@mixin grid-css() {
|
|
96
|
+
// containers
|
|
97
|
+
.page {
|
|
98
|
+
@include grid-page;
|
|
99
|
+
}
|
|
100
|
+
.row {
|
|
101
|
+
@include grid-row;
|
|
102
|
+
}
|
|
103
|
+
.page > .row {
|
|
104
|
+
@include grid-row(true);
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
// columns
|
|
108
|
+
.column {
|
|
109
|
+
@include grid-column;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
@for $i from 1 through $grid-columns {
|
|
113
|
+
// columns widths
|
|
114
|
+
.grid-#{$i} { width: grid-column-width($i); }
|
|
115
|
+
|
|
116
|
+
// alter left and right margins
|
|
117
|
+
@if $i < $grid-columns {
|
|
118
|
+
.before-#{$i} { @include grid-offset-left($i); }
|
|
119
|
+
.after-#{$i} { @include grid-offset-right($i); }
|
|
120
|
+
}
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
// Box
|
|
124
|
+
.box {
|
|
125
|
+
margin-bottom: $grid-gutter-width;
|
|
126
|
+
}
|
|
127
|
+
}
|
|
@@ -0,0 +1,131 @@
|
|
|
1
|
+
// Compass Box-Sizing
|
|
2
|
+
@import "compass/css3/box-sizing";
|
|
3
|
+
|
|
4
|
+
// Ensure grid is included
|
|
5
|
+
@import "grid";
|
|
6
|
+
|
|
7
|
+
//-----------------------------------
|
|
8
|
+
// Defaults
|
|
9
|
+
//-----------------------------------
|
|
10
|
+
|
|
11
|
+
//-----------------------------------
|
|
12
|
+
// Column Widths
|
|
13
|
+
//-----------------------------------
|
|
14
|
+
|
|
15
|
+
// apply a width to a column
|
|
16
|
+
@mixin fluid($i, $plus: 0, $parent: $grid-columns, $parent-plus: 0) {
|
|
17
|
+
width: fluid-column-width($i, $plus, $parent, $parent-plus);
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
// return a percentage width relative to columns
|
|
21
|
+
@function fluid-column-width($i, $plus: 0, $parent: $grid-columns, $parent-plus: 0) {
|
|
22
|
+
@return percentage(grid-column-width($i, $plus) / grid-column-width($parent, $parent-plus + $grid-gutter-width));
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
// return a percentage width relative to lengths
|
|
26
|
+
@function fluid-width($width, $parent-width: grid-column-width($grid-columns, $grid-gutter-width)) {
|
|
27
|
+
@return percentage($width / $parent-width);
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
|
|
31
|
+
//-----------------------------------
|
|
32
|
+
// Containers
|
|
33
|
+
//-----------------------------------
|
|
34
|
+
|
|
35
|
+
// specify a container as a page
|
|
36
|
+
@mixin fluid-page($i: $grid-columns, $plus: 0, $use-max-width: true) {
|
|
37
|
+
@extend .clearfix;
|
|
38
|
+
@include box-sizing(border-box);
|
|
39
|
+
@if $use-max-width { max-width: grid-column-width($i, $plus + $grid-gutter-width); }
|
|
40
|
+
width: 100%;
|
|
41
|
+
margin: 0 auto;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
// specify a container as a row
|
|
45
|
+
@mixin fluid-row($page: false, $parent: $grid-columns, $parent-plus: 0) {
|
|
46
|
+
@extend .clearfix;
|
|
47
|
+
@include box-sizing(border-box);
|
|
48
|
+
width: auto;
|
|
49
|
+
|
|
50
|
+
// rows directly inside a page don't need the negative margin
|
|
51
|
+
@if $page {
|
|
52
|
+
margin: 0 0;
|
|
53
|
+
} @else {
|
|
54
|
+
margin: 0 fluid-width(-$grid-gutter-width / 2, grid-column-width($parent, $parent-plus));
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
//-----------------------------------
|
|
59
|
+
// Columns
|
|
60
|
+
//-----------------------------------
|
|
61
|
+
|
|
62
|
+
// specify a column
|
|
63
|
+
@mixin fluid-column($i: false, $plus: 0, $parent: $grid-columns, $parent-plus: 0) {
|
|
64
|
+
@include box-sizing(border-box);
|
|
65
|
+
margin: 0 fluid-width($grid-gutter-width / 2, grid-column-width($parent, $parent-plus + $grid-gutter-width));
|
|
66
|
+
float: left;
|
|
67
|
+
|
|
68
|
+
@if $grid-support-for-ie6 { display: inline; }
|
|
69
|
+
|
|
70
|
+
// apply a width
|
|
71
|
+
@if $i { @include fluid($i, $plus, $parent, $parent-plus); }
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
// alter the margins of a column
|
|
75
|
+
@mixin fluid-offset($i: 1, $plus: 0, $side: left, $parent: $grid-columns, $parent-plus: 0) {
|
|
76
|
+
margin-#{$side}: (fluid-column-width($i, $grid-gutter-width + $plus) + fluid-width($grid-gutter-width / 2, grid-column-width($parent, $parent-plus + $grid-gutter-width)));
|
|
77
|
+
}
|
|
78
|
+
@mixin fluid-offset-left($i: 1, $plus: 0, $parent: $grid-columns, $parent-plus: 0) {
|
|
79
|
+
@include fluid-offset($i, $plus, left, $parent, $parent-plus);
|
|
80
|
+
}
|
|
81
|
+
@mixin fluid-offset-right($i: 1, $plus: 0, $parent: $grid-columns, $parent-plus: 0) {
|
|
82
|
+
@include fluid-offset($i, $plus, right, $parent, $parent-plus);
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
//-----------------------------------
|
|
86
|
+
// Default Styles
|
|
87
|
+
//-----------------------------------
|
|
88
|
+
@mixin fluid-css() {
|
|
89
|
+
// containers
|
|
90
|
+
.fluid-page {
|
|
91
|
+
@include fluid-page;
|
|
92
|
+
}
|
|
93
|
+
.fluid-row {
|
|
94
|
+
@include fluid-row;
|
|
95
|
+
}
|
|
96
|
+
.fluid-page > .fluid-row {
|
|
97
|
+
@include fluid-row(true);
|
|
98
|
+
}
|
|
99
|
+
.fluid-column {
|
|
100
|
+
@include fluid-column;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
@for $i from 1 through $grid-columns {
|
|
104
|
+
// columns widths
|
|
105
|
+
.fluid-#{$i} {
|
|
106
|
+
width: fluid-column-width($i);
|
|
107
|
+
> .fluid-row { margin: 0 fluid-width(-$grid-gutter-width / 2, grid-column-width($i)); }
|
|
108
|
+
> .fluid-row > .fluid-column { margin: 0 fluid-width($grid-gutter-width / 2, grid-column-width($i, $grid-gutter-width)); }
|
|
109
|
+
@for $j from 1 through $grid-columns - 1 {
|
|
110
|
+
@if $j <= $i {
|
|
111
|
+
> .fluid-row > .fluid-#{$j} { width: fluid-column-width($j, 0, $i); }
|
|
112
|
+
}
|
|
113
|
+
@if $j < $i {
|
|
114
|
+
> .fluid-row > .fluid-before-#{$j} { @include fluid-offset-left($j, 0, $i); }
|
|
115
|
+
> .fluid-row > .fluid-after-#{$j} { @include fluid-offset-right($j, 0, $i); }
|
|
116
|
+
}
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
// alter left and right margins
|
|
121
|
+
@if $i < $grid-columns {
|
|
122
|
+
.fluid-before-#{$i} { @include fluid-offset-left($i); }
|
|
123
|
+
.fluid-after-#{$i} { @include fluid-offset-right($i); }
|
|
124
|
+
}
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
// Box
|
|
128
|
+
.fluid-box {
|
|
129
|
+
margin-bottom: $grid-gutter-width;
|
|
130
|
+
}
|
|
131
|
+
}
|