I noticed that i am struggling with the problem when i am trying to convert a PSD to HTML/CSS pixel perfect (atleast almost). I really hope that somebody can give me for once a good answer… and point me for ever to the right direction because this is really bothering me and can’t get over it.
1st question:
When i have a button (see photo) which is 154 wide and 50 px heigh… i would usually… use the same width and height… however i noticed no body is using it exactly in pixels but instead use PADDING? But here comes to problem… when i use the padding… correctly the button gets twice as big… can somebody tell me with a simple CSS code how you would do this? (Is it possible to create CUSTOM COLUMN width)?
2 question:
The section is 167px heigh… i would do the same and apply the height in 167px… but i’v noticed that when i resize the browser it looks awfull… (PS i am using twitter bootstrap)… how would i do this using padding… or something else to do it the correct way?
3 question:
I am using Twitter bootstrap, the website container is 1170px including gutter width. So you have the BOX container at the right with a button and left the text… i am using 2 COLS one of 7 and second of 5… but the problem is it’s not the same width like in photoshop… how i can solve this once and forever?
Can somebody please reply… and learn me this trick so i can beat it once and forever.
If I understand what you are asking then in the normal box model padding and borders are added to the dimensions to arrive at the overall size therefore if your button is 154px x 50px and you want 10px padding then the dimensions should be 134px x 30px which will give you a total button size of 154px x 50px.
If you are supporting ie8+ then you can use the border-box model instead where padding and borders are added inside the dimensions and you can create your button at 154px x 50px and just add padding and borders as required without the overall dimensions changing.
Avoid fixed heights on columns as that won’t allow them to grow when resized when used in a responsive layout. If you need an initial height then use min-height instead but most times just let content dictate the height. If you are looking for equal column effects then use the display table and table-cell properties instead.
The first thing you should know is that a PSD design can only be a ‘hint’ of what a design will look like on the web. A PSD is a drawing in a paint package and a browser is neither a paint package or a drawing. The web has no edges unlike a piece of paper so the same rules don’t apply.
Bootstrap isn’t suited for PSD conversion unless the PSD was designed with bootstrap in mind which means you need a designer with a knowledge of bootstrap to have designed the PSD. An experienced coder can turn PSDs into bootstrap sites but you usually end up fighting the grid rather than utilising it. If using bootstrap I tend to avoid using the grid classes and create my own structures when converting a custom psd design. That allows me to use all the other features of bootstrap but to create custom containers that suit the design in hand.
In the end its just css and for one off psds frameworks often just get in the way. Most of my work is PSD to html conversions (I did about 200 conversion the other year) and unless its a requirement I would not use a framework.I can code a custom PSD in a day anyway which is usually the time it takes someone to set up their working space with framework, Sass and whatever else bunch of tools they think they need.
For larger projects frameworks are useful but for one-off smaller projects they just get in the way and slow you down unless you are geared towards them from the start wiuth designs that suit that framework.
You need to come out of the grid for custom elements and create your own. As I said above some designs just don’t fit into the grid. You also need to remember that although the PSD shows a fixed width you should be designing fluid anyway. A PSD is a hint of how the design will look at the width shown and should be used as a guide and not a rule.
