Designing and coding into columns or gutters of a Bootstrap mesh?

Question

Often, designers project our websites using tools such as Illustrator, Sketch, etc., and designers try to keep in mind the grid that the developer will use to best convey accurate measurements to the developer.

Grids are often implemented in the following order:

• Margin (optional)
• Column
• Gutter
• Repeat 2 and 3
• Margin (optional)

After adjusting the grid in the tool, the developers will try to place the blocks in the grid system, starting from the column and NOT from the gutter. As below:

However, in Bootstrap v3, some elements occupy the width of the gutters, and therefore this may be inappropriate and leads to confusion in the proper design for these websites. In the example below, this is the input to the form. Pay attention to how the entry begins, and includes a 15px slot for gutters (twelve .col-xs-1 with a slot inside to indicate borders are inserted). Codepen link

.col-xs-1, .col-xs-3 background-color: blue .col-xs-1 span, .col-xs-3 span background-color: pink .form-control background-color: black !important` 

However, in my design, I tried to start with a column, as shown below (columns are indicated by a space in GRAY, the columns are simply thin due to responsiveness, but the gutters remain the same size for the iPhone 6 Plus).

I do not understand something? As I design and develop the product myself, I'm not sure how I can get accurate measurements in Bootstrap for these elements that contain the groove in the design, and then develop it in accordance with the design. How do I create a Bootstrap grid when some elements seem to occupy the width of the gutter? Or, conversely, how do I change Bootstrap code so that some elements DO NOT accept the width of the gutter?

TYPICALLY elements accept the width of the gutter? If so, why should designers design from a column?

(PS I know there is a Stack Exchange project, but I feel that this issue may arise due to a misunderstanding of Bootstrap, not design principles)

Answer 1

I see your puzzle.

To really understand the TWBS system, you need to ignore previous training ... the design structure of the gutter-column-gutter, although correct, applies to frameworks like 960gs. This structure is based on fixed-width meshes, where the "columns" set a fixed width based on px. You thought it was your frame.

TWBS is a flexible structure - the main difference is that you cannot fix the width because it is sensitive; the width should scale (“move” as the screen size changes) and, therefore, be based on percentages.

A web layout is a set of columns, for example:

 <div class="container"> <div class="row"> <div class="col-md-*">content</div> ... </div> </div> 

and the columns are indented (both left and right). The frame is thus repeated, padding-columns-repeating.

See the JSFiddle example for an example.

Answer 2

although I'm not quite sure that I understand your question, let me give you some insight that might help you.

Although I have met clients who want their projects to be replicated 1: 1, imho really does not matter if the column is 90 or 100 pixels wide, if it follows the same principles throughout the site and looks uniform.

Bootstrap does not have a gutter between the columns as a field, but as an addition to the columns. That is, each column has a certain percentage width - by default it is divided by the 12th - and inside this column a spacer exists on both sides of the column - by default 15px.

The container of these columns, the row class, has a negative margin equal to the filling inside these columns. Thus, the width of the first and last columns is actually equal to the width of the column minus one padding on both sides of the column, but in the end they end with the width of the parent wrapper container. The negative field and column fill should be determined depending on the GUTTER width you prefer between the columns, for example:

gutter width = strip width width fill width = negative field width

Hope this makes sense.

Answer 3

The thought of adding more answers to the answers above,

A 12-column grid system is the default value of TWBS 3.xx, as well as padding / gutter 15px.

Note: The 12-column system is a proven design that provides the best user experience for working with the screen.

Thus, the design template you used above is clearly intended for bootstrapping. And designers should not stick to this. If they are wrong with that. And if designers want to have a different gutter rhythm other than 15px, for example. 10px. or different column numbers, yet they can generate a custom version by compiling the bootstrap source code. Or the easiest way is to use the customize tool on the site.

Tip: You can remove the gutters using simple css lines if necessary. See below solution

---

Thus explaining the TWBS selector system

• Boot start starts with 100% / 12 column cells
• And then each cell has a 15px left and right

Explaining further

 <div class="container"> <div class="row"> <div class="col-md-*">content</div> ... </div> </div> 

• Starts with class="container" comes with a 15px add-on left and right
• Then class="row" comes with a -15px left and right
• Thus, it flushes the leading and trailing spaces of 15px
• Then class="col-md-*" has the addition of 15px . Therefore, if you put another container inside and change the background color, you can see spaces on both sides.

That is why you see gutters there in your example.

Fast decision,

 .no-gutter > [class*='col-'] { padding-right:0; padding-left:0; }