Desktop-down vs Mobile-up Design -...

User 2706435 Photo


Ambassador
444 posts

At 640px, you are into the first breakpoint/media query if you are using Foundation. From 1px through 639px, that is the "small" view for Foundation 6. At 640, you are now in "medium." In Foundation, some things such as heading text size will still change between the built in breakpoints (unless you make changes). What you design, goes through the larger views. If you start at 640, you will have no styling for 1-639, and will have default Foundation 6 framework properties. You always design mobile first with the frameworks. You start with a mobile layout, and adjust it as the screen gets bigger. For example, you might have two columns of content. Put them in one row, and let each column go across the design view, on top of each other. At 640, you might want to change the column properties so that they are now adjacent to each other and not stacked. The mobile first does require a little bit of pre-planning or flexibility to change layouts, because one might be tempted to put such content into two different rows in the mobile view
User 2861890 Photo


Registered User
34 posts

BIll G wrote:
At 640px, you are into the first breakpoint/media query if you are using Foundation. From 1px through 639px, that is the "small" view for Foundation 6. At 640, you are now in "medium."


Ah! The light goes on! Now I understand why the two "blue" and unchangeable breakpoints are immutable. You need them for the various properties to be properly interpreted. This now makes your earlier comment about ".hidden-md-up" make more sense to me as well. That class function needs to know where "small, medium, and large" start and end, so the fixed breakpoints are the key properties.

So, I now realize my method for designing: Start below the first breakpoint and set up a "small" interface, then go to right before the next breakpoint for the "medium" interface, and finally beyond the second breakpoint for the "large/up" display. Where or how I decide to make the actual design at that point is up to me. I could use the 639 breakpoint and below actually display as 320 or 450 if I so choose, and the same for the other demarcations.

I really appreciate the follow-ups to my original post. This is beginning to make real sense to me as I continue to play with it.

Thank you all for your comments, and especially to you, Bill G, for your patient explanations. I'm not stupid, just ignorant.

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.