Hello,
I usually create a layout in Illustrator before placing the elements on the template and this in order to have a broader view of the work, but I can't establish a grid based on your template

Can you tell me which kind of grid uses the Ecolife template?
I guess the template is based on the Bootstrap framework, so why if I set the width to 940px, I have a width of 1000px on front-end (and there is no difference if the margins are set to 0%)?

Thank you

Hi

Not quite sure what you mean by the type of grid we use - do you mean what framework it is based on?

the template can use bootstrap it depends if its enabled in the settings

1000px wise it would how the site is set up - do you have a link?

Cheers
Paul

yes, on which framework is based Ecolife template if Bootstrap is not enabled.
At the moment Bootstrap is not enabled but it seems that there is a grid that manages the layout…

... and it 's the same with other dimensions: for example if I set the width to 600px, I have a width of 660px on front-end...

No, at the moment the template is installed locally but tomorrow I'll publish in a subdomain and I'll send you a link.

Thank you

The grid is native to the zgfv4 framework its not based on any external framework

When you can add a link I can look at the area that is causing problems for you

Cheers
Paul

... that's what I thought, but then how to know the dimensions of the columns and margins to the zgfv4 framework? Do you have some documentation?

ok, thank you

I think the best way to cover the percentages is to view the css file looking at the demo site its line 2575 and goes down to line 3200

I think a link is the best option

Cheers
Paul

... what I meant by documentation -> if you have a table (like Bootstrap) that indicates the different dimensions of zgfv4 framework grid ?

Hi

It would depend on the responsive settings so I'm not sure it would help

When you have the link I think I will be better able to help you adjust the css or layout

Cheers
Paul

Hello,sorry but I don't understand your answer if I have a grid I could place my items on different screen sizes and thus present the layout to my client ... without a grid I can't see how to build a mock ...

Here you can see my first problem: if I set the width to 940px, I have a width of 1000px on front-end

I have another problem: the kind of menu "Text Separator" doesn't display the sub-menu ... there is a special setting to do in the template options?

Thank you

Hi

If you change this value in your custom css does that work better for you?

.responsive-enabled .zen-container {
width: 80%;
max-width: 940px;
}

Cheers
Paul

Hi

I may be reading this thread wrongly, but are you asking about creating a mockup/comp for a website?

The zengrid framework is based on 12 grid setup in a similar way to bootstrap. Just divide the main container width by the number of grid sector you are using, then add in the gutter. The gutter and container width are set in the framework template admin, either as px or %. The "span" of the module positions is set in the template admin layout but would usually add to 12.

From memory this is controlled in the _grid.less file inside zengrid/..... folder of the template, so you should be able look here to follow the exact setup more clearly. One of the JB team should be able to give you the exact path and confirm.

With this you should be able to setup a grid in Illustrator to craft the layout for presentation to a client. For all intents your bootstrap grid layout will work for you, it does for me!

I hope this helps, of course I may have misunderstood your question in which case I'll leave you back in the capable hands of Paul!

Regards Ian

Thanks Ian

Your help is appreciated

Cheers
Paul

Hello Ian,

...first of all thank you for the interest to my problem and sorry for my english, it's not always easy to explain when you don't speak the same language (I'm italian…) and you are right, I'm asking about creating a grid for a mockup.

Usually I establish a grid for the layout (I use this tool or this one) but this time what bothers me are the percentage of margins, usually for margins I use pixels.

With the tool I mentioned above if I have a width of 1000px I have 3 possibilities of margin: 8px, 20px or 32px but I never get the result that I have with the percentage
How to convert 6% in pixels? I didn't find the information in the _grid.less file, I'm not very comfortable with less file … not yet…

Thank you again

Hello Peter,
No, there is no change, finally I'll leave width to 1000px, it also suits me, but it would be interesting to know why 60px are added to any size that I have fixed...

You forgot to answer to my other question: the submenu (second level) doesn't work if the first level of the menu is a "Text Separator" type (look at "Gara" et "Percorso" menus).

Thank you

buongiorno Lorenzo

I am sure your English is much better than my Italian!

I will try to explain the grid for you.

With the 1000px the 60px gutter is the result of the 6% gutter set in the template framework. The maths are 6% of 1000px equals 60px. So 1000(px) x 6(%) / 100 = 60(px). If you want to use one of your grid calculators from the links you posted you can change the 6% gutter in the template setting to a suitable gutter for your project in pixels. In your case you suggest, 8px, 20px or 32px. If you use these numbers in pixel the JB/zgf4 framework will calculate the grid size, which should then match your mockup design.

Of course the template applies styling across the Joomla website so you will need look at this carefully if you want to produce pixel perfect mockups.

Our workflow uses Balsamiq Mockups (balsamiq.com) to quickly layout and flow a website to clients without the design detail, and I just starting using a photoshop plugin called velocity from dandkagency.com - if mockups are part of your work these might interest you.

For your menu problem - try setting the menu item to "menu heading", that should work for you if I have understood correctly, sorry missed it in your original post.

grazie
Ian

Thanks Ian - you are a star

... vogliamo Ian come Presidente

... your explanations are very clear, so now I know how to proceed, thank you very much.
Remains the problem of extra 60px ... I thought it was from the margins, but it's not because even if I set the horizonal grid spacing to 1, 2 or 3% I always have additional 60 px over the entire width of the template. To clarify if I want a width of 880px I must enter 820px...
If Paul has an explanation to give us ...

Regarding the workflow since I migrated from Fireworks to Illustrator I begin to find my marks, so I prefer to stay with Illustrator, I love this application… thanxxx anyway for links

For the menu problem your settings work!


... ancora mille grazie!

... still problems with the menu it has worked and now it doesn't work anymore ...

sorry I've slightly lost track of what the issue is with the menu

Styling wise there is this on the template

.zen-row {
margin: 0 -30px;
}

Cheers
Paul

Hello,
I don't think it's a css issue but rather a javascript problem
I've tried with a "Text Separator" menu type and then with a "Menu Heading" menu type and the problem is always the same: the submenu is not displayed...