Black Friday Sale! Get up to $40 off GP Premium!Learn more

[Resolved] Custom widths columns (PSD to WordPress)

Home Forums Support Custom widths columns (PSD to WordPress)

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #184346
    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 4 years, 7 months ago by Samuel.
    #184456
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #184493
    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.

    #184556
    Tom
    Lead Developer
    Lead Developer

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

    #184597
    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?

    #184718
    Tom
    Lead Developer
    Lead 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.

    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.

    #184749
    Samuel

    OK, thanks a lot.

    #184759
    Tom
    Lead Developer
    Lead Developer
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.