Sometimes it is helpful, to see the grid from the page and the borders for the containers (may be with a dotted line).
Especially if you want to check if the containers has provided with the correct class.
This should be turned on/off.
And it is nice to have, not mandatory
2 Likes
I’m not sure I understand what you mean here but how about this as a workaround.
Either create a new style called div and add it to style.css then add something like this to border
border: 1px solid green;
This will apply a green border to every div on the page helping to define the edges of them in Page View. Then to “switch them off” just comment out the line of code
/* border: 1px dotted green; */
Not perfect but it might be of help!
Thanks for yor help, but unfortunately that is not what I mean.
Do you know this bookmarklet:
http://alefeuvre.github.io/foundation-grid-displayer/
It shows the grid for frameworks in the browser. Works well.
You can outline everything on the page for easier visualization with the following.
*{outline:#00BFFF dashed 1px;outline-offset:-2px;box-sizing:border-box}
You can also break everything into its own color group based upon what it is (divs, spans, containers, sections, imgs, etc.), but honestly that gets confusing visually, so I settled on the above for a clean simple visualization.
I would assume the Pinegrow developers could add this or similar as an overlay toggle feature into the app, much like the hover effect as you move your mouse over things on the page. It may help people better visualize what is occurring on the page as they develop.
Simulating the actual underlying grid of the framework being used may be tricker however … Hmmm?
But hopefully the above will help you or someone. 
1 Like
Just drop these 2 lines in your html code:
<script src="http://alefeuvre.github.com/foundation-grid-displayer/gd-bookmarklet.min.js"></script>
<link href="http://alefeuvre.github.com/foundation-grid-displayer/stylesheets/gd-bookmarklet.min.css" rel="stylesheet">
2 Likes
@BATLABOR I’ve added a short write up over here in response to @JoseFR’s grid overlay request in the feature-request category based on your suggestion.
1 Like
I don’t mind at all @matjaz, nothing special or proprietary there (ha, ha). Hopefully it will better assist with easier visualization in the app for some users.
Even more so I hope some of my other ideas/thoughts are/were given consideration for possible features. Although they may be a little more involved than that one line of CSS. But here is to hoping some might make it in.
Thanks again @matjaz, keep up the good work.
PS: Benjamin’s english is really good, was impressed.
1 Like
Similar to the outline overlay snippet, some might find general overlay grids beneficial to toggle on and off.
To use for assisting with the visualization of layout and design concerning alignments, positioning, etc., when dealing with CSS properties. Especially now with the new CSS improvements across the app and in conjunction with using the new Visual CSS Editor.
A few basic grids using simple gradients:
/* Line Grid */
.grid-lines {
background-size: 10px 10px; /* Size could be definable via the UI ? */
background-image: linear-gradient(to right, #00BFFF 1px, transparent 1px), linear-gradient(to bottom, #00BFFF 1px, transparent 1px);
}
/* Dot Grid */
.grid-dots {
background-size: 20px 20px; /* Size could be definable via the UI ? */
background-image: radial-gradient(circle, #00BFFF 1px, rgba(0, 0, 0, 0) 1px);
}
/*
Or for performance rendering concerns base64 PNG or Canvas could be considered alternatively.
*/
Just a thought, as another potential basic thing that may at times prove beneficial to Pinegrow users.
Hello again @matjaz & @Emmanuel
Interview : Tuukka Rantala, Graphic Designer at Porkka & Kuutsa (Finland) | Pinegrow Web Editor
What features are currently lacking in Pinegrow right now and for which you use other applications (and which applications?)
The most important feature lacking is possibility to use guides and grids (like in Illustrator, Indesign or Photoshop). Sometimes I have used a sheet of white paper as a guide to check that some elements are even on screen.
[….]
The above excerpt from the newly posted article/interview reminded me of my previous post above suggesting to have a simple toggle " grid " overlay/underlay.
Also in regards to draggable etc., " guides " (rulers) there are existing things which may help implementing that if desired also, a few examples are seen below.
- GitHub - mark-rolich/RulersGuides.js: Creates Photoshop-like guides and rulers interface on a web page
- GitHub - MrFrankel/ruler: HTML5 Canvas ruler for authoring tools
- etc.,
Both grids / guides would be better than a user holding a sheet of paper up to the screen as mentioned.
PS: Their later comment about including other CMS’s reminded me of the discussion of the many Flat File CMS solutions which exist. Most could be implemented with little work for allowing drag and drop much like the newly capable Wordpress Smart Actions, for generating editible regions, etc., for any chosen CMS’s.
1 Like
@Pinegrow_User do the current features not cover the grid overlay/underlay requirements.
For example Bootstrap grid + image overlay are possible:
Hey @Rob, welcome back been a while, long time no see.
The suggestion above was more for a generalized basic grid overlay not specific to any framework or workflow, much like the Element Outlines. If you try the CSS snippets I posted above it should become apparent. In addition to such a basic “grid” overlay I also referenced the “guides” since each were mentioned in the above linked interview article with the person speaking of each as seen across Adobe products and other design apps.
@Pinegrow_User I should have checked out the links before opening my mouth 
They’ve some interesting ideas going on there. Nice share.