Screen

Attach events to matching breakpoint rules

Syncing media queries and JavaScript reliably can be tedious. Wee seamlessly combines and triggers breakpoint logic based on your configured project media queries.

Values

You can easily disable any unneeded breakpoints by setting them to false in wee.json.

  1. Portrait Mobile (320px)
  2. Landscape Mobile (480px)
  3. Portrait Tablet (768px)
  4. Small Desktop (1024px)
  5. Medium Desktop (1280px)
  6. Large Desktop (1440px)

Wee uses the font family of the HTML element to reference the current breakpoint. You can add additional custom values by setting the value to a numeric string in your CSS. This would typically be done in a custom media query.

@media (max-width: 600px) {
    html {
        font-family: '1.5';
    }
}

Map

Watch single or set of screen events with specified options

VariableTypeDefaultDescriptionRequired

sets

object, array

-

Object parameters below

Set Object

VariableTypeDefaultDescriptionRequired

args

array

-

Callback arguments

callback

function

-

Matching callback

each

boolean

false

Execute callback for each matching breakpoint

init

boolean

true

Immediately evaluate breakpoint logic

max

number

-

Maximum breakpoint value

min

number

-

Minimum breakpoint value

namespace

string

-

Event namespace for granular resetting

once

boolean

false

Disable callback after first execution

scope

object

-

Callback scope

size

number

-

Specific breakpoint value

watch

boolean

true

Evaluate on screen size

You can setup as many breakpoint sets as you need. They are added to a global window resize event that evaluates once against all stored rules.

Single

Wee.screen.map({
    size: 4,
    callback: function(obj) {
        console.log(obj);
    }
});

An object with the direction, size, previous size, and init status is passed as the first callback argument.

VariableTypeDefaultDescriptionRequired

dir

number

-

1 if sized up, 0 if sized down

init

boolean

-

true if run initially, else false

prev

number

-

1-6 representing previous value

size

number

-

1-6 representing current value

Multiple

Wee.screen.map([
    {
        size: 1,
        callback: [
            'common:mobile',
            'common:smallScreen'
        ]
    },
    {
        min: 3,
        max: 4,
        watch: false,
        callback: 'common:mediumScreen'
    },
    {
        min: 5,
        args: ['passThrough'],
        callback: function(obj, val) {
            console.log(val); // passThrough
            console.log(obj);
        }
    }
]);

Reset

Reset all bound events

VariableTypeDefaultDescriptionRequired

namespace

string

-

Namespace of events to reset

Wee.screen.reset();

Run

Evaluate the current breakpoint

Wee.screen.run();

Size

Get current screen value

The value is determined by the value of the HTML element font family which stores the current media query number. The response falls between 1 and 6.

Wee.screen.size();
5