STAN Utils

A responsive frontend utility library for easy device independent web development.

 Download    Github

Current Version: 0.0.40

Meet STAN.

At its core STAN is a responsive framework that allows for device dependent display and functionality. It is built upon the device philosophy that Bootstrap uses but then extends upon it to allow for easy cross device management. STAN has the ability to set different classes and data variables for each differnt device making it easier to target specific devices when writing code.

Below is a table showing the default setup for STAN.

DeviceWidthClassData
xs< 768px.device-xs .mobile{ mobile: true,  desktop: false }
sm768px - 991px.device-sm .mobile{ mobile: true,  desktop: false }
md992px - 1199px.device-md .desktop{ mobile: false, desktop: true  }
lg> 1200px.device-lg .desktop{ mobile: false, desktop: true  }

Classes

When a device becomes active the classes associated with it get automatically aplied to the <body> tag (this is changeable via config - see customising below). This allows for CSS code to reference explicit device types without having to use media queries, for example to make a div red on xs devices only .device-xs div{ background:red; }.

Data

STAN sets a global variable of $STAN which contains all information about the current viewport. Below is what the $STAN object looks like when the current device is md.

// Contents of $STAN
{
  device: 'md',
  class:  'device-md desktop',
  mobile: false,
  desktop:  true
}

Events

Each time a device is activated or deactivated the following events are triggered;

$('body').on('active.sa.stan',function(event,device){
  // Triggered when a device is activated
});

$('body').on('deactive.sa.stan',function(event,device){
  // Triggered when a device is deactivated
});

Customising

If you wish to modify the breakpoints at which different devices are activated, the applied classes or the data set when a device is activated or if you would like the element the classes are applied add the following code before the inclusion of the javascript file.

$STAN_Config = {
  tag:    'body',
  xs:{
    class:    'device-xs mobile',
    data:     { mobile: true,  desktop: false }
  },
  sm:{
    min_width:  768,
    class:    'device-sm mobile',
    data:     { mobile: true,  desktop: false }
  },
  md:{
    min_width:  992,
    class:    'device-md desktop',
    data:   { mobile: false, desktop: true  }
  },
  lg:{
    min_width:  1200,
    class:    'device-lg desktop',
    data:     { mobile: false, desktop: true  }
  }
};

Only the values needed to be modified have to be specified in the Config object so the below will be acceptable.

$STAN_Config = {
  xs:{
    class:    'device-xs foo-bar',
  },
  sm:{
    data:     { foo:bar, bar:foo }
  }
};

Build from Source

For further customisation the full source code can be found on GitHub. Once the project has been downloaded you will be able to modify the source files located in src/ and use grunt to rebuild the javascript and css files which will be outputted to dist/.

git clone https://github.com/awomersley/stan-utils.git
cd stan-utils
./install
# make changes to source
grunt

Basic Setup

Below is the basic HTML setup needed to use STAN Utils.

<!DOCTYPE html>
<html lang="en">
<head>

  <title>Anchor Nav Example</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.min.css">

  <!-- STAN CSS -->
  <link rel="stylesheet" href="/path/to/stan-utils.min.css">

  <!-- Your CSS -->
  <link rel="stylesheet" href="/path/to/styles.css">

</head>
<body>

  <!-- Page Content -->
  ...

  <!-- jQuery JS -->
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

  <!-- Bootstrap JS -->
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.1/js/bootstrap.min.js"></script>

    <!-- STAN JS -->
    <script src="/path/to/stan-utils.min.js"></script>

    <!-- Your JS -->
  <script src="/path/to/scripts.js"></script>

</body>
</html>

Browser Support

STAN Utils has been tested to work on all browsers currently supported by jQuery 1.x and Bootstrap 3.x.

License

STAN Utils in released under The Open Source Initiative and MIT License.

It is Copyright 2014 - Smart Arts UK Ltd.

Open source software is software that can be freely used, changed, and shared (in modified or unmodified form) by anyone. Open source software is made by many people, and distributed under licenses that comply with the Open Source Definition.

You are allowed to freely download and use STAN, in whole or in part, for personal, company internal or commercial purposes.

You are not allowed redistribute any piece of STAN without proper attribution.

The full license can be read here.

Credits

This project has been made possible thanks to;

  • jQuery - Javascript library powering all plugins
  • Bootstrap - Base CSS framework
  • Node.js - Server based Javascript engine
  • Bower - Dependency management
  • Grunt - Task runner
  • Fontforge - Icon creation
  • Jekyll - Site template engine
  • GitHub - Project hosting
  • All the fantastic open source Grunt plugins!

STAN v0.0.40   -   Download   -   View Github Project