{"_id":"@_ed/grid","_rev":"2-fc3ea3127cace2cedcd176d7fa65fdf1","name":"@_ed/grid","dist-tags":{"latest":"0.9.1"},"versions":{"0.9.0":{"name":"@_ed/grid","version":"0.9.0","main":"lib/index.js","license":"MIT","private":false,"author":{"name":"Daniel Lever","email":"daniel@ed.com.au"},"repository":{"type":"git","url":"git+https://github.com/ed-digital/ed-react-grid.git"},"scripts":{"build":"tsc","watch":"tsc -w"},"peerDependencies":{"styled-components":"^4.1.3","react":"^16.8.0-alpha.1"},"devDependencies":{"prettier":"^1.16.1","typescript":"^3.2.4","@types/react":"^16.7.20","@types/styled-components":"^4.1.6"},"gitHead":"b14f384ecdd1f6ab60afa1ae445d80b490a4768b","description":"A simple, yet highly-configurable, responsive *n*-column grid system for React, built with `styled-components` integration and TypeScript support. Supports a mix of static grids (in `px`) and fluid grids (in `vw`) at different resolutions.","bugs":{"url":"https://github.com/ed-digital/ed-react-grid/issues"},"homepage":"https://github.com/ed-digital/ed-react-grid#readme","_id":"@_ed/grid@0.9.0","_npmVersion":"6.4.1","_nodeVersion":"8.11.3","_npmUser":{"name":"manspaniel","email":"daniel@chunkyrobot.com"},"dist":{"integrity":"sha512-awLBek9IHExXy8luDZpHicPqCJG2wxMgVh4/VV7mbN4cTCO9F5frfw65/yFEfYTYbMmDl8CKVR/caLZcV+VezA==","shasum":"4d656303d6d1864d9ef1611e903f36dc96955384","tarball":"https://registry.npmjs.org/@_ed/grid/-/grid-0.9.0.tgz","fileCount":35,"unpackedSize":57959,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcS72ACRA9TVsSAnZWagAAmZoP/jjJR2i4/5QHVtPzgqKI\nDDBcgO4iUKvM3/drFkscfNP+dPWX1rxbHGRyrkgfJz7gbqLu3nkpgOwlq9s1\nWnFXsxpZg/9O5vwaALFMpHhJUIcQt5JmawDtTbaoiDLAaUIkQw/YfiHCw8c2\nSWIG4PgiQIfeBiXArfP9wFs7auMUV4ZgLbW/0IctLpm4PY6lOw+3UqKzZQ4l\nEgCZAaWyvYQZxrmO9gBsAUoUAdedaRiXHZKw60RTjlUiTVlL+sx30X4cU8V4\najU89gOSpwdYXzg8TUVPgUZmGeZmUJH2vllRD+fLU0TbuBKvdbghZkCdrw7R\nSA2Oa98U3/VPtxCGgM8653sGVDYE0KnTq95jtyGt47yJf2c7sveLU/sRN0tz\nN17UMAEWJ0G/tGSNeO1pIU4agUpvPkx0nR66mDDNRd7s0aAedyQLIwWQ/qu7\nmqy9MIZ7UnTA20+mCb4ldJP4h3qdKJ2FaRFsC7QQ5chu0nhBLqaKnrGm304x\n29y91RR70uZ/+8ZRUiE5V+fGnEq1f6d+yWz0o/H2FPJ4/TAoRzqSdEY1SADR\nyFkOkS+WKS7kAcY/JaRgZCcFZVgrxh442aK7TsiZ8GtO1v6NkRtqbTmMoVja\nqJH+/+mxlwW3W74eOfkPHf+rSKyvV6Trd3eYxQzDOC6OAmKMTpMSmslHQfwN\nulCw\r\n=TiRy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDqw/4f+kMh012oBZbjQwPpmOByBUNajq0Undvamqx1uwIgVzExOs8D4huFaDfacKYmi3ba0H2K6BOOd1ciJyly45A="}]},"maintainers":[{"name":"manspaniel","email":"daniel@chunkyrobot.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid_0.9.0_1548467583828_0.7330712153965717"},"_hasShrinkwrap":false},"0.9.1":{"name":"@_ed/grid","version":"0.9.1","main":"lib/index.js","license":"MIT","private":false,"author":{"name":"Daniel Lever","email":"daniel@ed.com.au"},"repository":{"type":"git","url":"git+https://github.com/ed-digital/ed-react-grid.git"},"scripts":{"build":"rm -rf lib && tsc --skipLibCheck","watch":"rm -rf lib && tsc -w --skipLibCheck"},"peerDependencies":{"styled-components":"^4.1.3","react":"^16.8.2"},"devDependencies":{"prettier":"^1.16.4","typescript":"^3.3.3","@types/react":"^16.8.3","@types/styled-components":"^4.1.10"},"gitHead":"7e165285fc7ecfea60e20a95ab10f8334771a51b","description":"An easy-to-use, responsive *n*-column grid system for React, built with `styled-components` integration and TypeScript support. Supports a mix of static grids (in `px`) and fluid grids (in `vw`) at different resolutions.","bugs":{"url":"https://github.com/ed-digital/ed-react-grid/issues"},"homepage":"https://github.com/ed-digital/ed-react-grid#readme","_id":"@_ed/grid@0.9.1","_npmVersion":"6.4.1","_nodeVersion":"8.11.3","_npmUser":{"name":"manspaniel","email":"daniel@chunkyrobot.com"},"dist":{"integrity":"sha512-rUFGXC7CRbTWvD/VMIrpZ9Rv4LMzVnungsX3ZjGjLNCq6L3x4JUE4IwgVQ/H8owjz+f3BPQbcf/bBNyLPE8N4g==","shasum":"5ae119f389bb3726305544e0823974467a083157","tarball":"https://registry.npmjs.org/@_ed/grid/-/grid-0.9.1.tgz","fileCount":35,"unpackedSize":76925,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdT/GACRA9TVsSAnZWagAAKXUP/Rt6x4W1mTObXQk5p2/t\nmRVF9eMgjxgHOFJBOxGccFluTLTLIvw2seEoG+mDPR5XCgbumRteU6PEY2wT\njvoCeVbaDeAH8jYQ9BAXOIP90nAewLMz6QnKlit0OACysyiIf0skyJcTA60Q\n7JmIuJ0NBWgekL3gf6Y1jUxvDNclxFATtPcUOXvPF6HGQt7Y4/xVubbXb+Su\nyuHsqhygfsahmLp1hA3sDuyFq9cChgu43A0P3NsuBWG1gzQM/TvQ88tK+lDU\n/d3pxMidSf4wEtPyC1Ma2V+C+y64KmDP/u/0PFZo24ezZr/WS0lY4HualL8F\nSufI1hUMdUXXXaZ7TqGijhXZlEwrspSmhRqUoF2NALnQtZcuBBgG33yV87rD\nMXeSlxLZHilNJaWCVR+6Ou1/S4vFAT7TQJMfhNqthrmh3dDH4f8MwEIdu4Ju\njZubg29Q+m5oUPx04CF4pp5ecZrZnbDAIcbs6tZ6CPOeh2FFKaiXO9n/2vk+\nHSrnhXZNaNn/uUE136cLOcsizZ7Sn2LZKwvQAYPHTMMq502NPrl6py2LpA5O\nGpxdjp0ow5+y5s8K3CGEQdKx08rj/O59PR+1KZst4+muFDk673DMoUsHWtEA\nRDI4aZwUb67xHvc+Fvw/w+FHZUjKM0u9TUG3fPN5JlW53KCvIJWkS7nymjhC\nGbV3\r\n=66bf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBQKeXnXyVuJ/e/xlMNZoveRz6l2Bq6qkA6/yp/L2JE5AiAvLOwAfIwcKbIDUf8bA6MAYbR1oknAX79e6NN2wNajJg=="}]},"maintainers":[{"name":"manspaniel","email":"daniel@chunkyrobot.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid_0.9.1_1565520255802_0.7382414889580087"},"_hasShrinkwrap":false}},"time":{"created":"2019-01-26T01:53:03.652Z","0.9.0":"2019-01-26T01:53:03.971Z","modified":"2022-04-04T10:51:27.785Z","0.9.1":"2019-08-11T10:44:15.966Z"},"maintainers":[{"name":"manspaniel","email":"daniel@chunkyrobot.com"}],"description":"An easy-to-use, responsive *n*-column grid system for React, built with `styled-components` integration and TypeScript support. Supports a mix of static grids (in `px`) and fluid grids (in `vw`) at different resolutions.","homepage":"https://github.com/ed-digital/ed-react-grid#readme","repository":{"type":"git","url":"git+https://github.com/ed-digital/ed-react-grid.git"},"author":{"name":"Daniel Lever","email":"daniel@ed.com.au"},"bugs":{"url":"https://github.com/ed-digital/ed-react-grid/issues"},"license":"MIT","readme":"An easy-to-use, responsive *n*-column grid system for React, built with `styled-components` integration and TypeScript support. Supports a mix of static grids (in `px`) and fluid grids (in `vw`) at different resolutions.\n\n# Installation\n\n```bash\nyarn add @_ed/grid\n```\n\n# Usage\n\nThis library provides three main components:\n\n* `` — Defines grid properties for descendant Row and Col elements.\n* `|
` — Creates a new row in the grid.\n* `` — Where the magic happens!\n\nThere are also a handful of useful mixins for use with `styled-components`.\n\n## `GridProvider`\n\nTo begin using the system, you'll first need to create a grid definition using `createGrid()`, and supply it to a `GridProvider` component like so:\n\n```javascript\n// theme.ts (or theme.js)\nimport { createGrid } from '@_ed/grid'\n\nexport const grid = createGrid({\n columns: 12,\n breakpoints: {\n xs: {\n at: 0,\n fluid: true,\n padding: 5,\n gutter: 5,\n width: 100\n },\n md: {\n at: 900,\n fluid: true,\n padding: 2,\n gutter: 3,\n width: 100\n },\n lg: {\n at: 1500,\n fluid: false,\n padding: 40,\n gutter: 30,\n width: 1200\n }\n }\n})\n```\n\nThe above creates a 12-column, mobile-first grid, with three breakpoints, named `xs`, `md` and `lg`. The first two sizes are fluid, while the `lg` breakpoint is pixel based. It's useful to define your grid in a separate file, to reduce clutter.\n\nTo use these grid settings in your application:\n\n```jsx\n// App.ts\nimport { GridProvider } from `@_ed/grid`\nimport { grid } from 'theme'\n\nexport function App() {\n return (\n \n \n \n My Cool Site!
\n \n
\n \n )\n}\n```\n\n## `Row`\n\nYou must wrap groups of `` components in a `|
` to ensure correct layout.\n\nRow currently only takes two props, `gutterTop` and `gutterBottom`, which are both optional. They can either be `true` or a number. Using these props will assign `margin-top` and/or `margin-bottom`, to the value of the current breakpoint's `gutter` size. This allows you to have the same spacing above/below, as between columns. There is also a mixin to achieve this anywhere else.\n\n## `Col`\n\nThe `Col` component takes the following props:\n\n* `cols` — (required) the number of columns this element should take up. This will be the default number of columns, but can be overridden per-breakpoint.\n* `left` — (optional, number) adds a `margin-left` to this element, where the value is the number passed, multiplied by the column width, plus any gutters. This affects the placement of this column, plus any columns to the right.\n* `right` — (optional, number) adds a `margin-right` to this element, where the value is the number passed, multiplied by the column width, plus any gutters. This affects any columns to the right.\n* `drift` — (optional, number) shifts the element by n columns. A negative number will drift the column to the left, and a positive to the right. This does not affect surrounding columns.\n* `visible` — (optional, defaults to true, boolean) whether or not this column is visible.\n\nEach property can be overridden for each and any breakpoint. Simply prepend the breakpoint name, to the property name, camel-cased. The exception is that the breakpoint name is used instead of `cols`. For example, if you have a `lg` breakpoint, you can use `lg`, `lgLeft`, `lgRight`, `lgDrift`, `lgVisible`.\n\n# Grid Settings\n\nGrids are created with `createGrid` — see the example above.\n\nWhen creating a grid, each breakpoint can have the following parameters.\n\n* `at` (required, number) — the screen resolution at which this breakpoint takes effect. For the smallest mobile breakpoint, this should be `0`\n* `fluid` (required, boolean) — whether or not this breakpoint is fluid, or static in width. Static breakpoints will use `px` for all CSS, whereas fluid will use `vw` for all CSS. You would typically make all of your breakpoints fluid, except for perhaps the largest one, if you'd like to limit the width of your content on a larger screen.\n* `width` (required, number) — the total width of the grid, in grid units, at this breakpoint, including all side padding, gutters and columns. For fluid, this should probably be `100`. For static, it'll be in pixels (eg `1200`).\n* `gutter` (required, number) — the spacing between each column, in grid units. For fluid, you might use `3` (3% of the viewport width), whereas for static you might use `30` (for 30px).\n* `padding` (required, number) — similar to `gutter`, except it instead defines the spacing between the content and the edge of the grid. You'd often set this to be the same value as `gutter`\n* `columns` (optional, number) — use this to override the number of columns at this breakpoint. For instance, you might set this to `4` for your mobile grid. In most cases, you'll probably want to just ignore this option.\n\n# Mixins\n\nThere are a handful of mixins available for use with `styled-components`. Some even allow you to bypass using `Col` and `Row` altogether :)\n\n`column(args)` takes the same arguments as the `Col` component, detailed above. In fact, the `Col` component just uses this mixin!\n\n```jsx\nimport styled from 'styled-components'\nimport { column } from '@_ed/grid'\n\nconst BigRedCol = styled.div`\n background: red;\n ${column({\n cols: 12,\n mdCols: 6\n })}\n`\n```\n\n`row()` takes no arguments. It adds the appropriate styling to create a Row-like component.\n\n```jsx\nimport styled from 'styled-components'\nimport { row } from '@_ed/grid'\n\nconst MyCustomRow = styled.div`\n margin-top: 100px;\n margin-bottom: 100px;\n ${row()}\n`\n```\n\n`columnPadding(args, fromSize)` args should be an object, containing one or two arguments, `gutterTop` and `gutterBottom`, both numbers. It'll add `margin-top` or `margin-bottom` for each breakpoint, where the value used is the gutter size multiplied by the number supplied. Also takes an optional `fromSize` argument, which should be a breakpoint name. The padding will apply from this breakpoint and larger.\n\n```jsx\nimport styled from 'styled-components'\nimport { columnPadding } from '@_ed/grid'\n\nconst GridItem = styled.div`\n ${columnPadding({\n gutterTop: 2\n })}\n`\n```\n\n`each(callback)` — calls your callback for each breakpoint, returning the result. The result for each breakpoint is automatically wrapped in a _clamped media query_ (with `min-width` AND `max-width`), in that the result for each breakpoint only affects that exact breakpoint only (not mobile-first).\n\n```jsx\nimport styled, { css } from 'styled-components'\nimport { each } from '@_ed/grid'\n\nconst OneColHigh = styled.div`\n // Make this div the same height as 1 column width,\n // for every breakpoint\n ${each(breakpoint => css`\n height: ${breakpoint.colWidths[1]}${breakpoint.units};\n `)}\n`\n```\n\n`at(sizes, callback)` — exactly the same as `each`, however you must specify one or more sizes to be iterated over. Just like `each`, the result of your callback for each breakpoint is wrapped in a min/max media query, rather than just a `min-width` one. The `size` argument should either be a string, or an array of strings. `callback` can also just be a piece of CSS, rather than a function.\n\n```jsx\nimport styled, { css } from 'styled-components'\nimport { at } from '@_ed/grid'\n\nconst MyBox = styled.div`\n // Font size is 30 on desktop, 10 on mobile\n font-size: 30px;\n ${at('xs', css`\n font-size: 10px;\n `)}\n // Padding-top is the same as the gutter size on xs and md\n ${at(['xs', 'md'], breakpoint => css`\n padding-top: ${breakpoint.gutter}${breakpoint.units};\n `)}\n```\n\n`from(sizes, callback)` — the same as `at`, except the media queries used are not clamped. This means that if you have breakpoints `xs`, `md` and `lg`, then `from('md')` will affect both `md` and `lg`.\n\n```jsx\nimport styled, { css } from 'styled-components'\nimport { from } from '@_ed/grid'\n\nconst MyBox = styled.div`\n // Padding-top is the same as the gutter size for `md` and higher\n ${from(['md'], breakpoint => css`\n padding-top: ${breakpoint.gutter}${breakpoint.units};\n `)}\n```\n\n`queryAt(sizes)` — produces a clamped media query in the form `(min-width: X) and (max-width: X)`, except for the smallest breakpoint which would be `(max-width: X)` or the largest breakpoint which would be `(min-width: X)`. The `sizes` arg can be a string or array of strings\n\n```jsx\nimport styled, { css } from 'styled-components'\nimport { queryAt } from '@_ed/grid'\n\nconst MyBox = styled.div`\n // Hide this element at the xs breakpoint only\n @media ${queryAt('xs')} {\n display: none;\n }\n```\n\n`queryFrom(size)` — produces a `min-width` media query, which will it's contents from the specified size and upwards\n\n```jsx\nimport styled, { css } from 'styled-components'\nimport { queryFrom } from '@_ed/grid'\n\nconst MyBox = styled.div`\n // Hide this element at md and higher breakpoints\n @media ${queryFrom('md')} {\n display: none;\n }\n```\n\n`queryTo(size)` — TODO, not built yet!\n\n`columnWidth(cols, size?)` — sets the width of this element to be the same as a column with that number of columns. The `size` arg is an optional breakpoint name, for which this mixin will apply.\n\n```jsx\nimport styled, { css } from 'styled-components'\nimport { columnWidth } from '@_ed/grid'\n\nconst MyBox = styled.div`\n ${columnWidth(6)} // default to 6\n ${columnWidth(8, 'lg')} // 8 cols wide at 'lg'\n```\n\n# Grid Properties\n\nWhen using mixins like `each`, or the `useGrid()` method, or when accessing the grid from `props.theme.grid`, you should note that each breakpoint has additional properties to the ones passed in with `createGrid`. Here is the schema:\n\n* `name: string` — the name of the breakpoint, eg `xs`\n* `columns: number` — the number of columns at this breakpoint. defaults to the number of columns for the grid.\n* `min: number` — the minimum viewport width for this breakpoint\n* `max: number | null` — the size of the next biggest breakpoint, or null for the largest\n* `query: string` — a string in the form `(min-width: min)`, or an empty string for the smallest\n* `rangedQuery: string` — the same as `query`, but also includes a `(max-width)` value\n* `colWidths: { [index: number]: number }` — a dictionary of column widths. So `colWidths[2]` is how wide a Col taking up 2-columns would be.\n* `units: string` — either \"vw\" or \"px\"\n* `size` — an object with all primitive sizes used by this breakpoint. It has the properties `width`, `column`, `gutter` and `padding`\n\n# Tips\n\n## Mobile-First\n\nThis system is inherently mobile-first. When you use a `` component, the `cols` prop will target _all_ breakpoints. If you have 3 breakpoints, `sm`, `md` and `lg`, then the `mdCols` prop will target both `md` and `lg` breakpoints.\n\n## Nesting Rows and Cols\n\nRows and columns can be nested infinitely, however the nesting should alternate between `Row` and `Col`.\n\nFor example, this will result in display issues:\n\n```jsx\n\n \n INVALID\n \n \n INVALID\n \n\n```\n\nInstead you should do this:\n\n```jsx\n\n \n \n :)\n \n \n :)\n \n
\n\n```","readmeFilename":"README.md"}