pauliescanlon / gatsby-remark-grid-system

A Gatsby remark plugin for responsive grid systems in markdown 🍱

gatsby-remark-grid-system

gatsby-remark-grid-system is a plugin that creates responsive layouts from markdown files

Motivation As much as i like blogs, do they all have to be single coloum? Arguably if you're using gatsby-pugin-mdx this is not problem but... if your blog / site / app uses .md this might be worth a look.

👁️ Preview

• Live Demo

🚀 Getting started

Install

npm install @pauliescanlon/gatsby-remark-grid-system

Setup

Add gatsby-transformer-remark to your gatsby-config.js then add @pauliescanlon/gatsby-remark-grid-system as a plugin of that 😅

module.exports = {
  ...
  plugins: [
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [`@pauliescanlon/gatsby-remark-grid-system`],
      },
    },
  ],
}

Options

Option	Type	Reqiured	Default	Description
breakpoints	array	no	[576, 768, 992, 1200]	bootstrap inspired breakpoints
padding	number	no	16	padding applied to each col
debug	boolean	no	false	adds an outline to each col

...
plugins: [
  {
    resolve: `@pauliescanlon/gatsby-remark-grid-system`,
      options: {
        ...
     }
  },
]

📝 Markdown

TODO explain markdown a bit more ::: ... row ... col ...

::: div row

::: div col 12|6|7|9
   left content 1
:::

::: div col 12|6|5|3
   right content 1
:::

:::