Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@financial-times/o-grid

Package Overview
Dependencies
Maintainers
18
Versions
39
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

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

Comparing version 4.5.3 to 5.0.0-beta.1

dist/scss/_functions.scss
dist/scss/_mixins.scss
src/scss/_functions.scss
src/scss/_mixins.scss

69

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,

7

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",

8

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"
}
}

235

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 @@ 

dist/scss/_main.scss
src/scss/_main.scss
dist/scss/_variables.scss

Sorry, the diff of this file is not supported yet

main.scss

Sorry, the diff of this file is not supported yet

src/scss/_variables.scss

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc