Mobile first, responsive web design
in MODX

or

“How to create the ultimate SUPERHERO”

See the DEMO's online: http://goo.gl/43hffk

Hi i'm Menno Pietersen - @MennoPP

my company:

Any Screen Size logo

my blog:

DESIGNfromWITHIN

Flexibility 4:

Flexibility logo

The websites we create need to be the ultimate SUPERHERO

Flexibility
with a responsive grid

A responsive grid will allow your website to work on any screen size.

Mister Fantastic

Example of responsive grids in HTML

Example of the grid used in ZURB's Foundation 4
http://foundation.zurb.com


The CSS grid

Example of the CSS code used

This is not all the code in the framework, just a section to explain how it works.

* {
	box-sizing: border-box;
}
.row {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0;
	margin-bottom: 0;
	max-width: 62.5em;
	*zoom: 1;
}
.row:before, .row:after {
	content: " ";
	display: table;
}
.row:after {
	clear: both;
}
.column, .columns {
	position: relative;
	padding-left: 0.9375em;
	padding-right: 0.9375em;
	width: 100%;
	float: left;
}
.small-6 {
	position: relative;
	width: 50%;
}
@media only screen and (min-width: 768px) {
.large-2 {
	position: relative;
	width: 16.66667%;
}
.large-6 {
	position: relative;
	width: 50%;
}
.large-10 {
	position: relative;
	width: 83.33333%;
}
.large-12 {
	position: relative;
	width: 100%;
}
.push-2 {
	position: relative;
	left: 16.66667%;
	right: auto;
}
.pull-2 {
	position: relative;
	right: 16.66667%;
	left: auto;
}
.push-10 {
	position: relative;
	left: 83.33333%;
	right: auto;
}
.pull-10 {
	position: relative;
	right: 83.33333%;
	left: auto;
}
}

The result of a responsive grid

See the LIVE version online: http://goo.gl/43hffk

Grid example

Real world example

