eSales Media Git repositories
Browse code

Add rocksolid columns scss template

Benjamin Roth authored on27/10/2017 13:38:23
Showing1 changed files
assets/css/columns.scss
History View file @2414b40
1 1 
new file mode 100644
... ... 
@@ -0,0 +1,107 @@
1 
+@mixin column-classes($gutter-width, $max-columns, $class-name) {
2 
+  @for $cols from 1 through $max-columns {
3 
+    $colWidth: (1 - $gutter-width * ($cols - 1)) / $cols;
4 
+
5 
+    @for $span from 1 through $cols {
6 
+      &.-#{unquote($class-name)}-col-#{$cols}-#{$span} {
7 
+        width: ($colWidth * $span + $gutter-width * ($span - 1)) * 100%;
8 
+      }
9 
+    }
10 
+  }
11 
+}
12 
+
13 
+.rs-columns {
14 
+  clear: both;
15 
+  display: inline-block;
16 
+  width: 100%;
17 
+}
18 
+
19 
+.rs-column {
20 
+  $gutter-width: 1 / 710 * 15;
21 
+
22 
+  float: left;
23 
+  width: 100%;
24 
+  margin-top: $gutter-width * 100%;
25 
+  margin-right: $gutter-width * 100%;
26 
+
27 
+  &.-large-first {
28 
+    clear: left;
29 
+  }
30 
+
31 
+  &.-large-last {
32 
+    margin-right: -5px;
33 
+  }
34 
+
35 
+  &.-large-first-row {
36 
+    margin-top: 0;
37 
+  }
38 
+
39 
+  @include column-classes($gutter-width, 6, large);
40 
+
41 
+  // Tablet portrait format (viewport width 900px and below)
42 
+  @media screen and (max-width: 900px) {
43 
+    $gutter-width: 1 / 13;
44 
+
45 
+    margin-top: $gutter-width * 100%;
46 
+    margin-right: $gutter-width * 100%;
47 
+
48 
+    &.-large-first {
49 
+      clear: none;
50 
+    }
51 
+
52 
+    &.-large-last {
53 
+      margin-right: $gutter-width * 100%;
54 
+    }
55 
+
56 
+    &.-large-first-row {
57 
+      margin-top: $gutter-width * 100%;
58 
+    }
59 
+
60 
+    &.-medium-first {
61 
+      clear: left;
62 
+    }
63 
+
64 
+    &.-medium-last {
65 
+      margin-right: -5px;
66 
+    }
67 
+
68 
+    &.-medium-first-row {
69 
+      margin-top: 0;
70 
+    }
71 
+
72 
+    @include column-classes($gutter-width, 6, medium);
73 
+  }
74 
+
75 
+  // Mobile (viewport width 599px and below)
76 
+  @media screen and (max-width: 599px) {
77 
+    $gutter-width: 1 / 13;
78 
+
79 
+    margin-right: $gutter-width * 100%;
80 
+
81 
+    &.-medium-first {
82 
+      clear: none;
83 
+    }
84 
+
85 
+    &.-medium-last {
86 
+      margin-right: $gutter-width * 100%;
87 
+    }
88 
+
89 
+    &.-medium-first-row {
90 
+      margin-top: $gutter-width * 100%;
91 
+    }
92 
+
93 
+    &.-small-first {
94 
+      clear: left;
95 
+    }
96 
+
97 
+    &.-small-last {
98 
+      margin-right: -5px;
99 
+    }
100 
+
101 
+    &.-small-first-row {
102 
+      margin-top: 0;
103 
+    }
104 
+
105 
+    @include column-classes($gutter-width, 6, small);
106 
+  }
107 
+}