CSS Grid opens a plethora of new possibilities for designing layouts. We can finally let go of the 12-columns layout since our new tools made it easier to manipulate our grid system. However, I still believe that 12-columns layout is still going to be a thing at least until the adoption of CSS Grid becomes more common. A wider adoption of CSS Grid means more sites with unique layouts and that means more source materials for designers to take inspiration from.
At my workplace, sometimes I’m tasked with creating impractical UIs such as this ribbon shown in the screenshot below. I see them as impractical since it is not your average card UIs or navigation bars that are easy to create. These types of problem requires a bit of thinking but with a systematic approach, you can get a glimpse of a possible solution easily.
When I received the mockup from my designers, I have 2 choices: use the ribbon as image (the easy way) or use CSS (the hard way). I love a good challenge and so I chose CSS and I will take a clever solution with CSS any day provided that it gives you a clean solution with good browser support. So how did I approach this problem? What’s the trick to solving problems with CSS?
CSS Grid is awesome and that is because it is a new tool that makes working with layouts much easier. This post is not going to be about how to work with CSS Grid; I think there are plenty of posts and resources out there. This is going to be a documentation of my creative process of coming up with unconventional layouts since CSS Grid gives me the freedom to do so. It could perhaps peak your interest in exploring CSS Grid.
I recently gave a talk titled Breaking Down SVG Animations at a local meet-up in Singapore called Talk.CSS. It is not so much about SVG and it is more about how to approach complex animations for the web as a beginner. In this talk, I refer to complex animation as animating cartoons or characters; anything other than your standard UI animation. For example, how do you animate a sheep eating grass? These things require quite a bit of imagination:
You can always watch my talk on YouTube and look at the slides here but for the ones who prefer reading instead of watching, here’s a write-up! Read More