The goal of this project was to dive into CSS. The assignment was to style the HTML of a menu card, like a zen garden type of assignment. I had to choose between requirements and chose for “a responsive layout without media queries” and “Completely accessible according to the AAA WCAG terms”.
I have been using CSS for a few years already, but I never knew that you could so much with it. In the last few years the development CSS has been booming. During this project, I discovered a variety of new CSS techniques which will change the way I style my digital components in the future.
First off, I learned about the skip to content button. In this menu, I applied a skip to desserts button. Secondly, I added links to the headings which made it possible to tab through the menu cards dishes. The elements change on tabbing because I used the focus-within pseudo-class. To emphasize where you are on the page, I used a highlighted color on all focused elements with a high contrast.
When you click on the clip from the clipboard the menu falls off. After some time, a waiter will come and ask you if you would like a new menu. If you do, he will run off and get you a new one.
Clamp was a new technique for me that I hadn’t worked with before. I got very excited when I learned how to use it. In my menucard, I used this technique for the font size. Setting a minimum, optimal and maxium font size all in one go.
Using Calc was also new for me, just like clamp, I didn’t even know it was out there. But now that I know, I am using it a lot! For example, to calculate the padding or to position something right in the middle. Now I just put it in one line of code and don’t have to calculate it myself anymore.
I always thought custom properties where part of a pre-compressor like SCSS. During this coarse I learned that these custom properties are available in regular CSS. Ever since, I am using these in all my projects. Although I am just using them to define colors and fonts I will learn more usecases for them in the future.
This website also changes to darker colors in case someone prefers dark mode. For most of the website I only had to change the custom properties to darker colors. Though there where some exceptions where I had to manually change the colors.
More information about this project can be read in the readme on Github. Also the web application can be viewed and used online, just hit the button below.
View the menu card Visit the Github Repo