Hm - yeah! It might be always the case, that we don’t understand each other just because of my pretty mediocre english (I’m german - just for protocol)
We are not used to know each other so it’s hard to judge things anyway. But to get used to each other, it would be fine if you could post an example of your previous work. “Code” is much more international and static widths are scaring me.
Cheers
Thomas
No worries.
I think it would be great if we could share code with each other and learn from real examples. Is there a section of the forums where we can do that?
When I get more into Pinegrow and buy it here soon I am sure I will have questions in which case I will share code samples. I am in the 7 day trial now as I installed it earlier or last night I think. I am going to be watching the video tutorials again to learn more on it and experiment directly in it.
One question I have is can we rename the code sections and everything still work? I don’t like calling the container div or section “container” I prefer to name it different, I have my own naming conventions. If I do that will things stop working especially the bootstrap framework? I personally don’t use frameworks all that much but if Pinegrow is built to easily work with it then I may start using that in my projects.
I would call this classically “URL” - a link to a live-example. This is the site of my main client.
I’m not earning my living with graphic design - I do it behind my job. Mainly for him to be precise. It has been done in FreewayPro - the editor of my choice the last decade (unfortunately retired).
Ah - you can give it an ID or class name up to your liking. But a DIV is a DIV and a Section is a Section or cody spoken:
<div class="my-name-whatever">
<p>Some content</p>
</div>
or
<div ID="My-unique-name-never-appears-twice-on-the-same-page">
<p>And certainly some content here as well</p>
</div>
Cheers
Thomas
[quote=“Terry44, post:17, topic:359”]
Using a graphic design software like Photoshop, Fireworks, Affinity Designer or whatever you can use Lorem Ipsum text for filler text content and various image blocks to represent components like carousel galleries. tabbed boxes, buttons etc…[/quote]
@Terry44 ,
This may sound silly, but one option you could try for using a visual mock-up as your starting point in Pinegrow would be design your mock-up in any of those programs you mentioned at a desired desktop size (like your 960px preference etc.,). Save your mockup design as an image with a ghosted overlay (white/grey/etc.,) or as a semi-transparent .png , enough that it wont be dominate or conflict to visually design over.
Then once you have your mockup image, in Pinegrow go …
Page > Edit Code > style.css
add the following code:
body {
background-image: url("yourMockUpImageHere.jpg"); /* reference to your image */
background-repeat: no-repeat;
background-size: cover;
}
Now you can use Pinegrow to design over your mockup image using LIB , PROP, CSS , etc.,
Once your have your structure items in place to match or simulate your mockup image, you can now delete the code for the body > background-image and carry on with your coding, adding the responsive aspects, etc.,
I would be curious to know if this will help your efforts of working from a mockup.
@Pinegrow_User nice one, I think that’s an interesting idea.
It may be nice to have it as a feature via the UI or something similar on another level under the page. Have it so the user can chose and set a mockup / design image, the ability to toggle it on and off, set the opacity or overlay color, and delete the image as well.
Just an idea, see what @matjaz thinks. 
I also like the idea of a grid system overlay (like in the older thread) to toggle on and off via the UI.
What I did was create a div in the body of the page and using the eye in the code list on the right, for me it is on the right I turn it on and off. You can also set transparency on the img or div via css too if you wanted.
Problem with setting it to the Body tag is that if you wanted to temporarily hide the image you can’t because it would hide the whole page.
Yes, I was thinking changing DIV’s to HTML5 based tags where appropriate like Article, Section, Nav, aside etc…
If I changed the id’s and classes to my own names I didn’t know if the Bootstrap stuff would still work if I was using bootstrap, will experiment with it and see.
@Pinegrow_User maybe this might be of help, it was a very handy addition that I had in me list of tools for web design: PixelPerfect
This is nice, isn’t just for Chrome either.
@Terry44, it was just a basic example ideal for your mockup image workflow desires. But yes using a DIV allows for more manipulation and features via CSS and the current UI.
If it was to be an actual feature as previously hinted at …
Then it could be hidden from the user in the page tree, much like the “actions bar” etc., is on page items. Instead only accessible via it’s UI controls, and not directly by the user like a typical page item. I think this type of feature is also something that could help designer types better visualize as they set out to work with Pinegrow and use LIB , PROP , CSS , etc. Then as they add LIB items and change CSS properties they would begin to understand visually how those features work (by visual trial and error with their designs), in Pinegrow to accomplish their design and see visually the outcomes of those manipulations in comparison to their designs. After a while they would be less reliant on the underlying mockups and more in tune with the features and what needs are required.
Could be useful for some peeps. [ Feature Request - consideration @matjaz ]
@Pinegrow_User I’ve added a link to your post in the Feature Request category! Hope you don’t mind.
I don’t mind at all @Rob. Anything that can make Pinegrow better, I am all for. 
Maybe nothing will come of it, but it’s worth a consideration at least if it may help certain users, given the feature idea is simple enough.
Hi Terry,
not sure if it is already answered, but if you want to use a framework, you need to keep up framework’s dingus. So changing Tags shouldn’t be an affair - changing class names will be though.
Cheers
Thomas
Yes - just be careful about messing with the default framework. You can remove classes from certain elements and control the element with your own style sheet/class but in my early days of experimenting with bootstrap, i edited part of the default bootstrap framework, causing complete havoc with the column layout!
You can actually create your own custom bootstrap framework http://getbootstrap.com/customize/
That is my plan for when they decide to release bootstrap 4.
Actually I may do that soon as it will speed up the process when dropping in components.
Here’s a very interesting article about designing a website and the considerations involved.
I skimmed the article. The wireframe mockups I was doing in Fireworks but now I use Affinity Designer though I also do physical mockup magazine style where you have physical mockups on paper and collage form where I move things around on a table to get ideas and see what fits and doesn’t. Then I take that into Designer and mess with colors and final placement. Though the end my workflow seems to be similar to that article maybe minus the physical part, I just skimmed the article so missed some things.
Yes, I also have multiple images in the “Design DIV” so I can look at aspects of the proposed layout and not either or thing with one image only. Also the pixel perfect design feature mentioned in another thread would be perfect in this process too. Have the ability to move around as many images as you want instead of one at a time it seems with the browser plugin.