3MW (CSS Keywords you need)

Author

Albert Rapp
February 28, 2024

Guten Tag!

Many greetings from Munich, Germany. Last week, we started to build out a phone-weather-app lookin’ user interface with HTML & CSS. If you recall, here’s what we’re going for:

Of course, if you remember where we left off last week, you might recall that we are not quite there yet. Here’s what we ended up creating last week, doesn’t quite have the same visual appeal, does it? 😂 

But don’t despair. We already set the stage for a whole lot of visual goodness. You see, we already

  • structured out the user interface with HTML and

  • we learned how to insert style with CSS.

All that’s left to do is to add icons and learn the right CSS keywords to make things look nice. But before we do that, time for my latest video.

Diverging Bar Charts

Ever wanted to recreate a fancy chart from the news? 🤔 With {ggplot2} you can. 🥳 Case in point, my newest video shows you how to recreate a fancy diverging bar chart from the PEW Research Center.

This video is also part of my ggplot remakes video series where I give you step by step guides on how to rebuild elaborate charts that I find in the wild. And if you enjoy these kinds of videos, I am certain you will also love my dataviz course because it contains a whole lot of these step-by-step guides. Great resource (even for advanced users) for getting to know all kinds of ggplot2 tricks.

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.

The right way to add CSS instructions

As you can see, we inserted a couple of CSS key-value pairs as a semicolon-seperated list into the style attribute of the outermost div container. And inserting CSS as a long text string works in a pinch. But it’s not exactly nice.

Imagine if you had 20 key-value pairs. That shit is messy. Pardon my french. But that’s just really what it is. It’s shit that no one wants to deal with. So instead, you can untangle everything by using the css() function from {htmltools}. That way, every key value pair can go into one new line. How nice is that!?

Style the outer container

Now that we have a nice function to handle all the CSS key-value pairs we can think of, let’s actually throw some into the mix. Let’s start with three basic ones:

  • background: We already used this one but now we set it to CSS’s linear-gradient function to get a subtle 45 degree color gradient between two blueish colors.

  • border: To make the div container look more like a phone, we need to add a frame. That’s what the border keyword does and it needs to be set to three values: width linetype color.

  • border-radius: You want to get a nice rounded-off container. We’re going for a phone- and not a brick-look.

Subtle differences in R and CSS

Notice that my text tells you I want to change border-radius, yet my code sets border_radius (with an underscore). That’s no accident. You see, in R the minus is a special character and R would think that it has to subtract radius from border if we’d use border-radius. Silly R.

That’s why the css() function lets you use the version with an underscore. The output of that function will of course use the proper CSS keyword with a minus.

Font and its color

Next, we want to make sure that all texts in the container turn white. Also I like to use the font family “Source Sans Pro” because it looks nice. The CSS keywords for all of that are pretty straight forward:

Technically, one should always use multiple fonts in the font-family keyword. Otherwise, if a user doesn’t have that particular font installed, than your UI might look weird for your user. But let’s just go with this for now.

Spacing

Next, let us ensure that our text isn’t so close to the outline border. The way to do that is to add padding to the outermost div container. This CSS keyword can be set differently on all four sides. That’s why it can accept 4 arguments.

There is also a keyword called margin. It’s very similar to padding but I can’t go into the details here. I’ll give you more explanations on that next week. Also, watch out for more thorough explanations in my “WebDev for R Users” Series (Premiering tomorrow 🥳) For now, let us make our phone look nicer.

Icons

Adding icons is incredibly easy. All you have to do is to use the icon() function from the {shiny} package. For example, you could find a whole bunch of icons from the FontAwesome website and use these icon names as argument for the icon() function.

Pretty easy, isn’t it? Good idea to stop today’s newsletter on this high node.

Next week, we can work on stretching things out a bit. This will bring us into the worlds of margins and paddings and maybe even displays. 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.