Hi guys!
I read on the homepage that Bricksforge comes with an option for a 12 column grid as a help when designing. Do you have more details about that?
Our agency works only with Figma grid layouts and in Elementor I use an Add On which shows a visual page grid. It also works responsively. I’m looking for a tool for Bricks which can do that.
Best wishes, Heiko
this should do the trick.
/**
* Pure CSS Responsive Grid Overlay
* With variables and a mobile first approach
* Works in Chrome with e.g. the Styler extension or could be added conditionally in your build setup or...?
*/
:root {
/* Global settings */
--grid-display: block; /* Toggle grid visibility with "block" or "none" */
--grid-z_index: 1000; /* The z-index should be bigger than any used on the site */
/* Grid settings */
--media-query: 'Base';
--grid-columns: 4;
--grid-baseline: 4px;
--grid-baseline-top: 3px; /* Must be smaller than grid-baseline */
--grid-offset: 25px;
--grid-gutter: 16px;
--grid-color: 190, 100%, 60%; /* hsl value */
--grid-vertical-opacity: 0.3;
--grid-horisontal-opacity: 0.2;
}
/**
* Override grid settings at bigger screen sizes
* Add/remove depending on how many you need
*/
@media (min-width: 560px) {
:root {
--media-query: 'Small';
--grid-offset: 26px;
--grid-gutter: 12px;
--grid-color: 10, 100%, 58%;
}
}
@media (min-width: 768px) {
:root {
--media-query: 'Medium';
--grid-columns: 12;
--grid-offset: 28px;
--grid-gutter: 16px;
--grid-color: 190, 100%, 45%;
}
}
@media (min-width: 1100px) {
:root {
--media-query: 'Large';
--grid-offset: 30px;
--grid-color: 10, 100%, 58%;
--grid-max_width: 1184px;
}
}
/**
* "Mixins"
* You probably don't need to edit anything here.
*/
:root {
--grid-vertical-color: hsla(var(--grid-color), var(--grid-vertical-opacity));
--grid-horizontal-color: hsla(var(--grid-color), var(--grid-horisontal-opacity));
--grid-vertical-lines: linear-gradient(to right,
var(--grid-vertical-color),
var(--grid-vertical-color) 1px,
transparent 1px,
transparent calc(100% - var(--grid-gutter) - 1px),
var(--grid-vertical-color) calc(100% - var(--grid-gutter) - 1px),
var(--grid-vertical-color) calc(100% - var(--grid-gutter)),
transparent calc(100% - var(--grid-gutter)),
transparent
);
--grid-horizontal-lines: linear-gradient(
transparent var(--grid-baseline-top),
var(--grid-horizontal-color) var(--grid-baseline-top),
var(--grid-horizontal-color) calc(var(--grid-baseline-top) + 1px),
transparent calc(var(--grid-baseline-top) + 1px)
);
}
/**
* Styling
* Using pseudos on <html> but could also use <body> or a <div id="app"> type thing.
*/
.brx-body.iframe {
position: relative;
min-width: 100vw;
min-height: 100vh;
}
.brx-body.iframe::before,
.brx-body.iframe::after {
display: var(--grid-display);
z-index: var(--grid-z_index);
}
.brx-body.iframe::before {
content: var(--media-query, 'Unknown Media Query');
position: fixed;
top: 0.25rem;
left: 0.25rem;
color: var(--grid-vertical-color);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
font-size: 1rem;
font-weight: 400;
}
.brx-body.iframe::after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: calc(100% - 2 * var(--grid-offset));
max-width: var(--grid-max_width, none);
margin-right: auto;
margin-left: auto;
background-image: var(--grid-vertical-lines), var(--grid-horizontal-lines);
background-size: calc((100% + var(--grid-gutter)) / var(--grid-columns)) var(--grid-baseline);
pointer-events: none;
z-index: var(--grid-z_index);
}
This looks very interesting!
Pasting CSS variables in the BrocksForge Global Classes section doesn’t work (yet, any chance that the entire CSS is included @Daniele).
@Groovin you included this in a regular CSS field or Brocks Settings, correct?
Hi Max, for now I have the code in the advanced script plugin and activate the snippet when needed. Would be nice if we have the option in the builder to toggle it on or off. There is also this X-ray mode code snippet from bricks lab:
/* X-ray Mode */
// .brx-body.iframe {
// filter: grayscale(1);
// }
.brx-body * :not(.brx-body.main .bricks-svg-wrapper .bricks-svg, #bricks-preview-element-actions li.action.bricks-svg-wrapper,
#bricks-preview-element-actions li.action .options,
#bricks-preview-element-actions li.action .options .option,
#bricks-preview-element-actions li.action .unit,
#bricks-preview-element-actions .bricks-svg-wrapper .bricks-svg,
#bricks-builder-context-menu,
#bricks-builder-context-menu ul li,
#bricks-builder-context-menu ul li .label,
#bricks-builder-context-menu ul li .shortcut,
#bricks-builder-context-menu ul li .buttons,
#bricks-builder-context-menu ul li span) {
outline-style: dotted;
/* Default outline - Few options to try out */
/* Dark: rgba(0,0,0,0.40) */
/* Yellow: rgba(255,250,0,0.80) */
/* Blue: rgba(0,135,255,0.50) */
outline-color: rgba(0,135,255,0.50);
outline-width: 2px;
/* The offset values prevent the outlines from overlapping with eachother. Set to 0px for maximum accuracy */
outline-offset: -1.3px;
}
.brx-body * :not(.brx-body.main .bricks-svg-wrapper .bricks-svg,
#bricks-preview-element-actions li.action, .bricks-svg-wrapper,
#bricks-preview-element-actions li.action .options,
#bricks-preview-element-actions li.action .options .option,
#bricks-preview-element-actions li.action .unit,
#bricks-preview-element-actions li.action.width .resize)::before {
outline-style: dotted;
/* Default green for :before rgba(0,255,178,0.40) */
outline-color: rgba(0,255,178,0.40);
outline-width: 2px;
/* The offset values prevent the outlines from overlapping with eachother. Set to 0px for maximum accuracy */
outline-offset: -1.3px;
}
.brx-body *::after {
outline-style: dotted;
/* Default red for :after rgba(255,0,0,0.50) */
outline-color: rgba(255,0,0,0.40);
outline-width: 2px;
/* The offset values prevent the outlines from overlapping with eachother. Set to 0px for maximum accuracy */
outline-offset: -1.3px;
}
#wpadminbar *::before,
#wpadminbar *,
#wpadminbar *::after {
outline-style: none;
}
That maybe could be included @Daniele
Great idea. This would fit to the Builder Customizing area I think to optionally activate this (toggle) for your user role 
Yes, it’s not for everybody ( more designers and developers) so it would be great to manage the user role access in the backend!
Hey @Groovin, @Daniele and Max – thank you very much for the quick answers and solutions! 
I’ll try both and look forward to any implementation.
Just for you see how comfortable it works in the mentioned Add-on I made a 20-sec. video:
I’m not sure (–> Daniele & the rest) if this is anything you could also think of. But this works like a charme, is easy to set up and is a game changer: In our agency now we couldn’t work without it because of the designs we have.
Maybe it’s also a nice little feature that could convince even more devs + designers of BricksForge.
