Jason Weaver | Examples | Responsive Web Design

Jason Weaver

Jason Weaver across four different breakpoints

View Jason Weaver

Jason Weaver has a very simple responsive blog.  The reason behind including it within our list isn’t so much about the brilliant things he’s doing on the site itself, but the Labs section where he has managed to develop so nice responsive patterns that you can use.

The best of these I think is the off canvas demo. This simple implementation positions the navigation and additional content off to the left and right of the screen respectively on the mobile viewport, and hides the additional content only on
a tablet device (see diagrams below).

Off Canvas Tablet example
A layout example of the Tablet Off Canvas method. As you can see the additional content is pushed to the right of the viewport.

Off Canvas Mobile example
A layout example of the Mobile Off Canvas method. As you can see the additional content is pushed to the right of the viewport, while the navigation sits off to the left.

All of this is accomplished with minimum fuss as well as you can see below.

The Javascript

var showSidebar = function() {

    $('body').removeClass("active-nav").toggleClass("active-sidebar");

    $('.menu-button').removeClass("active-button");					

	$('.sidebar-button').toggleClass("active-button");

}

var showMenu = function() {

	$('body').removeClass("active-sidebar").toggleClass("active-nav");

	$('.sidebar-button').removeClass("active-button");				

	$('.menu-button').toggleClass("active-button");	

}

// add/remove classes everytime the window resize event fires

jQuery(window).resize(function(){

	var off_canvas_nav_display = $('.off-canvas-navigation').css('display');

	var menu_button_display = $('.menu-button').css('display');

	if (off_canvas_nav_display === 'block') {			

		$("body").removeClass("three-column").addClass("small-screen");				

	} 

	if (off_canvas_nav_display === 'none') {

		$("body").removeClass("active-sidebar active-nav small-screen")

			.addClass("three-column");			

	}	

});	

jQuery(document).ready(function($) {

		// Toggle for nav menu

		$('.menu-button').click(function(e) {

			e.preventDefault();

			showMenu();							

		});	

		// Toggle for sidebar

		$('.sidebar-button').click(function(e) {

			e.preventDefault();

			showSidebar();									

		});							

});

Jason Weaver Technical Details

Site Meta Tag

<meta name="viewport" content="width=device-width,initial-scale=1">

Media Queries

@media only screen and (min-width: 46em) {}

/* Mediaqueries for the off canvas demo... */

@media all and (min-width: 600px) {}
@media all and (min-width: 800px) {}

Subscribe to our Newsletter

Add your email address and receive an email every Friday covering off everything worth knowing about building your websites responsively.