- This topic has 7 replies, 2 voices, and was last updated 4 years, 7 months ago by Tom.
April 5, 2016 at 6:51 am #184346Samuel
I sometimes need to turn an existing design (given to me as a Photoshop file, usually in a 12 column grid) into a WordPress site. And I’m wondering if GeneratePress would be a good fit.
More specifically, I’m wondering how to go about it to
– set the right content width (sum of main columns and sidebar column)
– set the right widths for main column and sidebar column.
It seems GeneratePress uses Unsemantic Grid, but it is unlikely that the grid dimensions exactly match the Photoshop column widths. So what are my options?
April 5, 2016 at 12:09 pm #184456TomLead DeveloperLead Developer
- This topic was modified 4 years, 7 months ago by Samuel.
I used to do the same kind of work. The Unsemantic Grid is great because it’s responsive, but it uses percentages so you won’t get things to be pixel for pixel as in the design.
However, depending on the design it shouldn’t matter too much and you should be able to get quite close.
You can use pixels in a grid system, but you’ll run into issues when it comes to responsive design.
Let me know if you need more info 🙂April 5, 2016 at 2:20 pm #184493Samuel
I’m ok with percentages, as I’m familiar with the way Bootstrap and Foundation work (I personally use Sass with Susy). With these grid systems, I can input the number of columns, the column width, and the gutter width, and I get all the css classes automatically generated (in percentages). After that it’s easy to add the corresponding classes when looking at the psd image file simply by counting the number of columns.
On the other hand, I’m a bit put off by Unsemantic grid, as it works differently – in steps of 5 percent. It doesn’t correspond to a twelve grid system.
I guess I’ll just have to try it out and see how it works, making approximations and maybe playing with padding to get it just right.
Thanks.April 5, 2016 at 8:56 pm #184556TomLead DeveloperLead DeveloperApril 6, 2016 at 2:01 am #184597Samuel
To do that I would:
1. Add the css of the grid system – with enqueue in the child theme, or using a GP hook, or with a plugin.
2. Add the necessary css in the content columns – how do I do that? Copy page/single.php from the parent into the child theme, replace the generate_content_class with my own classes? Or is there a way to add custom classes to the GP classes?April 6, 2016 at 10:41 am #184718TomLead DeveloperLead Developer
Ah, you want to replace unsemantic, not just add the 12 grid system within your content.
In that case, it’s a little harder, but do-able if you have some PHP knowledge.
2. You would use these filters (at the very bottom): https://generatepress.com/knowledgebase/filter-list/
With those you can remove/add classes as needed.
It might be easier just to use unsemantic for the overall layout, and use the 12 grid system within the site.April 6, 2016 at 11:17 am #184749Samuel
OK, thanks a lot.April 6, 2016 at 11:42 am #184759
- You must be logged in to reply to this topic.