Fepper Documentation

variables.styl

source/_scripts/src/variables.styl is a file containing variables that can be shared across the Stylus CSS preprocessor, browser JavaScripts, and PHP backends (and possibly other language backends as well). It ships with these values:

bp_lg_max = -1
bp_md_max = 1024
bp_sm_max = 767
bp_xs_max = 480
bp_xx_max = 320
bp_xx_min = 0

It cannot contain comments, semi-colons, curly braces, etc. It is straightforward to import and use these variables in Stylus and JavaScript. PHP must import them with parse_ini_file(). Fepper tries to be agnostic about CSS processors and tries to keep the amount of npms to download to a minimum. However, since Stylus allows for this easy sharing of variables, most Fepper distros ship with the fp-stylus extension and a fully-populated source/_styles/src/stylus directory. The Stylus files are written in the terse, YAML-like, indentation-based syntax. However, the more verbose, CSS-like syntax (with curly braces and semi-colons) is perfectly valid as well.

The UI's viewport resizer buttons are dependent on the values in variables.styl. The default values will configure the XX, XS, SM, and MD buttons to resize the viewport to each breakpoint's assigned maximum width. The LG button will resize the viewport to a width that is greater than bp_md_max by the distance between bp_sm_max and bp_md_max.

Users have the ability to add, modify, or delete values in variables.styl. The UI will respect these changes; but keep in mind that additions must be prefixed by bp_ and suffixed by _max in order for them to appear as viewport resizer buttons. A -1 value translates to Number.MAX_SAFE_INTEGER, and effectively means infinity.