Add mobile first support via an option, this will become the default in v3, Fixes #30

Author: jrmd

README.md

@@ -66,6 +66,11 @@ If set to true, Macy will wait for all images on the page to load before running
 
 Set this to true if you would prefer to use a different image loaded library.
 
+#### **mobileFirst**
+*Default: `false`*
+
+Setting this value to true will alter how the breakAt options will work. Macy will now work in a mobile first way so the default `columns` will be the default then if for example you have `400: 2` in your breakAt object, if the document is greater or equal to 400px the column count will be 2. 
+
 #### **breakAt**
 
 *Default: `None`*

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "macy",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "homepage": "http://macyjs.com/",
   "author": {
     "name": "Big Bite Creative",

demo/index.html

@@ -103,39 +103,22 @@ <h1 class="hero__title">Macy.js is a lightweight, dependency free, 2kb (gzipped)
 
     <script src="../dist/macy.js"></script>
     <script>
-       var masonry = new Macy({
-        container: '#macy-container',
-        trueOrder: false,
-        waitForImages: false,
-        useOwnImageLoader: false,
-        debug: true,
-        margin: {
-            x: 10,
-            y: 10
-        },
-        columns: 6,
-        breakAt: {
-          1200: {
-            columns: 5,
-            margin: {
-                x: 23,
-                y: 4
+        var masonry = new Macy({
+            container: '#macy-container',
+            trueOrder: false,
+            waitForImages: false,
+            useOwnImageLoader: false,
+            debug: true,
+            mobileFirst: true,
+            columns: 1,
+            margin: 24,
+            breakAt: {
+                1200: 6,
+                940: 5,
+                520: 3,
+                400: 2
             }
-          },
-          940: {
-            margin: {
-                y: 23
-            }
-          },
-          520: {
-            columns: 3,
-            margin: 3,
-          },
-          400: {
-            columns: 2
-          }
-        }
-      });
+        });
     </script>
 </body>
 </html>

dist/macy.js

@@ -1,7 +1,7 @@
 {
   "name": "macy",
   "description": "Macy is a lightweight, dependency free, masonry layout library",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "author": {
     "name": "Big Bite Creative",
     "url": "http://bigbitecreative.com",

package.json

@@ -7,7 +7,7 @@ let buildObj = {
   entry: 'src/macy.js',
   format: 'umd',
   moduleName: 'Macy',
-  banner: '/* Macy.js - v2.2.0 */',
+  banner: '/* Macy.js - v2.3.0 */',
   plugins: [
     eslint(),
     babel(),

rollup.config.js

@@ -0,0 +1,103 @@
+import isObject from './isObject';
+
+/**
+ * Replaces responsiveOptions with temporary options where applicable.
+ * @param tempOpts
+ * @param responsiveOptions
+ */
+const replaceOptionsResponsively = (tempOpts, responsiveOptions) => {
+  if (!isObject(tempOpts)) {
+    responsiveOptions.columns = tempOpts;
+  }
+
+  if (isObject(tempOpts) && tempOpts.columns) {
+    responsiveOptions.columns = tempOpts.columns;
+  }
+
+  if (isObject(tempOpts) && tempOpts.margin && !isObject(tempOpts.margin)) {
+    responsiveOptions.margin = {
+      x: tempOpts.margin,
+      y: tempOpts.margin
+    }
+  }
+
+  if (isObject(tempOpts) && tempOpts.margin && isObject(tempOpts.margin) && tempOpts.margin.x) {
+    responsiveOptions.margin.x = tempOpts.margin.x;
+  }
+
+  if (isObject(tempOpts) && tempOpts.margin && isObject(tempOpts.margin) && tempOpts.margin.y) {
+    responsiveOptions.margin.y = tempOpts.margin.y;
+  }
+};
+
+/**
+ * Return the current spacing options based on document size, in a mobile first manner.
+ * @param  {Object} args - This passes the macy instance options, responsiveOptions object, the width keys and document width.
+ * @return {Object}         - Object containing the current spacing options
+ */
+export function getOptionsAsMobileFirst ({ options, responsiveOptions, keys, docWidth }) {
+  let tempOpts;
+
+  for (let i = 0; i < keys.length; i++) {
+    let widths = parseInt(keys[i], 10);
+
+    if (docWidth >= widths) {
+      tempOpts = options.breakAt[widths];
+      replaceOptionsResponsively(tempOpts, responsiveOptions);
+    }
+  }
+
+  return responsiveOptions;
+}
+
+/**
+ * Return the current spacing options based on document size, in a desktop first manner.
+ * @param  {Object} args - This passes the macy instance options, responsiveOptions object, the width keys and document width.
+ * @return {Object}         - Object containing the current spacing options
+ */
+export function getOptionsAsDesktopFirst ({ options, responsiveOptions, keys, docWidth }) {
+  let tempOpts;
+
+  for (let i = keys.length - 1; i >= 0; i--) {
+    let widths = parseInt(keys[i], 10);
+
+    if (docWidth <= widths) {
+      tempOpts = options.breakAt[widths];
+      replaceOptionsResponsively(tempOpts, responsiveOptions);
+    }
+  }
+
+  return responsiveOptions;
+}
+
+/**
+ * Return the current spacing options based on document size.
+ * @param  {Object} options - Macy instance's options
+ * @return {Object}         - Object containing the current spacing options
+ */
+export function getResponsiveOptions (options) {
+  let docWidth = document.body.clientWidth;
+  let responsiveOptions = {
+    columns: options.columns,
+  };
+
+  if (!isObject(options.margin)) {
+    responsiveOptions.margin = {
+      x: options.margin,
+      y: options.margin
+    }
+  } else {
+    responsiveOptions.margin = {
+      x: options.margin.x,
+      y: options.margin.y
+    }
+  }
+
+  let keys = Object.keys(options.breakAt);
+
+  if (options.mobileFirst) {
+    return getOptionsAsMobileFirst({ options, responsiveOptions, keys, docWidth });
+  }
+
+  return getOptionsAsDesktopFirst({ options, responsiveOptions, keys, docWidth });
+}

src/helpers/getResponsiveOptions.js

@@ -1,67 +1,5 @@
-import isObject from '../helpers/isObject';
 import foreach from '../helpers/foreach';
-
-/**
- * Return the current spacing options based on document size.
- * @param  {Object} options - Macy instance's options
- * @return {Object}         - Object containing the current spacing options
- */
-export function getResponsiveOptions (options) {
-  let docWidth = document.body.clientWidth;
-  let responsiveOptions = {
-    columns: options.columns,
-  };
-
-  let tempOpts;
-
-  if (!isObject(options.margin)) {
-    responsiveOptions.margin = {
-      x: options.margin,
-      y: options.margin
-    }
-  } else {
-    responsiveOptions.margin = {
-      x: options.margin.x,
-      y: options.margin.y
-    }
-  }
-
-  let keys = Object.keys(options.breakAt);
-
-  for (let i = keys.length - 1; i >= 0; i--) {
-    let widths = parseInt(keys[i], 10);
-
-    if (docWidth <= widths) {
-      tempOpts = options.breakAt[widths];
-
-      if (!isObject(tempOpts)) {
-        responsiveOptions.columns = tempOpts;
-      }
-
-      if (isObject(tempOpts) && tempOpts.columns) {
-        responsiveOptions.columns = tempOpts.columns;
-      }
-
-      if (isObject(tempOpts) && tempOpts.margin && !isObject(tempOpts.margin)) {
-        responsiveOptions.margin = {
-          x: tempOpts.margin,
-          y: tempOpts.margin
-        }
-      }
-
-      if (isObject(tempOpts) && tempOpts.margin && isObject(tempOpts.margin) && tempOpts.margin.x) {
-        responsiveOptions.margin.x = tempOpts.margin.x;
-      }
-
-      if (isObject(tempOpts) && tempOpts.margin && isObject(tempOpts.margin) && tempOpts.margin.y) {
-        responsiveOptions.margin.y = tempOpts.margin.y;
-      }
-
-    }
-  }
-
-  return responsiveOptions;
-}
+import { getResponsiveOptions } from '../helpers/getResponsiveOptions';
 
 /**
  * Return the current number of columns macy should be