Getting to Intrinsic web (ala Jen Simmons) and Fluid responsive design (ala Utopia)
So I have made this japanese style card, as seen in the image (the sword is missing, but that's not the main issue her), and now I want it to respond to the viewport according to the principles of Jen Simmons (https://youtu.be/20QKda7IhJQ?t=1764) with regards to the
.content (the main black box), and all the content inside of it according to the scaling principles of the Utopia guys (https://utopia.fyi/). So the way I see this it consist of two linked issues:
1. How to make the .content stay verticaly centered, never get a width beyond 350px and no smaller then 200px.
2. How to scale the content within the black box in harmony with the scaling of the abovementioned .content
As you can see my entire page is a grid layout (because that's the challenge I've given myself to practice Jen's principle), and so somewhere there issue 1. has it's answer. If then issue 2. is locked somehow to the behaviour of issue 1., it should automatically solve itself. I tried putting clamp (as the Utopia guys propose) on the fonts, and it worked on it's own, but since I haven't figured out issue 1. it breaks down.
... and since the principle here is intrinsic web design and fluid responsive design, this should be possible without @media
https://codepen.io/amarlong/pen/vYraJLzMozilla
YouTube
View Source - Jen Simmons - Everything You Know About Web Design Ju...
2017 saw a sea change in web layout, one that few of us have truly come to grips with. We’re standing at the threshold of an entirely new era in digital design—one in which, rather than hacking layouts together, we can actually describe layouts directly. The benefits will touch everything from prototyping to custom art direction to responsive de...
5 Replies
My suggestions, if I understood you correctly:
1. min-/max-width/-height
2. use % or container queries or make the parent a grid and set columns/rows with fr
... man, I'm struggling with this! Been trying for days now.
So the goal is to make the card respond to resizing from all four sides (Jen Simmons challenge.) It's hard to make a codepen of this since codepen doesn't really want to resize from the bottom. But I've stripped the code down to just the black card and the main grid holding it.
What I want is for the black card to keep the same aspect ratio, and to shrink to minimum 100px width, and max 350px width. But what I also want is for the whitespace around it to move within according to Utopia mindset (the real challenge for this one).
As you can see I've put the Utopia variable in
:root and used it on the top and bottom of the main grid.
I'm adamant this should work. Jen Simmons does it all the time , but I'm missing something here ...
And again, Codepen isn't really helping here, but here's the code at least.
https://codepen.io/amarlong/pen/mdKvGBOIf you remove width your element resizes. If you then add min-/max-width you can limit it.
I've tried all options now: removed width, put in min- or max-width. Put max-width e.g. to 350px. But it doesn't resize ...
Do you have a code suggestion?
Works for me. It resizes.