Socket
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 5.2.10 to 6.0.0-0

.eslintrc.cjs
.remarkrc.cjs
.stylelintignore
.stylelintrc.cjs
app.json

1

demos/src/js/layout-change-events.js

@@ -0,1 +1,2 @@

/* eslint-disable no-console */
import { enableLayoutChangeEvents } from '../../../main.js';

@@ -2,0 +3,0 @@

1

demos/src/js/style-switcher.js

@@ -0,1 +1,2 @@

/* eslint-disable no-console */
/*global $*/

@@ -2,0 +3,0 @@ /*eslint no-extend-native: 0 */

3

main.js

@@ -0,1 +1,2 @@

/* eslint-disable no-console */
const missingDataMessage = 'Could not find layout information. ' +

@@ -75,2 +76,3 @@ 'You may need to include o-grid css. See the README (https://registry.origami.ft.com/components/o-grid/readme) ' +

* See the README for more information.
* @returns {void}
*/

@@ -80,2 +82,3 @@ function enableLayoutChangeEvents() {

const gridLayouts = getGridBreakpoints();
// eslint-disable-next-line no-prototype-builtins
if (gridLayouts.hasOwnProperty('layouts')) {

@@ -82,0 +85,0 @@ const layouts = gridLayouts.layouts;

7

origami.json
{
"description": "A 12 column responsive, flexbox-based grid system for laying out documents, templates and components.",
"keywords": ["page", "grid", "layout", "columns", "rows"],
"origamiType": "module",
"origamiCategory": "primitives",
"origamiVersion": 1,
"origamiType": "component",
"origamiVersion": "2.0",
"support": "https://github.com/Financial-Times/o-grid/issues",

@@ -8,0 +5,0 @@ "supportContact": {

50

package.json
{
"browser": "browser.js",
"module": "module.js",
"eslintIgnore": [
"module.js",
"browser.js",
"dist/",
"dist-esm/"
],
"name": "@financial-times/o-grid",
"version": "6.0.0-0",
"description": "A 12 column responsive, flexbox-based grid system for laying out documents, templates and components.",
"keywords": [
"origami",
"component",
"ft"
"page",
"grid",
"layout",
"columns",
"rows"
],
"name": "@financial-times/o-grid",
"version": "5.2.10",
"dependencies": {
"sass-mq": "^5.0.0"
"homepage": "https://registry.origami.ft.com/components/o-grid",
"bugs": {
"url": "https://registry.origami.ft.com/components/o-grid"
},
"component": "o-grid",
"scripts": {},
"license": "MIT",
"type": "module",
"browser": "main.js",
"scripts": {
"start": "npx serve ./demos/local",
"build": "npm_config_yes=true npx \"origami-build-tools@prerelease\" install && npm_config_yes=true npx \"origami-build-tools@prerelease\" demo"
},
"devDependencies": {
"eslint": "^7.21.0",
"eslint": "^7.24.0",
"eslint-config-origami-component": "^2.1.1",
"origami-ci-tools": "^2.4.1",
"remark-preset-lint-origami-component": "^2.0.0-beta.2",
"stylelint": "^13.12.0",
"stylelint-config-origami-component": "^1.0.4"
},
"peerDependencies": {
"sass-mq": "^5.0.1"
},
"engines": {
"npm": "^7"
},
"volta": {
"node": "14.16.1",
"npm": "7.10.0"
}
}

290

README.md

@@ -5,28 +5,20 @@ # o-grid

- [Usage](#usage)
- [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)
- [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)
- [Snappy Mode](#snappy-mode)
- [Debug mode](#debug-mode)
- [JavaScript Helpers](#javascript-helpers)
- [Grid Bookmarklet](#grid-bookmarklet)
- [Migration Guide](#migration-guide)
- [Contact](#contact)
- [License](#license)
- [Usage](#usage)
- [Quick Start](#quick-start)
- [Grid dimensions](#grid-dimensions)
- [General settings](#general-settings)
- [Layout sizes](#layout-sizes)
- [Markup](#markup)
- [Utility classes](#utility-classes)
- [Responsive columns](#responsive-columns)
- [Examples](#examples)
- [Sass](#sass)
- [Options](#options)
- [Advanced usage](#advanced-usage)
- [Utilities](#utilities)
- [JavaScript Helpers](#javascript-helpers)
- [Grid Bookmarklet](#grid-bookmarklet)
- [Migration](#migration)
- [Contact](#contact)
- [Licence](#licence)

@@ -43,22 +35,6 @@ This component is a collection of Sass styles to build a 12 column grid system, with a few JavaScript helpers.

Using the [Origami Build Service](https://origami-build.ft.com/v2/):
```html
<head>
…
<link rel="stylesheet"
href="https://origami-build.ft.com/v2/bundles/css?modules=o-grid@^4.0.0" />
</head>
```
Or, to install it manually:
```sh
bower install o-grid --save
```
```scss
// your-app/main.scss
$o-grid-is-silent: false;
@import 'o-grid/main';
@import '@financial-times/o-grid/main';
@include oGrid();
```

@@ -70,3 +46,3 @@

// Return the current layout (e.g. default, S, M, L, XL)
import oGrid from 'o-grid';
import oGrid from '@financial-times/o-grid';
let currentLayout = oGrid.getCurrentLayout();

@@ -76,3 +52,3 @@ console.log(currentLayout);

// Return the current gutter (e.g. 10px, 20px)
import oGrid from 'o-grid';
import oGrid from '@financial-times/o-grid';
let currentGutter = oGrid.getCurrentGutter();

@@ -86,16 +62,16 @@ console.log(currentGutter);

* Minimum width: 240px
* Maximum width: 1220px
* Gutter widths (space between columns):
* 10px on small screens
* 20px on larger screens
* Number of columns: 12
- Minimum width: 240px
- Maximum width: 1220px
- Gutter widths (space between columns):
- 10px on small screens
- 20px on larger screens
- Number of columns: 12
### Layout sizes
* **Default** 240px - …
* **Small (S)** 490px - 739px
* **Medium (M)** 740px - 979px
* **Large (L)** 980px to 1219px
* **Extra large (XL)** 1220px
- **Default** 240px - …
- **Small (S)** 490px - 739px
- **Medium (M)** 740px - 979px
- **Large (L)** 980px to 1219px
- **Extra large (XL)** 1220px

@@ -108,7 +84,7 @@ ## Markup

<div class="o-grid-container">
<div class="o-grid-row">
<!-- two divs, spanning a total of 12 columns -->
<div data-o-grid-colspan="8">A div, 8 columns wide</div>
<div data-o-grid-colspan="4">Another div, 4 columns wide</div>
</div>
<div class="o-grid-row">
<!-- two divs, spanning a total of 12 columns -->
<div data-o-grid-colspan="8">A div, 8 columns wide</div>
<div data-o-grid-colspan="4">Another div, 4 columns wide</div>
</div>
</div>

@@ -123,10 +99,10 @@ ```

<div class="o-grid-container">
<div class="o-grid-row">
<div data-o-grid-colspan="6 L8" class="first-column">
Half by default, then 8 columns wide on Large layout and up
</div>
<div data-o-grid-colspan="6 L4" class="second-column">
Half by default, then 4 columns wide on Large layout and up
</div>
</div>
<div class="o-grid-row">
<div data-o-grid-colspan="6 L8" class="first-column">
Half by default, then 8 columns wide on Large layout and up
</div>
<div data-o-grid-colspan="6 L4" class="second-column">
Half by default, then 4 columns wide on Large layout and up
</div>
</div>
</div>

@@ -156,7 +132,7 @@ ```

* `{0-12}` - number of columns to span by default
* `S{0-12}` - number of columns to span at the small layout and up
* `M{0-12}` - number of columns to span at the medium layout and up
* `L{0-12}` - number of columns to span at the large layout and up
* `XL{0-12}` - number of columns to span at the extra large layout and up
- `{0-12}` - number of columns to span by default
- `S{0-12}` - number of columns to span at the small layout and up
- `M{0-12}` - number of columns to span at the medium layout and up
- `L{0-12}` - number of columns to span at the large layout and up
- `XL{0-12}` - number of columns to span at the extra large layout and up

@@ -173,6 +149,6 @@ ```html

* `hide`
* `one-half`
* `one-third`, `two-thirds`
* `one-quarter`, `three-quarters`
- `hide`
- `one-half`
- `one-third`, `two-thirds`
- `one-quarter`, `three-quarters`

@@ -243,7 +219,7 @@ ```html

@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`
'bleed': true,
'shuffle-selectors': true,
'friendly-selectors': true,
'surface': ('current-layout', 'layout-sizes'),
'rows': ('compact')
));

@@ -375,4 +351,4 @@ ```

<div class="o-grid-row o-grid-row--compact">
<div data-o-grid-colspan="6">Look 'ma, no gutters</div>
<div data-o-grid-colspan="6">Look 'pa, no gutters here either</div>
<div data-o-grid-colspan="6">Look 'ma, no gutters</div>
<div data-o-grid-colspan="6">Look 'pa, no gutters here either</div>
</div>

@@ -403,6 +379,6 @@ ```

<div class="o-grid-container o-grid-container--bleed">
<div class="o-grid-row o-grid-row--compact">
<div data-o-grid-colspan="6">Look 'ma, no gutters</div>
<div data-o-grid-colspan="6">Look 'pa, no gutters here either</div>
</div>
<div class="o-grid-row o-grid-row--compact">
<div data-o-grid-colspan="6">Look 'ma, no gutters</div>
<div data-o-grid-colspan="6">Look 'pa, no gutters here either</div>
</div>
</div>

@@ -426,12 +402,12 @@ ```

el {
position: relative;
float: left;
box-sizing: border-box;
flex: 1 1 0%;
padding-left: 10px;
position: relative;
float: left;
box-sizing: border-box;
flex: 1 1 0%;
padding-left: 10px;
}
@media (min-width: 46.25em) {
el {
padding-left: 20px;
}
el {
padding-left: 20px;
}
}

@@ -450,17 +426,17 @@ ```

el {
position: relative;
float: left;
box-sizing: border-box;
flex: 1 1 0%;
padding-left: 10px;
display: block;
flex-basis: 33.33333%;
min-width: 33.33333%;
max-width: 33.33333%;
width: 33.33333%;
position: relative;
float: left;
box-sizing: border-box;
flex: 1 1 0%;
padding-left: 10px;
display: block;
flex-basis: 33.33333%;
min-width: 33.33333%;
max-width: 33.33333%;
width: 33.33333%;
}
@media (min-width: 46.25em) {
el {
padding-left: 20px;
}
el {
padding-left: 20px;
}
}

@@ -484,21 +460,21 @@ ```

el {
position: relative;
float: left;
box-sizing: border-box;
flex: 1 1 0%;
padding-left: 10px;
display: block;
flex-basis: 100%;
min-width: 100%;
max-width: 100%;
width: 100%;
position: relative;
float: left;
box-sizing: border-box;
flex: 1 1 0%;
padding-left: 10px;
display: block;
flex-basis: 100%;
min-width: 100%;
max-width: 100%;
width: 100%;
}
@media (min-width: 46.25em) {
el {
display: block;
flex-basis: 50%;
min-width: 50%;
max-width: 50%;
padding-left: 20px;
}
el {
display: block;
flex-basis: 50%;
min-width: 50%;
max-width: 50%;
padding-left: 20px;
}
}

@@ -537,3 +513,3 @@ ```

`$from` is inclusive but `$until` is *exclusive* – e.g. `@include oGridRespondTo(S, L)` matches the breakpoints `S` and `M`, but not `L`.
`$from` is inclusive but `$until` is _exclusive_ – e.g. `@include oGridRespondTo(S, L)` matches the breakpoints `S` and `M`, but not `L`.

@@ -556,13 +532,13 @@ #### Gutters

el {
margin-left: 10px;
margin-left: 10px;
}
@media (min-width: 61.25em) {
el {
margin-left: 20px;
}
el {
margin-left: 20px;
}
}
```
#### *Unstyle* a row or a column
#### _Unstyle_ a row or a column

@@ -617,3 +593,3 @@ ```scss

```scss
@import 'o-grid/main';
@import '@financial-times/o-grid/main';

@@ -652,7 +628,7 @@ // Add various layouts

<body class="o-grid-snappy">
<div class="o-grid-container">
<div class="o-grid-row">
…
</div>
</div>
<div class="o-grid-container">
<div class="o-grid-row">
…
</div>
</div>
</body>

@@ -662,5 +638,5 @@

<div class="o-grid-container o-grid-container--snappy">
<div class="o-grid-row">
…
</div>
<div class="o-grid-row">
…
</div>
</div>

@@ -686,3 +662,3 @@ ```

```js
import oGrid from 'o-grid';
import oGrid from '@financial-times/o-grid';

@@ -700,3 +676,3 @@ console.log(oGrid.getCurrentLayout());

```js
import oGrid from 'o-grid';
import oGrid from '@financial-times/o-grid';

@@ -714,3 +690,3 @@ console.log(oGrid.getCurrentGutter());

```js
import oGrid from 'o-grid';
import oGrid from '@financial-times/o-grid';

@@ -728,3 +704,3 @@ console.log(oGrid.getGridBreakpoints());

```js
import oGrid from 'o-grid';
import oGrid from '@financial-times/o-grid';

@@ -738,12 +714,12 @@ oGrid.enableLayoutChangeEvents();

1. Create a new Bookmark with this URL:
```js
javascript:(function(){var s=document.createElement("script");s.src="https://rawgit.com/Financial-Times/o-grid/master/bookmarklet/bookmarklet.js";document.head.appendChild(s);}());
```
1. Create a new Bookmark with this URL:
```js
javascript:(function(){var s=document.createElement("script");s.src="https://rawgit.com/Financial-Times/o-grid/master/bookmarklet/bookmarklet.js";document.head.appendChild(s);}());
```
2. Load a website
3. Click the bookmarklet (the overlay should appear)
4. Check the alignment of the layout on the grid
2. Load a website
3. Click the bookmarklet (the overlay should appear)
4. Check the alignment of the layout on the grid
![ ](https://cloud.githubusercontent.com/assets/85783/6125746/732fe9c0-b111-11e4-88d2-5031493cfec0.png)
![](https://cloud.githubusercontent.com/assets/85783/6125746/732fe9c0-b111-11e4-88d2-5031493cfec0.png)

@@ -765,5 +741,5 @@

----
***
## License
## Licence

@@ -770,0 +746,0 @@ Copyright (c) 2016 Financial Times Ltd. All rights reserved.

.eslintrc.js
.github/CODEOWNERS
.github/dependabot.yml
.github/ISSUE_TEMPLATE.md
.github/workflows/add-new-issues-and-pull-requests-to-origami-project-board.yml
.github/workflows/apply-labels.yml
.github/workflows/auto-approve.yml
.github/workflows/automatic-tag-and-release.yml
.github/workflows/percy.yml
.github/workflows/release-origami-component.yml
.github/workflows/sync-repo-labels.yml
.github/workflows/test-origami-component.yml
.stylelintrc.js
bower.json
browser.js
dist-esm/scss/_functions.scss
dist-esm/scss/_mixins.scss
dist-esm/scss/_variables.scss
dist/scss/_functions.scss
dist/scss/_mixins.scss
dist/scss/_variables.scss
module.js
test.src/scss/_base-grid.test.scss
test.src/scss/_fixed-grid.test.scss
test.src/scss/_fluid-grid.test.scss
test.src/scss/index.test.scss
test/scss/_base-grid.test.scss
test/scss/_fixed-grid.test.scss
test/scss/_fluid-grid.test.scss
test/scss/index.test.scss
.eslintignore

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