The SecureSafe footer (http://securesafe.com)

Footer large

The footer on a small screen

Footer small

The used HTML


Core CSS


.clearfix {
	*zoom:1;
	&:before, &:after { content: " "; display: table; }
	&:after { clear: both; }
}
.show-for-small {
	display: block;
}
/* Medium Displays and up: 768px - larger */
@media only screen and (min-width: 768px) {
.show-for-small {
	display: none !important;
}
}

Indestructible
using a mobile-first and progressive enhancement strategies

Begin with the smallest constraint and the most basic browser features.

Wolverine

Mobile first

  • Mobile is becoming the main use-case
  • Starting small will help you tackle the most difficult use-case first
  • Wireframing with a mobile layout will help to structure content

Read: Mobile First

Progressive Enhancement, think layers

  1. Clean, semantic HTML
  2. CSS (not the fancy stuff yet)
  3. CSS3 (transitions and other visualizations)
  4. JavaScript

Read: Understanding Progressive Enhancement

Sexy
using CSS3, SASS and Compass

Advanced mobile first grid, use less images and improve your CSS workflow with SASS & Compass.

Catwoman

Using mobile-first SASS in your grid

The following uses SASS, a CSS extension language that allows you to extend your CSS with variables, mixins and more, as well as Compass.


// Mixins
//// Breakpoints
////// To use: @include breakpoint(small) { color: purple; }
@mixin breakpoint($point) {
	@if $point == large {
		@media (min-width: 1280px) { @content; }
	}
	@else if $point == medium {
		@media (min-width: 768px) { @content; }
	}
}

.column, .columns {
	// Start with the default padding
	padding-left:0.9375em;
	padding-right:0.9375em;
	// The padding for medium (768px and up)
	@include breakpoint(medium) {
	padding-left:1.6em;
	padding-right:1.6em;
	}
	// The padding for large (1280px and up)
	@include breakpoint(large) {
	padding-left:2em;
	padding-right:2em;
	}
}

.row .row {
	// Counter the default padding with a negative margin (this is Foundation 4 specific)
	margin-left:-0.9375em;
	margin-right:-0.9375em;
	// The negative margin for medium (768px and up)
	@include breakpoint(medium) {
		margin-left:-1.6em;
		margin-right:-1.6em;
	}
	// The negative margin for large (1280px and up)
	@include breakpoint(large) {
		margin-left:-2em;
		margin-right:-2em;
	}
}

Easy responsive font sizing

Font maten

The power of Compass


// Import Compass
@import "compass";

// Color variables
$white: #ffffff;
$white_darker: #a2a2a2;
$shadow_color: #6a6a6a;

// A box with easy background gradient, rounded corners and a box shadow using Compass
.my_box {
	@include background-image(linear-gradient($white_darker, white));
	@include border-radius(25px);
	@include box-shadow($shadow_color 0px -5px 6px);
}

Compass/SASS output


/* line 10, ../sass/app.scss */
.my_box {
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #a2a2a2), color-stop(100%, #ffffff));
  background-image: -webkit-linear-gradient(#a2a2a2, #ffffff);
  background-image: -moz-linear-gradient(#a2a2a2, #ffffff);
  background-image: -o-linear-gradient(#a2a2a2, #ffffff);
  background-image: linear-gradient(#a2a2a2, #ffffff);
  -webkit-border-radius: 25px;
  -moz-border-radius: 25px;
  -ms-border-radius: 25px;
  -o-border-radius: 25px;
  border-radius: 25px;
  -webkit-box-shadow: #6a6a6a 0px -5px 6px;
  -moz-box-shadow: #6a6a6a 0px -5px 6px;
  box-shadow: #6a6a6a 0px -5px 6px;
}

Fast
using responsive images and combining CSS & Javascript

Speed should be a big priority of your website at least as importand as design or features.

The Flash

Responsive Images: a common usecase

Image lightbox - Magnific Popup
Image slider - ResponsiveSlides

We will use phpThumbsUp to have responsive images.

phpThumbsUp: settings

Responsive images settings

What we will build

Responsive images result

The template HTML





	
	[[++site_name]] - [[*pagetitle]]
	
	
	
	
	


[[*content]]

The default content



The optimized content



The optimized content details




	Responsive image 1



	Responsive image 1



  • The result with Responsive Images

    See the LIVE version online: http://goo.gl/43hffk

    before

    Combining CSS and Javascript

    Be faster using MinifyX.

    The DEFAULT code in the template

    
    
    
    
    [[++site_name]] - [[*pagetitle]]
    
    
    
    
    
    
    
    
    [[*content]]

    The OPTIMIZED code in the template

    
    
    
    
    [[++site_name]] - [[*pagetitle]]
    
    [[MinifyX?
    &jsSources='
    assets/templates/js/jquery.js,
    assets/templates/js/jquery.magnific-popup.js,
    assets/templates/js/responsiveslides.js,
    assets/templates/js/app.js'
    &cssSources='
    assets/templates/stylesheets/reset.css,
    assets/templates/stylesheets/magnific-popup.css,
    assets/templates/stylesheets/rslides.css,
    assets/templates/stylesheets/style.css
    ']]
    [[+MinifyX.css]]
    
    
    
    [[*content]]
    [[+MinifyX.javascript]]

    The code in the template

    
    [[MinifyX?
    &jsSources='
    assets/templates/js/jquery.js,
    assets/templates/js/jquery.magnific-popup.js,
    assets/templates/js/responsiveslides.js,
    assets/templates/js/app.js
    '
    &cssSources='
    assets/templates/stylesheets/reset.css,
    assets/templates/stylesheets/magnific-popup.css,
    assets/templates/stylesheets/rslides.css,
    assets/templates/stylesheets/style.css
    '
    ]]
    [[+MinifyX.css]]
    [[+MinifyX.javascript]]
    

    The result with MinifyX

    See the LIVE version online: http://goo.gl/43hffk

    Result MinifyX

    Advanced
    using responsive Javascript

    We got responsive images and CSS, the final step is Javascript.

    Iron Man

    Harvey code example

    
    Harvey.attach('screen and (min-width:600px) and (max-width:900px)', {
    	setup: function() {},
    // setup = called when the query becomes valid for the first time
    	on: function() {},
    // on = called each time the query is activated
    	off: function() {}
    // off = called each time the query is deactivated
    });
    

    Logo slider

    Image slider

    Slider Javascript

    tinycarousel

    
    $('#logos_slider').tinycarousel({ display: 5 });
    

    SecureSafe slider JS example

    
    qry1 = Harvey.attach('screen and (max-width:479px)', {
    setup: function() {},
    	on: function() {
    	$('#logos_slider').tinycarousel({ display: 1 });
    	}
    });
    qry2 = Harvey.attach('screen and (min-width:480px) and (max-width:767px)', {
    	on: function() {
    	$('#logos_slider').tinycarousel({ display: 2 });
    	}
    });
    qry3 = Harvey.attach('screen and (min-width:768px)', {
    	on: function() {
    	$('#logos_slider').tinycarousel({ display: 5 });
    	}
    });