Added mobile grid

_includes/picture-item.html

@@ -6,7 +6,7 @@
   {% assign extras = "" %}
 {% endif %}
 {% if item.cols %}{% assign cols = item.cols %}{% else %}{% assign cols = 3 %}{% endif %}
-<figure class="span{{ cols }} picture-item{{ extras }}" data-groups='{{ groups }}' data-date-created="{{ item.date }}" data-title="{{ item.title }}">
+<figure class="span{{ cols }} m-span3 picture-item{{ extras }}" data-groups='{{ groups }}' data-date-created="{{ item.date }}" data-title="{{ item.title }}">
   <img src="{{ site.url }}/img/{{ item.img }}" alt="" height="145" width="230" />
   <div class="picture-item__details clearfix">
     <figcaption class="picture-item__title pull-left"><a href="{{ site.url }}/img/originals/{{ item.original }}" target="_blank">{{ item.title }}</a></figcaption>

_layouts/default.html

@@ -6,6 +6,7 @@
     <div class="span7">
       <h1>Shuffle</h1>
       <p>Categorize, sort, and filter a responsive grid of items</p>
+      <p>By <a href="https://twitter.com/Vestride" target="_blank">@Vestride</a></p>
     </div>
   </div>
 </header>

_posts/demos/2013-05-01-basic.html

@@ -12,12 +12,12 @@ extraJS: [ "homepage.js" ]
 
 
 <div class="container-fluid">
-  <div id="grid" class="row-fluid shuffle--container shuffle--fluid">
+  <div id="grid" class="row-fluid m-row shuffle--container shuffle--fluid">
     {% for item in site.items %}
         {% assign item = item %}
         {% include picture-item.html %}
     {% endfor %}
-    <div class="span3 shuffle__sizer"></div>
+    <div class="span3 m-span3 shuffle__sizer"></div>
   </div>
 </div>
 

_posts/demos/2013-06-26-mobile-grid.html

@@ -0,0 +1,52 @@
+---
+layout: default
+title: I need a doctor
+bodyClass: null
+---
+
+<div class="container-fluid">
+  <h2>Mobile Grid Demo</h2>
+</div>
+
+<style scoped>
+
+  article {
+    height: 30px;
+    background-color: gray;
+    color: white;
+  }
+
+</style>
+
+<div class="container-fluid">
+  <div class="row-fluid m-row">
+    <article class="span7 m-span3">
+      span7 | m-span3
+    </article>
+    <article class="span4 m-span1">
+      span4 | m-span1
+    </article>
+    <article class="span1 m-span2">
+      span1 | m-span2
+    </article>
+  </div>
+
+  <hr>
+
+  <div class="row-fluid m-row">
+    <article class="span6 m-span6"></article>
+  </div>
+
+  <hr>
+
+  <div class="row-fluid m-row">
+    <article class="span5 m-span3"></article>
+    <article class="span7 m-span3"></article>
+  </div>
+
+  <hr>
+
+  <article style="width:100%;text-align:center;">
+    100%
+  </article>
+</div>

_scss/_mobile-grid.scss

@@ -0,0 +1,24 @@
+
+$columns: 6;
+$gutterWidth: 2; // 2% gutter width
+$columnWidth: (100 - ( $gutterWidth * ( $columns - 1 ))) / $columns;
+
+@media ( max-width: 47.9375em ) {
+  .m-row {
+
+    [class*="m-span"] {
+      float: left;
+      margin-left: $gutterWidth + 0%;
+
+      &:first-child {
+        margin-left: 0;
+      }
+    }
+
+    @for $i from 1 through 6 {
+      .m-span#{$i} {
+        width: ($i * $columnWidth) + (($i - 1) * $gutterWidth) + 0%;
+      }
+    }
+  }
+}

_scss/_type.scss

@@ -65,6 +65,17 @@ h4 {
   font-size: 1.25em;
 }
 
