Neural Processing Mechanisms

    gatsby-layout-builder

    0.7.85 • Public • Published
    • [v.0.6.x:next]: More types.
    • [v.0.x.0:warning]: The first grand finale release will be publish at v1.0.0.


    Gatsby Layout Builder

    LAYOUT BUILDER by Edu4Dev

    Engine Agent: Gatsby - Javascript Framework

    Engine SubAgent: Gatsby Plugin

    Gatsby Plugin Name: Gatsby Layout Builder

    Author: Edu4Dev - Milton Bolonha

    Description: Gatsby Layout Builder is the platform web creators choose to build professional GatsbyJS HTML, plus SCSS basic structure, such as rows, number of columns, background color, header, responsive main menu, modals and simple stuffs.

    *Keep in mind these bundle aren't a block builder.


    Plugin URI: https://www.npmjs.com/package/gatsby-layout-builder

    Plugin Install: npm i gatsby-layout-builder

    Version: 0.6.0

    Year: 2022


    Invoke:

    <Layout
      type="ROW"
      opt={{
        bgColor: '#fff',
        isBoxed: true,
        alignTo: 'center',
        numColumns: 3,
        // bgImg: {};
      }}
    >
      // Your content goes here
    </Layout>

    🚀 Quick start

    To get started to invoke rows, columns, modals, header and footer wrapper standard structure on your theme, you can follow these steps:

    1. Install Gatsby Layout Builder plugin with:
    npm i gatsby-layout-builder

    If you already have customize your gatsby-config.js, you can use it. Otherwise, you should create a new gatsby-config.js file to setting your plugin.

    1. Add the Gatsby Layout plugin to the build. In your gatsby-config.js insert the code:
    module.exports = {
      plugins: [`gatsby-layout-builder`],
    }
    // gatsby-config.js
    1. Add the plugin correctly

    Inside a page or component invoke Layout type="COMPONENT".

    // type="BODY"
    <BodyContainer subAgent={children} opt={opt} />
    // type="FOOTER"
    <FooterContainer subAgent={children} opt={opt} />
    // type="HEADER"
    <HeaderContainer opt={opt} />
    // type="ROW"
    <RowContainer opt={opt} subAgent={children} />
    // type="SIDEBAR"
    <SidebarContainer opt={opt} subAgent={children} />
    // type="MAIN"
    <MainContainer opt={opt} subAgent={children} />

    Those types who accept subAgent parameter may be used as wrapper of some children element.

    1. Dependencies
    {
      "dependencies": {
        "gatsby": "^4.11.1",
        "gatsby-plugin-image": "^2.11.1",
        "gatsby-plugin-sass": "^5.11.1",
        "node-sass": "^7.0.1",
        "prop-types": "^15.8.1",
        "react": "^17.0.2",
        "react-dom": "^17.0.2",
        "sass": "^1.49.11",
        "web-vitals": "^2.1.4"
      },
      "devDependencies": {
        "prettier": "^2.4.1"
      }
    }

    Keep in touch

    Don't mail me yet. Unless you want to make some kind of friendship.

    Milton Bolonha miltonbolonha@gmail.com

    🎓 Learning Gatsby

    If you're looking for more guidance on plugins, how they work, or what their role is in the Gatsby ecosystem, check out some of these resources:

    Install

    npm i gatsby-layout-builder

    DownloadsWeekly Downloads

    27

    Version

    0.7.85

    License

    MIT

    Unpacked Size

    157 kB

    Total Files

    99

    Last publish

    Collaborators

    • nuktpls