Mobile first vs desktop down

The workflow for configuring element defaults is based on the framework you have chosen.

Foundation, Bootstrap, and Materialize all use a Mobile-First workflow. This means you will design for small screens first — set your default styles such as typography and configure your default image resources for mobile sizes — then make style and layout tweaks for larger screens. When working mobile-first, be sure your slider is to the left of the smallest breakpoint. Changes made to the right of the breakpoint will only appear when the viewer’s screen is that particular size or larger.

Mobile first (Foundation, Bootstrap and Materialize workflow)

Desktop down (frameworkless workflow)

If you are using the frameworkless option, you can work Desktop-Down. This means your slider would be to the right of the largest breakpoint for applying global styles. Then you would tweak the design by moving the slider to the left of a breakpoint.

The slider will turn into a greater-than symbol to indicate which breakpoint area you are designing for. The breakpoints themselves are defined with an arrow shape directing mobile first or desktop down workflows.