Browse code

Use a more modular structure for better extensibility

Benjamin Roth authored on28/08/2015 08:55:03
Showing11 changed files
... ...
@@ -1,288 +1,9 @@
1
-@import "compass";
2
-
3
-$font-family: "Roboto", Arial, Helvetica, FreeSans, sans-serif;
4
-
5
-$main-color: #082054;
6
-$text-color: #000000;
7
-$alt-color: #ffffff;
8
-$link-color: #878787;
9
-
10
-$font-size-default: 16px;
11
-$font-size-mainnav: 18px / $font-size-default * 100%;
12
-
13
-$line-height-default: 1.5;
14
-
15
-
16
-/**
17
- * Functions
18
- */
19
-@function font-size($size) {
20
-  @return $size / $font-size-default * 100%
21
-}
22
-
23
-/**
24
- * Mixins
25
- */
26
-
27
-@mixin font-awesome {
28
-  display: inline-block;
29
-  font: normal normal normal 14px/1 FontAwesome;
30
-  font-size: inherit;
31
-  text-rendering: auto;
32
-  -webkit-font-smoothing: antialiased;
33
-  -moz-osx-font-smoothing: grayscale;
34
-}
35
-
36
-@mixin fa-text-replacement($height, $width) {
37
-  height: $height;
38
-  width: $width;
39
-  padding: 0;
40
-  margin: 0;
41
-  overflow: hidden;
42
-}
43
-
44
-
45
-/**
46
- * Hide invisible elements
47
- */
48
-.invisible {
49
-  border:0;
50
-  clip:rect(0 0 0 0);
51
-  height:1px;
52
-  margin:-1px;
53
-  overflow:hidden;
54
-  padding:0;
55
-  position:absolute;
56
-  width:1px;
57
-}
58
-
59
-/**
60
- * Flexible images (videos see #4896)
61
- *
62
- * @see http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries
63
- */
64
-img {
65
-  max-width:100%;
66
-  height:auto;
67
-}
68
-.ie7 img {
69
-  -ms-interpolation-mode:bicubic;
70
-}
71
-.ie8 img {
72
-  width:auto; /* see #5789 */
73
-}
74
-
75
-/**
76
- * Clear floats
77
- */
78
-
79
-.cf,
80
-.block,
81
-#container,
82
-.inside {
83
-  &:before,
84
-  &:after {
85
-	content: " "; /* 1 */
86
-	display: table; /* 2 */
87
-  }
88
-
89
-  &:after {
90
-	clear: both;
91
-  }
92
-
93
-  /**
94
-   * For IE 6/7 only
95
-   * Include this rule to trigger hasLayout and contain floats.
96
-   */
97
-  & {
98
-	*zoom: 1;
99
-  }
100
-}
101
-
102
-/**
103
- * Holy grail CSS layout
104
- *
105
- * @see http://www.alistapart.com/articles/holygrail
106
- */
107
-#main,#left,#right {
108
-  float:left;
109
-}
110
-#main {
111
-  width:100%;
112
-
113
-  .inside {
114
-    min-height:1px; /* see #4893 */
115
-  }
116
-}
117
-#left {
118
-  margin-left:-100%;
119
-}
120
-#right {
121
-  margin-right:-100%;
122
-}
123
-#footer {
124
-  clear:both;
125
-}
126
-
127
-/**
128
- * Basic positioning
129
- */
130
-
131
-#header,
132
-#main, #left, #right,
133
-#footer {
134
-  position: relative;
135
-}
136
-
137
-/**
138
- * Standards
139
- */
140
-
141
-body {
142
-  font: $font-size-default/$line-height-default $font-family;
143
-  font-weight: 400;
144
-  color: $text-color;
145
-}
146
-
147
-a {
148
-  text-decoration: none;
149
-  color: $link-color;
150
-}
151
-
152
-h1, h2 {
153
-  font-weight: 400;
154
-}
155
-
156
-h1 {
157
-  font-size: font-size(26px);
158
-}
159
-
160
-h2 {
161
-  font-size: font-size(22px);
162
-}
163
-
164
-/**
165
- * Sticky footer
166
- */
167
-html {
168
-  height: 100%;
169
-}
170
-body {
171
-  position: relative;
172
-  margin: 0;
173
-  padding: 0;
174
-  min-height: 100%;
175
-}
176
-#wrapper {
177
-  padding-bottom: 200px;
178
-}
179
-#footer {
180
-  position: absolute;
181
-  bottom: 0;
182
-  left: 0;
183
-  right: 0;
184
-
185
-  .inside {
186
-    height: 170px;
187
-  }
188
-}
1
+@import "scss/base";
189 2
 
