Gin Layout Builder

Layout Builder in Gin Style.

This module brings the gin admin theme to the layout builder.

Conflicts with your frontend theme.

To avoid conflicts with your frontend theme, the module adds a CSS prefix "glb-" to all layout builder styles.
If your theme uses theme suggestions there could be conflicts with the module theme suggestions from "gin layout builder". To avoid these conflicts add the following code to your hook_theme_suggestions inside your theme.

if (isset($variables['element']['#gin_lb_form'])) {
    return;
}

Develop

Gin layout builder comes with a webpack configuration to builder SCSS styles.
To use them run:

yarn install
yarn dev

Load toastify with composer

To load toastify with composer add

"apvarun/toastify-js": {
  "type": "package",
   "package": {
    "name": "apvarun/toastify-js",
    "version": "v1.11.2",
    "type": "drupal-library",
    "dist": {
      "url": "https://github.com/apvarun/toastify-js/archive/refs/tags/1.11.2.zip",
      "type": "zip"
    }
  }
},

And require "apvarun/toastify-js": "1.11.2" (Thanks @kmonty)

After that switch to composer in gin lb settings.

Overwrite templates.

* Copy the template from the base "templates"
* Add the path to gin_lb_overwritten_themes
* Surrond the attributes inside{{ glb_classes(attributes) }}
To overwrite "glb-" classes just add them to the SASS file and run yarn dev. The POSTCSS processor automatically picks up all "glb-" prefixed class names and adds them to a JSON file, which drupal reads to preprocess the class names inside the glb_classes twig function.

Youtube Video:

https://www.youtube.com/watch?v=aDbZRgY7Xm8&feature=youtu.be