I would think a single Mock Up image would be a good starting point for a feature like this.
But if they could find a clear way or determine the benefit too implement multiples images, then yes ways do exist for allowing pixel snapping while dragging and nudging divs. I would think most would be happy and could benefit from a single image (as described in the above posts) to start however.
This would also be a starting point for a visual design editor that automatically populates those results directly into the CSS tab. Why manually do it when Pinegrow could do it for us?
Drag images and divās or other containers and elements around the page pixel perfectly and you would have replacement for most visual editors out there.
Thatās a very good point @Terry44.
If the developers [@matjaz] would chose to pursue such a path and have a mode for such development that indeed might be an interesting and beneficial form of mocking or scaffolding up a site or development in general. Of course as long as the corresponding HTML and CSS is translated correctly, clean, valid and the output is as desired. I could see that being an interesting aspect to consider for Pinegrow, Iām not sure they are but certainly a valid idea and one to keep in mind and consider.
I am by no means a coder. In fact, I have a huge problem with code and or reading in general.
I never coded things, I only made āmock-upsā of what I wanted a site to look like. I always had
ideas of how I wanted things to work when performing an āActionā in the browser. I was able to
sort of understand how things worked but never to be able to code from scratch.
I still canāt but Iām trying different solutions to make me not forget some things by using code
and seeing exactly what happens in real time for an example.
Anyways. Itās much easier for me to make a box with a certain style in Photoshop to see if Iād
like the outcome or not and save myself time in case I forget certain attributes, selectors or
the like and start looking for references before I can finish to code it.
Sometimes I start with a blank canvas and make some basic stuff, but when I need to make
some more advanced effects and styles, I prefer to mock them up in PS.
Just of the fun of it I had a very quick look at the idea of using an overlay to help build out a web page in Pinegrow based on a layout created in Photoshop. I downloaded a free homepage PSD and jpg from somewhere (I genuinely canāt remember but here are the links to where the complete set can be purchased as well as a Wordpress version)
Waxom - Clean & Universal PSD Template (230 psdās files)
Download: http://themeforest.net/item/waxom-clean-universal-psd-template/8407963
Waxom - Clean & Universal WordPress Theme
http://themeforest.net/item/waxom-clean-universal-wordpress-theme/13639831
After that I added a div with homepage jpeg and with a bit of css positioned it so it was centred on the page. After that I added sections, containers, etc. to help structure the layout and then started to add content. As I said earlier this was a quick effort so for some of the content I just exported as a png and placed it as an image just to speed up the process. I spent the minimum amount of time trying to get the positioning correct and I donāt even know if this site was designed with bootstrap in mind so it might account for some of the inaccuracy but most of it is just I didnāt put the time into making it pixel perfect. That said I thing it gives a good idea of how this could be done in a project.
Things I realised when doing this:
So here are 3 links:
I found that for some reason it displayed best when the browser was 1872px wide! I donāt know why it just did. It was an interesting experiment and one that Iām sure could be pushed to be even more accurate if I wanted to but it was just a quick experiment.
First displays just the overlay (what I was trying to recreate)
Second displays the combined (overlay and what I recreated)
Third displays just what I recreated
Iāve updated the css that controls the display of the overlay. By adding a class overlay hidden {opacity: 0;} to the overlay container it means that you can effectively switch on or off the display of the overlay container just by going to the css panel and clicking the + or - when you have the overlay selected on your page. It also means if you choose to view your page in a browser with the overlay displayed you can still switch it on or off just by using the inspect tool and selecting the overlay container and clicking the opacity checkbox in .overlayhidden class
Nice job @Rob, looks like a good quick proof of concept for an integrated feature for Pinegrow.
Even as a quick experiment using some images in places and not a complete build with everything, it still shows the benefit to users. It shows the ability such a feature would have for rapid development visualization as well as for design minded people. 
@Pinegrow_User 
I couldnāt remember where the post was about the overlay idea so this seemed pretty close so I posted it here.
Hi guys,
knowing, that Rob is a pro and the theme is not ready to go, I just wanāt to point out the nonsense of the approach rebuilding (or creating) websites on base of an underlying (static) mock-up:
Have a look at the screenshot:
Those things will happen thousands of times if people follow this approach. Not only āempty spacesā but as well side-scroll such as the āvideoā section.
You certainly ask why:
Responsive design is mainly based on the idea of presenting content independent of any device (-width or -dimension) in the world. Its main tools are āmax-widthā or "widths in percentage. Or in simple words:
The four columns below the slider e.g., are each 25% wide and they have equal space (padding). This doesnāt require any ātracing (is it the correct word?)ā, it is simple math.
The slider is the result of assuming, that the correct result is the one you see in PGD - in fact it isnāt.
Until 2011, I would certainly second the need of an underlying mock-up as a good starting point - but today this is definitely somehow redundant. For this reason, I long declared āWhat you see is what you getā as an extinct dinosaur. My new approach is āVCDā. VCD can be read as āWe see designā or to be handled as āVisual Controlled Designā.
Probably you call me pedant - but:
do websites need to look the same in every browser?
Cheers
Thomas
Kudos for Rob creating all the stuff for us. You rock!
@Thomas Iām 100% in agreement with you on trying to use a mock-up (jpeg) and getting it pixel perfect design because web design has changed so much with the use of responsive site. This was a valid enough approach when sites were always a fixed width but those days are gone which isnāt a bad thing. That said I thing for some the approach of having a static design that they can try an work towards recreating makes the process easier, at least for those who are either learning HTML/CSS or maybe even just trying to get familiar with a new program like Pinegrow. Personally I find the freedom of not working to a jpeg or similar makes designing website a far more enjoyable experience.
The reason this is displaying is because I took the lazy approach and just copied the section from the original psd file and inserted the image into the slider. It could be easily corrected by adding the elements correctly, e.g. text for the text elements, properly sized images in the slide background, etc. I might revisit this and try and add each element instead of using png files so it shows it could be done.
Great feedback and all valid points as far as Iām concerned and hopefully youāve added information that will help the debate, Iād love to hear if anyone has a different opinion.
Also very interesting information in the article youāve linked to, well worth a read if anybody has a few minutes to spare they will learn a lot.
LOL.
Likewise they will happen if a person using Pinegrow starts with a blank page and drops the same LIB elements (they would have if they had used a reference image) to get basic structure in place. So whatās the point specific to this approach? That holds true regardless, as simply dropping LIB elements is not the end of the process.
I would assume you have then missed the point? Or have taken Robās self professed āquick & not a lot of effort & used images, etc.,ā example as a finished project, which it was never intended to be. So pointing out shortcomings or drawbacks to this approach seems out of place given these facts.
Using such a method is merely to visualize and get the basic structure in place. Some people (as discussed in this thread) may find it useful to work from a mockup image or image inspiration found elsewhere. In doing so they can perhaps better visualize as they set out to work with Pinegrow and use LIB , PROP , CSS , etc. to get and set the basic structure in place. āBasic structureā does not imply or mean that itās ready to launch and go live as a finished site. Where did anyone state that? A person would still need to add and adjust responsive aspects, breakpoints, media queries, responsive visibility, styling, and on and on, past the basic structure. This holds true regardless if you start with a black page and drop LIB elements to get basic structure in place as well without using a mockup image. Using a reference image is merely one way to help get the structure in place as a starting point (which was already wholly talked about and discussed throughout the course of this thread).
How that is then deemed a ānonsense approachā or any different than not using a reference image, is hard to comprehend.
Pinegrow_User
Interesting, that itās always me having obviously missed the points. I am under the impression having pointed this in my very first sentence. But I certainly may fail.
A workflow in web ideally follows the āKeeping things responsiveā rather than āMaking things responsiveā approach.
So the decision which element behaves how can (and will) be made before adding it.
Iām just talking about workflow - and already said that it is all about content. Written text to be pedant.
So you wonāt start with a āmockupā anyway, but with a good portion of text (comparable to a business plan). The job from now is breaking this long text into smaller parts. Itās about telling a nice and exciting story. And this happens by wrapping all this written stuff into smaller parts. Starting by page-structure, going down to sections breaking it even smaller into articles and so on.
But Iām talking probably more about me - which isnāt obviously asked. So excuse for sharing it - it wonāt happen again.
But if Iām already here, Iād like to show you the direction where Iām coming from:
A good wrap about Enhancing (60min - worth to take the time)
A pretty good article about workflow (probably not as easy as promised)
Cheers
Thomas
Indeed interesting. From what I have seen, much like your FreeWay days you seem to take great offense to things, not sure why? Gosh, get over it, leave the battle scares behind. 
As stated above, simply dropping LIB items onto a page does not result in a final page regardless of forethought or pre-made decisions. So again regardless of using a reference image or not there is much more work to be done past simply dropping LIB items to create stucture. Thatās what is being discussed: āfrom design mockup to full websiteā, thus this approach seems more than applicable as previously discussed. I was just responding to you deeming it a ānonsense approachā and have already explained why it is not.
Maybe your VCD approach will gain traction in 2017 industry wide, right now it seems to be coined by you and only used by you however?
If you make something responsive wouldnāt it then stay, remain, keep responsive? Semantics.
Who says the mockup and final site is or will be static? With page reflow or break points you can swap out different sized images for example. Components or elements will resize the content that can be and when it gets to a certain constraint either stop or swap out content or reposition elements to fit the current screen size or shape.
This is assuming there is text involved or predominate in the design. Many shopping carts and ecommerce sites are predominately images, yes there is text but not like a blog or article. Then you have pinterest and other image focused sites. Video comes into play as well, I have seen ecommerce sites that are predominately videos with buy now buttons to paypal or similar.
Also what happens if you have a dynamic site that changes the type and amount of content based on user interactivity or settings? Did you take that into consideration in your design? What if you are designing a site that has not just categories like blogs but entirely separate sections that have their own design elements or entirely different theme?
Somethings you canāt use Pinegrow especially if you are working with a custom CMS that is mostly code and gets layout aspects from separate include files where you have a layout separated into multiple files then stitched together by PHP or other language. Pinegrow only works with files that have PHP sprinkled in to populate content within a layout and NOT where the layout is generated on the fly by php where php is majority and the visual aspects are few and far between only outputted on page final load.
@Thomas your method is based off of a certain type of content, that being predominately text based.
I can easily create reflowed text without knowing the content, final text, by populating lorem ipsum in various lengths both in visual design editors like Affinity Designer and in Pinegrow but I donāt just work with Text and some aspects are just video or photographs. I need a way to mockup what a site will look like visually and play around with design elements on the fly, what will be photo in the final site and what will be CSS renditions. How much of the headline can I make into text based and what needs to be left as image due to design concerns.
Right now I canāt literally draw in Pinegrow and have wavy lines made and converted to CSS. They were getting there with some Adobe apps but they abandoned them. I want to design visually then take that and make the html and css.
Here is a dynamic example of something I am talking about.
I would need to mock this up visually before I could code it and play with the imagery to see what looks best, I couldnāt sit down and create it using your method. Some of the site I could but not the animation aspects.
What on āIām on the progressive enhancement side of web-lifeā is offending? Do you really know me enough, judging my days back in Freeway?[quote=āTerry44, post:54, topic:359ā]
This is assuming there is text involved or predominate in the design.
[/quote]
Hm - yes and no. Basically itās in either way a question of strong planning. For text, Iād call it storyline - for images and illustration itās better described with storyboard.
But I keep it up: The decision for having a grab into the LIB is ideally already made! Itās like nailing. Your decision is having a nail in the wall. To do so, you need a nail and a hammer (both part of the toolbox LIB).
Terry, - this is a really cool and sweet example. As far as I can see, they solved āresponsivenessā by creating a mobile/touch device version redirect (whatever technique).
Making this as a āone design for all devicesā approach, I have to admit Iād struggle a lot. In better words: Way above my helmet. In fact, Iām not really experienced in animation stuff (did it once just for fun and testing and not css-animation oriented - probably I should try it out (if it is of interest, just for fun: Reginald_Final_Sound on Vimeo ).
In other examples, they solved it by changing the scenery. Keeping the example up, youād change the guy with the āHooverĀ®ā by a guy with āDustbuster ā¢ā. Less space - smaller illustrations, without losing the detail and joke.
All I wanted to say without any offending is, that you need two things to do a website:
A plan and the tools. Storyboard, Stuff, HTML, CSS and (JS)!
Cheers
Thomas
Iād like to think nobody will get offended here so long as it is a respectful debate about the topic(s) on the forum and nothing personal or offensive to any other user. We all have our own way of doing things and its interesting to see others users opinions on how they would approach things. Sure some will be at opposite sides but that might be only on one or two topics yet at the same time they could be united in other topics. It would be a very boring and probably pointless forum if we all agreed
Iāll admit to on occasion starting to write a response to something Iāve read then stopping to take a moment and realise it isnāt going to add anything to the conversation, and possibly distract for what is being discussed, and correctly deciding not to post at that moment sometimes returning later to post a more reasoned reply.
So long as weāre respectful of each other our opinions can differā¦ it makes for a great forum in my opinion.
Ok!
Nowā¦ I fully expect this to be removed, and it is in no way meant to incense, however, it does, put across Thomasā Point about Content is King and effective use of text and planning thereof quite nicely ā¦er, well.
I fully get the other point of some sites being Virtually Image only , but hey!
As its Christmas, so, keeping it Jolly,
People! I give youā¦
http://motherfuckingwebsite.com/
Now I post this merely as its shows some points herein discussed quite well! , and, well, it certainly shows freedom of speech and expression, so, just getting it out there, as some here seem to be getting a little stifled while expressing an opinion.
So, sit back, read, chortle, rage, but at least think about the design principles, it cough mentions so ā¦wellā¦
I donāt hope so!
The āFuckingā example exactly shows, what I meant above:
This page is responsive (as the nature of web always was).
The job from now is keeping it responsive - not making it responsive.
Itās all the hacks of the past (and today) making it static, breaking the responsiveness such as tables, fixed-widths, pixel-perfect mockups ā¦
So thanks for sharing!
Cheers
Thomas
@Thomas, no comment, history and self proclamation can speak for itself on your behalf. Plus nothing to respond too since you gloss over the discussion points.
@Rob, Good points.
@schpengle, that was actually quite funny, and full of valid points regarding the bloated web and UI/UX value to the end user. Amusing delivery of the subject matter.
Phew!
ā¦ so far so good!
and it does make its point doesnāt it?
I think we all are talking about the samething just our own way of going about the planning stage.
Here is an example of mocking up the architecture or the functional flow of the site, what pages exist and how they relate in this case it looks like from the Home Page. Focusing only on the photo on this page and nothing else, I personally donāt go that far in mocking up with string but I do plan things out similarly whether on piece of paper or in design program. It is just another example of ONE WAY of mocking up a site.
https://www.artinstitutes.edu/academics/visual-design/graphic-web-design-degree-programs
You may not do it that way but it is still a valid way, even if āout dated.ā My view is do what works for you if you want to break out the string and ruler and colored pencils to draw out your design and layout then do it. If you want to do it in a graphic design software, do it that way. If you want to do it strictly in Pinegrow then do it that way. Itās about what works for you as long as you get a finished site that eventually goes live.
I sat in a room with a bunch of city employees, here in my city. The city decided to have their website redesigned. The company they hired had the users of the site, the employees and a group of citizens that at some point use the site to get information about goings on in the city or to pay a bill or something. The web design team had 12 sets of index cards, on these cards were the sections of the website. We broke into 12 groups and our instruction was to place the index cards in the order that would be most useful to us as users of the website.
Essentially taking the support, news, complaints form, contact, about us and the individual departments and grouping and eliminating things that were redundant or fit better to each other. Basically taking what was on the site and rearranging it. So you had 12 groups all rearranging index cards to how they would want the departments and sections ordered.
I went to the event to see how a web development / design company with teams of people all working on a website operated. Versus working myself with sometimes outsourcing parts of projects.
In the end this is the site they created.
It is actually harder to find information on this site with this new design compared to the old one which was designed for Internet Explorer as typical government sites are. The employees I have talked to about the new site think it is a disaster and worse than the old site both in look and actually being able to find the sections and information they are looking for. I think they paid $50K USD for the site though I am not sure, just rumor I have heard within the city.
They had a team of ten or so people working on it, the site was over due and came in over budget. I personally donāt like the final design either but this is how it went.
