Design and code a responsive portfolio with CSS variables

March 06, 2020

Have you used CSS Variables? If you haven’t then this video will go through the benefits.

With design systems gaining popularity, CSS variables enable you to put those systems in place. Depending on the website, most of the webpage would consist of text, like this blog.

It would be great to use a type scale, in the variables and then you can use only these variables whenever you need to use the font size property.

Font size variables

The first part of the video will focus on creating the variables with utility classes. The use of utility classes is just like playing with lego, because you pick the classes and just add them to the elements.

So some elements like the h1 tag may get long with multiple classes. But, you will not have to write new CSS, just reusing the same CSS. This works really well, when you design and code.

Then you have a nice CSS base focusing on the core. Spacing is another system you can use, no more guessing the margin or padding. Use a system with variables and then you will ensure consistency.

It’s good practise to think about systems, especially when you start. It does take more time at the beginning, but as we create more themes, you will see how effective it is to have your own framework and to keep on reusing it.

There are many great CSS frameworks out there like, Tachyons and Tailwind. In the end, just go with what you feel comfortable with, but I still highly recommend CSS variables with a system.

Watch part 1 Responsive portfolio on Youtube. You can also see the playlist for the rest of the series.


Learn → Make → Inspire