FOUNDATION vs COFFEEGRINDER max-width

User 2823310 Photo


Registered User
312 posts

Since the foundation update in RSD I've been working on what the benefits are of using the framework, but that's another discussion. This won't effect most of you but it may for those of you that actually design and build elements for the grid and use the typical 1200px wide option for a more controllable responsive layout.

In the original coffeegrinder grid there was the option to add your rows at a 1200px max-width. In that grid that actually did mean you were getting a column 1200px wide. So you could design your images and do your layout to a known width. In the foundation grid that 1200px max-width is still in RSD but that's not what you get, it actually goes to 75rem.

What that means is for example on a 1600px laptop you may think you have done all the work of optimizing your images to a known row maximum width or have a menu or text layout you think is all set up to go to 1200px max what you will actually get even at that smaller screen width is closer to 1350px. So if you think you are good in RSD because it says 1200px max-width it isn't.
User 244626 Photo


Registered User
659 posts

I still am having a hard time following this.....75 rem is 1200 px. Why is the screen width closer to 1350 px ?

Also since we touched on it and I know this has been asked by other users....

What max screen size should I design for ? This has a bearing on what my max picture size will be say for a background full row image. I understand the logic somewhat of keeping a website squeezed for performance but I think that advances in computer power, resolutions, and internet speeds should have a bearing on what your target area is. For my audience it is usually powerful people with the deep pockets making quick decisions sitting in front of a top notch computers or device zipping along on a Business T1 or better internet speeds. I have been leaning toward 2000 to 2500 px and adding options for HD or Retina images.

Just wondering as the 1200 px seems to be a default coming from somewhere....
User 379556 Photo


Registered User
737 posts

I appreciate Alter Eagle's advice that this won't affect most of us. The theory regarding pixels and resolution (e.g. here and here) is more complex than I expected.

Frank
User 379556 Photo


Registered User
737 posts

Twinstream wrote:
75 rem is 1200 px

These notes suggests that this may not always be the case.

Frank

User 2823310 Photo


Registered User
312 posts

Yes rem is a good idea for fonts (if you scale them to the html) and 16x75 is 1200 but being root scaleable it can translate differently across screens. On my browser I set the default font to 18px so it goes to 1350. Okay do this. Place a container div, on a 1200px max-width row in it put a 1200px image (or element) preview, and change your browser font to 18px. See what happens?

It's something to be aware of, that those aren't 1200px max-width like in coffeegrinder they are changed to 75rem so they will scale. It can throw off your layout if you don't know, and you may see it.

I personally went back to using 1200 because it's a way to control the download size on image heavy sites. I can optimize my images to 1200px and know the layout will work mobile through to desktop. The bigger issue for me though is the mobile download, kind of goes back to what we were talking about with using thumbnail images and you the lazy load. Now it'd be nice if everyone had T1 but...

Here is an resolution average by the way: http://www.screenresolution.org/
User 2823310 Photo


Registered User
312 posts

Ugh! "It can throw off your layout if you don't know, and you may not see it."
User 244626 Photo


Registered User
659 posts

So I set my font to 16 px and zoom to 100 % for a real "take" on my design ?
User 2823310 Photo


Registered User
312 posts

No there in lies the problem. You can't see it inside RSD.
It has to be done with a browser, you see rem's go off the root.

Okay you have to do this to see it.
Open a new project the row default is 1200px min width with a column right?
Give that row a yellow background.
Place a container div in that column and give it a min-width of 1200px and 100px min-height.
Give that a red background.
Preview that in your browser... looks good right?
Now paste this in the HEAD
<style>
/* Font Root Size for RSD */
html {font-size: 24px;}
</style>
Now preview it in your browser... you see?
In my 1600px laptop it goes off screen almost to 1555.

The 1200px row is now actually 75rem so it isn't what it says it is.
So what happens is that will get the root size of the font set in someones browser,
which could be anything.
That means your layout can change in some circumstances.
I ran into a problem with it that's how I discovered it was changed in RSD.
So another patch to fix it would be to paste the above code in with the font size 16px.
Then you set the root, and it's not an unknown.
User 2823310 Photo


Registered User
312 posts

Ugh again... "row default is 1200px min width" I meant to say max-width
User 244626 Photo


Registered User
659 posts

Ok that is clear now. Advantage Coffeegrinder Top Down Template in the new RSD.

New RSD Foundation or Bootstrap = Fail.

Was there ever a Mobile First Template for Coffeegrinder for RSD ?

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.