Style-facts part4
Responsive design was a buzzword a few years ago and now it is expected to be the fundament of every self respecting website. But since it is a purely styling concept we see many developers struggling to implement it. This is a guide to the basic concept and mathematics behind responsive design grids.
We need to make the site responsive, let's use bootstrap… Well if you put a class here and there it kind of aligns. But what is this 'row'-class and why is it breaking my design? Wouldn't it be cleaner to only use a grid?
Well… Yes. It would be and there are some options: You can use alternative grids to bootstrap (which is way more than you need) like 'Susy'. Susy provides a more clean and nowadays more efficient way of defining your columns per device. Although the documentation isn't that clear the examples are pretty explanatory. The other option is to write it yourself. Which could be a nice exercise to get into SCSS mixins and media queries. I will explain the grid by walking you true a 12 column grid. This is the most commonly used.
Why might one ask? This has a practical reason. 12 can be divided by 12, 6, 4 ,3, 2. These splits are a huge advantage when you are trying to split up your page in different ways for several window sizes. If you don't have to switch between grids that even more of a plus. You can occasionally use a 10 column grid, for instance when you have a 5 column layout. This might be the only exception not to use a 12 col grid.
Responsive design: Columns and Gutters
In a 12 column grid, your grid has 12 columns. I here you thinking: 'Well yes... it's called a 12 column grid, duh...'. I say this because it's often mistaken that the grid would vary on smaller devices. This is not the case. On tablet the grid has 12 columns and the grid on mobile phone has 12 columns too. Only difference is that width of the screen is split fewer times. The number of columns stays the same.
Let me give you an example. We have a set of cards on phone, tablet and a desktop screen. By default the card is the full 12 columns. That's 0 splits. Why? Because we design mobile first. This is best practice. Besides that, you can imagine it is easier to give things more room, then squashing more stuff in less space. That's why we start designing on the smallest screen. The card might use half the screen. It's one split into 6 columns and 6 columns. Finally we split the width again as we make cards that are a quarter of the width.
Gutters
We don't always want the card to be x the column width. This would mean that if you place multiple cards next to each other they would look stuck together. We wouldn't want that and that's where grids gutters come in. The gutter width defines the space between columns.
Columns with a gutter can be calculated by:
c = number of columns
g = gutter width(100% / 12 * c) - (g / 2 * 2)
Why the / 2 * 2? Writing down only 'g' might confuse some of you when there are gutter on both sides of the column. The column next to it has the same thing. So the actual gutter width is a half gutter. This makes the equation some what deceiving when only writing down '-g'. That said, we might have encountered an issue. When placed in a row our gutter provide us with the problem that the outer gutters misalign our grid with the object that are full width above and following or grid.
Gutter Correction
To fix this the complete grid equation is (when using 2 cards stretching a number of columns) this:
c = number columns
g = gutter width((100% / 12 * c) - (g / 2 * 2) + (100% / 12 * (12 - c)) - (g / 2 * 2)) - g
We remove the outside 2 half gutters. Bootstrap fakes this by giving it's container '.row' a margin-left and margin-right of -(g / 2)px. My personal opinion is that this is not a clean solution to the problem. I would suggest a removal of the left margin on the first card-column and a removal of the right margin on the 2nd / last column. In a more than 2 column situation my solution would cause a slight inexact split. This can be solved by redistributing the width gained by the first and last column over the columns evenly.
It's a choice between complexity and best practice.
Classes? Mixins?
The 'c' in the equation is the number you might recognize from the bootstrap class 'col-xs-6'. the 'xs' is the media query where the size '6' applies. So if we wanted to make a mixin for this it could look something like this:
$gutter: .5rem;
$cols: 12;
$media: (
xs: 512px,
sm: 768px,
lg: 1024px,
xl: 1200px
);@mixin column($cols, $gutter) {
@each $name, $value in $media {
@media screen and (min-width: $value) {
@for $i from 1 through $cols {
$width: calc((100% / 12 * $i) - ($gutter));
.col-#{$name}-#{$i} {
width: $width;
margin: 0 calc($gutter / 2);
}
// add push/ pull function for indenting and pulling column where you see fit. It's a little advanced for this chapter ;)
// disclaimer: this mixin might need some tweaking.
}
}
}
}
You now know how a responsive grid is used and calculated. A grid is the same on all devices but the span of your card-column over a number of grid-columns may vary. Adding gutters between your columns makes your design look a lot nicer but it has it's downsides and complexities. It is not as hard as it look to define your own grid. If you find it to complex to make a responsive grid yourself, there are options like 'Susy'. These standalone grids provide a good alternative to using bootstrap for a grid alone. Thanks for reading this column! And if you have questions or comments, please leave them in the comment section or in my mail :).
Want to know more about styling? Read the other blogs in this series about styling:
Part 3: https://www.mavention.nl/blogs-cat/3-levels-of-css-selectors-to-select-all-elements/
Part2: https://www.mavention.nl/blogs-cat/shaping-elements-and-its-surrounding/
Part1: https://www.mavention.nl/blogs-cat/2-basics-you-need-to-know-to-position-elements/