+@media ( max-width: 47.9375em ) {
+  h1 {
+    font-size: 8vw;
+    margin: 3vw 0;
+  }
+  h2 {
+    font-size: 6vw;
+    margin: 2vw 0;
+  }
+}
+
 
 
 .unstyled {

_scss/style.scss

@@ -1,8 +1,9 @@
 @import "variables";
 @import "normalize";
 // @import "csswizardry-grids";
-@import "bootstrap";
 @import "type";
+@import "bootstrap";
+@import "mobile-grid";
 @import "main";
 @import "buttons";
 @import "helpers";

css/style.css

@@ -358,6 +358,79 @@ table {
   border-spacing: 0;
 }
 
+body {
+  font-family: 'Ubuntu', sans-serif;
+  color: #5d6d77;
+}
+
+a, a:visited {
+  color: #3498db;
+}
+a:hover {
+  text-decoration: none;
+}
+a:active {
+  color: #2ecc71;
+}
+
+h2,
+h3,
+h4,
+h5,
+h6 {
+  color: #34495e;
+}
+
+h1 {
+  margin: 20px 0;
+  font-weight: 300;
+  font-size: 4em;
+  line-height: 1;
+  color: #2ecc71;
+}
+
+h2 {
+  position: relative;
+  font-size: 2.5em;
+  margin-bottom: 18px;
+}
+h2::after {
+  content: '';
+  position: absolute;
+  bottom: 4px;
+  left: 0;
+  z-index: -1;
+  width: 100%;
+  height: 2px;
+  background-color: #2ecc71;
+}
+
+h3 {
+  margin: .6667em 0 0.5em;
+  font-size: 1.5em;
+}
+
+h4 {
+  font-size: 1.25em;
+}
+
+@media (max-width: 47.9375em) {
+  h1 {
+    font-size: 8vw;
+    margin: 3vw 0;
+  }
+
+  h2 {
+    font-size: 6vw;
+    margin: 2vw 0;
+  }
+}
+.unstyled {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+}
+
 /*
  * Bootstrap v2.3.2
  *
@@ -1786,68 +1859,33 @@ table {
     margin-left: 0;
   }
 }
-body {
-  font-family: 'Ubuntu', sans-serif;
-  color: #5d6d77;
-}
-
-a, a:visited {
-  color: #3498db;
-}
-a:hover {
-  text-decoration: none;
-}
-a:active {
-  color: #2ecc71;
-}
-
-h2,
-h3,
-h4,
-h5,
-h6 {
-  color: #34495e;
-}
-
-h1 {
-  margin: 20px 0;
-  font-weight: 300;
-  font-size: 4em;
-  line-height: 1;
-  color: #2ecc71;
-}
-
-h2 {
-  position: relative;
-  font-size: 2.5em;
-  margin-bottom: 18px;
-}
-h2::after {
-  content: '';
-  position: absolute;
-  bottom: 4px;
-  left: 0;
-  z-index: -1;
-  width: 100%;
-  height: 2px;
-  background-color: #2ecc71;
-}
-
-h3 {
-  margin: .6667em 0 0.5em;
-  font-size: 1.5em;
-}
-
-h4 {
-  font-size: 1.25em;
-}
-
-.unstyled {
-  list-style-type: none;
-  padding: 0;
-  margin: 0;
+@media (max-width: 47.9375em) {
+  .m-row [class*="m-span"] {
+    float: left;
+    margin-left: 2%;
+  }
+  .m-row [class*="m-span"]:first-child {
+    margin-left: 0;
+  }
+  .m-row .m-span1 {
+    width: 15%;
+  }
+  .m-row .m-span2 {
+    width: 32%;
+  }
+  .m-row .m-span3 {
+    width: 49%;
+  }
+  .m-row .m-span4 {
+    width: 66%;
+  }
+  .m-row .m-span5 {
+    width: 83%;
+  }
+  .m-row .m-span6 {
+    width: 100%;
+  }
 }
-
 pre {
   max-height: 30em;
 }

index.html

@@ -51,12 +51,12 @@ includeHeader: true
   </div>
 
   <div class="container-fluid">
-    <div id="grid" class="row-fluid shuffle--container shuffle--fluid">
+    <div id="grid" class="row-fluid m-row shuffle--container shuffle--fluid">
       {% for item in site.items %}
           {% assign item = item %}
           {% include picture-item.html %}
       {% endfor %}
-      <div class="span3 shuffle__sizer"></div>
+      <div class="span3 m-span3 shuffle__sizer"></div>
     </div>
   </div>
 </section>

readme.md

@@ -3,12 +3,10 @@
 This is a large improvement to shuffle. Most notably, the ability for [masonry](http://masonry.desandro.com) layouts. Other additions include adding/removing items, enabling/disabling, multiple instances on a page, and more!
 
 ## Todos
-[ ] Button states
-[ ] Make demo with images loaded plugin
-[x] Make compound filters demo
-[ ] Solve margin top issue
-[ ] init with a sort
-[ ] Horizontal layout
-[ ] Custom animations
-[ ] Consistent naming of public vs private functions
-[ ] Use Deferred objects for callbacks
+* Make demo with images loaded plugin
+* Solve margin top issue
+* init with a sort
+* Horizontal layout
+* Custom animations
+* Consistent naming of public vs private functions
+* Use Deferred objects for callbacks