Menu icon Foundation
Questions regarding scaling content

Hi, I am starting a project and am deciding wether to use foundation.

I have noticed in a lot of foundation sites i've seen the content scales down between grid layouts as you resize the browser. like this site: http://tattly.com/

but what id really like to acheive is a site like this : http://foodsense.is/ where there is no no scaling when you resize the browser... instead the content snaps between layouts.

what im wondering is if both styles are easy to achieve in foundation or has the foodsense.is site's grid been highly customized?

thanks in advance!
nick

scalingresizingno scalingsnapping

Hi, I am starting a project and am deciding wether to use foundation.

I have noticed in a lot of foundation sites i've seen the content scales down between grid layouts as you resize the browser. like this site: http://tattly.com/

but what id really like to acheive is a site like this : http://foodsense.is/ where there is no no scaling when you resize the browser... instead the content snaps between layouts.

what im wondering is if both styles are easy to achieve in foundation or has the foodsense.is site's grid been highly customized?

thanks in advance!
nick

Rafi Benkual over 5 years ago

Hi Nick,
Foundation uses a fluid grid so that any size screen scales well down to the .1". The Foodsense website seems more like an adaptive site which is not fluid. They are using fixed widths and breakpoints. This is not the preferred method.

Why do you want it that way?

nick savior over 5 years ago

Hi Rafi, thanks for your reply. Mainly for aesthetic reasons. I dont mind the fluidness at smaller resolutions but on the larger sizes id rather it snap down to size.

So you would say to build the foodsense site on foundation they had to use more round about methods, right?

thanks
n

Karl Ward over 5 years ago

I would recommend to think "fluid" like the Foundation grid is created. There is no logical reason why a fluid responsive layout is not better than having fixed-width. The adaptive approach is made for specific screen sizes, but now that all kinds of obscure device screens sizes are being launched, it makes no sense.

Both methods have breakpoints for layout elements anyway ...

For example, resize your browser to 760px wide ... Wow Tattly.com still looks nice and fluid filling my small device screen http://d.pr/i/1av69k, but arrgh foodsense.is minimized much smaller than my already-small screen http://d.pr/i/A6xd. So 760px is not a normal screen size, but these days they have all kinds of screen sizes and it is kinds pointless to snap between sizes ...

I dont mind the fluidness at smaller resolutions but on the larger sizes id rather it snap down to size.

Keep in mind, a visitor wont experience this, because normally they will either have "large" and it will show the most expanded large size, or they have medium and it will show the medium-breakpoint layout anyway. The fluidness you see when scaling is just an artifact of the Foundation Grid, and it is beneficial especially on small-to-medium screens.

nick savior over 5 years ago

Thanks for your response Karl. I understand where you are coming from. Still, ideally, i would like to 'snap' between the two largest sizes... so from say 1280 to 1024 theres no scaling. them below that everything else scales.

So my question is still, personal preferences aside, is there a way to achieve this easily with foundation? Since the foodsense site is built on foundation and 'snaps' im assuming it is possible but am wondering how difficult is that to achieve?

Anyone?

thanks!
n

Andrew Lahser over 5 years ago

Hi Nick,

I did something almost exactly like you are wanting. I used Foundation 5 and another tool called GridSetApp. I'm not sure if I am allowed to link to things here, but, you should be able to find this from the first page of Google.

I defined custom grids at the breakpoints that I wanted in GridSetApp. I removed the grid from Foundation 5. From there, I just had to define the xsmall, small, medium, large, etc. sizes in the foundation 5 css to match the breakpoints in GridSetApp. It has been pretty seamless.

Again, I don't think I am supposed to link to sites, but, if you google my name "Andrew Lahser", my website should be the first one. When you get there, hit Control G (pc) or Command G (mac) and you will see my grid. As you move the window between breakpoints, you can see the grid change.

