grid

.vuepress/grid/utils/defaults.js

@@ -0,0 +1,8 @@
+export default {
+  container: '1020px',
+  gutter: '24px',
+  approach: 'mobile-first',
+  breakpoints: {
+    compact: '320px 414px'
+  }
+}

.vuepress/grid/utils/init-config.js

@@ -0,0 +1,5 @@
+export default {
+  created () {
+    this.config = this.$options.config
+  }
+}

.vuepress/grid/utils/init-rwd.js

@@ -0,0 +1,23 @@
+import mediaQueryString from './media-query-string'
+import isUndefined from './is-undefined'
+
+export default {
+  props: {
+    rwd: Object
+  },
+  methods: {
+    bindMediaQueries (callback) {
+      if (!isUndefined(this.rwd)) {
+        Object.keys(this.rwd).forEach(breakpoint => {
+            const mediaQuery = window.matchMedia(mediaQueryString({
+              approach: this.config.approach,
+              query: this.config.breakpoints[breakpoint]
+            }))
+            const property = this.rwd[breakpoint]
+  
+            callback(mediaQuery, property)
+        })
+      }
+    }
+  }
+}

.vuepress/grid/utils/is-undefined.js

@@ -0,0 +1,3 @@
+export default (value) => {
+  return value === undefined
+}

.vuepress/grid/utils/media-query-string.js

@@ -0,0 +1,12 @@
+import isUndefined from './is-undefined'
+
+export default ({ approach, query }) => {
+  const attr = { 'mobile-first': 'min-width', 'desktop-first': 'max-width' }[approach]
+  const [firstValue, secondValue] = query.split(' ')
+
+  if (isUndefined(secondValue)) {
+    return `(${attr}: ${firstValue})`
+  }
+
+  return `(min-width: ${firstValue}) and (max-width: ${secondValue})`
+}