Category: responsive design

A responsive framework for visualizing CYMH Service Areas in Ontario

In previous posts (1, 2, 3) we described a method for visualizing geographic representations of Integrated Service Regions (ISRs) and Children and Youth Mental Health Service Areas (CYMHSAs) in Ontario using free and open source software.

This brief note is to advise we are now running D3 in tandem with Bootstrap – a responsive framework that ensures that our visualizations accommodate to the display capabilities of a wide range of digital devices, including PCs, laptops, tablets, and smartphones. 1

 

  1. See our guidelines for installing Bootstrap on a Linux server. ↩

Installing Bootstrap

You can install and manage Bootstrap’s Less, CSS, JavaScript, and fonts using npm:

$ npm install bootstrap

Note: require('bootstrap') will load all of Bootstrap’s jQuery plugins onto the jQuery object. You can manually load Bootstrap’s jQuery plugins individually by loading the /js/*.js files under the package’s top-level directory.

Compiling CSS and JavaScript

Bootstrap uses Grunt for its build system, with convenient methods for working with the framework. It’s how we compile our code, run tests, and more.

Installing Grunt

To install Grunt, you must first download and install node.js (which includes npm). npm stands for node packaged modules and is a way to manage development dependencies through node.js.

Then, from the command line:

  1. Install grunt-cli globally with npm install -g grunt-cli.
  2. Navigate to the root /root/node_modules/bootstrap/ directory, then run npm install. npm will look at the package.json file and automatically install the necessary local dependencies listed there.

When completed, you’ll be able to run the various Grunt commands provided from the command line.

grunt dist (Just compile CSS and JavaScript)

Regenerates the /dist/ directory with compiled and minified CSS and JavaScript files. As a Bootstrap user, this is normally the command you want.

Basic template

Start with this basic HTML template, or modify these examples.

Copy the HTML below to begin working with a minimal Bootstrap document.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Examples

Build on the basic template above with Bootstrap’s many components. We encourage you to customize and adapt Bootstrap to suit your individual project’s needs. Get the source code for every example below by downloading the Bootstrap repository. Examples can be found in the docs/examples/ directory.