A transparent "layer" of grid viewing, to help design


Add a “layer” of grid, for the tracking, it would be nice :slight_smile:
This helps in layout with grills.
For example: Free Bootstrap v3.0 PSD Grid

thank you

Have a look at this idea

thank you!
It is a superb solution "Grid displayer for Bootstrap and Foundation"
But it does not work in the Pinegrow editor: /
It is at the time of editing in Pinegrow that this help is useful.
thank you

@JoseFR try this out.

Credit goes to @BATLABOR for this I’m just doing a short write up and adding a few screenshots!

  1. Create new page in Pinegrow and save
  2. Click Page > edit code > then paste the two lines of code below into the head of the page, I placed it just before the closing tag

<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">

  1. Move your cursor over the top of the page you’ve created and a container appears that will allow you to select a framework, e.g. Bootstrap 3 if you are using BS 3
  2. Add rows, columns, etc. to your layout and enjoy your grid layer!


Adding code and how it looks in PG:

Chose your framework:

Edit display of grid, colour, etc.


Well! now that is “Oh La LA!” Sexy!

1 Like

@schpengle if you think that’s Oh La La! Sexy! you need to get out more and I think @Emmanuel will be offended on behalf of his fellow countrymen :slight_smile: :fr:

1 Like

Rob that is tight my brother! so do you put the script at the top as well with the css?

never mind i see it in the pic…thanks bro

1 Like