While creating the CSS Slack logo I couldn't help but think it looks a lot like the Figma logo in the primary setup.
So why not look at how we can create the Figma logo in CSS.
The logo looks like this:
Analysing the logo
Much like we've seen with the grid solution for the slack logo, we could also opt to make this with a grid.
Or we could use flexbox for this one.
Since I couldn't choose, I'll do both, and you can decide which one looks neater.
We can use single grid element options for the grid that will get auto-placed on a 2x3 grid.
We force two elements per row for the flex and wrap them. This way, we achieve the same output.
The corners will be the same as we saw for the Slack logo, but as you can tell, these all have different shapes, so the best bet is to state it for each element.
Creating the Figma logo in CSS
The HTML for this project will be two times the same, but we will change the main wrapping class.
<div class="figma-flex figma-grid">
<div class="block red"></div>
<div class="block orange"></div>
<div class="block purple"></div>
<div class="block blue"></div>
<div class="block green"></div>
</div>
We can choose either figma-flex
or figma-grid
in the above HTML.
Then we can add some styling that is needed for each block, which will make them a certain size:
.block {
width: 5rem;
aspect-ratio: 1;
}
Now we can add the colors for each block and give them the needed border-radius.
Since every color has a different border-radius, this is the easiest way.
.red {
background: #f24e1e;
border-radius: 50% 0 0 50%;
}
.orange {
background: #ff7262;
border-radius: 0 50% 50% 0;
}
.purple {
background: #a259ff;
border-radius: 50% 0 0 50%;
}
.blue {
background: #1abcfe;
border-radius: 50%;
}
.green {
background: #0acf83;
border-radius: 50% 0 50% 50%;
}
This should now take care of all the block styling, and at this point, we should have all the blocks available but not ordered correctly.
Let's start by trying to order them in flexbox, which is as simple as adding the following classes.
.figma-flex {
max-width: 10rem;
display: flex;
flex-wrap: wrap;
}
Note: The
max-width
is twice the size of one block!
And this already takes care of everything for the flex solution.
For the grid we can use the following code:
.figma-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
max-width: 10rem;
}
And as you can see, it's super similar to the flex solution. We choose to show two columns so that the rows will auto-flow. Then we make sure the max-width doesn't exceed.
You can find the complete result in this CodePen.
Thank you for reading, and let's connect!
Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter
Top comments (10)
Hey Chris, loving this series but may I suggest to stop using
aspect-ratio
as anyone on iPhone will just get a blank screen.Just give them a height and width as aspect ratio is not production safe yet unfortunately (AKA Apple is the new IE! 🤣) ❤️🦄
I am an Android user, good to know! Web dev life isn't easy 😅🤣
I think I spend about 20% of my time on caniuse.com, followed by the inevitable “so how the hell do I have a fallback while still future-proofing” Google session 🤣
Did you find a "fallback" so you can still use aspect-ratio?
Something like that using the padding hack?
However it would need “reversing” so that you start with that and then reset everything if it Does have
@supports
For it, and then use aspect ratio instead if you wanted to support ancient browsers!Hmm yep!
For now I refactored it to just contain the height, as it's a known thing 💖
Ah nice one, I love new shiny things so always want to try those out. 😂
But great point, and can easily switch to solid height for these.
I love shiny, but because of a11y I very rarely get to use shiny stuff, I feel so far behind the times sometimes because of it lol!
flexbox FTW
Indeed 💪