As a word of warning, certain Foundation 5 functions depend on the foundation grid. So if you don't use the Foundation grid, you won't be able to use certain elements. My site is not much more than a blog, so, this didn't impact me.

I hope that help.

Andrew

Karl Ward over 5 years ago

You could probably use some basic media query by forcing the width of the wrapper:

@media screen and (min-width: 1024px) {
  .webite-wrapper-element {
    max-width: 960px;
  }
}
@media screen (min-width: 1280px) {
  .webite-wrapper-element {
    max-width: 1100px;
  }
}

In the above example, the website element will limit to 960px wide on 1024px+ screens, while on 1280px+ screens, it will 'snap' to 1100px. I picked those numbers 960/1100 just because they are often in grid sizes.

It still eludes me the logic of this though ... Basically if you don't want it to scale between those two sizes, first of all it requires that you will be manipulating content further based on this specific media query, else it is entirely pointless. Besides, if you toggle your browser between 1280 vs 1024 px (without scaling it slowly), the end-effect in those two screen resolution will be the SAME as with Foundation fluid grid anyway, so whats the point?

Actually, the only point would be that on some in-between screens (say 1120px), the layout will be for 1024px instead of fluid. Since there are not many screens between 1280 and 1024 px, most visitors will see the exact same result anyway ...

Sorry, I just find it intriguing that someone needs to use an old-school way of doing things although there is no logic to it ...

The real purpose of responsive design is to get to a point where your web design is completely device blind

You should have a design-agnostic approach in 2014, and design for "ANY" screen size:
http://tympanus.net/codrops/2012/10/30/becoming-device-agnostic/
http://trentwalton.com/2014/03/10/device-agnostic/
http://www.smashingmagazine.com/2012/03/22/device-agnostic-approach-to-responsive-web-design/

nick savior over 5 years ago

thanks Andrew and Karl for your responses. Very helpful. ill consider.

Karl, Regarding agnostic design and the fluid grid. I think agnostic design is great - ive been interested in the idea for a long time. Back when flash was popular I used to set up sites based on percentages to the same effect - minus a grid of course. BUT i think scaling vs snapping (what the correct terminology? .. 'fluid responsive' vs 'fixed responsive'?) is as much a design choice as anything else. Just as choosing a font sets a tone i think scaling does the same.

this is one of my favorite sites - thegreatdiscontent.com - the whole grid is fluid. everything scales between breakpoints and fits the tone of the site. its beautiful.

another site i love is nowness.com - between its two largest sizes there is a snap - not alot changes mainly just the featured content window and if you werent paying attention you may not even notice it happen. I think that is classic and elegant and matches the feeling of the site. I think fluid scaling in this case would be distracting.

However moving to small screen sizes like tablets or smart phones where there is no way to resize the browser and there are tons of differnent resolutions to deal with fluid scaling is the obvious choice.

I think it would be a nice option to have a simple built in snap or fluid command to choose from.
maybe there is - im still learning.

anyways. nice to hear your thoughts
best
n

Karl Ward over 5 years ago

Yea, its obviously not a huge deal when it comes down to it, bit I still find it intriguing. It is not normal for visitors with large screen sizes to be resizing their browser up and down anyway ... In your logic, it seems that you claim the "snap" effect looks nice for those visitors who like to scale browsers up-and-down to see what the website looks like in different resolution ... Perhaps this is something web designers like to do?

In the end of the day, a 1024px large screen will display a version laid out for 1024, and a 1280px screen will display a version laid out for 1280, regardless of if its fluid or if it "snaps" in between those sizes. The only difference is that the fluid version is design-agnostic, and ideally looks better on those vague devices who have "in between" screen resolutions: On an 1160px device, instead of the website saying "ok 1160, let me limit the width to 1024 for no reason whatsoever hope thats ok", the website is saying "ok 1160 this website flows nicely regardless, no problemo!"

I get your point, but I just find myself a bit over-enthusiastic about these thing!