So far, we explored one of the key critical elements of responsive design, in the form of how we would set our available screen estate (or viewport)—as someone once said, it's time...
Absolutely—it's time we cracked on and explored how grids operate! The trick behind grids is nothing special; it boils down to the use of a single formula to help define the proportions of each element used in our layouts:
target ÷ context = result
Let's imagine that we have a layout with two columns, and that the container (or context) is 960px wide (I will use pixel values purely to illustrate the maths involved).
To create our layout, we will make use of the Golden Ratio that we touched on in Chapter 1, Introducing Responsive Web Design; to recap, we use the ratio of 1.618 to every 1 pixel. So, if our layout is 960px wide, we multiply 960 x 0.618 (the difference)—this gives 593px (rounded down to the nearest integer). We then simply subtract 593 from 960, to arrive at 367px for our side column. Easy, when you know how...!
At this stage, we can convert these to percentages; 593px becomes 61.77%, and the side bar will be 38.23%. Let's translate this into some sample CSS, with values rounded to 2 decimal places:
section, aside {
margin: 1.00%; /* 10px ÷ 960px = 0.010416 */
}
section {
float: left;
width: 61.77%; /* 593px ÷ 960px = 0.617708 */
}
aside {
float: right;
width: 38.23%; /* 367px ÷ 960px = 0.382291 */
}Here, our target is the aside (or sub-element), with context as the container; in this case, we've set it to 960px. The section forms a second target; in both cases, we've divided the target by the context to arrive at our result. As our result figures need to be expressed as percentages, we can simply multiply each by 100 to get the figures we need.
The observant among you will note the presence of margin: 1.00%. We must allow sufficient space for our margin, so the resulting figures will need to change. We'll keep the section width at 61.77%, so our margin will need to drop down to 34.23%, to retain a full width of 100% (this allows for the two margins each side of the two sub-elements).
If we carried this through to its conclusion, we could end up with something akin to this screenshot, as an example layout:
Okay, let's move on. I feel it's time for a demo! Before we get stuck into writing code, there are a few pointers we should take a quick look at:
- Although we've only scraped the surface of how grid layouts work, there is a lot more we can do; it will all depend on how many columns your site needs, whether the columns should be equal in width, or be merged with others, how big the container will be, and so on.
- There are dozens of grid layout frameworks available online. Before getting into designing and creating your own from scratch, take a look at what is available; it will save you a lot of time!
- Keep it simple; don't try to overcomplicate your layout. You may read stories of developers extolling the virtues of flexbox, or that you must use JavaScript or jQuery in some form or other; for a simple layout, it isn't necessary. Yes, we might use properties such as box sizing, but flexbox-based grid systems can become overinflated with CSS.
With this in mind, it's time we got stuck into a demo. Before we do though, there is something we need to cover, as it will become a recurring theme throughout this book:
We will avoid the use of JavaScript or downloading libraries in order to create our demos. Yes, you heard right. We're going to attempt to use nothing more than plain HTML5 or CSS3 to construct our responsive elements!
The reason for this is simple—I maintain that we've become lazy as developers, and that sometimes it is good to go back to basics and really appreciate that sometimes simple is better. You may hear of singers who want to get back to their roots or where they started from; we're simply applying the same principle to our responsive development. It does mean that we can't always use the most feature-rich, or latest version, but that isn't always a bad thing, right?