@financial-times/o-grid - npm Package Compare versions

Comparing version 5.1.2 to 5.2.0

browser.js

@@ -11,3 +11,3 @@ "use strict";
 exports.default = void 0;
-
+var missingDataMessage = 'Could not find layout information. ' + 'You may need to include o-grid css. See the README (https://registry.origami.ft.com/components/o-grid/readme) ' + 'for more information.';
 /**
@@ -17,7 +17,16 @@ * Grab grid properties
  */
+
 function getGridProperties() {
-  return getGridFromDoc('after');
+  var properties = getGridFromDoc('after');
+
+  if (Object.keys(properties).length === 0) {
+    console.warn(missingDataMessage);
+  }
+
+  return properties;
 }
 /**
- * Get all layout sizes
+ * Get all layout sizes.
+ * CSS must be included so JavaScript can retrieve layout information.
+ * See the README for more information.
  * @return {Object} layout names and sizes
@@ -28,3 +37,9 @@ */
 function getGridBreakpoints() {
-  return getGridFromDoc('before');
+  var breakpoints = getGridFromDoc('before');
+
+  if (Object.keys(breakpoints).length === 0) {
+    console.warn(missingDataMessage);
+  }
+
+  return breakpoints;
 }
@@ -52,3 +67,5 @@ /**
 /**
- * Grab the current layout
+ * Grab the current layout.
+ * CSS must be included so JavaScript can retrieve layout information.
+ * See the README for more information.
  * @return {String} Layout name
@@ -62,3 +79,5 @@ */
 /**
- * Grab the current space between columns
+ * Grab the current space between columns.
+ * CSS must be included so JavaScript can retrieve layout information.
+ * See the README for more information.
  * @return {String} Gutter width in pixels
@@ -74,2 +93,4 @@ */
  * and fires a `o-grid.layoutChange` event on layout change.
+ * CSS must be included so JavaScript can retrieve layout information.
+ * See the README for more information.
  */
@@ -131,3 +152,3 @@
   } else {
-    console.error('To enable grid layout change events, include _oGridSurfaceLayoutSizes in your Sass');
+    console.error('Could not enable grid layout change events. Include o-grid css. See the README (https://registry.origami.ft.com/components/o-grid/readme) for more details.');
   }
@@ -134,0 +155,0 @@ }

package.json

@@ -28,3 +28,3 @@ {
 	"name": "@financial-times/o-grid",
-	"version": "5.1.2",
+	"version": "5.2.0",
 	"dependencies": {
@@ -37,4 +37,4 @@ "sass-mq": "^5.0.0"
 		"eslint-config-origami-component": "^2.0.1",
-		"origami-ci-tools": "^1.3.8"
+		"origami-ci-tools": "^1.3.11"
 	}
 }

README.md

@@ -237,2 +237,15 @@ # o-grid [![Build Status](https://circleci.com/gh/Financial-Times/o-grid.png?style=shield&circle-token=a0c7fe6f37aa937651724d1650814e45ab2662a5)](https://circleci.com/gh/Financial-Times/o-grid) [![MIT licensed](https://img.shields.io/badge/license-MIT-blue.svg)](#licence)
 
+If you would not like to use `o-grid` markup at all, the styles for the `surface` option may be included independently to enable JavaScript features:
+
+```scss
+// Surface current breakpoint and gutter size information to JavaScript.
+// Supports `getGridBreakpoints` and `enableLayoutChangeEvents`
+// JavaScript methods.
+@include oGridSurfaceLayoutSizes();
+
+// Surface grid breakpoints to JavaScript.
+// Supports the `getCurrentLayout` and `getCurrentGutter` JavaScript methods.
+@include oGridSurfaceCurrentLayout();
+```
+
 ## Advanced usage
@@ -658,2 +671,4 @@
 
+CSS must be included so JavaScript can retrieve layout information. If using [Sass](#sass) and the `oGrid` mixin, ensure the `surface` [option](#options) includes `current-layout`; or include the `oGridSurfaceCurrentLayout` mixin if your project is not using any o-grid markup.
+
 ### `getCurrentGutter()`
@@ -670,3 +685,3 @@
 
-If using [Sass](#sass), ensure the `surface` option includes `current-layout` so JavaScript can retrieve layout information from our CSS.
+CSS must be included so JavaScript can retrieve layout information. If using [Sass](#sass) and the `oGrid` mixin, ensure the `surface` [option](#options) includes `current-layout`; or include the `oGridSurfaceCurrentLayout` mixin if your project is not using any o-grid markup.
 
@@ -684,3 +699,3 @@ ### `getGridBreakpoints()`
 
-If using [Sass](#sass), ensure the `surface` option includes `layout-sizes` so JavaScript can retrieve layout information from our CSS.
+CSS must be included so JavaScript can retrieve layout information. If using [Sass](#sass) and the `oGrid` mixin, ensure the `surface` [option](#options) includes `layout-sizes`; or include the `oGridSurfaceLayoutSizes` mixin if your project is not using any o-grid markup.
 
@@ -697,3 +712,3 @@ ### `enableLayoutChangeEvents()`
 
-If using [Sass](#sass), ensure the `surface` option includes `layout-sizes` so JavaScript can retrieve layout information from our CSS.
+CSS must be included so JavaScript can retrieve layout information. If using [Sass](#sass) and the `oGrid` mixin, ensure the `surface` [option](#options) includes `layout-sizes`; or include the `oGridSurfaceLayoutSizes` mixin if your project is not using any o-grid markup.
 
@@ -700,0 +715,0 @@ ## Grid Bookmarklet

No alert changes

Improved metrics

Total package byte prevSize

454729

increased by0.58%

Lines of code

196

increased by9.5%

Number of lines in readme file

745

increased by2.05%

No dependency changes