190 3
 /**
191
- * Custom
4
+ * Add custom styles here
192 5
  */
193 6
 
194
-.inside {
195
-  max-width: 960px;
196
-  margin: 0 auto;
197
-  position: relative;
198
-}
199
-
200
-#header {
201
-  background-color: $main-color;
202
-  border-bottom: $alt-color 2px solid;
203
-
204
-  .inside {
205
-    height: 178px;
206
-  }
207
-}
208
-
209
-#container {
210
-  padding: 40px 0;
211
-}
212
-
213
-#footer {
214
-  background-color: $main-color;
215
-  border-top: $alt-color 2px solid;
216
-  padding: 30px 0 0;
217
-  color: $alt-color;
218
-  font-size: font-size(14px);
219
-  font-weight: 300;
220
-}
221
-
222
-#logo {
223
-  position: absolute;
224
-  top: 50%;
225
-  left: 0;
226
-  -webkit-transform: translateY(-50%);
227
-  -moz-transform: translateY(-50%);
228
-  -ms-transform: translateY(-50%);
229
-  -o-transform: translateY(-50%);
230
-  transform: translateY(-50%);
231
-}
232
-
233
-#main-nav {
234
-  text-transform: uppercase;
235
-  font-size: $font-size-mainnav;
236
-  font-weight: 300;
237
-  position: absolute;
238
-  top: 50%;
239
-  right: 0;
240
-
241
-  a {
242
-    color: $alt-color;
243
-    -webkit-transition: all 0.25s;
244
-    -moz-transition: all 0.25s;
245
-    -o-transition: all 0.25s;
246
-    transition: all 0.25s;
247
-
248
-    &:hover {
249
-      color: $link-color;
250
-    }
251
-  }
252
-
253
-  span {
254
-
255
-    &.active,
256
-    &.trail {
257
-      color: $link-color;
258
-    }
259
-  }
260
-
261
-  a,
262
-  span {
263
-
264
-    display: block;
265
-
266
-    &.home {
267
-      @include fa-text-replacement($font-size-mainnav * $line-height-default / 100% * $font-size-default,$font-size-mainnav / 100% * $font-size-default);
268
-
269
-      &:before {
270
-        @include font-awesome;
271
-        content: '\f015';
272
-      }
273
-    }
274
-  }
275
-
276
-  li {
277
-    float: left;
278
-    padding: 0 13px;
279
-
280
-    &:first-child {
281
-      padding-left: 0;
282
-    }
7
+@include set-sticky-footer(170px);
283 8
 
284
-    &:last-child {
285
-      padding-right: 0;
286
-    }
287
-  }
288
-}
289 9
\ No newline at end of file
10
+.inside { @include centered-960 } // Example: All inside classes will be centered with a max-width of 960px
290 11
\ No newline at end of file
291 12
deleted file mode 100644
... ...
@@ -1,175 +0,0 @@
1
-@import "compass";
2
-
3
-// Radius
4
-$field-radius: 3px;
5
-$button-radius: 3px;
6
-
7
-// Colors
8
-$border-color-hl: #082054;
9
-$background-color-hl: lighten($border-color-hl,80%);
10
-$button-background-color-hl: #082054;
11
-$button-border-color-hl: #082054;
12
-$background-color: #ffffff;
13
-$border-color: #cccccc;
14
-$shadow-color: #eeeeee;
15
-$label-color: inherit;
16
-$legend-color: inherit;
17
-$button-text-color: #ffffff;
18
-$button-background-color: #2f67b7;
19
-$button-border-color: #082054;
20
-$background-color-ro: #eeeeee;
21
-
22
-// Sizes & Paddings
23
-$field-padding: 3px 6px;
24
-$field-height: 39px;
25
-$field-border-width: 2px;
26
-$button-padding: 3px 15px 3px 14px;
27
-$button-border-width: 2px;
28
-
29
-/**
30
- * Since fieldset borders are removed in the reset style sheet, adjust the
31
- * legends accordingly
32
- */
33
-legend {
34
-  width: 100%;
35
-  display: block;
36
-  font-weight: bold;
37
-  border: 0;
38
-}
39
-
40
-input,
41
-textarea,
42
-button,
43
-select {
44
-  line-height: 175%;
45
-  outline: none;
46
-}
47
-
48
-/**
49
- * Text fields and textareas
50
- */
51
-input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="email"],
52
-input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], input:not([type]), textarea, select {
53
-  width: 100%;
54
-  display: inline-block;
55
-  padding: $field-padding;
56
-  background: $background-color;
57
-  border: $field-border-width solid $border-color;
58
-  height: $field-height;
59
-  @include border-radius($field-radius);
60
-  @include box-shadow(inset 0 1px 1px $shadow-color);
61
-  @include transition(all .15s linear);
62
-  @include box-sizing(border-box);
63
-
64
-  &:focus {
65
-    outline: 0;
66
-    background: $background-color-hl;
67
-    border-color: $border-color-hl;
68
-  }
69
-}
70
-
71
-/**
72
- * Label styling
73
- */
74
-
75
-.formbody label {
76
-  color: $label-color;
77
-}
78
-
79
-/**
80
- * Fieldset styling
81
- */
82
-.formbody > fieldset {
83
-  margin-top: 1.5em;
84
-
85
-  legend {
86
-    color: $legend-color;
87
-    border-bottom-color: $legend-color;
88
-  }
89
-}
90
-
91
-
92
-/**
93
- * Fix some width and height settings
94
- */
95
-input[type="file"] {
96
-  cursor: pointer;
97
-}
98
-
99
-select, input[type="file"] {
100
-  display: block;
101
-}
102
-
103
-input[type="file"], input[type="image"], input[type="submit"], input[type="reset"], input[type="button"], input[type="radio"], input[type="checkbox"] {
104
-  width: auto;
105
-}
106
-
107
-textarea, select[multiple], select[size] {
108
-  height: auto;
109
-}
110
-
111
-/**
112
- * Checkboxes and radio buttons
113
- */
114
-input[type="radio"], input[type="checkbox"] {
115
-  margin: 0 3px 0 0;
116
-}
117
-
118
-input[type="radio"], input[type="checkbox"], label {
119
-  vertical-align: middle;
120
-}
121
-
122
-/**
123
- * Handle disabled and read-only
124
- */
125
-input[disabled], select[disabled], textarea[disabled], input[readonly], select[readonly], textarea[readonly] {
126
-  cursor: not-allowed;
127
-  background: $background-color-ro;
128
-}
129
-
130
-input[type="radio"][disabled], input[type="checkbox"][disabled], input[type="radio"][readonly], input[type="checkbox"][readonly] {
131
-  background: transparent;
132
-}
133
-
134
-/**
135
- * Buttons
136
- */
137
-input[type="submit"], .button, button {
138
-  display: inline-block;
139
-  padding: $button-padding;
140
-  margin-bottom: 0;
141
-  text-align: center;
142
-  vertical-align: middle;
143
-  color: $button-text-color;
144
-  cursor: pointer;
145
-  border: $button-border-width solid $button-border-color;
146
-  @include border-radius($button-radius);
147
-  background-color: $button-background-color;
148
-  @include transition(background .15s linear);
149
-
150
-  &:hover {
151
-    text-decoration: none;
152
-  }
153
-
154
-  &:active {
155
-    background-color: $button-background-color-hl;
156
-    border-color: $button-border-color-hl;
157
-  }
158
-}
159
-
160
-/**
161
- * Optional button styles
162
- */
163
-.button_block input[type="submit"],
164
-.button_block button {
165
-  display: block;
166
-  width: 100%;
167
-}
168
-
169
-/**
170
- * Checkbox
171
- */
172
-.widget.widget-checkbox label, .widget.widget-radio label {
173
-  display: inline-block;
174
-  margin-bottom: 0;
175
-}
176 0
\ No newline at end of file
177 1
deleted file mode 100644
... ...
@@ -1,51 +0,0 @@
1
-$col_margin: 2%;
2
-
3
-.ce_gallery > ul {
4
-  &:before,
5
-  &:after {
6
-    content: " "; /* 1 */
7
-    display: table; /* 2 */
8
-  }
9
-
10
-  &:after {
11
-    clear: both;
12
-  }
13
-
14
-  /**
15
-   * For IE 6/7 only
16
-   * Include this rule to trigger hasLayout and contain floats.
17
-   */
18
-  & {
19
-    *zoom: 1;
20
-  }
21
-
22
-  & > li {
23
-    margin: 0 $col_margin $col_margin;
24
-    float: left;
25
-
26
-    &.col_first {
27
-      clear: none;
28
-    }
29
-
30
-  }
31
-
32
-  &.cols_1 > li {
33
-    float: none;
34
-  }
35
-
36
-  @for $i from 1 through 12 {
37
-    &.cols_#{$i} > li:nth-child(1n) {
38
-      width: (100-($i * (2 * $col_margin) - (2 * $col_margin))) / $i;
39
-    }
40
-    &.cols_#{$i} > li:nth-child(#{$i}n+1) {
41
-      margin-left: 0;
42
-      clear: left;
43
-    }
44
-    &.cols_#{$i} > li:nth-child(#{$i}n) {
45
-      margin-right: 0;
46
-    }
47
-  }
48
-}
49
-
50
-
51
-
52 0
deleted file mode 100644
... ...
@@ -1,57 +0,0 @@
1
-$col_margin: 2%;
2
-
3
-.ce_gallery > ul {
4
-  &:before,
5
-  &:after {
6
-    content: " "; /* 1 */
7
-    display: table; /* 2 */
8
-  }
9
-
10
-  &:after {
11
-    clear: both;
12
-  }
13
-
14
-  /**
15
-   * For IE 6/7 only
16
-   * Include this rule to trigger hasLayout and contain floats.
17
-   */
18
-  & {
19
-    *zoom: 1;
20
-  }
21
-
22
-  & > li {
23
-    margin: 0 $col_margin $col_margin;
24
-    float: left;
25
-
26
-    &.col_first {
27
-      clear: none;
28
-    }
29
-
30
-    &:first-child {
31
-      width: 100%;
32
-      margin-left: 0;
33
-      margin-right: 0;
34
-      float: none;
35
-    }
36
-  }
37
-
38
-  &.cols_1 > li {
39
-    float: none;
40
-  }
41
-
42
-  @for $i from 1 through 12 {
43
-    &.cols_#{$i} > li:nth-child(1n+2) {
44
-      width: (100-($i * (2 * $col_margin) - (2 * $col_margin))) / $i;
45
-    }
46
-    &.cols_#{$i} > li:nth-child(#{$i}n+2) {
47
-      margin-left: 0;
48
-      clear: left;
49
-    }
50
-    &.cols_#{$i} > li:nth-child(#{$i}n+1) {
51
-      margin-right: 0;
52
-    }
53
-  }
54
-}
55
-
56
-
57
-
58 0
new file mode 100644
... ...
@@ -0,0 +1,29 @@
1
+/**
2
+ * Fonts
3
+ */
4
+$font-family: "Open-Sans", Arial, Helvetica, FreeSans, sans-serif;
5
+$font-family-alt: "Roboto", Arial, Helvetica, FreeSans, sans-serif;
6
+
7
+/**
8
+ * Colors
9
+ */
10
+$color-main: #082054;
11
+$color-alt: #ffffff;
12
+$color-text: #000000;
13
+$color-link: #878787;
14
+
15
+/**
16
+ * Font sizes and defaults
17
+ */
18
+$font-size-default: 16px;
19
+$font-size-mainnav: 18px / $font-size-default * 100%;
20
+
21
+$font-weight-default: 400;
22
+$font-weight-bold: 700;
23
+
24
+$line-height-default: 1.5;
25
+
26
+/**
27
+ * Flags
28
+ */
29
+$load-holy-grail-layout: true;
0 30
\ No newline at end of file
1 31
new file mode 100644
... ...
@@ -0,0 +1,124 @@
1
+@import "compass";
2
+@import "_settings";
3
+@import "compass/reset";
4
+@import "inc/layout/_sticky_footer";
5
+
6
+/**
7
+ * Functions
8
+ */
9
+@function font-size($size) {
10
+  @return $size / $font-size-default * 100%
11
+}
12
+
13
+/**
14
+ * Mixins
15
+ */
16
+
17
+@mixin font-awesome {
18
+  display: inline-block;
19
+  font: normal normal normal 14px/1 FontAwesome;
20
+  font-size: inherit;
21
+  text-rendering: auto;
22
+  -webkit-font-smoothing: antialiased;
23
+  -moz-osx-font-smoothing: grayscale;
24
+}
25
+
26
+@mixin fa-text-replacement($height, $width) {
27
+  height: $height;
28
+  width: $width;
29
+  padding: 0;
30
+  margin: 0;
31
+  overflow: hidden;
32
+}
33
+
34
+@mixin centered-960 {
35
+  max-width: 960px;
36
+  margin: 0 auto;
37
+  position: relative;
38
+}
39
+
40
+/**
41
+ * Hide invisible elements
42
+ */
43
+.invisible {
44
+  border:0;
45
+  clip:rect(0 0 0 0);
46
+  height:1px;
47
+  margin:-1px;
48
+  overflow:hidden;
49
+  padding:0;
50
+  position:absolute;
51
+  width:1px;
52
+}
53
+
54
+/**
55
+ * Flexible images (videos see #4896)
56
+ *
57
+ * @see http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries
58
+ */
59
+img {
60
+  max-width:100%;
61
+  height:auto;
62
+}
63
+.ie7 img {
64
+  -ms-interpolation-mode:bicubic;
65
+}
66
+.ie8 img {
67
+  width:auto; /* see #5789 */
68
+}
69
+
70
+/**
71
+ * Clear floats
72
+ */
73
+
74
+.cf,
75
+.block,
76
+#container,
77
+.inside {
78
+  &:before,
79
+  &:after {
80
+	content: " "; /* 1 */
81
+	display: table; /* 2 */
82
+  }
83
+
84
+  &:after {
85
+	clear: both;
86
+  }
87
+
88
+  /**
89
+   * For IE 6/7 only
90
+   * Include this rule to trigger hasLayout and contain floats.
91
+   */
92
+  & {
93
+	*zoom: 1;
94
+  }
95
+}
96
+
97
+@if $load-holy-grail-layout {
98
+  @include holy-grail-layout;
99
+}
100
+
101
+/**
102
+ * Basic positioning
103
+ */
104
+
105
+#header,
106
+#main, #left, #right,
107
+#footer {
108
+  position: relative;
109
+}
110
+
111
+/**
112
+ * Standards
113
+ */
114
+
115
+body {
116
+  font: $font-size-default/$line-height-default $font-family;
117
+  font-weight: $font-weight-default;
118
+  color: $color-text;
119
+}
120
+
121
+a {
122
+  text-decoration: none;
123
+  color: $color-link;
124
+}
0 125
\ No newline at end of file
1 126
new file mode 100644
... ...
@@ -0,0 +1,178 @@
1
+@import "compass";
2
+
3
+// Radius
4
+$field-radius: 3px;
5
+$button-radius: 3px;
6
+
7
+// Colors
8
+$border-color-hl: #082054;
9
+$background-color-hl: lighten($border-color-hl,80%);
10
+$button-background-color-hl: #082054;
11
+$button-border-color-hl: #082054;
12
+$background-color: #ffffff;
13
+$border-color: #cccccc;
14
+$shadow-color: #eeeeee;
15
+$label-color: inherit;
16
+$legend-color: inherit;
17
+$button-text-color: #ffffff;
18
+$button-background-color: #2f67b7;
19
+$button-border-color: #082054;
20
+$background-color-ro: #eeeeee;
21
+
22
+// Sizes & Paddings
23
+$field-padding: 3px 6px;
24
+$field-height: 35px;
25
+$field-border-width: 1px;
26
+$button-padding: 3px 15px 3px 14px;
27
+$button-height: 35px;
28
+$button-border-width: 2px;
29
+
30
+/**
31
+ * Since fieldset borders are removed in the reset style sheet, adjust the
32
+ * legends accordingly
33
+ */
34
+legend {
35
+  width: 100%;
36
+  display: block;
37
+  font-weight: bold;
38
+  border: 0;
39
+}
40
+
41
+input,
42
+textarea,
43
+button,
44
+select {
45
+  line-height: 150%;
46
+  outline: none;
47
+}
48
+
49
+/**
50
+ * Text fields and textareas
51
+ */
52
+input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="email"],
53
+input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], input:not([type]), textarea, select {
54
+  width: 100%;
55
+  display: inline-block;
56
+  padding: $field-padding;
57
+  background: $background-color;
58
+  border: $field-border-width solid $border-color;
59
+  height: $field-height;
60
+  @include border-radius($field-radius);
61
+  @include box-shadow(inset 0 1px 1px $shadow-color);
62
+  @include transition(all .15s linear);
63
+  @include box-sizing(border-box);
64
+
65
+  &:focus {
66
+    outline: 0;
67
+    background: $background-color-hl;
68
+    border-color: $border-color-hl;
69
+  }
70
+}
71
+
72
+/**
73
+ * Label styling
74
+ */
75
+
76
+.formbody label {
77
+  color: $label-color;
78
+}
79
+
80
+/**
81
+ * Fieldset styling
82
+ */
83
+.formbody > fieldset {
84
+  margin-top: 1.5em;
85
+
86
+  legend {
87
+    color: $legend-color;
88
+    border-bottom-color: $legend-color;
89
+  }
90
+}
91
+
92
+
93
+/**
94
+ * Fix some width and height settings
95
+ */
96
+input[type="file"] {
97
+  cursor: pointer;
98
+}
99
+
100
+select, input[type="file"] {
101
+  display: block;
102
+}
103
+
104
+input[type="file"], input[type="image"], input[type="submit"], input[type="reset"], input[type="button"], input[type="radio"], input[type="checkbox"] {
105
+  width: auto;
106
+}
107
+
108
+textarea, select[multiple], select[size] {
109
+  height: auto;
110
+}
111
+
112
+/**
113
+ * Checkboxes and radio buttons
114
+ */
115
+input[type="radio"], input[type="checkbox"] {
116
+  margin: 0 3px 0 0;
117
+}
118
+
119
+input[type="radio"], input[type="checkbox"], label {
120
+  vertical-align: middle;
121
+}
122
+
123
+/**
124
+ * Handle disabled and read-only
125
+ */
126
+input[disabled], select[disabled], textarea[disabled], input[readonly], select[readonly], textarea[readonly] {
127
+  cursor: not-allowed;
128
+  background: $background-color-ro;
129
+}
130
+
131
+input[type="radio"][disabled], input[type="checkbox"][disabled], input[type="radio"][readonly], input[type="checkbox"][readonly] {
132
+  background: transparent;
133
+}
134
+
135
+/**
136
+ * Buttons
137
+ */
138
+input[type="submit"], .button, button {
139
+  display: inline-block;
140
+  padding: $button-padding;
141
+  margin-bottom: 0;
142
+  text-align: center;
143
+  vertical-align: middle;
144
+  color: $button-text-color;
145
+  cursor: pointer;
146
+  border: $button-border-width solid $button-border-color;
147
+  height: $button-height;
148
+  @include border-radius($button-radius);
149
+  background-color: $button-background-color;
150
+  @include transition(background .15s linear);
151
+  @include box-sizing(border-box);
152
+
153
+  &:hover {
154
+    text-decoration: none;
155
+  }
156
+
157
+  &:active {
158
+    background-color: $button-background-color-hl;
159
+    border-color: $button-border-color-hl;
160
+  }
161
+}
162
+
163
+/**
164
+ * Optional button styles
165
+ */
166
+.button_block input[type="submit"],
167
+.button_block button {
168
+  display: block;
169
+  width: 100%;
170
+}
171
+
172
+/**
173
+ * Checkbox
174
+ */
175
+.widget.widget-checkbox label, .widget.widget-radio label {
176
+  display: inline-block;
177
+  margin-bottom: 0;
178
+}
0 179
\ No newline at end of file
1 180
new file mode 100644
... ...
@@ -0,0 +1,51 @@
1
+$col_margin: 2%;
2
+
3
+.ce_gallery > ul {
4
+  &:before,
5
+  &:after {
6
+    content: " "; /* 1 */
7
+    display: table; /* 2 */
8
+  }
9
+
10
+  &:after {
11
+    clear: both;
12
+  }
13
+
14
+  /**
15
+   * For IE 6/7 only
16
+   * Include this rule to trigger hasLayout and contain floats.
17
+   */
18
+  & {
19
+    *zoom: 1;
20
+  }
21
+
22
+  & > li {
23
+    margin: 0 $col_margin $col_margin;
24
+    float: left;
25
+
26
+    &.col_first {
27
+      clear: none;
28
+    }
29
+
30
+  }
31
+
32
+  &.cols_1 > li {
33
+    float: none;
34
+  }
35
+
36
+  @for $i from 1 through 12 {
37
+    &.cols_#{$i} > li:nth-child(1n) {
38
+      width: (100-($i * (2 * $col_margin) - (2 * $col_margin))) / $i;
39
+    }
40
+    &.cols_#{$i} > li:nth-child(#{$i}n+1) {
41
+      margin-left: 0;
42
+      clear: left;
43
+    }
44
+    &.cols_#{$i} > li:nth-child(#{$i}n) {
45
+      margin-right: 0;
46
+    }
47
+  }
48
+}
49
+
50
+
51
+
0 52
new file mode 100644
... ...
@@ -0,0 +1,57 @@
1
+$col_margin: 2%;
2
+
3
+.ce_gallery > ul {
4
+  &:before,
5
+  &:after {
6
+    content: " "; /* 1 */
7
+    display: table; /* 2 */
8
+  }
9
+
10
+  &:after {
11
+    clear: both;
12
+  }
13
+
14
+  /**
15
+   * For IE 6/7 only
16
+   * Include this rule to trigger hasLayout and contain floats.
17
+   */
18
+  & {
19
+    *zoom: 1;
20
+  }
21
+
22
+  & > li {
23
+    margin: 0 $col_margin $col_margin;
24
+    float: left;
25
+
26
+    &.col_first {
27
+      clear: none;
28
+    }
29
+
30
+    &:first-child {
31
+      width: 100%;
32
+      margin-left: 0;
33
+      margin-right: 0;
34
+      float: none;
35
+    }
36
+  }
37
+
38
+  &.cols_1 > li {
39
+    float: none;
40
+  }
41
+
42
+  @for $i from 1 through 12 {
43
+    &.cols_#{$i} > li:nth-child(1n+2) {
44
+      width: (100-($i * (2 * $col_margin) - (2 * $col_margin))) / $i;
45
+    }
46
+    &.cols_#{$i} > li:nth-child(#{$i}n+2) {
47
+      margin-left: 0;
48
+      clear: left;
49
+    }
50
+    &.cols_#{$i} > li:nth-child(#{$i}n+1) {
51
+      margin-right: 0;
52
+    }
53
+  }
54
+}
55
+
56
+
57
+
0 58
new file mode 100644
... ...
@@ -0,0 +1,26 @@
1
+/**
2
+ * Holy grail CSS layout
3
+ *
4
+ * @see http://www.alistapart.com/articles/holygrail
5
+ */
6
+@mixin holy-grail-layout {
7
+  #main, #left, #right {
8
+	float: left;
9
+  }
10
+  #main {
11
+	width: 100%;
12
+
13
+	.inside {
14
+	  min-height: 1px; /* see #4893 */
15
+	}
16
+  }
17
+  #left {
18
+	margin-left: -100%;
19
+  }
20
+  #right {
21
+	margin-right: -100%;
22
+  }
23
+  #footer {
24
+	clear: both;
25
+  }
26
+}
0 27
\ No newline at end of file
1 28
new file mode 100644
... ...
@@ -0,0 +1,27 @@
1
+/**
2
+ * Sticky footer
3
+ */
4
+@mixin set-sticky-footer($height, $padding: 30px) {
5
+  html {
6
+	height: 100%;
7
+  }
8
+  body {
9
+	position: relative;
10
+	margin: 0;
11
+	padding: 0;
12
+	min-height: 100%;
13
+  }
14
+  #wrapper {
15
+	padding-bottom: $height + $padding;
16
+  }
17
+  #footer {
18
+	position: absolute;
19
+	bottom: 0;
20
+	left: 0;
21
+	right: 0;
22
+
23
+	.inside {
24
+	  height: $height;
25
+	}
26
+  }
27
+}
0 28
\ No newline at end of file