3MW (Spacing & Sizing with CSS)

Author

Albert Rapp
March 06, 2024

Guten Tag!

Many greetings from Munich, Germany. Last week, we got a whole lot closer to getting a nice looking phone user interface with HTML & CSS. Here’s where we left off last time:

Not so bad, eh? But we still have to stretch out the content a bit. Right now, everything is pretty curled up in the corner. So let’s do that today. But first: time for my regular announcement.

Web Development for R Users

It's a shame that there are only few resources for R users when it comes to web development technologies like HTML, CSS, and JavaScript. Yet, many of our favorite R tools — such as ggplot2, gt, shiny, and Quarto — incorporate these technologies. 🫠 And the thing is: Learning the necessary bare minimum about WebDev can take these beloved tools even further.

So that's why I've decided to create a new YouTube/Blog series about "WebDev for R Users". 🥳 The series aims to introduce the basics of web development while demonstrating how to apply this knowledge directly within R. All videos are available in the following playlist. New videos coming every week:

Like every week (when I don’t forget to insert the URL 😅), you can find today’s code snippets on GitHub.

Where we’re at

Alright, let’s dive into our HTML & CSS Code. Let’s do a quick recap. Here’s what our code looked like last week.

Increasing font sizes

First thing we can do is make everything a bit larger. Let’s simply increase the font size and the font weight for everything in our UI.

Next, let us make the icons a little larger. We can just insert the style argument into the icon() function to do that.

Stretching things out

Now, let’s stretch things out a little bit. Last week, we learned about paddings. These are the CSS way to move elements further into a container. So far, we have used paddings to move all of our text content away from the edges of the phone container.

But now we want to increase the space between containers. That’s exactly where margins come in. You see, just like paddings, margins are a way to move elements around. But while paddings move the content away from the edges of the container, margins move the container away from other containers.

Last time, we used padding and set it to 15px 25px 15px 25px. This sets a padding on each side of the container. But in a lot of cases you only want to change one side. That’s why both, margins and paddings, have a shorthand notation. You can set the padding for each side individually with (margin|padding)-top, (margin|padding)-right,… you get the idea.

Now, let’s work our way top to bottom. We start out with the first row and set the bottom margin.

Next, let us add some space above the cloud icon. Here, we can use margin_top to move the icon further down.

Similarly, we can move down the rows a little bit. Just like before, we apply margin-top to the container that holds the rows.

A bit of horizontal spacing

Nice, we have stretched out things a little bit more. But some of the icons are still too close to each other or to other text elements. That’s why it helps to add some horizontal spacing as well. By now, you will probably have guessed that we can use margin-left and margin-right for that. Here, we only need the first one.

Spacing by font size

Notice how we’ve left the font sizes of the location label and the temperature labels as is. I’ve deliberately done this to show you that font size can also play a role in how much space there is between elements. Here, let me demonstrate that by setting the sizes of these labels.

And for the temperature labels, we will even use individual font sizes for each part of the label. To do so, we can use the inline span tag in HTML. It’s just a tag for inline things like texts and icons. But using this tag, allows you to set a style for each part of the inline text individually.

Well look at that. We have stretched out things quite nicely. All that’s left to do is to figure out how to align things properly. You know, like getting the symbols in the top bar all the way to the other end of the screen. Or getting the cloud icon into the middle of the screen.

That’s easier said than done. So let’s save that for next week. In the meantime, if you want to reach out to me, just reply to this mail or find me on LinkedIn.

See you next week,
Albert 👋

Enjoyed this newsletter and found something helpful? Here are other ways I can help you:

Join the conversation

or to participate.