Nifty Penguin Magic

    @pauliescanlon/gatsby-remark-grid-system

    0.0.4 • Public • Published

    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

    🚀 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
    :::
    
    :::
    

    Install

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

    DownloadsWeekly Downloads

    276

    Version

    0.0.4

    License

    MIT

    Unpacked Size

    24.3 kB

    Total Files

    14

    Last publish

    Collaborators

    • pauliescanlon