moving structure around + more work on builder...

1 files changed, 268 insertions, 0 deletions

diff --git a/less/responsive.less b/less/responsive.less
new file mode 100644
index 000000000..2999eef4d
--- /dev/null
+++ b/less/responsive.less
@@ -0,0 +1,268 @@
+// Responsive.less
+// For phone and tablet devices
+// -------------------------------------------------------------
+
+
+// REPEAT VARIABLES & MIXINS
+// -------------------------
+// Required since we compile the responsive stuff separately
+
+@import "variables.less"; // Modify this for custom colors, font-sizes, etc
+@import "mixins.less";
+
+
+// RESPONSIVE CLASSES
+// ------------------
+
+// Hide from screenreaders and browsers
+// Credit: HTML5BP
+.hidden {
+  display: none;
+  visibility: hidden;
+}
+
+
+// UP TO LANDSCAPE PHONE
+// ---------------------
+
+@media (max-width: 480px) {
+
+  // Make the nav work for small devices
+  .navbar {
+    .nav {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 180px;
+      padding-top: 40px;
+      list-style: none;
+    }
+    .nav,
+    .nav > li:last-child a {
+      .border-radius(0 0 4px 0);
+    }
+    .nav > li {
+      float: none;
+      display: none;
+    }
+    .nav > li > a {
+      float: none;
+      background-color: #222;
+    }
+    .nav > .active {
+      display: block;
+      position: absolute;
+      top: 0;
+      left: 0;
+    }
+    .nav > .active > a {
+      background-color: transparent;
+    }
+    .nav > .active > a:hover {
+      background-color: #333;
+    }
+    .nav > .active > a:after {
+      display: inline-block;
+      width: 0;
+      height: 0;
+      margin-top: 8px;
+      margin-left: 6px;
+      text-indent: -99999px;
+      vertical-align: top;
+      border-left: 4px solid transparent;
+      border-right: 4px solid transparent;
+      border-top: 4px solid @white;
+      .opacity(100);
+      content: "↓";
+    }
+    .nav:hover > li {
+      display: block;
+    }
+    .nav:hover > li > a:hover {
+      background-color: #333;
+    }
+  }
+
+  // Remove the horizontal form styles
+  .form-horizontal .control-group > label {
+    float: none;
+    width: auto;
+    padding-top: 0;
+    text-align: left;
+  }
+  // Move over all input controls and content
+  .form-horizontal .controls {
+    margin-left: 0;
+  }
+  // Move the options list down to align with labels
+  .form-horizontal .control-list {
+    padding-top: 0; // has to be padding because margin collaspes
+  }
+  // Move over buttons in .form-actions to align with .controls
+  .form-horizontal .form-actions {
+    padding-left: 0;
+  }
+
+  // Modals
+  .modal {
+    position: absolute;
+    top: 20px;
+    left: 20px;
+    right: 20px;
+    width: auto;
+    margin: 0;
+    &.fade.in { top: auto; }
+  }
+  .modal-header .close {
+    padding: 10px;
+  }
+
+}
+
+
+// LANDSCAPE PHONE TO SMALL DESKTOP & PORTRAIT TABLET
+// --------------------------------------------------
+
+@media (max-width: 768px) {
+  
+  // Unfix the navbar
+  .navbar-fixed {
+    position: absolute;
+  }
+  .navbar-fixed .nav {
+    float: none;
+  }
+
+  // Remove width from containers
+  .container {
+    width: auto;
+    padding: 0 20px;
+  }
+  // Undo negative margin on rows
+  .row {
+    margin-left: 0;
+  }
+  // Make all columns even
+  .row > [class*="span"] {
+    float: none;
+    display: block;
+    width: auto;
+    margin: 0;
+  }
+
+}
+
+
+// PORTRAIT TABLET TO DEFAULT DESKTOP
+// ----------------------------------
+
+@media (min-width: 768px) and (max-width: 940px) {
+
+  // Reset grid variables
+  @gridColumns:       16;
+  @gridColumnWidth:   44px;
+  @gridGutterWidth:   20px;
+  @siteWidth:         748px;
+
+  // Bring grid mixins to recalculate widths
+  .columns(@columns: 1) {
+    width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
+  }
+  .offset(@columns: 1) {
+    margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)) + (@gridGutterWidth * 2);
+  }
+
+  // 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 & UP
+// ------------------
+/*
+@media (min-width: 1210px) {
+
+  // Reset grid variables
+  @gridColumns:       12;
+  @gridColumnWidth:   70px;
+  @gridGutterWidth:   30px;
+  @siteWidth:         1170px;
+
+  // Bring grid mixins to recalculate widths
+  .columns(@columns: 1) {
+    width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
+  }
+  .offset(@columns: 1) {
+    margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)) + (@gridGutterWidth * 2);
+  }
+
+  .container {
+    width: @siteWidth;
+  }
+  .row {
+    margin-left: @gridGutterWidth * -1;
+  }
+  [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