eSales Media Git repositories
Browse code

Add some helper classes

Benjamin Roth authored on27/10/2017 13:45:18
Showing1 changed files
assets/css/custom.scss
History View file @ef88523
... ... 
@@ -1,19 +1,5 @@
1 1 
 @import "scss/base";
2 2
3 
-
4 
-
5 
-.image_container {
6 
-  &.float_right {
7 
-    float: right;
8 
-    margin: 0 0 $gutter-default $gutter-default;
9 
-  }
10 
-
11 
-  &.float_left {
12 
-    float: left;
13 
-    margin: 0 $gutter-default $gutter-default 0;
14 
-  }
15 
-}
16 
-
17 3 
 /* --- HELPER --- */
18 4 
 .mw-centered {
19 5 
   @include centered-960;
Browse code

Add additional 1200px centered mixin, modify font-size function to use rem unit, add a colsize function

Benjamin Roth authored on27/10/2017 13:42:22
Showing1 changed files
assets/css/custom.scss
History View file @c6bb09f
... ... 
@@ -1,5 +1,40 @@
1 1 
 @import "scss/base";
2 2
3 
+
4 
+
5 
+.image_container {
6 
+  &.float_right {
7 
+    float: right;
8 
+    margin: 0 0 $gutter-default $gutter-default;
9 
+  }
10 
+
11 
+  &.float_left {
12 
+    float: left;
13 
+    margin: 0 $gutter-default $gutter-default 0;
14 
+  }
15 
+}
16 
+
17 
+/* --- HELPER --- */
18 
+.mw-centered {
19 
+  @include centered-960;
20 
+}
21 
+
22 
+.mw-centered-1200 {
23 
+  @include centered-1200;
24 
+}
25 
+
26 
+.alignRight {
27 
+  text-align: right;
28 
+}
29 
+
30 
+/* --- CE SPACING --- */
31 
+.spc_default {
32 
+  margin-bottom: 45px;
33 
+}
34 
+.spc_paragraph {
35 
+  margin-bottom: 1.5rem;
36 
+}
37 
+
3 38 
 /**
4 39 
  * Add custom styles here
5 40 
  */
Browse code

Use a more modular structure for better extensibility

Benjamin Roth authored on28/08/2015 08:55:03
Showing1 changed files
assets/css/custom.scss
History View file @2268328
... ... 
@@ -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); // Example: Make the footer sticky with a fixed height of 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
Browse code

Initial commit

Benjamin Roth authored on18/08/2015 16:03:09
Showing1 changed files
assets/css/custom.scss
History View file @6662847
1 1 
new file mode 100644
... ... 
@@ -0,0 +1,288 @@
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 
+}
189 
+
190 
+/**
191 
+ * Custom
192 
+ */
193 
+
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 
+    }
283 
+
284 
+    &:last-child {
285 
+      padding-right: 0;
286 
+    }
287 
+  }
288 
+}
0 289 
\ No newline at end of file