Merge pull request #1577 from hypothesis/grid-system

Add a new simpler grid system.

h/static/styles/app.scss

@@ -56,7 +56,7 @@ ol {
 
   @include respond-to(tablets desktops) {
     margin: auto;
-    max-width: $break-medium;
+    max-width: $break-tablet;
     padding-left: 4em;
     padding-right: 4em;
   }

h/static/styles/common.scss

@@ -6,13 +6,13 @@ $base-font-size: 16px;
 $base-line-height: 26px;
 $headings-color: $text-color;
 
+@import 'mixins/responsive';
+@import 'grid';
 @import 'annotations';
 @import 'forms';
 @import 'markdown-editor';
 @import 'spinner';
-@import 'responsive';
 @import 'threads';
-@import 'yui_grid';
 @import 'styled-text';
 @import 'simple-search';
 @import 'tags-input';
@@ -46,24 +46,6 @@ em { font-style: italic; }
 html {
   font-size: $base-font-size;
   line-height: $base-line-height;
-
-  @include yui_grid();
-
-  @include respond-to(handhelds) {
-    @include yui_grid('h-');
-  }
-
-  @include respond-to(wide-handhelds) {
-    @include yui_grid('wh-');
-  }
-
-  @include respond-to(tablets) {
-    @include yui_grid('t-');
-  }
-
-  @include respond-to(desktops) {
-    @include yui_grid('d-');
-  }
 }
 
 //PAPER////////////////////////////////

h/static/styles/grid.scss

+@import "mixins/responsive";
+@import "mixins/grid";
+
+// A mobile first grid system. Requires the columns to be wrapped in a
+// .grid container. Each column then should have a width applied. See
+// mixins/grid for more info on available widths.
+//
+// By default a column width will apply to all viewport widths. In most cases
+// a mobile viewport should not use columns so a more specific class will be
+// required. The viewports available are:
+//
+//   wide-handheld, tablet and desktop
+//
+// Each of these cascade, so a tablet class will apply to tablet sized
+// viewports as well as desktops.
+//
+// Examples
+//
+// This creates a grid that only has rows on mobile. Two columns on tablets and
+// four columns on desktop sized viewports.
+//
+//   <div class="grid">
+//     <div class="column-tablet-1-2 column-desktop-1-4"></div>
+//     <div class="column-tablet-1-2 column-desktop-1-4"></div>
+//     <div class="column-tablet-1-2 column-desktop-1-4"></div>
+//     <div class="column-tablet-1-2 column-desktop-1-4"></div>
+//   </div>
+
+$grid-default-gutter: 20px !default;
+
+.grid {
+  @include grid-row($grid-default-gutter);
+}
+
+[class^="column-"], [class*=" column-"] {
+  @include grid-column($grid-default-gutter);
+}
+
+@include grid-setup("column-");
+
+@include wide-handheld-and-up {
+  @include grid-setup("column-wide-handheld-");
+}
+
+@include tablet-and-up {
+  @include grid-setup("column-tablet-");
+}
+
+@include desktop-and-up {
+  @include grid-setup("column-desktop-");
+}

h/static/styles/mixins/grid.scss

+@import "compass/utilities/general/clearfix";
+
+// Mixins for working with grids. A grid consists of an outer grid container
+// and internal columns. Each column has a gutter defined by $grid-gutter.
+// The implementation is largely based on the grid system created by
+// Harry Roberts <http://csswizardry.com/csswizardry-grids/> and the Yahoo
+// Pure system <http://git.io/ogODXA>
+
+// Sets up styles for the grid wrapper.
+@mixin grid-row($gutter: 0) {
+  margin: 0;
+  padding: 0;
+  // Remove the margin from the first column.
+  margin-left: -$gutter;
+  // Removes whitespace on browsers that do not support flexbox.
+  letter-spacing: -0.31em;
+  // Remove optimizeLegibility if applied.
+  text-rendering: optimizespeed;
+
+  // Removes whitespaec between elements in supporting browsers.
+  display: -webkit-flex;
+  -webkit-flex-flow: row wrap;
+  display: -ms-flexbox;
+  -ms-flex-flow: row wrap;
+
+  @content;
+}
+
+// Defines a column, can be included in any selector, widths can be provided
+// by passing a @content block.
+//
+// Example
+//
+// .my-awkward-item {
+//   @include grid-column($default-gutter) { width: 43%; }
+// }
+@mixin grid-column($gutter: 0) {
+  display: inline-block;
+  vertical-align: top;
+  padding-left: $gutter;
+  vertical-align: top;
+  width: 100%;
+  box-sizing: border-box;
+
+  // Reset letter spacing.
+  letter-spacing: normal;
+  text-rendering: auto;
+
+  @content;
+}
+
+// Defines selectors for a class based grid system. Only includes a few common
+// sizes at the moment, but can be expanded as necessary.
+@mixin grid-setup($namespace: "") {
+  .#{$namespace}1-1 { width: 100%; }
+  .#{$namespace}1-2 { width: 50%; }
+  .#{$namespace}1-3 { width: 33.333%; }
+  .#{$namespace}2-3 { width: 66.666%; }
+  .#{$namespace}1-4 { width: 25%; }
+  .#{$namespace}3-4 { width: 75%; }
+}

h/static/styles/mixins/responsive.scss

+$break-wide-handheld: 480px !default;
+$break-tablet: 768px !default;
+$break-desktop: 1024px !default;
+
+// DEPRECATED: Use mobile first mixins defined below.
+@mixin respond-to($media) {
+  @if type-of($media) == 'string' {
+    @if $media == 'handhelds' {
+      @media only screen and (max-width: $break-wide-handheld) { @content; }
+    }
+    @else if $media == 'wide-handhelds' {
+      @media only screen and (min-width: $break-wide-handheld + 1) and (max-width: $break-tablet) { @content; }
+    }
+    @else if $media == 'tablets' {
+      @media only screen and (min-width: $break-tablet + 1) and (max-width: $break-desktop) { @content; }
+    }
+    @else if $media == 'desktops' {
+      @media only screen and (min-width: $break-desktop + 1) { @content; }
+    }
+  }
+  @else if type-of($media) == 'list' {
+    @if index($media, 'handhelds') {
+      @media only screen and (max-width: $break-wide-handheld) { @content; }
+    }
+    @if index($media, 'wide-handhelds') {
+      @media only screen and (min-width: $break-wide-handheld + 1) and (max-width: $break-tablet) { @content; }
+    }
+    @if index($media, 'tablets') {
+      @media only screen and (min-width: $break-tablet + -1) and (max-width: $break-desktop){ @content; }
+    }
+    @if index($media, 'desktops') {
+      @media only screen and (min-width: $break-desktop + 1) { @content; }
+    }
+  }
+}
+
+// Mobile first media queries. Encorages development to work with mobile and
+// modify as the viewport grows rather than designing for individual bands.
+@mixin wide-handheld-and-up {
+  @media only screen and (min-width: $break-wide-handheld + 1) {
+    @content;
+  }
+}
+
+@mixin tablet-and-up {
+  @media only screen and (min-width: $break-tablet + 1) {
+    @content;
+  }
+}
+
+@mixin desktop-and-up {
+  @media only screen and (min-width: $break-desktop + 1) {
+    @content;
+  }
+}

h/static/styles/responsive.scss

-$break-small: 480px !default;
-$break-medium: 768px !default;
-$break-large: 1024px !default;
-
-@mixin respond-to($media) {
-  @if type-of($media) == 'string' {
-    @if $media == 'handhelds' {
-      @media only screen and (max-width: $break-small) { @content; }
-    }
-    @else if $media == 'wide-handhelds' {
-      @media only screen and (min-width: $break-small + 1) and (max-width: $break-medium) { @content; }
-    }
-    @else if $media == 'tablets' {
-      @media only screen and (min-width: $break-medium + 1) and (max-width: $break-large) { @content; }
-    }
-    @else if $media == 'desktops' {
-      @media only screen and (min-width: $break-large + 1) { @content; }
-    }
-  }
-  @else if type-of($media) == 'list' {
-    @if index($media, 'handhelds') {
-      @media only screen and (max-width: $break-small) { @content; }
-    }
-    @if index($media, 'wide-handhelds') {
-      @media only screen and (min-width: $break-small + 1) and (max-width: $break-medium) { @content; }
-    }
-    @if index($media, 'tablets') {
-      @media only screen and (min-width: $break-medium + -1) and (max-width: $break-large){ @content; }
-    }
-    @if index($media, 'desktops') {
-      @media only screen and (min-width: $break-large + 1) { @content; }
-    }
-  }
-}

h/static/styles/topbar.scss

 @import 'base';
-@import 'responsive';
-
+@import 'mixins/responsive';
 
 body {
   background-color: transparent;
@@ -42,7 +41,7 @@ body {
 
   .inner {
     margin: 0 auto;
-    max-width: $break-medium;
+    max-width: $break-tablet;
     padding: 0 4em;
     position: relative;
 

h/static/styles/yui_grid.scss

-/*
-  Namespace-aware yui_grid mixin courtesy of Alex Kissinger (@voidfiles).
-  https://gist.github.com/voidfiles/3362608
-*/
-@import 'responsive';
-
-@mixin yui_grid($namespace:'') {
-  /*
-    Copyright (c) 2010, Yahoo! Inc. All rights reserved.
-    Code licensed under the BSD License:
-    http://developer.yahoo.com/yui/license.html
-    version: 3.3.0
-    build: 3167
-    */
-  .#{$namespace}yui3-g {
-    letter-spacing: -0.31em; /* webkit: collapse white-space between units */
-    *letter-spacing: normal; /* reset IE < 8 */
-    word-spacing: -0.43em; /* IE < 8 && gecko: collapse white-space between units */
-  }
-
-  .#{$namespace}yui3-u,
-  .#{$namespace}yui3-u-1,
-  .#{$namespace}yui3-u-1-2,
-  .#{$namespace}yui3-u-1-3,
-  .#{$namespace}yui3-u-2-3,
-  .#{$namespace}yui3-u-1-4,
-  .#{$namespace}yui3-u-3-4,
-  .#{$namespace}yui3-u-1-5,
-  .#{$namespace}yui3-u-2-5,
-  .#{$namespace}yui3-u-3-5,
-  .#{$namespace}yui3-u-4-5,
-  .#{$namespace}yui3-u-1-6,
-  .#{$namespace}yui3-u-5-6,
-  .#{$namespace}yui3-u-1-8,
-  .#{$namespace}yui3-u-3-8,
-  .#{$namespace}yui3-u-5-8,
-  .#{$namespace}yui3-u-7-8,
-  .#{$namespace}yui3-u-1-12,
-  .#{$namespace}yui3-u-5-12,
-  .#{$namespace}yui3-u-7-12,
-  .#{$namespace}yui3-u-11-12,
-  .#{$namespace}yui3-u-1-24,
-  .#{$namespace}yui3-u-5-24,
-  .#{$namespace}yui3-u-7-24,
-  .#{$namespace}yui3-u-11-24,
-  .#{$namespace}yui3-u-13-24,
-  .#{$namespace}yui3-u-17-24,
-  .#{$namespace}yui3-u-19-24,
-  .#{$namespace}yui3-u-23-24 {
-    display: inline-block;
-    zoom: 1; *display: inline; /* IE < 8: fake inline-block */
-    letter-spacing: normal;
-    word-spacing: normal;
-    vertical-align: top;
-  }
-
-  .#{$namespace}yui3-u-1 {
-    display: block;
-    width: auto;
-  }
-
-  .#{$namespace}yui3-u-1-2 {
-    width: 50%;
-  }
-
-  .#{$namespace}yui3-u-1-3 {
-    width: 33.33333%;
-  }
-
-  .#{$namespace}yui3-u-2-3 {
-    width: 66.66666%;
-  }
-
-  .#{$namespace}yui3-u-1-4 {
-    width: 25%;
-  }
-
-  .#{$namespace}yui3-u-3-4 {
-    width: 75%;
-  }
-
-  .#{$namespace}yui3-u-1-5 {
-    width: 20%;
-  }
-
-  .#{$namespace}yui3-u-2-5 {
-    width: 40%;
-  }
-
-  .#{$namespace}yui3-u-3-5 {
-    width: 60%;
-  }
-
-  .#{$namespace}yui3-u-4-5 {
-    width: 80%;
-  }
-
-  .#{$namespace}yui3-u-1-6 {
-    width: 16.656%;
-  }
-
-  .#{$namespace}yui3-u-5-6 {
-    width: 83.33%;
-  }
-
-  .#{$namespace}yui3-u-1-8 {
-    width: 12.5%;
-  }
-
-  .#{$namespace}yui3-u-3-8 {
-    width: 37.5%;
-  }
-
-  .#{$namespace}yui3-u-5-8 {
-    width: 62.5%;
-  }
-
-  .#{$namespace}yui3-u-7-8 {
-    width: 87.5%;
-  }
-
-  .#{$namespace}yui3-u-1-12 {
-    width: 8.3333%;
-  }
-
-  .#{$namespace}yui3-u-5-12 {
-    width: 41.6666%;
-  }
-
-  .#{$namespace}yui3-u-7-12 {
-    width: 58.3333%;
-  }
-
-  .#{$namespace}yui3-u-11-12 {
-    width: 91.6666%;
-  }
-
-  .#{$namespace}yui3-u-1-24 {
-    width: 4.1666%;
-  }
-
-  .#{$namespace}yui3-u-5-24 {
-    width: 20.8333%;
-  }
-
-  .#{$namespace}yui3-u-7-24 {
-    width: 29.1666%;
-  }
-
-  .#{$namespace}yui3-u-11-24 {
-    width: 45.8333%;
-  }
-
-  .#{$namespace}yui3-u-13-24 {
-    width: 54.1666%;
-  }
-
-  .#{$namespace}yui3-u-17-24 {
-    width: 70.8333%;
-  }
-
-  .#{$namespace}yui3-u-19-24 {
-    width: 79.1666%;
-  }
-
-  .#{$namespace}yui3-u-23-24 {
-    width: 95.8333%;
-  }
-
-  .#{$namespace}yui3-u-none {
-    display: none;
-  }
-}