compass-grid-plugin 0.0.1
Sign up to get free protection for your applications and to get access to all the features.
- 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
|
+
}
|