This is a solution to the Single Price Grid Component Challenge on Frontend Mentor.
Users should be able to:
- View the optimal layout for the component depending on their device's screen size
- See a hover state on desktop for the Sign Up call-to-action
- Live Site URL: https://kens-visuals.github.io/single-price-grid-component/
- Solution URL: https://www.frontendmentor.io/solutions/single-price-grid-component-with-no-media-queries-dcVj96LxV
- Semantic HTML5 markup
- SCSS custom properties
- CSS Grid
- CSS Flexbox
- Mobile-first workflow
Initially when I started the project my only goal was to make it as close to the design as possible and finish the project in the same day. I achieved both of the goals and since I had a lot of time left until the end of the day, I decided to add some more challenges for me. So the challenge was to make the entire layout without media queries, yap you read that right, WITH NO MEDIA QUERIES. Perhaps the coolest part of CSS Grid
is that, if you use them correctly, you can make your layout responsive. That small snippet of code, at the bottom of these text, takes care of the responsiveness of the entire project. However, it would've been impossible without clamp()
. This was my first time using clamp()
, so I had to do a bit of research to see where and how I can use it. I'll definitely use it in my future projects, perhaps not for max-width
, but definitely for font-size
. I might've abused the power of clamp()
, but it all was for the sake of completing the project with no media queries whatsoever, just pushing the boundaries 👨🏻💻 This tiny project was one of the coolest project that I've done so far, and as you can tell I'm quite excited about it 😅
.cube {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
}
Definitely will work with CSS Grid
and try to push its boundaries even further, and the same is also true for clamp()
.
- Kevin Powell's video of
clamp()
- The vide that helped me the most to get the grasp ofclamp()
. - Kevin Powell's video of
auto-fit
andauto-fill
- I referenced one of my online lectures for this stuff, but Kevin, as always, does a great job of explainingauto-fit
andauto-fill
. - CSS Scan:
box-shadow
- Thanks to this awesome collection ofbox-shadow
s that help me every time. - CSS for People Who Hate CSS - MUST READ. Really cool website that simply explains how to work more efficiently with CSS.
- Frontend Mentor - @kens-visuals
- Codewars - @kens_visuals
- CodePen - @kens-visuals