Mobile Mode

The Foundation template is fully-responsive. This variable is how.

var - mobile-mode?

If a webpage's width exceeds the mobile breakpoint, it sets a variable 'mobile mode?' to "no". Otherwise, the variable changes to "yes".

This variable informs different elements on the page how to adjust according to the screen size.

ICYMI: var - mobile mode references the App Settings variable instead of performing an additional Search For operation.

Basic use case:

var - mobile mode? is then used to dictate when the header should switch between the mobile and desktop versions in addition to numerous other elements on the page.

A more complex example:

The dashboard template's Side Nav Floating Group's visibility is based on a number of factors: the page's settings, the page width, the current parameters.

Why not just use "current page width < 900px" instead?

It may be easier in the moment, but it can create headaches down the road.

The conditionals above are just some of dozens like it across just this page.

Need to change each one from 900px to 980px app wide? No thanks.

This complexity may not be necessary for all apps, but building a strong foundation requires it.