0

If you read the doc for ZURB Foundaiton 6 Media Queries you find out that there are some changes compared to ZURB Foundation 5. I have few questions about new features because I don't understand reasons which led to change.

1) breakpoint mixin, down direction instead of up

  • This leads to hard time during migration from version 5 to version 6. Why is there no option to keep using also the up direction?
  • What was the reason to change direction from up to down? It is still very common to see styles which are different only for small devices, medium and large devices use the same style (e.g. menu). Again, I don't understand why there is no option to choose between key words up and down.
  • Which direction is better in terms of mobile first design approach? Are these changes connected with this in some way?

2) MediaQuery.atLeast function, inconsistency in direction

  • This function tells you if the screen has some size or is larger than this size. This is completely reverse behavior than has the breakpoint mixin (with the down keyword). Why the behavior isn't the same or why we don't have any option of choice?
Knut Holm
  • 3,988
  • 4
  • 32
  • 54
  • 5
    I'm voting to close this question as off-topic because only the developers can answer these questions, as such this question is going to attract speculative answers. – cimmanon Dec 01 '15 at 19:07
  • @cimmanon I hope developers read questions with their tags here! :-) Anyway, there is nothing speculative on answer I got so I think the question is all right, isn't it? – Knut Holm Dec 01 '15 at 21:46
  • 1
    Your question is asking about design decisions made by the developers. If you want to know, you should ask them directly. If you wanted to know how to get the behavior from a previous version of the library, you should have asked about *that* instead. Note that the answer you got does not answer the question you actually asked. – cimmanon Dec 01 '15 at 21:49
  • @cimmanon None of them, I was just confused. Documentation says nothing about it so I think answer on this question should be useful for others. – Knut Holm Dec 01 '15 at 21:52
  • @Akarienta the documentation explains this right in the code examples. The examples in my answer are copied from the docs. – Colin Marshall Dec 01 '15 at 22:31
  • @Colin Marshall Ah, see it now! Thanks and sorry for this question, it can be deleted. – Knut Holm Dec 01 '15 at 22:35

1 Answers1

2

You are misunderstanding the breakpoint mixin. It only goes down if you explicitly add the down keyword in the mixin's argument. If you just put the name of the breakpoint for the argument then it goes up from that breakpoint, no extra keyword required. If you add the keyword only then it only effects that breakpoint.

This is taken straight from the Foundation 6 Docs: 

.element {
  // Only affects medium screens and larger
  @include breakpoint(medium) { }
  // Only affects medium screens and smaller
  @include breakpoint(medium down) { }
  // Only affects medium screens, not small or large
  @include breakpoint(medium only) { }
}
Colin Marshall
  • 2,142
  • 2
  • 21
  • 31