New
Storybook for full-stack developersAutomate with Chromatic
Star75,295
Back to integrations
Add your integration
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
Column Guides
Column guides for your stories
npm install storybook-addon-grid
Last updated 2 months ago
5.9k
Downloads per week
Readme View on GitHub

storybook-addon-grid

npm install storybook-addon-grid keeps your stories in rhythm

npm stats bundle size


This is free to use software, but if you do like it, consider supporting me ❤️

sponsor me buy me a coffee

example that shows how the columns look when enabled

⚙️ Install

npm install storybook-addon-grid
// .storybook/main.js
module.exports = {
  addons: [require.resolve('storybook-addon-grid')],
};
Chromatic users

Include this additional preset to configure the column guides for your Chromatic screenshots.

// .storybook/main.js
module.exports = {
  addons: [require.resolve('storybook-addon-grid'), require.resolve('storybook-addon-grid/chromatic')],
};

🚀 Usage

The column guides are controlled with 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.

animation?: boolean = true

Enable or Disable the guides from fading in or out when toggling the state.

Chromatic users, this will be false by default.

color?: string = 'rgba(255, 0, 0, 0.1)'

Sets the color used for the column guides.

Global Parameters~
// .storybook/preview.js
export const parameters = {
  grid: {
    gridOn: true,
    columns: 12,
    gap: '20px',
    gutter: '50px',
    maxWidth: '1024px',
  },
};
Per story~
// 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:

// file: my-styles.css
@media (min-width: 768px) {
  :root {
    --columns: 8;
    --gap: 12px;
    --gutter: 24px;
  }
}
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.

📚 Further Readings

❤ Thanks

Special thanks to Marina for the initial implementation and design.

License

MIT © Marais Rossouw

Join the community
5,867 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI