Pinegrow Community Support Forum

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


#1

Hello,

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


#2

Have a look at this idea


#3

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


#4

@josedacosta 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!

Screenshots:

Adding code and how it looks in PG:


Chose your framework:


Edit display of grid, colour, etc.


Show the grid and container borders
Adding a "layer" of grid locating, For example : Free Bootstrap v3.0 PSD Grid
#5

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


#6

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


#7

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


#8

never mind i see it in the pic…thanks bro