A few util CSS tricks

Let’s discover some CSS tips and tricks!

This article is also available on Medium.

When you work as a web programmer, you often need to worry about the style of your pages just as much as their structure or dynamics. So you definitely need to have some CSS knowledge, and a few tricks up your sleeve!

Today, I’ll share a few tips I’ve learnt over the years for common tasks in web development light light/dark themes, grid displays or responsive media queries.

Let’s dive in! 😉

Trick n°1: Applying a light/dark theme

A very common feature of websites is the ability to switch between a light and a dark theme. This is a way of letting your readers experience your content in the best possible way no matter the time of day!

Usually, creating a theme switch involves defining some stylesheets with tokens and CSS variables (I’ve talked about this in more details in a previous article) and then having some trigger toggle a property in your HTML to indicate which set of variables to take.

Let’s say we have the following variables:

And we create a basic layout that uses those variables:

At this point, this layout is agnostic to the exact colours (the low-level tokens), it only knows about the higher-level variables. And so, it could technically use a light or a dark theme… but there is no way of specifying which one is in use!

To add this info, we can set a data-theme property on the <body> of our page, and refer to this custom property in our CSS to differentiate between the two themes:

Finally, all we need to do is add some interactable element in the page to toggle the theme, and write a bit of JavaScript to change the value of our data-theme property:

If you run this script in a browser, you’ll see that we have a very basic light/dark theme switch process 😉

Trick n°2: Getting (explicitly) responsive!

Nowadays, websites and apps aren’t limited to desktops anymore. As we’ve gotten used to bringing the net with us on the road or in the subway, devs have had to adapt their process to take this variety of devices into account.

This idea that a website may handle different screen sizes, multiple resolutions and even various operating systems is called responsiveness.

As new features are added to the CSS and JavaScript languages, it is becoming easier to create responsive content. On the one hand, display styles like flex or grid automatically update the size of the contents to match the device size; on the other hand, it is also possible to explicitly define styles depending on the current layout.

This can be crucial when you want to display specific elements on your page on desktops, and others on mobiles. The burger menus we have on most websites are a good example: on desktops/tablets, you’d get a full-fledged horizontal collection of labels, whereas on mobiles you’d get the compressed openable version:

In other words, we want to have context-specific styles: parts of our stylesheets should be used on mobiles, others on tablets, others on desktops.

This is done using media queries. These media queries can check lots of parameters: the size of the screen, the current orientation, whether it’s fullscreen, the type of display (screen or print)… and so they can actually help you separate your stylesheet between way more than just mobile/tablet/desktop.

But let’s stick with this simple example for now.

To make a phone/tablet+desktop separation of your styles, you need to use media queries that check the minimum and maximum width of the screen. And you check those against common breakpoints, which are specific values that are known to be the usual sizes of phones, tablets or desktop screens. You can find many references online, here’s a list from LambdaTest:

  • 320px — 480px: Mobile devices
  • 481px — 768px: iPads, Tablets
  • 769px — 1024px: Small screens, laptops
  • 1025px — 1200px: Desktops, large screens
  • 1201px and more —  Extra large screens, TV

To implement these in your CSS, all you need to do is use the min-width and max-width parameters, like this:

Then, as soon as you resize your screen or go to your site on a smaller device, you’ll see that a different part of the stylesheet is used and other elements show on the screen:

Trick n°3: Creating a header-content-footer layout

When you take a look at the various websites that are around, lots of them are built with similar layouts:

  • at the top, you have a header with the site identity, menus and other high-level info
  • then, below, you have the content of the page
  • and finally, at the bottom, you have a footer that is more or less dense with data, but usually provides the reader with some secondary navigation and/or the site credits

The fact that many websites follow this trend is no surprise! It’s a well-known principle in UI/UX design, often stated as Jakob’s Law: “Users spend most of their time on other sites”. So, obviously, they should feel comfortable with your website enough to navigate around and this means that your layout should be a familiar one.

Ok now – how can we create such a design with HTML and CSS? It’s actually pretty quick to do, and only takes a few lines to get a cross-browser responsive solution!

The trick is to rely on a grid display. This grid layout is sort of a cross-over between the flex display and tables: you define rows and columns, or regions, but you can then arrange them in highly customisable ways to have the containers and children fill your page and fit your needs exactly!

If we simply set the display to grid, we automatically get children of equal heights that fill the container:

By telling the layout more about the “importance” and the “weight” of the children, we can better set which ones should shrink or expand and make really complex layouts in a flash!

For example, to get our basic header-content-footer layout, we just need to declare the grid display and then use the grid-template-rows property to tell the container the “weight” of each child:

Here, we are saying that the first and last child (for us, that’s the header and the footer) will automatically scale to fill the rest of the page; the main part in the middle (our content) will try and expand as much as possible, because of the value of 1fr. This new fr unit is specifically made for responsive design when using grids and it allows you to control items of flexible sizes within your container.

We could even get a more advanced layout with a header and footer, and a sidebar-content in the middle, using the grid-areas, row and column weights and the minmax() operator… 🙂

All in all, I find that grid displays are an amazing way of building complex layouts very quickly, and even helps us with responsiveness!

Trick n°4: Transitions!

Take a look at these two buttons – which one do you think is the best?

Chances are that you prefer the one on the right, nope? The first button, on the left, is a bit “basic”, nope?

That’s because, as time went by, we’ve now grown accustomed to UI elements feeling more “alive” thanks animations and transitions. Look back at the second button: when I hover it, you see that it scales up slowly with a bounce effect and the colour fades from blue to white.

This is actually pretty simple to do in CSS thanks to the transition and animation properties.

Using transitions

Thanks to CSS transitions, you can define one or more properties that will be lerped over time when they changed, instead of switching instantly.

For example, here, I’ve set a transition on the background colour of my “Button 2”, like this:

This means that when I hover the button, it will change its background-color property from blue to white… but over the course of 0.2s! The ease-in-out at the end of the line is what’s called an easing function: it allows you to add a more “personal” touch to the effect and, rather than just having a continuous linear change, have some slow downs or speed ups. Here, the ease-in-out applies a little slow down at the beginning and the end of the transition.

Using animations

To work with animations requires two phases:

  • first, you’ll want to define your animation thanks to keyframes
  • then, you’ll be able to use this animation in your CSS styles

The idea is that you decide on various relative timestamps in your animation for which you precisely define one or more properties; all the intermediary timestamps will be interpolated between those values.

Then, when we use this animation, you can set the duration, the easing function, the number of times it is played and more!

Here, for example, I made a “grow” animation for my “Button 2” that changes the transform property of my UI element; then, when I use it, I play it once with a short duration of 0.4s:

Conclusion

This was just a short collection of util CSS tricks – there are plenty more things to create and discover 😉

I hope you enjoyed this tutorial and, as usual, feel free to react in the comments and post ideas of other web topics you’d like me to talk about!

Leave a Reply

Your email address will not be published.