add responsive.less file

1 files changed, 147 insertions, 0 deletions

diff --git a/lib/responsive.less b/lib/responsive.less
new file mode 100644
index 000000000..ee974d3e1
--- /dev/null
+++ b/lib/responsive.less
@@ -0,0 +1,147 @@
+/* Responsive.less
+ * For phone and tablet devices
+ * ------------------------------------------------------------- */
+
+
+@media (max-width: 480px) {
+  // Remove width from containers
+  .container {
+    width: auto;
+    padding: 0 10px;
+  }
+  // Make all columns even
+  [class*="span"] {
+    float: none;
+    display: block;
+    width: auto;
+  }
+}
+
+
+@media (min-width: 480px) and (max-width: 768px) {
+  // Remove width from containers
+  .container {
+    width: auto;
+    padding: 0 10px;
+  }
+  // Make all columns even
+  [class*="span"] {
+    float: none;
+    display: block;
+    width: auto;
+    margin: 0;
+  }
+}
+
+
+// TABLET TO MEDIUM DESKTOP
+// ------------------------
+
+@media (min-width: 768px) and (max-width: 940px) {
+
+  // Reset grid variables
+  @gridColumns:       16;
+  @gridColumnWidth:   28px;
+  @gridGutterWidth:   20px;
+  @siteWidth:         748px;
+  @extraSpace:        (@gridGutterWidth * 2);
+
+  // Bring grid mixins to recalculate widths
+  .columns(@columnSpan: 1) {
+    width: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1));
+  }
+  .offset(@columnOffset: 1) {
+    margin-left: (@gridColumnWidth * @columnOffset) + (@gridGutterWidth * (@columnOffset - 1)) + @extraSpace;
+  }
+
+  // 16cols at 30px wide with 16px gutters
+  .container {
+    width: @siteWidth;
+  }
+
+  // Default columns
+  .span1     { .columns(1); }
+  .span2     { .columns(2); }
+  .span3     { .columns(3); }
+  .span4     { .columns(4); }
+  .span5     { .columns(5); }
+  .span6     { .columns(6); }
+  .span7     { .columns(7); }
+  .span8     { .columns(8); }
+  .span9     { .columns(9); }
+  .span10    { .columns(10); }
+  .span11    { .columns(11); }
+  .span12    { .columns(12); }
+
+  // Offset column options
+  .offset1   { .offset(1); }
+  .offset2   { .offset(2); }
+  .offset3   { .offset(3); }
+  .offset4   { .offset(4); }
+  .offset5   { .offset(5); }
+  .offset6   { .offset(6); }
+  .offset7   { .offset(7); }
+  .offset8   { .offset(8); }
+  .offset9   { .offset(9); }
+  .offset10  { .offset(10); }
+  .offset11  { .offset(11); }
+  .offset12  { .offset(12); }
+
+}
+
+
+// LARGE DESKTOP
+// -------------
+
+@media (min-width: 1170px) {
+
+  // Reset grid variables
+  @gridColumns:       12;
+  @gridColumnWidth:   70px;
+  @gridGutterWidth:   30px;
+  @siteWidth:         1170px;
+
+  // Bring grid mixins to recalculate widths
+  .columns(@columnSpan: 1) {
+    width: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1));
+  }
+  .offset(@columnOffset: 1) {
+    margin-left: (@gridColumnWidth * @columnOffset) + (@gridGutterWidth * (@columnOffset - 1)) + @gridGutterWidth;
+  }
+
+  .container {
+    width: @siteWidth;
+  }
+  [class*="span"] {
+    margin-left: @gridGutterWidth;
+  }
+
+  // Default columns
+  .span1     { .columns(1); }
+  .span2     { .columns(2); }
+  .span3     { .columns(3); }
+  .span4     { .columns(4); }
+  .span5     { .columns(5); }
+  .span6     { .columns(6); }
+  .span7     { .columns(7); }
+  .span8     { .columns(8); }
+  .span9     { .columns(9); }
+  .span10    { .columns(10); }
+  .span11    { .columns(11); }
+  .span12    { .columns(12); }
+
+  // Offset column options
+  .offset1   { .offset(1); }
+  .offset2   { .offset(2); }
+  .offset3   { .offset(3); }
+  .offset4   { .offset(4); }
+  .offset5   { .offset(5); }
+  .offset6   { .offset(6); }
+  .offset7   { .offset(7); }
+  .offset8   { .offset(8); }
+  .offset9   { .offset(9); }
+  .offset10  { .offset(10); }
+  .offset11  { .offset(11); }
+  .offset12  { .offset(12); }
+
+}
\ No newline at end of file