Responsive Markup and AngularJS

Sometimes css isn't quite enough to get that sweet responsive site working perfectly. Responsive Markup is an approach to adapting the HTML markup of your page based on Media Queries.

A good indicator for using this pattern is when your css shows and hides content based on breakpoints, a common example would be off-page mobile navigation.

Angular JS provides an excellent platform for using Responsive Markup. angular-responsive-include is a directive I've created to provide an elegant way to follow the Responsive Markup pattern in your Angularjs apps.

Simple Example

<div class="small include">  
    <ng-include-resp src="'/views/mobile-nav.html'" is-default mq="(max-width:899px)"></ng-include-resp>
  </div>
  <div class="large include">
    <ng-include-resp src="'/views/desktop-nav.html'" mq="(min-width:900px)"></ng-include-resp>
  </div>
Comments