[Resolved] Custom widths columns (PSD to WordPress)

[Samuel]

Hi,

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?

Thanks

• This topic was modified 8 years ago by Samuel.

[Tom]

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 🙂

[Samuel]

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.

[Tom]

You can always integrate a 12 grid system into GP – shouldn’t be difficult at all 🙂

[Samuel]

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?

[Tom]

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.

1. Correct.
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.

[Samuel]

OK, thanks a lot.

[Tom]

No problem.

[Author]

Posts