1

I am a developer and I have a doubt about grid-based PSD files given by a designer. Those files are supposed to fit the standard bootstrap 3 grid. However, I sometime receive this kind of file :

Example of grid-based psd file that I received

The widget on the left side is not aligned with the grid. However, the design is really great and I must do with it. I must use bootstrap too.

How should I manage it ? Is the best solution to modify the bootstrap grid to fit the designer's layout ? Or to use some patch-ups without modifying the standard grid ?

Thanks in advance.

Improve this question
1
  • Depending on if you need support for understanding how to manage the grid visually vs. if you need support to code the visual, your question might best belong in a different community.
    – curious ♦
    Jul 1, 2017 at 17:39

1 Answer 1

Reset to default
1

I'm not sure what you mean by "not fitting the grid", possibly that items are spaced out within the columns instead of lined up perfectly with the guides? It looks fine to me.

The way I would manage this is use the first four columns together to manage the piece with the title and dates and add padding on the left (and other directions according to the design). Then the column of text would be managed as the 8 remaining columns grouped together. I haven't worked in Bootstrap in a while but there are usually CSS classes to decide pinpoint which columns to merge together and if you need an offset, etc.

Improve this answer
1
  • +1 My take as well. It is in line with the grid, 4 left columns. It just doesn't butt against a grid edge, that's all.
    – Scott
    Jul 1, 2017 at 18:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.