Search code examples
sasscompass-sasszurb-foundation

Foundation: confusion over $medium-screen variable and _grid-5.scss

I'm using Zurb Foundation Sass version 4.3, and have just started using the framework a couple of days ago, so apologies for my ignorance.

Currently I rely on the $small and $large media query variables, as well as the small- and large- class names for changing the layout of my site at different dimensions.

My current understanding:

  • "small" means anything below the value of $small-screen (eg, @media only screen)
  • "large" means anything above the value of $small-screen (eg, @media #{$small})

Now I would think, when using the _grid-5.scss component file to give me medium- classnames, that it would be using the value of $medium (eg, @media #{$media}) and change the meanings of "large"

I would expect it to change to:

  • "small" means anything below the value of $small-screen (eg, @media only screen)
  • "medium" means anything above the value of $small-screen (eg, @media #{$small})
  • "large" means anything above the value of $medium-screen (eg, @media #{$medium})

But there is no relationship between the $medium variable and the medium- classnames! In-fact, the media query dimensions are hard-coded into _grid-5.scss.

I'm really confused here.

If anyone is able to answer the following questions it would be most helpful:

  • Why is there no relationship between the $medium-screen variable and the medium- grid classes?
  • Should I be importing both _grid.scss and _grid-5.scss components?
  • Is there better documentation out there that describes the correct use of the _grid-5.scss file and how to use the $small, $medium and $large variables?
Solution

  • Thanks to DNFS over on the Foundation Framework mailing list/google group, I now have clarification on this matter.

    To answer my own questions:

    Why is there no relationship between the $medium-screen variable and the medium- grid classes?

    This was a bug, and has been recently fixed: https://github.com/zurb/foundation/commit/ae4fa9027acfee0970683236fe3765580444a3ff

    Should I be importing both _grid.scss and _grid-5.scss components?

    _grid-5.scss is a complete replacement for _grid.scss (the -5 suffix means it's going to be part of foundation 5 and is currently a pre-release preview of the new grid system)

    Google groups discussion: https://groups.google.com/forum/#!topic/foundation-framework-/8kFzJtVUV7k