Single Price Grid Component | SASS/SCSS | BEM | Responsive
Design comparison
Solution retrospective
Any Recommendation is appreciated!
Community feedback
- @adonmez04Posted about 1 year ago
Hi, @bene-volent. That's a good solution. Keep coding. I like CSS Grid, and if you want to get practice with CSS Grid in this project, absolutely no problem, but I highly recommend using
flex
for yourwrapper
class to keep things simple. Flexbox works perfectly with 1-dimensional layouts. And yourwrapper
class is completely 1-dimensional.You can give
hero
,cta
,details
some width values usingflex-basis
and they'll fill the area you give them withflex-grow:1;
,flex-shrink: 1;
. And be sure to addflex-wrap: wrap
to your flex container (your wrapper class).
I hope this will help you.
Keep coding and have a wonderful day.0@bene-volentPosted about 1 year ago@adonmez04 Thank you for your recommendation. When I create the layout style before coding, I create boxes around elements on both Desktop and Mobile and fill any in between sizes. My main aim is always to make something that transitions well from mobile to desktop and in between and desktop to mobile.
I don't style websites thinking that I will make website for PC and for Mobile. I like make them think, that the browser window is resizable and it should look consistent on resize.
I was always fascinated by the window resize ability and how developers are able to keep design flow consistent. Using this principle, I always try to create a layout pattern that shifts well from Max-size to min-size.
For this layout, on mobile we don't event need a grid or flex on it. but on desktop, it is obvious that we need to use grid. So, I style them in a same layout pattern, i.e. Use grid on both sizes or flex or default block on all sizes.
This, allows me to stay consistent in my styling and reduces any chance of bugs which may occur due to implicit difference in layout properties.
I like to think that by doing such ways, reduces the overhead of layout computation for browser however small it may be and it helps me stay consistent with my design and coding. If it reduces any bugs, more benefit to me!!!
When do I use flex
- Horizontal layout with no fixed sizing of children
- When I know there is a need for flex, allowing children to have difference in their sizes
- When I need multiple rows but dont want a fixed sizing system i.e. each child element is flexible
- For Column, one question, Does this really need a flex on all sizes or not.
- Do need to fixed the flex-basis myself for every resolution
No such property is required here, so no flex.
Hope this helps you understand my thinking.
1@adonmez04Posted about 1 year ago@bene-volent Yes, that makes sense. There are some positive and negative things about choosing grid or flexbox. It's definitely a personal decision. I prefer the simplest way because I want to focus on readable and maintainable code. I'm trying to do some responsive design without media queries. It works for me with some modern features like
clamp
. I highly recommend this site to use fluid units https://utopia.fyi/.You can set your max and min values with
clamp
and they'll change their values depending on your screen size.Maybe you can check my latest work, I haven't finished it yet because I don't have enough energy now. I'll look at it later. However, there are no media-queries for this solution. https://adonmez04.github.io/skilled-e-learning-landing-page-v3.0/
0
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