Fork me on GitHub

Simple State Manager 2.5.0

Simple State Manager (SSM for short) is a javascript state manager for responsive websites. It is built to be light weight, has no dependencies, supports AMD (if thats your kinda thing) and aims to be really easy to simply drop into your project ready to use.

Download SimpleStateManager

SimpleStateManager is built around the concept of states, a state being the conditions of the browser at any given point, example conditions being the dimensions of the viewport and the features it supports. With SimpleStateManager you can define a state and a series of conditions that must be met for it to be active. Each of these states can then have an onEnter, onLeave and onResize event.

Why should I use SSM

Getting started

To get started with SimpleStageManager the first step is to include it in your project, you can do this in two ways

Having downloaded SimpleStateManager you will next need to include the JavaScript file in your page. It is recommended that this is at the end of the body before your main JavaScript file.

<script src="bower_components/SimpleStateManager/dist/ssm.min.js"></script>

The next step is to add our first state using SimpleStateManager, to do this we use the ssm.addState method. This method takes a single argument which is a object containing the state configuration options.

For this example we will add a state named "mobile" which has a maximum width of 767px. To do this we will set the value of maxWidth to 767 and we will define an onEnter method which will log to the console "enter mobile" when the state is entered.

    id: 'mobile',
    maxWidth: 767,
    onEnter: function(){
        console.log('enter mobile');

Once we have finished adding our states to SimpleStateManager we can run the tests using the ssm.ready() method.



Why would I use SimpleStateManager rather than Media Queries?

Media Queries allow you to change the way a site looks based upon a number of conditions, in contrast, SimpleStateManager allows you to change the functionality of your site. In this way, both Media Queries and SimpleStateManager compliment one another, as in the situation where you are changing the look of your site you might also be changing functionality.

What does SimpleStateManager offer me over simply using the MatchMedia API?

The MatchMedia API is incredibly powerful as it allows us to use media queries in our JavaScript, when the media query is matched or unmatched a callback method is run. SimpleStateManager states offers similar functionality by attaching itself to the browsers onresize method and allowing you to define different browser states. The benefit of this approach is that along with the matching and unmatching callbacks of a state you can also add an on resize method to the state.

What browsers does SimpleStateManager support?

Currently SimpleStateManager supports Chrome, Firefox, Internet Explorer 7+, Safari, Opera. If your site only needs to support Internet Explorer 9 and above it is advised that you use SimpleStateManager 3.0.0 which offers a broader feature set.


SimpleStateManager is an open source project maintained by a small group of contributors, as such we are always looking for new people who want to get involved.

In lieu of a formal style guide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using Grunt.