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

Comparing version 4.5.3 to 5.0.0-beta.1

browser.js

@@ -10,43 +10,8 @@ "use strict";
 exports.enableLayoutChangeEvents = enableLayoutChangeEvents;
-exports.default = exports.setMinSupportedIeVersion = void 0;
+exports.default = void 0;
 
-/*global module*/
-let minSupportedIeVersion = 8;
 /**
- * Detect IE 8 through injected conditional comments:
- * no UA detection, no need for conditional compilation or JS check
- * @return {Bool} true if the browser is IE 8
- */
-
-function detectIE8() {
-  const b = document.createElement('B');
-  const docElem = document.documentElement;
-  let isIE;
-  b.innerHTML = '<!--[if IE 8]><b id="ie8test"></b><![endif]-->';
-  docElem.appendChild(b);
-  isIE = !!document.getElementById('ie8test');
-  docElem.removeChild(b);
-  return isIE;
-}
-
-const isIE8 = function () {
-  let result;
-  return function () {
-    if (minSupportedIeVersion > 8) {
-      return false;
-    }
-
-    if (result === undefined) {
-      result = detectIE8();
-    }
-
-    return result;
-  };
-}();
-/**
  * Grab grid properties
  * @return {Object} layout names and gutter widths
  */
-
-
 function getGridProperties() {
@@ -75,3 +40,3 @@ return getGridFromDoc('after');
   try {
-    let gridProperties = window.getComputedStyle(document.documentElement, ':' + position).getPropertyValue('content'); // Firefox computes: "{\"foo\": \"bar\"}"
+    var gridProperties = window.getComputedStyle(document.documentElement, ':' + position).getPropertyValue('content'); // Firefox computes: "{\"foo\": \"bar\"}"
     // We want readable JSON: {"foo": "bar"}
@@ -92,6 +57,2 @@
 function getCurrentLayout() {
-  if (isIE8()) {
-    return 'L';
-  }
-
   return getGridProperties().layout;
@@ -106,6 +67,2 @@ }
 function getCurrentGutter() {
-  if (isIE8()) {
-    return '20px';
-  }
-
   return getGridProperties().gutter;
@@ -121,13 +78,13 @@ }
   // Create a map containing all breakpoints exposed via html:before
-  const gridLayouts = getGridBreakpoints();
+  var gridLayouts = getGridBreakpoints();
 
   if (gridLayouts.hasOwnProperty('layouts')) {
-    const layouts = gridLayouts.layouts;
-    const breakpoints = new Map([...Object.keys(layouts).map(key => [key, layouts[key]]), ['default', '240px']]);
+    var layouts = gridLayouts.layouts;
+    var breakpoints = new Map([...Object.keys(layouts).map(key => [key, layouts[key]]), ['default', '240px']]);
 
-    const decr1 = val => "".concat(Number(val.replace('px', '') - 1), "px");
+    var decr1 = val => "".concat(Number(val.replace('px', '') - 1), "px");
 
-    const setupQuery = (query, size) => {
+    var setupQuery = (query, size) => {
       // matchMedia listener handler: Dispatch `o-grid.layoutChange` event if a match
-      const handleMQChange = mql => {
+      var handleMQChange = mql => {
         if (mql.matches) {
@@ -142,3 +99,3 @@ window.dispatchEvent(new CustomEvent('o-grid.layoutChange', {
 
-      const mql = window.matchMedia(query);
+      var mql = window.matchMedia(query);
       mql.addListener(handleMQChange);
@@ -174,13 +131,7 @@ handleMQChange(mql);
   } else {
-    console.error('To enable grid layout change events, include oGridSurfaceLayoutSizes in your Sass');
+    console.error('To enable grid layout change events, include _oGridSurfaceLayoutSizes in your Sass');
   }
 }
 
-const setMinSupportedIeVersion = version => {
-  minSupportedIeVersion = version;
-};
-
-exports.setMinSupportedIeVersion = setMinSupportedIeVersion;
 var _default = {
-  setMinSupportedIeVersion,
   getCurrentLayout,
@@ -187,0 +138,0 @@ getCurrentGutter,

origami.json

@@ -53,9 +53,2 @@ {
 		{
-			"name": "ie8",
-			"title": "IE8 Grid",
-			"sass": "demos/src/scss/ie8.scss",
-			"hidden": true,
-			"description": "Forced IE 8 experience, where the width of the grid is fixed to be a M layout"
-		},
-		{
 			"name": "test",
@@ -62,0 +55,0 @@ "title": "Test Grid",

package.json

@@ -12,2 +12,4 @@ {
 		"*.json",
+		"*.js",
+		"!main.js",
 		"scss",
@@ -27,3 +29,3 @@ "!bower.json",
 	"name": "@financial-times/o-grid",
-	"version": "4.5.3",
+	"version": "5.0.0-beta.1",
 	"dependencies": {
@@ -34,3 +36,5 @@ "sass-mq": "^5.0.0"
 	"scripts": {},
-	"devDependencies": {}
+	"devDependencies": {
+		"origami-ci-tools": "^1.0.0"
+	}
 }

README.md

@@ -5,25 +5,24 @@ # 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)
 
-- [Usage](#usage)
-	- [Quick Start](#quick-start)
-	- [Browser Support](#browser-support)
-	- [Grid Dimensions](#grid-dimensions)
-	- [Markup](#markup)
-	- [Advanced Usage](#advanced-usage)
-		- [Hiding elements](#hiding-elements)
-		- [Centering a column](#centering-a-column)
-		- [Push and pull columns](#push-and-pull-columns)
-		- [Add space before a column](#add-space-before-a-column)
-		- [Snappy Mode](#snappy-mode)
-		- [Compact (gutterless) rows](#compact-gutterless-rows)
-		- [Full Bleed Container](#full-bleed-container)
-		- [Responsive column helper](#responsive-column-helper)
-		- [Responsive width for different layouts](#responsive-width-for-different-layouts)
-		- [Responsive layout helper](#responsive-layout-helper)
-		- [Gutters](#gutters)
-		- [Unstyle a row or a column](#unstyle-a-row-or-a-column)
-		- [Variables](#variables)
-		- [Adding a layout](#adding-a-layout)
-		- [Debug mode](#debug-mode)
-	- [JavaScript Helpers](#javascript-helpers)
-	- [Grid Bookmarklet](#grid-bookmarklet)
+- [Quick Start](#quick-start)
+- [Grid Dimensions](#grid-dimensions)
+- [Markup](#markup)
+- [Sass](#sass)
+- [Advanced Usage](#advanced-usage)
+	- [Hiding elements](#hiding-elements)
+	- [Centering a column](#centering-a-column)
+	- [Push and pull columns](#push-and-pull-columns)
+	- [Add space before a column](#add-space-before-a-column)
+	- [Snappy Mode](#snappy-mode)
+	- [Compact (gutterless) rows](#compact-gutterless-rows)
+	- [Full Bleed Container](#full-bleed-container)
+	- [Responsive column helper](#responsive-column-helper)
+	- [Responsive width for different layouts](#responsive-width-for-different-layouts)
+	- [Responsive layout helper](#responsive-layout-helper)
+	- [Gutters](#gutters)
+	- [Unstyle a row or a column](#unstyle-a-row-or-a-column)
+	- [Variables](#variables)
+	- [Adding a layout](#adding-a-layout)
+	- [Debug mode](#debug-mode)
+- [JavaScript Helpers](#javascript-helpers)
+- [Grid Bookmarklet](#grid-bookmarklet)
 - [Migration Guide](#migration-guide)
@@ -33,7 +32,6 @@ - [Contact](#contact)
 
+This component is a collection of Sass styles to build a 12 column grid system, with a few JavaScript helpers.
+
 [![Grid system](https://raw.githubusercontent.com/Financial-Times/o-grid/master/img/grid-system.png)](https://raw.githubusercontent.com/Financial-Times/o-grid/master/img/grid-system.png)
 
-## Usage
-This component is a collection of Sass styles to build a 12 column grid system, with a few JavaScript helpers.
-
 ## Quick Start
@@ -67,16 +65,12 @@
 // Return the current layout (e.g. default, S, M, L, XL)
-var getCurrentLayout = require('o-grid').getCurrentLayout;
-console.log(getCurrentLayout());
+import oGrid from 'o-grid';
+let currentLayout = oGrid.getCurrentLayout();
+console.log(currentLayout);
 
 // Return the current gutter (e.g. 10px, 20px)
-var getCurrentGutter = require('o-grid').getCurrentGutter;
-console.log(getCurrentGutter());
+import oGrid from 'o-grid';
+let currentGutter = oGrid.getCurrentGutter();
+console.log(currentGutter);
 ```
 
-## Browser support
-
-o-grid works in browsers that support *CSS @media queries* and *box-sizing*, as well as Internet Explorer 8.
-
-Older browsers: you may use a [box-sizing polyfill](https://github.com/Schepp/box-sizing-polyfill) to support give better support to IE < 8.
-
 ## Grid dimensions
@@ -134,6 +128,6 @@
 div {
-	@include oGridContainer();
+	@include oGridContentContainer();
 
 	> div {
-		@include oGridRow();
+		@include oGridContentRow();
 	}
@@ -144,7 +138,7 @@ }
 	// Half by default, then 8 columns wide on Large layout and up
-	@include oGridColspan((default: 6, L: 8));
+	@include oGridContentColspan((default: 6, L: 8));
 }
 .second-column {
 	// Half by default, then 4 columns wide on Large layout and up
-	@include oGridColspan((default: 6, L: 4));
+	@include oGridContentColspan((default: 6, L: 4));
 }
@@ -166,3 +160,3 @@ ```
 ```scss
-div { @include oGridColspan((default: 6, L: 8)); }
+div { @include oGridContentColspan((default: 6, L: 8)); }
 ```
@@ -182,3 +176,3 @@
 ```scss
-div { @include oGridColspan((default: one-half, L: two-thirds)); }
+div { @include oGridContentColspan((default: one-half, L: two-thirds)); }
 ```
@@ -195,3 +189,3 @@
 ```scss
-div { @include oGridColspan((default: full-width, L: 9)); }
+div { @include oGridContentColspan((default: full-width, L: 9)); }
 ```
@@ -206,3 +200,3 @@
 ```scss
-div { @include oGridColspan((default: one-half, M: 12)); }
+div { @include oGridContentColspan((default: one-half, M: 12)); }
 ```
@@ -217,3 +211,3 @@
 ```scss
-div { @include oGridColspan((default: 4, M: 3, L: 2, XL: 1)); }
+div { @include oGridContentColspan((default: 4, M: 3, L: 2, XL: 1)); }
 ```
@@ -228,5 +222,27 @@
 ```scss
-div { @include oGridColspan((M: 6)); }
+div { @include oGridContentColspan((M: 6)); }
 ```
 
+## Sass
+
+To include all styles call the `oGrid` mixin.
+
+```scss
+@include oGrid();
+```
+
+### Options
+
+`o-grid` css may be included granularly by passing options to the `oGrid` mixin.
+
+```scss
+@include oGrid($opts: (
+	'bleed': true, // The container modifier `o-grid-container--bleed`
+	'shuffle-selectors': true, // offset, push, and pull selectors such as `push4`
+	'friendly-selectors': true, // Human friendly selectors such as `data-o-grid-colspan="one-half"`
+	'surface': ('current-layout', 'layout-sizes'), // Styles to surface o-grid layout to JavaScript features
+	'rows': ('compact') // The row modifier `o-grid-row--compact`
+));
+```
+
 ## Advanced usage
@@ -245,3 +261,3 @@
 ```scss
-div { @include oGridColspan((default: hide, L: 12, XL: hide)); }
+div { @include oGridContentColspan((default: hide, L: 12, XL: hide)); }
 ```
@@ -259,6 +275,6 @@
 .my-column {
-	@include oGridCenter;
+	@include oGridContentCenter;
 
 	@include oGridRespondTo(L) {
-		@include oGridUncenter;
+		@include oGridContentUncenter;
 	}
@@ -278,4 +294,4 @@ }
 .content {
-	@include oGridColspan(8);
-	@include oGridPush(4); // outputs left: -33.333333333%;
+	@include oGridContentColspan(8);
+	@include oGridContentPush(4); // outputs left: -33.333333333%;
 }
@@ -285,4 +301,4 @@
 .sidebar {
-	@include oGridColspan(4);
-	@include oGridPull(8); // outputs right: -66.666666667%;
+	@include oGridContentColspan(4);
+	@include oGridContentPull(8); // outputs right: -66.666666667%;
 }
@@ -300,5 +316,5 @@ ```
 .content {
-	@include oGridColspan((L: 8));
+	@include oGridContentColspan((L: 8));
 	@include oGridRespondTo(L) {
-		@include oGridPush(4); // outputs left: -33.333333333%;
+		@include oGridContentPush(4); // outputs left: -33.333333333%;
 	}
@@ -309,5 +325,5 @@ }
 .sidebar {
-	@include oGridColspan((L: 4));
+	@include oGridContentColspan((L: 4));
 	@include oGridRespondTo(L) {
-		@include oGridPull(8); // outputs right: -66.666666667%;
+		@include oGridContentPull(8); // outputs right: -66.666666667%;
 	}
@@ -329,11 +345,11 @@ }
 div {
-	@include oGridColspan(8);
-	@include oGridOffset(4); // outputs margin-left: 33.333333333%;
+	@include oGridContentColspan(8);
+	@include oGridContentOffset(4); // outputs margin-left: 33.333333333%;
 }
 
 div {
-	@include oGridColspan((L: 8));
+	@include oGridContentColspan((L: 8));
 
 	@include oGridRespondTo(L) {
-		@include oGridOffset(4); // outputs margin-left: 33.333333333%;
+		@include oGridContentOffset(4); // outputs margin-left: 33.333333333%;
 	}
@@ -367,3 +383,3 @@ }
 
-To remove gutters from in between columns in a row, use the `o-grid-row--compact` class or the `oGridRowCompact()` mixin:
+To remove gutters from in between columns in a row, use the `o-grid-row--compact` class or the `oGridContentRowCompact()` mixin:
 
@@ -380,11 +396,11 @@ ```html
 div {
-	@include oGridContainer();
+	@include oGridContentContainer();
 
 	> div {
-		@include oGridRow();
-		@include oGridRowCompact('.column');
+		@include oGridContentRow();
+		@include oGridContentRowCompact('.column');
 	}
 
 	.column {
-		@include oGridColspan((default: full-width, S: 3));
+		@include oGridContentColspan((default: full-width, S: 3));
 	}
@@ -414,3 +430,3 @@ }
 ```scss
-el { @include oGridColspan(); }
+el { @include oGridContentColspan(); }
 ```
@@ -439,3 +455,3 @@
 ```scss
-el { @include oGridColspan($span: 4); }
+el { @include oGridContentColspan($span: 4); }
 ```
@@ -469,3 +485,3 @@
 el {
-	@include oGridColspan((
+	@include oGridContentColspan((
 		default: full-width,
@@ -565,7 +581,7 @@ M: 6
 .un-rowify {
-	@include oGridResetRow;
+	@include oGridContentResetRow;
 }
 
 .de-columnify {
-	@include oGridResetColumn;
+	@include oGridContentResetColumn;
 }
@@ -584,8 +600,2 @@ ```
 
-// Disable outputting offset, push and pull selectors
-$o-grid-shuffle-selectors: true;
-
-// Disable outputting human-friendly selectors
-$o-grid-human-friendly-selectors: true;
-
 // Show the currently active breakpoint and output loaded settings
@@ -606,8 +616,2 @@ $o-grid-debug-mode: true;
 
-// Grid ie8 rules
-// - inline: output ie8 selectors alongside modern browser selectors in the same stylesheet
-// - only: only output ie8 selectors
-// - none: output no ie8 selectors
-$o-grid-ie8-rules: inline (default) | only | none;
-
 // Default layouts
@@ -648,7 +652,6 @@ $o-grid-layouts: (
 
-// Surface the layout currently displayed to make it readable in JS
-@include oGridSurfaceCurrentLayout;
-
-// Generate grid helpers classes and data attributes
-@include oGridGenerate;
+// Include all o-grid styles, including:
+// - Surface the layout currently displayed to make it readable in JS
+// - Generate grid helpers classes and data attributes.
+@include oGrid();
 ```
@@ -673,3 +676,3 @@
 ```js
-var oGrid = require('o-grid');
+import oGrid from 'o-grid';
 
@@ -685,3 +688,3 @@ console.log(oGrid.getCurrentLayout());
 ```js
-var oGrid = require('o-grid');
+import oGrid from 'o-grid';
 
@@ -692,5 +695,3 @@ console.log(oGrid.getCurrentGutter());
 
-When using o-grid silent mode, make sure to surface the grid
-information to make it readable by the JavaScript Helper
-by adding `@include oGridSurfaceCurrentLayout();` to your Sass file.
+If using [Sass](#sass), ensure the `surface` option includes `current-layout` so JavaScript can retrieve layout information from our CSS.
 
@@ -702,3 +703,3 @@ ### `getGridBreakpoints()`
 ```js
-var oGrid = require('o-grid');
+import oGrid from 'o-grid';
 
@@ -709,5 +710,3 @@ console.log(oGrid.getGridBreakpoints());
 
-When using o-grid silent mode, make sure to surface the grid
-information to make it readable by the JavaScript Helper
-by adding `@include oGridSurfaceLayoutSizes;` to your Sass file.
+If using [Sass](#sass), ensure the `surface` option includes `layout-sizes` so JavaScript can retrieve layout information from our CSS.
 
@@ -719,3 +718,3 @@ ### `enableLayoutChangeEvents()`
 ```js
-var oGrid = require('o-grid');
+import oGrid from 'o-grid';
 
@@ -725,17 +724,4 @@ oGrid.enableLayoutChangeEvents();
 
-When using o-grid silent mode, make sure to surface the grid
-information to make it readable by the JavaScript Helper
-by adding `@include oGridSurfaceLayoutSizes;` to your Sass file.
+If using [Sass](#sass), ensure the `surface` option includes `layout-sizes` so JavaScript can retrieve layout information from our CSS.
 
-
-### `setMinSupportedIeVersion(version)`
-
-By default, o-grid supports IE8. The feature detect for this can cause performance problems. By setting version to a number greater than 8 this can be avoided.
-
-```js
-var oGrid = require('o-grid');
-
-oGrid.setMinSupportedIeVersion(11);
-```
-
 ## Grid Bookmarklet
@@ -754,22 +740,13 @@
 
-## Migration Guide
 
-### Upgrading from v3.x.x to v4.x.x
+## Migration
 
-#### Important Changes
+State | Major Version | Last Minor Release | Migration guide |
+:---: | :---: | :---: | :---:
+✨ active | 5 | N/A  | [migrate to v5](MIGRATION.md#migrating-from-v4-to-v5) |
+⚠ maintained | 4 | 4.5  | [migrate to v4](MIGRATION.md#migrating-from-v3-to-v4) |
+╳ deprecated | 3 | 3.2 | - |
+╳ deprecated | 2 | 2.4 | - |
+╳ deprecated | 1 | 1.4 | - |
 
-- Layout sizes have slightly changed (M, L and XL are 10px wider).
-- Gutter widths vary between layouts (default: 10px, M and above: 20px)
-
-#### Markup/Sass changes
-
-- Wrap top-level `<div class="o-grid-row">` into `<div class="o-grid-container">`.
-- Search `oGridColumn` and replace with `oGridColspan`.
-- The mixin `oGridColspan` from v3 outputs a bit more code. Use `oGridColspan($span, $width-only: true)` to only outputs widths. Note that with gzip this should not have any impact.
-- `$o-grid-gutter` becomes `$o-grid-gutters` (plural) and now contains a map
-- Change all `$o-grid-gutter` to `oGridGutter()`. e.g. `margin-left: $o-grid-gutter` becomes `margin-left: oGridGutter()`
-- A few helpers have been removed because they weren't used.
-
-----
-
 ## Contact
@@ -776,0 +753,0 @@

New alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Number of package files

12

increased by20%

Worsened metrics

Total package byte prevSize

451979

decreased by-1.71%

Dev dependency count

1

increased byInfinity%

Lines of code

175

decreased by-21.17%

Number of low quality alerts

2

increased by100%

Number of lines in readme file

728

decreased by-3.06%

No dependency changes