Design comparison
Solution retrospective
Hello everyone π,
Here is my solution for Base apparel coming soon page.
For desktop image, I decided to set a fixed width and use height: 100%
and object-fit: cover
to cater for larger viewport sizes. How would you approach this problem of full-height images and also making it responsive for larger viewports?
Appreciate any feedback or suggestions. Thank you. πββοΈπ
Community feedback
- @adonmez04Posted over 1 year ago
Hi, @Milleus. I'm happy to see more projects that are made with the CUBE CSS methodology. I want to try this methodology, but I need more examples. This is a very good and clean one. Thanks for this.
0@MilleusPosted over 1 year agoHi @adonmez04
I've learnt a lot about CUBE CSS from this video by Kevin Powell and I hope this will help you out as well - https://www.youtube.com/watch?v=NanhQvnvbR8.
Also, you might notice that the way I use CUBE CSS is a little different. That's because I've changed it a little to my preference:
- Sometimes I place a "Block" CSS under "Exception" instead because I prefer to have similar component CSS together, e.g.
.card
is with.card[data-state="inactive"]
. - I don't use groupings (yet). I find that classes are typically short and readable so this felt unnecessary for now - https://cube.fyi/grouping.html
Hope this helps!
1@adonmez04Posted over 1 year ago@Milleus Grouping is a major problem for CUBE CSS. Using
[]
or|
to separate classes is a little bit confusing. I tried to use prefixes to separate them likeu-utility
,b-block
etc. but it didn't work. My selectors became hard to read and write. Maybe we don't need all of them and we should just try to keep them readable like your example lol.Thanks for sharing the video. Kevin is amazing. If you haven't seen it yet, I learned a lot from this video. I highly recommend it. https://www.youtube.com/watch?v=KE8MdPD9yac.
1 - Sometimes I place a "Block" CSS under "Exception" instead because I prefer to have similar component CSS together, e.g.
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord