CODEWITHSUNDEEP
csszurb-foundationzurb-foundation-5
ey dee ey em
ey dee ey em

Reputation: 8633

The logic behind 62.5rem for max-width of the row in foundation 5

I found that as default, foundation does this to style the row:

.row {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  margin-bottom: 0;
  max-width: 62.5rem;
}

however, as a responsive framework, why would it be limited to 62.5rem? The effect is stunning ugly, which is a fixed width box at all time without be able to fluid with the width of the screen. What is the logic behind it? What if I override it with 100%? Will that cause issue with its grid system in general?

Thank You

Upvotes: 4

Views: 6672

Answers (6)

tourdefran
tourdefran

Reputation: 71

In CSS3 was introduced a new unit, initially for font sizing, rem stands for "root em" and is relative to the root (html).

A base value of 16px was defined for the majority of browsers, so 1rem equals 16px. Then you got that 62.5rem equals 1000px.

I guess that the width:100% rule maybe was a handler error for the browsers that don't support the rem unit.

You can change the width of the row if you want, to do that just remove or comment the max-width rule. Then will render 100% as you want. Bootstrap for example sets a 960px width for the container.

In my case I did a modification to the max-width rule, because my layout needed to be 1366px, so I turned that value into 85.375rem.

.row {
     width: 100%;
     margin-left: auto;
     margin-right: auto;
     margin-top: 0;
     margin-bottom: 0;
     max-width: 85.375rem; // 1366px width for example
}

Take a look at this article to clarify your idea of rem: http://www.sitepoint.com/understanding-and-using-rem-units-in-css/

cheers

Upvotes: 1

Daniel
Daniel

Reputation: 11

If you're not sure you can also start the project with all the parameters already set from the customized foundation builder: https://foundation.zurb.com/sites/download.html/#customizeFoundation

I'm going to start with 1200px width for my content for example so I calculate: 1200/16 = 750rem

It's a good idea anyway to remove any components you are not going to use in the end.

Upvotes: 0

Jesus Lugo
Jesus Lugo

Reputation: 796

They put that limit because not every day you have a "full width design"; they introduced (in Foundation 6) the modifier class .expanded, which added to rows they become full width; If you want to have that behavior in Foundation 5, you have two options:

1. Create your '.expanded' class

Foundation limits the max-width of the row, so if you add the .expanded class to the rows you want to have fluid and add some code like:

.row.expanded { max-width: none }

You could have it working... maybe will require additional code to have nested rows working properly.

2. Modify the class / Change the settings

Foundation is a quite customizable framework, if you're using the SASS version, you could easily modify the variable $global-width to be 100%. If you're using the prebuilt version, just locate the .row declaration in the code and modify the max-width to 100%.

That's it, hope this helps.

Upvotes: 2

epicrato
epicrato

Reputation: 8438

62.5rem is equivalent in Foundation to 1000px. You can easily override it downloading the .css file (which for me is the nicest approach, just plain, fully customizable css) and on line 126 (foundation 5.5.2) you have:

.row {
  margin: 0 auto;
  max-width: 62.5rem;
  width: 100%;
}

Upvotes: 1

Aibrean
Aibrean

Reputation: 6422

You can use media queries for that...

Example being

@media #{$large-up} {
   $row-width: 100%;
 }

It won't "break" anything. It's a variable you can change for a reason.

Upvotes: 0

rafibomb
rafibomb

Reputation: 535

You can change it to whatever width you want without hurting anything. It will just make your columns wider.

Typically I use rem-calc(1200) or 100%

Upvotes: 0

Related Questions