Typical mesh error (Bootstrap Grid), or why the designer and layout designer do not understand each other
Did you encounter a situation where the text and blocks that fit perfectly in a photoshop layout for some reason stubbornly do not want to obey in the layout - do not fit in the width specified by the layout? At the same time, both the designer and the layout designer use the same grid, for example, the grid of Bootstrap 3.
After reviewing a significant number of sites, they came to the conclusion that among the designers and layout designers there was a banal mistake.
The bootstrap grid, as a common example of a grid, establishes a 12 column layout, which on screens from 1200px or more has dimensions between columns 30px and lateral indentation content 15px left and right. Given that the width of the columns by the designer is given in pixels, and the layout designer - in percent, the error described below is not immediately noticeable.
How does the designer work with the grid? Usually this grid is generated by a service, downloaded and installed in Photoshop. How does a web designer work with a mesh? The grid is taken from the Bootstrap 3 framework.
Then what’s the problem if the grid sizes (columns and spacing) are the same?
The essence of the problem lies in the convenient CSS-property "box-sizing" with a value of "border-box", which is set by default in the bootstrap. Because of this, the designer considers the width of the indentation in addition to the width of the content (1170px plus the side margins of 15px on the right and left), and the layout designer, without knowing it, includes them in the width of the content (1170px, including the side margins of 15px, ie content width is 1140px). Thus, it turns out that in the project at different stages they use two different grids, the layout of which is narrower.
This error is encountered when using other grids other than Bootstrap. Apparently, it originated with the advent of the "border-box".
The solution is simple - adjust the size of the container: "container {width: 1200px;}" (1170px - content plus 15px indents to the right and left). It is also necessary to make an appropriate adjustment of the container by the amount of side indents for the screens of other resolutions.
It seems to me that it does not make sense to argue about who is responsible for correcting the error. It will be a good tone for the designer to clarify this question with the layout designer, and for the layout designer to keep in mind this particular feature of using the “border-box” for the grid. Correcting a bug in a common framework will also increase the number of sites that strictly correspond to the design.
After reviewing a significant number of sites, they came to the conclusion that among the designers and layout designers there was a banal mistake.
The bootstrap grid, as a common example of a grid, establishes a 12 column layout, which on screens from 1200px or more has dimensions between columns 30px and lateral indentation content 15px left and right. Given that the width of the columns by the designer is given in pixels, and the layout designer - in percent, the error described below is not immediately noticeable.
How does the designer work with the grid? Usually this grid is generated by a service, downloaded and installed in Photoshop. How does a web designer work with a mesh? The grid is taken from the Bootstrap 3 framework.
Then what’s the problem if the grid sizes (columns and spacing) are the same?
The essence of the problem lies in the convenient CSS-property "box-sizing" with a value of "border-box", which is set by default in the bootstrap. Because of this, the designer considers the width of the indentation in addition to the width of the content (1170px plus the side margins of 15px on the right and left), and the layout designer, without knowing it, includes them in the width of the content (1170px, including the side margins of 15px, ie content width is 1140px). Thus, it turns out that in the project at different stages they use two different grids, the layout of which is narrower.
This error is encountered when using other grids other than Bootstrap. Apparently, it originated with the advent of the "border-box".
The solution is simple - adjust the size of the container: "container {width: 1200px;}" (1170px - content plus 15px indents to the right and left). It is also necessary to make an appropriate adjustment of the container by the amount of side indents for the screens of other resolutions.
It seems to me that it does not make sense to argue about who is responsible for correcting the error. It will be a good tone for the designer to clarify this question with the layout designer, and for the layout designer to keep in mind this particular feature of using the “border-box” for the grid. Correcting a bug in a common framework will also increase the number of sites that strictly correspond to the design.