[documentation improvement] better breakpoints explanation.

How does breakpoints really work? Documentation is not very clear about it.

• It doesn’t explain what does the number mean.? (is it the max-width, or min-width).
• It doesn’t explain what happens to properties which are not defined in the breakpoint:
  • Does it take the values defined “outside” the breakpoints?
  • Does it take the values defined in the higher or lower breakpoint?
  • Or maybe it takes the default values and ingores other breakpoints values?

Lets consider the following example:

$('#js-slider').slick({
    infinite: false,
    slidesToShow: 1,
    responsive: [{
        breakpoint: 640,
        settings: {
            slidesToShow: 2
        }
    }, {
        breakpoint: 320,
        settings: {
            infinite: true
        }
    }]
});

I assume that the plugin follows the mobile firs approach, so:

• from 0px to 320px. infinite is set to false, slidesToShow is set to 1
• from 320px to 640px infinite is set to true (explicitly defined), slidesToShow is set to 1 (because it inherits values defined outside the breakpoints)
• from 640px to ∞ infinite is true (inherited from the previous breakpoint), slidesToShow is set to 2 (explicitly defined)

Correct me please if I’m wrong. And If I’m wrong then I might be not the only one who doesn’t fully understand the docs.

If I’m right, then still it would be good to fix the example given in the documentation. If the plugin follows the mobile first approach then it would be better to define lower breakpoints before the higher ones.

[simeydotme]

I don’t know what all the bitching is about mobileFirst being an option. This software has been around a long time, possibly before mobile first was “mainstream”, just suck it up, read the docs and figure it out? I’ve already stated we’ll consider making the version 2.0 mobile-first on @mike3run’s thread.

If you really want to contribute – not just moan that we won’t make everyone’s website break by switching to mobileFirst – then go ahead and figure out the way it works (it’s actually very simple) and create a fork with a new file called: RESPONSIVE.md with all the necessary documentation.

I’ll be very happy to review and merge.

Si.

[wujekbogdan]

@simeydotme I never complained the plugin is not mobile first. It was only my assumption and I was wrong (I didn’t notice mobileFirst option in the documentation).

The point of this topic was not to complain but to clarify how does mobile feature work because the documentation is not clear enough for me.