PSD to bootstrap - please advise about keeping HTML same as big PSD

user_1301973 0
Viewed 66

A very picky designer is building a PSD with ~1900px.

The client requires that when the website is open on desktop, it must look the same as PSD. This is the only thing that they care for or the client will not approve the website. PSD is not being built with a bootstrap grid.

My question is:

1 - How can I begin to translate a 1900px PSD with Boostrap?

2 - I'm thinking of 1 approach: To build the website with a full width (.container-fluid) and add left and right spacing, so that the website will look the same across all desktop resolutions. I mean without limiting the page width.

Please any other advice is totally ok. I don't want to loose my job.

twitter-bootstrap css html
2 Answers

You can customize breakpoints $grid-breakpoints and $container-max-widths

@import "bootstrap/functions";
@import "bootstrap/variables";

$grid-breakpoints: (
  xs: 0,
  sm: 600px,
  md: 800px,
  lg: 1000px,
  xl: 1900px
);

$container-max-widths: (
  sm: 600px,
  md: 800px,
  lg: 1000px,
  xl: 1840px
);

@import "bootstrap";

Check documentation here for more details: https://getbootstrap.com/docs/5.0/layout/breakpoints/

user_163973140

(I'm aware that isn't a technical answer and may be considered off-topic, but it's too long to post as a comment, and I believe it's important.)

To be honest: This sounds like a nightmare.

Are you/your boss/your client aware of, or have been made aware of the problems this approach could lead to? For example, that it probably won't be usable on mobile devices. Or that it could lead to accessibility issues (which may even have legal consequences!)

You also really need to nail down what "look the same" means. For one, different browsers, operating systems and user settings always lead to differences, which can't be avoided. Also, what happens when something needs to change, but the layout doesn't support it? For example, longer copy text or a new main menu item, that doesn't fit.

It seems like every one maybe in over their heads. Alone the fact that PSD is not the right tool nowadays to design a web page (except maybe for the first drafts) seems to demonstrate that.

You may be caught between a rock and a hard place. If you build the site exactly like the design, but it then breaks due to its inflexibility, then the client may blame you, but if you make the site more flexible at the cost at some differences in the design, then the client may not accept it.

Your question seems to indicate that you may not be ready for the pitfalls of this task. It sounds like the design isn't suitable to implemented with Bootstrap (or at least Bootstrap won't make it easier than just doing it without). And if you knew enough about CSS to do it without Bootstrap, then you wouldn't need to ask this question, because you'd know enough to modify Bootstrap yourself.

The best advice I can give is: Make sure all communications with the client are written down (and not only verbal agreements), and ask your boss/the client a lot of questions so that all details are clear (again in written form).

user_3184930
Related