Custom breakpoint: smaller than small

[pedzed]

If you add a custom breakpoint, say xsmall, the default will remain at small. Please, read further for clarification.

This is what I added in my settings:

$breakpoints: (
  xsmall: 0,
  small: 480px,
  medium: 640px,
  large: 1024px,
  xlarge: 1200px,
  xxlarge: 1440px,
);

$breakpoint-classes: (xsmall small medium large);

An example of this issue is that if you add text-center in the HTML, it keeps the default alias to small-text-center, whereas it should be an alias for xsmall-text-center. The workaround is to use xsmall-text-center instead of text-center.

This is an issue which could be fixed by not hardcoding small like in /scss/typography/_alignment.scss#L9:

@if $size != 'small' {
  .#{$size}-text-#{$align} {
    text-align: $align;
  }
}
@else {
  .text-#{$align} {
    text-align: $align;
  }
}

Edit: This counts for things like font size as well.

[andycochran]

+1

There are places where small is hardcoded. Although, they've been phasing themselves out as F6 evolves. But I do wonder…

Setting a breakpoint at zero is pretty weird. Maybe there should be a map-merge() that defines a required zero "breakpoint" but calls it something more semantic (to connote mobile first / no media queries applied).

What happens now if you don't set a zero breakpoint?

[gakimball]

I figured this would come up eventually.

I think the two instances of small being used in the codebase can be worked around to not reference the value directly, maybe by referencing the first item in the map no matter what it is.

Now, a lot more components reference medium. There's a few ways we could approach that:

We could make the "medium" breakpoint developer-configurable, which would globally change the breakpoint across every component. The question is if developers will understand what the "global medium breakpoint" is.

You could also take each component that has a breakpoint and make those specific breakpoints developer-configurable. Most likely, though, even with this approach you'd still maybe have a global variable to inherit from, like so:

$global-breakpoint: medium;

/// Breakpoint below which pagination items stack.
$pagination-breakpoint: $global-breakpoint;

Thoughts?

[pedzed]

@gakimball To change medium is bad practice if you ask me. Unless you are starting from scratch, not only do you have to change the SCSS, but also the HTML. This should be avoided at all times.

I once changed the 12 columns layout to 24 prior to Foundation 6. It was not fun. I had to change all of the columns in HTML.

A quick fix is to use first($breakpoints) and assume that the first is the smallest.
http://hugogiraudel.com/2013/08/08/advanced-sass-list-functions/

[gakimball]

@pedzed That might be an acceptable trade-off, as long as we warn developers about the increased overhead. We think the words small, medium, large, etc. work well because they're about as generic as you can get (back in Foundation 2/3 we did phone, tablet, etc., which was too device-specific).

With Foundation 6 you now have the power to change that, but you have to realize all of the documentation will not match 1-to-1 with what you're building now, because you're using your own names. So if you want to redefine medium, you can, but that's going to be on you to manage.

We could also mandate that developers have breakpoints named "small" and "medium" in their $breakpoints list, but that feels a bit limiting.

[pedzed]

@gakimball What you could also do is add a new variable $default-breakpoint (or $breakpoint-default) and set it to small. Then it can be changed to xsmall (or even large).

Another problem is the font sizes. I believe it should be the same for small down.

[TvrtkoM]

maybe introduce some kind of naming convention (documented) for breakpoints scss map - so only breakpoints named xsmall, small, medium, large, xlarge, xxlarge will work. It's all about pixels anyway.

This way there will be no need to do major extra adjustments to current scss codebase.

[andycochran]

To be honest, I'd rather give up a bit of configurability for simplicity. I say we make small: 0 required in the breakpoint map, with comments/documentation stating that nothing can be smaller than small. The expression "small screens" is pretty well established in our community. We use it to refer to screens that use default, mobile-first styles. We rarely use terms like "extra-small screens."

@gakimball, to your point regarding the hardcoded use of medium, could we write a function to determine the smallest non-zero breakpoint and use that instead?

[pedzed]

The expression "small screens" is pretty well established in our community.
— @andycochran

Then (for me) it would be:

$breakpoints: (
  small: 0,
  medium: 480px,
  large: 640px,
  xlarge: 1024px,
  xxlarge: 1200px,
  // xxxlarge: 1440px,
);

Medium 480px? Large 640px? No, thanks :)

I just need the 480px breakpoint to perfectionize things like headers, footers, and other detailed stuff.

could we write a function to determine the smallest non-zero breakpoint and use that instead?
— @andycochran

👍 This is what I initially wanted, but for simplicity's sake, just use the first in the list as default.

[andycochran]

@pedzed Hmm… if small is the smallest, that doesn't mean the next larger must be called medium. You could call it perfectionize if you like.

[pedzed]

if small is the smallest, that doesn't mean the next larger must be called medium. You could call it perfectionize if you like.

You are right. But would you personally call it perfectionize? Not only is it inconsistent, but also a vague description.

I am fine with smedium, but I believe xsmall is better.

[gakimball]

After some internal discussion on this, we're making the call to define two rules for $breakpoints:

• You must have ones named small and medium.
• small must be 0.

It's a bit limiting, perhaps, but you still have a lot of flexibility in how breakpoints are managed. We can also add a line to the docs noting that medium is the "tipping point" for every component with responsive adjustments.

I'd also like to ditch the two small only media queries we have in favor of actual mobile-first queries, so maybe that opens the door to making small an optional keyword.

You can see the change on the 6.2 branch: ce18364

[pedzed]

small must be 0.

To be honest, it saddens me that this is the decision. What about just getting the smallest value of the list by using a custom function? It's not that hard.

We can also add a line to the docs noting that medium is the "tipping point" for every component with responsive adjustments.

What do you mean?

[pedzed]

I just noticed that Foundation comes with a function called strip-unit($num). Why not use that and get the smallest value of the list?