Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/maraisr/storybook-addon-grid
⚜️ Column guides that help you align your stories
https://github.com/maraisr/storybook-addon-grid
addon column design figma grid storybook storybook-addons
Last synced: 24 days ago
JSON representation
⚜️ Column guides that help you align your stories
- Host: GitHub
- URL: https://github.com/maraisr/storybook-addon-grid
- Owner: maraisr
- License: mit
- Created: 2021-03-20T08:03:35.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-03-21T02:54:09.000Z (8 months ago)
- Last Synced: 2024-10-12T05:28:20.877Z (about 1 month ago)
- Topics: addon, column, design, figma, grid, storybook, storybook-addons
- Language: TypeScript
- Homepage: https://storybook.js.org/addons/storybook-addon-grid
- Size: 1.16 MB
- Stars: 22
- Watchers: 3
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: license
Awesome Lists containing this project
README
`npm install storybook-addon-grid` keeps your stories in rhythm
**A tiny utility for batching and caching operations**
This is free to use software, but if you do like it, consider supporting me ❤️
[](https://github.com/sponsors/maraisr)
[](https://www.buymeacoffee.com/marais)
## ⚙️ Install
```sh
npm install storybook-addon-grid
```
```js
// .storybook/main.js
const config = {
addons: ['storybook-addon-grid'],
};
```
>
> Chromatic users
>
> Include this additional preset to configure the column guides for your Chromatic screenshots.
>
> ```js
> // .storybook/main.js
> const config = {
> addons: ['storybook-addon-grid', 'storybook-addon-grid/chromatic'],
> };
> ```
>
>
## 🚀 Usage
The column guides are controlled with [parameters](https://storybook.js.org/docs/react/writing-stories/parameters) and
as such you can define this globally or per story.
The column guides can be turned on either via clicking the toolbar button, or via a keyboard shortcut Ctrl +
G.
> **Note:** Due to the nature of `z-index`, the root `div` of the stories will have a `position: relative` and
> `z-index: 0` applied to it, allowing the column guides to sit over the top.
### _Parameters_
Column design system is defined by 3 values:
- the number of `columns`
- the `gap` between them
- the `gutter` — minimal margin between the system and the screen
- `maximal-width` for the system to limit maximum width of all columns as well.
#### `columns?: number = 12`
The number of columns guides.
#### `gap?: string = '20px'`
The gap between `columns`.
#### `gutter?: string = '50px'`
System's gutter (`margin`) for both left and right.
Define to override the gutter defined on the right-hand-side.
#### `maxWidth?: string = '1024px'`
The maximum width our columns should grow.
#### `color?: string = 'rgba(255, 0, 0, 0.1)'`
Sets the color used for the column guides.
##### _Global Parameters~_
```js
// .storybook/preview.js
export const parameters = {
grid: {
gridOn: true,
columns: 12,
gap: '20px',
gutter: '50px',
maxWidth: '1024px',
},
};
```
##### _Per story~_
```js
// MyComponent.stories.js
export const Example = () => {...};
Example.parameters = {
grid: {
columns: 6,
},
};
```
### Responsive properties
The way `storybook-addon-grid` solves responsive properties is leaving this up to you. We don't you to build
abstractions and implementations for this addon, we want to reuse existing patterns you may already be using.
In fact all properties map through to css, so any css variable you expose is consumable.
eg:
```css
// file: my-styles.css
@media (min-width: 768px) {
:root {
--columns: 8;
--gap: 12px;
--gutter: 24px;
}
}
```
```ts
Story.parameters = {
grid: {
// a custom variable names for the number of columns
columns: 'var(--columns)',
// or the gutter
gutter: 'var(--gutter)',
// or the gap
gap: 'var(--gap)',
},
};
```
You can see this in action over at our [example story `ResponsiveGrid`](./example/Example.stories.tsx).
## 📚 Further Readings
- https://compassofdesign.com/articles/design-principle-1-guides-gutters-and-grids
## ❤ Thanks
Special thanks to [Marina](https://github.com/thearnica) for the initial implementation and design.
## License
MIT © [Marais Rossouw](https://marais.io)