• [v.0.2.x:next]: Code instantly persistent dark mode, remove menus and styles fixes.
  • [v.0.x.0:warning]: The first grand finale release will be publish at v1.0.0.
  • [v.0.2.0:update]: Very first release atempt; package core system stable.

Gatsby Layout Builder


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-atomic-block

Plugin Install: npm i gatsby-atomic-block

Version: 0.2.0

Year: 2021


    bgColor: '#fff',
    isBoxed: true,
    alignTo: 'center',
    numColumns: 3,
    // bgImg: {};
  // Your content goes here

🚀 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-atomic-block

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-atomic-block`],
  // if you just have the plugins array
  // you may need to place the plugin string name
  // between the right objects and arrays

The Gatsby Layout Builder can you be used in your normal Gatsby ambient. Something like this:

├── ./src/components
├──── ComponentX.js
├── ./src/pages
├──── index.js
└── Gatsby-config.js

├── index.js
├── package.json
└── README.md
  1. Add the plugin correctly

The plugin will be added by the starter implements of a tag.React.Element.

You can verify Layout component library to added to your site in next:

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

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

  1. Dependencies
			"gatsby": "^4.1.0",
			"react": "^17.0.2",
			"react-dom": "^17.0.2",
			"react-icons": "^4.3.1",
			"sass": "^1.43.4",
			"react-helmet": "^6.1.0",
			"react-helmet-async": "^1.1.2"
  	"devDependencies": {
    	"prettier": "^2.4.1"

## 🧐 What's inside?

├── element_structure
├── element_logics
├── element_styles
├── configs
├── persistent_vars
├── tools
├── root_files
├── wrapper_gatsby
├── room.code-workspace
└── README.md

Keep in touch

Don’t mail me yet. Unless you want to do some kind of friendship.

Poupa Luz poupaluz@edu4.dev

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: