Hi guys,
This is the guy who have a new full time job using this great piece of software
OK, it would be just plain great to have a “Scale from Default” in B, C, D. In my case I really just need to edit D.
— — — — — — — — — — — — — — — — — — —
Just for sake to put clarity here, let’s assign letters to resolution formats :
A is Defaut view
B is Tablet Portrait view
C is Mobile Landscape view
D is Mobile Portrait view
— — — — — — — — — — — — — — — — — — —
My trouble right now is that I wast time to redesign A into B C D. I’m sure there is a way to create a core class within Webflow which would scale in one click :
0.8000em - B
0.5000em - C
0.35000em - D
Make sens ? Thank you for all your help at this point. Cheers ! @icipascal
As a tool that has infinite possibilities we don’t know what people’s intentions are when designing for those smaller resolutions. So we give the designer the control to make up their mind.
But i’m still interested… how do you envision this working? Is it for fonts or what are you thinking?
Hmm, the only way I see this is to use 1 section for the main inner-body wrapper (maybe name it .bodywrapper), giving it a class name so you can define all your “base” rules. i.e. Desktop (A)
Then drop in additional sections as you normally would but inside this .bodywrapper section. Style all the unique stuff that doesn’t change, i.e. button backgrounds, rounded corners, etc. Then when you switch from Desktop (A) to Tablet (B) in design mode, simply make your ratio changes to the main .bodywrapper element.
Do this for each view, B, C and D. Then maybe make small refinements to the inner content as needed.
edit: awe snap, I just realized that webflow elements have default styles that will override the .bodywrapper for some, but not all css styles. Something like this would work if there maybe was an option in webflow per element to remove all webflow default styling so everything is inherited??? Feature request? Am I wrong about this guys? I’m out of town and working from a tablet so I can’t test =)
Exactly ! I think it would be a simple option to give. Right now, Webflow expect that you will rework in B-C-D. But it would be nice to have quick, Scale from A (particularly in B & C).
I agree that for D it will probably always required more work
As I said I had not tried it out because I was out of town and only had my mobile phone with me but as long as webflow doesn’t apply default styling to the block elements, like div block, text block, h1 block, etc. then my first suggestion should work. I’ll update this post if I get some time to test this out.
I do want to tell what elements and getting too techie on this.
My logic is this.
1 — I should be able to design something in A. Let say I take a screen shot from this. Than I would :
2 — resize the screenshot A into B (in one click)
3 — resize the screenshot A into C (in one click)
I think 90% of designer would use this as there default way to design responsive sites.
4 — From there, I want to tweak things as I want.
5 — Export the site, on integrate it in .NET
To put some context about who I am, at this point, I worked more than 100 hours in Webflow. I’m an hardcore designer that works within Keynote (OS X) thanks to Amir from keynotopia for the tutorials.
So what you’re looking for is to build everything in “A” and then for each B, C and D view simply to have a single control that is % based on inherit values from “A”.
A = 100%
B = 80%
C = 50%
D = 35%
The only problem is that % values are not symmetrical in CSS. For example, some items it is based on the box model, i.e. % of parent size, while other things like fonts are based on % of inherit values. Pondering on this one…
I know it’s a big technical challenge. But that would be SO powerful. I think that could be one of the biggest marketing argument to sell/use Webflow platform. « Build any web site responsive ready »
We’ll get there I’m sure.