Grid System

We use a 12 column responsive grid system for our layout. Our grid system is based on the Twitter Bootstrap grid system, but it has some slight differences. Despite the differences, the Bootstrap grid documentation is a useful resource for learning about how the grid system works.

How to use the grid system

The grid system is built on a series of <div> elements, which receive different classes, based on the place in the grid. Each page contains a container element, and the container can hold multiple row elements. Each row holds several columns (cols), and columns can then contain more rows.

Here is an example of several rows, split into different numbers of columns:

1
1
1
1
1
1
1
1
1
1
1
1
2
2
2
2
2
2
3
3
3
3
4
4
4
6
6
9
3
12

Responsive Sizing

The grid system is responsive, which means it adjusts itself to the size of the browser window. If you resize your browser on this page, you will see how the above grid columns change in size, and even stack vertically on small screens.

Breakpoints

The responsive sizing works by defining a number of so-called "breakpoints", which are the borders between the different groups of screen sizes. At these points is where the grid layout changes.

One difference between the Twitter Bootstrap grid and the real grid is that we have an XXS breakpoint. This allows us to define layouts for extra small mobile devices.

Here are all of the available responsive breakpoints:

XXS XS SM MD LG
Breakpoint Min Width 320px 480px 768px 1024px 1280px
min Variable $screen-xxs-min $screen-xs-min $screen-sm-min $screen-md-min $screen-lg-min
max Variable $screen-xxs-max $screen-xs-max $screen-sm-max $screen-md-max $screen-lg-max

Breakpoint-Specific Columns

These breakpoints can be used to change the width of the columns for different screen sizes. This is done by using classes that are specific to the breakpoint sizes.

The Twitter Bootstrap documentation has a complete explanation of how this works, but here's a small example:


<div class="row">
	<div class="col-sm-8 col-md-9">
		<div class="main-content">
			<p> Main Content </p>
		</div>
	</div>

	<div class="col-sm-4 col-md-3">
		<div class="sidebar">
			<p> Sidebar Content </p>
		</div>
	</div>
</div>
	

Main Content

Breakpoints in Javascript

There are some Javascript functions available for dealing with breakpoints. These are defined on the core.Breakpoints global object.

  • getSizeValue() - given a size name, returns the minimum width of the size in pixels.
    Examples:
    core.Breakpoints.getSizeValue("md"); // 1024
    core.Breakpoints.getSizeValue("xs"); // 480
  • getCurrentSize() - returns a string with the the name of the current breakpoint size.
    Examples:
    core.Breakpoints.getCurrentSize(); // "md"
    core.Breakpoints.getCurrentSize(); // "xxs"
  • isTouchSize() - given a size name, returns true if the size is commonly a smartphone or tablet size, otherwise false.
    Examples:
    core.Breakpoints.isTouchSize("sm"); // true
    core.Breakpoints.isTouchSize("lg"); // false
  • isDesktopSize() - given a size name, returns true if the size is commonly a laptop or desktop size, otherwise false.
    Examples:
    core.Breakpoints.isDesktopSize("sm"); // false
    core.Breakpoints.isDesktopSize("lg"); // true

Breakpoint Change Events

With CSS media queries you can do a lot of page customization for screen sizes, but sometimes you need to use some Javascript to adjust the page. For these cases, you can register a callback that will listen for size changes. This callback gets called once at initial page load and subsequently each time the window is resized across a breakpoint. For example, turning a tablet will often change it from "md" width to "sm". By registering a callback, you can dynamically handle these size changes in your Javascript code.

Example:


	var changeLogger = function(newSize, oldSize) {
		console.log("Detected size change from " + oldSize + " to " + newSize);
	};

	core.Breakpoints.addChangeListener(changeLogger);

	// Resizing the browser from 1400px to 1100px will output:
	// Detected size change from lg to md
	

Nested Grid

You can also nest rows and columns inside of columns. Here is an example of a complicated nested layout:

4
4
4
4
4
4
12
6
6
3
4
4
4
3
3
3
3

Flexbox Grid

Flexible grid without rows. Each breakpoint can easily be set up to contain a variable amount of items.

Example:


		.flex-grid {
		    @include columns(2);

		    @include media('sm-min') {
		        @include columns(3);
		    }
		    @include media('md-min') {
		        @include columns(4);
		    }
		    @include media('lg-min') {
		        @include columns(6);
		    }
		}
	

flex-item
flex-item
flex-item
flex-item
flex-item
flex-item
flex-item
flex-item
flex-item
flex-item
flex-item
flex-item